We've met the controller already. Recall how we defined a router in one of the previous lessons:
1import User from "./models/user.js";
2
3app.get("/users/:id", (req, res) => {
4 const id = req.params.id;
5 User.getById(id, (err, user) => {
6 res.json(user);
7 });
8});The second argument of get() is the route handler, and inside it, you can retrieve data from the database using the corresponding method in the model.
And then, you can use the retrieved data to render an HTML page using a template engine.
That's what a controller is. It connects the model layer and the view layer. Except that in practice, people usually use a dedicated file to store the controller functions.
1.
2├── controllers
3│ └── userController.js <===
4├── database.sqlite
5├── index.js
6├── libs
7├── models
8├── package.json
9├── package-lock.json
10├── routes
11└── viewscontrollers/userController.js
1import User from "../models/user.js";
2
3const userController = {
4 getUserById: async function (req, res) {
5 const id = req.params.id;
6 User.getById(id, (err, user) => {
7 res.render("user", {
8 user,
9 });
10 });
11 },
12};
13
14export default userController;It is customary to use the camel case naming convention for controllers, meaning your controller files should be named userController.js, articleController.js, tagController.js, and so on.
As an example, here is a controller that retrieves a single user from the database, and then use the retrieved data to render the /user page.
controllers/userController.js
1import User from "../models/user.js";
2
3const userController = {
4 getUserById: async function (req, res) {
5 const id = req.params.id;
6 User.getById(id, (err, user) => {
7 res.render("user", {
8 user,
9 });
10 });
11 },
12};
13
14export default userController;This will be our corresponding model, as discussed previously.
models/user.js
1. . .
2
3class User {
4 constructor(id, username, email) {
5 this.id = id;
6 this.username = username;
7 this.email = email;
8 }
9
10 . . .
11
12 static getById(id, callback) {
13 const sql = "SELECT * FROM users WHERE id = ?";
14
15 db.get(sql, [id], (err, row) => {
16 const user = new User(row.id, row.username, row.email);
17 callback(null, user);
18 });
19 }
20}And the template:
views/user.pug
1doctype html
2html
3 head
4 title User
5 body
6 p Username: #{user.username}
7 p Email: #{user.email}Finally, the router:
index.js
1import userController from "./controllers/userController.js";
2
3app.get("/users/:id", userController.getUserById);Start the dev server with the following command:
1node index.jsOpen your browser and go to http://localhost:3001/users/<user_id>.
The following graph illustrates the complete lifecycle of the MVC architecture.
