Modelos e Visualizações - 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
npm install --save hbs
Adicionando Modelos
Vamos criar uma nova pasta chamada modelsuser.js
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 UsernameageUsersavegetAllgetAllUser
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 viewscreate.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()create.hbs
O método postUser()Usersaveusersuser.js
O método getUsers()users.hbsUser.getAll()
Agora, vamos modificar o arquivo userRouter.js
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
Depois de adicionar, você será redirecionado para a lista de usuários.