Modelos e Visualizações em Node.js

Continuando o trabalho com o projeto do tema anterior, vamos adicionar os outros componentes-chave do padrão MVC ao projeto: os modelos e as visualizações. Atualmente, o projeto está estruturado da seguinte forma:

MVCAPP/
├── controllers/
│   ├── homeController.js
│   └── userController.js
├── routes/
│   ├── homeRouter.js
│   └── userRouter.js
├── app.js
├── package.json
└── node_modules/

Primeiramente, vamos adicionar o pacote hbs ao projeto para trabalhar com visualizações. Embora estejamos usando o Handlebars como view engine, é possível utilizar qualquer outra engine de sua preferência.

npm install --save hbs

Adicionando Modelos

Vamos criar uma nova pasta chamada models e dentro dela, definir um novo arquivo chamado user.js, que conterá o código do seguinte modelo:

const users = [];

module.exports = class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  save() {
    users.push(this);
  }

  static getAll() {
    return users;
  }
};

Este modelo define a classe User, que possui dois campos: name e age, representando o nome e a idade do usuário, respectivamente. Para simplificar a demonstração, todos os objetos User serão armazenados em um array chamado users. Contudo, esse armazenamento poderia ser feito em qualquer repositório, como arquivos ou bancos de dados. Com os métodos save e getAll da classe User, podemos salvar o usuário atual no array ou obter todos os usuários dele. Note que o método getAll é estático, ou seja, ele pertence à classe User como um todo.

Adicionando Visualizações

Agora, vamos adicionar os visualizações (templates) ao projeto. Neste caso, utilizaremos o Handlebars como view engine, mas, novamente, é possível usar qualquera engine preferida.

<!DOCTYPE html>
<html>
  <head>
    <title>Lista de Usuários</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <a href="/users/create">Adicionar Usuário</a>
    <h1>Lista de Usuários</h1>
    <table>
      <tr>
        <th>Nome</th>
        <th>Idade</th>
      </tr>
      {{#each users}}
      <tr>
        <td>{{this.name}}</td>
        <td>{{this.age}}</td>
      </tr>
      {{/each}}
    </table>
  </body>
</html>

Também adicione na pasta views um segundo arquivo chamado create.hbs:

<!DOCTYPE html>
<html>
  <head>
    <title>Adicionar Usuário</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>Adicionar Usuário</h1>
    <form action="postUser" method="POST">
      <label>Nome</label>
      <input name="name" /><br /><br />
      <label>Idade</label>
      <input name="age" type="number" min="1" max="110" /><br /><br />
      <input type="submit" value="Enviar" />
    </form>
    <a href="/users">Voltar à lista de usuários</a>
  </body>
</html>

Essa visualização contém um formulário para adicionar um novo usuário.

O projeto final ficará com a seguinte estrutura:

MVCAPP/
├── controllers/
│   ├── homeController.js
│   └── userController.js
├── models/
│   └── user.js
├── routes/
│   ├── homeRouter.js
│   └── userRouter.js
├── views/
│   ├── create.hbs
│   └── users.hbs
├── app.js
├── package.json
└── node_modules/

Vamos modificar o controlador userController:

const User = require("../models/user.js");

exports.addUser = function (request, response) {
  response.render("create.hbs");
};

exports.getUsers = function (request, response) {
  response.render("users.hbs", {
    users: User.getAll(),
  });
};

exports.postUser = function (request, response) {
  const username = request.body.name;
  const userage = request.body.age;
  const user = new User(username, userage);
  user.save();
  response.redirect("/users");
};

O controlador agora define três métodos. O método addUser() retorna a visualização create.hbs para adicionar um novo usuário.

O método postUser() recebe os dados enviados, cria um objeto User e chama o método save, armazenando o usuário no array users definido no arquivo user.js. Após a adição, o usuário é redirecionado para a lista de usuários.

O método getUsers() retorna a visualização users.hbs, passando a lista de usuários obtida pelo método User.getAll().

Agora, vamos modificar o arquivo userRouter.js para definir todas as rotas necessárias:

const express = require("express");
const userController = require("../controllers/userController.js");
const userRouter = express.Router();

userRouter.use("/postuser", userController.postUser);
userRouter.use("/create", userController.addUser);
userRouter.use("/", userController.getUsers);

module.exports = userRouter;

Finalmente, vamos alterar o arquivo principal da aplicação:

const express = require("express");
const app = express();
const userRouter = require("./routes/userRouter.js");
const homeRouter = require("./routes/homeRouter.js");

app.set("view engine", "hbs");
app.use(express.urlencoded({ extended: false }));

app.use("/users", userRouter);
app.use("/", homeRouter);

app.use(function (req, res, next) {
  res.status(404).send("Not Found");
});

app.listen(3000, () => console.log("Servidor iniciado e aguardando conexões..."));

Agora, você pode iniciar a aplicação e acessar o endereço localhost:3000/users/create para adicionar um usuário.

Modelo MVC em Node.js

Depois de adicionar, você será redirecionado para a lista de usuários.