Sequelize e Express no Node.js

Vamos criar uma aplicação web simples utilizando Express, que interage com o banco de dados SQLite através do Sequelize. Primeiro, definimos um novo projeto e adicionamos os pacotes necessários:

npm install --save hbs express sqlite3 sequelize

Para a parte visual, utilizaremos os templates do Handlebars. Para isso, criamos a pasta views no projeto. Dentro dela, adicionamos um novo arquivo chamado index.hbs:

<!DOCTYPE html>
<html>
<head>
    <title>Lista de Usuários</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>Lista de Usuários</h1>
    <p><a href="/create">Adicionar Usuário</a></p>
    <table>
        <tr><th>Nome</th><th>Idade</th><th></th></tr>
        {{#each users}}
            <tr>
                <td>{{this.name}}</td>
                <td>{{this.age}}</td>
                <td>
                    <a href="/edit/{{this.id}}">Editar</a>|
                    <form action="delete/{{this.id}}" method="POST" style="display:inline;">
                        <input type="submit" value="Deletar" />
                    </form>
                </td>
            </tr>
        {{/each}}
    </table>
</body>
<html>

Essa view exibe uma lista de objetos em forma de tabela, permitindo sua edição e exclusão. Acima da tabela, há um link para adicionar novos objetos.

Em seguida, adicionamos um novo arquivo create.hbs na pasta views, que contém um formulário para criar um novo objeto:

<!DOCTYPE html>
<html>
<head>
    <title>Adicionar Usuário</title>
    <meta charset="utf-8" />
    <style>.field{width:180px;}</style>
</head>
<body>
    <h1>Adicionar Usuário</h1>
    <form method="POST">
        <label>Nome</label><br>
        <input name="name" class="field"/><br><br>
        <label>Idade</label><br>
        <input name="age" type="number" class="field" min="1" max="110" /><br><br>
        <input type="submit" value="Enviar" />
    </form>
    <a href="/">Voltar à lista de usuários</a>
</body>
<html>

Na pasta views, também adicionamos um novo arquivo edit.hbs, que contém um formulário para editar um objeto existente:

<!DOCTYPE html>
<html>
<head>
    <title>Editar Usuário</title>
    <meta charset="utf-8" />
    <style>.field{width:180px;}</style>
</head>
<body>
    <h1>Editar Usuário</h1>
    <form action="/edit" method="POST">
        <input type="hidden" name="id" value="{{user.id}}" />
        <label>Nome</label><br>
        <input name="name" value="{{user.name}}"  class="field" /><br><br>
        <label>Idade</label><br>
        <input name="age" type="number" min="1" max="110" value="{{user.age}}" class="field" /><br><br>
        <input type="submit" value="Enviar" />
    </form>
    <a href="/">Voltar à lista de usuários</a>
</body>
<html>

Por fim, definimos o arquivo principal da aplicação,app.js, na pasta raiz do projeto:

const Sequelize = require("sequelize");
const express = require("express");
  
const app = express();
const urlencodedParser = express.urlencoded({extended: false});
  
// Definimos o objeto Sequelize
const sequelize = new Sequelize({
  dialect: "sqlite",
  storage: "programicio.db",
  define: {
    timestamps: false
  }
});
  
// Definimos o modelo User
const User = sequelize.define("user", {
  id: {
    type: Sequelize.INTEGER,
    autoIncrement: true,
    primaryKey: true,
    allowNull: false
  },
  name: {
    type: Sequelize.STRING,
    allowNull: false
  },
  age: {
    type: Sequelize.INTEGER,
    allowNull: false
  }
});
  
app.set("view engine", "hbs");
  
// Sincronizamos com o banco de dados; após sincronização bem-sucedida, iniciamos o servidor
sequelize.sync().then(()=> {
  app.listen(3000, function(){
    console.log("Servidor aguardando conexões...");
  });
}).catch(err=>console.log(err));
  
// Rota para obter dados
app.get("/", function(req, res){
    User.findAll({raw: true }).then(data=> {
      res.render("index.hbs", {
        users: data
      });
    }).catch(err=>console.log(err));
});
  
app.get("/create", function(req, res) {
    res.render("create.hbs");
});
  
// Rota para adicionar dados
app.post("/create", urlencodedParser, function (req, res) {
          
    if(!req.body) return res.sendStatus(400);
          
    const username = req.body.name;
    const userage = req.body.age;
    User.create({ name: username, age: userage}).then(()=>{
      res.redirect("/");
    }).catch(err=>console.log(err));
});
  
// Rota para obter objeto por id para edição
app.get("/edit/:id", function(req, res) {
  const userid = req.params.id;
  User.findAll({where:{id: userid}, raw: true })
  .then(data=>{
    res.render("edit.hbs", {
      user: data[0]
    });
  })
  .catch(err=>console.log(err));
});
  
// Rota para atualizar dados no banco de dados
app.post("/edit", urlencodedParser, function (req, res) {
          
  if(!req.body) return res.sendStatus(400);
  
  const username = req.body.name;
  const userage = req.body.age;
  const userid = req.body.id;
  User.update({name:username, age: userage}, {where: {id: userid} }).then(() => {
    res.redirect("/");
  })
  .catch(err=>console.log(err));
});
  
// Rota para deletar dados
app.post("/delete/:id", function(req, res) {  
  const userid = req.params.id;
  User.destroy({where: {id: userid} }).then(() => {
    res.redirect("/");
  }).catch(err=>console.log(err));
});

A estrutura do projeto:

MYSQLAPP
├── node_modules
├── views
│   ├── create.hbs
│   ├── edit.hbs
│   └── index.hbs
├── app.js
└── package.json

Ao acessar a raiz da aplicação, é executado o método abaixo:

app.get("/", function(req, res) {
  User.findAll({raw: true }).then(data=>{
    res.render("index.hbs", {
      users: data
    });
  }).catch(err=>console.log(err));
});

Esse método obtém os dados do banco de dados e os envia para a view index.hbs. Se o banco de dados já contiver algum dado, ao iniciar a aplicação, esses dados serão exibidos na página.

Ao clicar no link de adição de um novo usuário, o servidor recebe uma requisição GET, que será processada pelo seguinte método:

app.get("/create", function(req, res) {
  res.render("create.hbs");
});

Este método retorna ao cliente o formulário para adição de novos usuários:

Adicionando dados em MySQL usando Sequelize em Node.js

Após o envio do formulário, os dados são enviados em uma requisição POST ao método abaixo:

app.post("/create", urlencodedParser, function (req, res) {
         
  if(!req.body) return res.sendStatus(400);
       
  const username = req.body.name;
  const userage = req.body.age;
  User.create({ name: username, age: userage}).then(()=> {
    res.redirect("/");
  }).catch(err=>console.log(err));
});

Esse método recebe os dados do formulário e os envia ao banco de dados.

Ao clicar no link de edição de um usuário na lista de objetos, o id do objeto é passado para o próximo método em uma requisição GET:

app.get("/edit/:id", function(req, res) {
  const userid = req.params.id;
  User.findAll({where:{id: userid}, raw: true })
  .then(data=> {
    res.render("edit.hbs", {
      user: data[0]
    });
  })
  .catch(err=>console.log(err));
});

Esse método recebe o id, extrai o objeto correspondente do banco de dados e o envia ao formulário no template edit.hbs:

Editando dados em MySQL usando Sequelize em Express e Node.js

Após a edição e o envio do formulário, os dados são enviados em uma requisição POST para o método a seguir:

app.post("/edit", urlencodedParser, function (req, res) {
         
  if(!req.body) return res.sendStatus(400);
 
  const username = req.body.name;
  const userage = req.body.age;
  const userid = req.body.id;
  User.update({name:username, age: userage}, {where: {id: userid} }).then(() => {
    res.redirect("/");
  }).catch(err => console.log(err));
});

Esse método recebe os dados atualizados e os envia ao banco de dados.

Ao clicar no botão de exclusão de um usuário na lista de objetos, o método abaixo é executado:

app.post("/delete/:id", function(req, res) {  
  const userid = req.params.id;
  User.destroy({where: {id: userid} }).then(() => {
    res.redirect("/");
  }).catch(err => console.log(err));

Esse método recebe o id do objeto a ser excluído e o remove do banco de dados.