MVC Pattern

Table of Contents

Model
Controller
View

MVC pattern separates the application into three main logical components known as Model, View and Controller. AdonisJs supports all three and makes it so simple glue them together. Along with this Adonis Router also plays a major role in handling HTTP requests and passing them to the controller.

MVC Flow Chart ccz2zb

Model

Model is the data layer responsible for fetching data from the database which is SQL in the case of AdonisJs. To make the process of fetching data simple and secure AdonisJs ships with a beautiful ORM called Lucid.

Defing A Model

'use strict'

const Lucid = use('Lucid')

class User extends Lucid {

}

Using Model

const User = use('App/Model/User')

// All Users
const users = yield User.all()

// Using where clause
const activeUsers = yield User.query().where('status', 'active').fetch()

Controller

Controller, as the name suggests, controls the flow of an HTTP request. It makes use of the Model to fetch the required data and pass that data to the View for creating an HTML page.

Controllers also contain business/domain logic for your application, whereas you will often find people abstracting the domain logic into reusable services but still those services are consumed directly by the controllers, and you never access them inside the models or views.

Example Of Controller

const User = use('App/Model/User') (1)

class UsersController {

  * index (request, response) {
    const users = yield User.all()
    yield response.sendView('users.list', {users: users.toJSON()}) (2)
  }

}

1	Here we import the User Model.
2	Next we render the `users/list.njk` view and pass it the user’s object which can be used by the view to display a list of users.

View

The view is the final part of the flow, it makes use of the dynamic data and renders HTML. To keep your views declarative, AdonisJs offers a nice data-binding syntax to consume dynamic data and make use of it. You can learn more about the templating here.

Example Of View

<ul>
  {% for user in users %}
    <li>{{ user.username }}</li>
  {% endfor %}
</ul>