MySQL e Express

Vamos criar uma aplicação web simples que interage com um banco de dados MySQL. Utilizaremos um banco de dados já criado, que armazena usuários e possui três colunas: id, name e age.

Primeiro, vamos definir um novo projeto e adicionar os pacotes express, mysql2 e handlebars:

npm install --save hbs express mysql2

Para a parte visual, utilizaremos as visualizações do Handlebars. Portanto, vamos criar uma nova pasta chamada views no projeto e adicionar um novo arquivo 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="Excluir" />
          </form>
        </td>
      </tr>
      {{/each}}
    </table>
  </body>
</html>

Essa visualização exibe uma lista de objetos em forma de tabela. Ao lado de cada objeto, há um link para editar e um botão para excluir o objeto. Acima da tabela, há um link para adicionar novos objetos.

Vamos também adicionar um novo arquivo create.hbs na pasta views, contendo 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>

Além disso, adicionaremos um novo arquivo edit.hbs na pasta views, com um formulário para editar um objeto:

<!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>

Agora, na pasta raiz do projeto, vamos definir o arquivo app.js, que será o arquivo principal da aplicação:

Por fim, o projeto terá a seguinte estrutura:

nodejs-mysql-express/
│
├── node_modules/
├── views/
│    ├── create.hbs
│    ├── edit.hbs
│    └── index.hbs
├── app.js
└── package.json

Ao acessar a raiz da aplicação, o seguinte método é acionado:

app.get("/", function (req, res) {
  pool.query("SELECT * FROM users", function (err, data) {
    if (err) return console.log(err);
    res.render("index.hbs", {
      users: data,
    });
  });
});

Esse método obtém os dados do banco de dados e os envia para a visualização index.hbs. Se já houver dados no banco de dados, ao iniciar a aplicação, veremos esses dados na página:

Recebendo dados do MySQL em Node.js

Ao clicar no link para adicionar um novo usuário, uma requisição GET é enviada ao servidor, que será processada pelo seguinte método:

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

Esse método retorna ao usuário o formulário de adição:

Adicionando dados do MySQL em Node.js

Depois de preencher o formulário e clicar no botão, os dados são enviados em uma requisição POST para o método:

app.post("/create", urlencodedParser, function (req, res) {
  if (!req.body) return res.sendStatus(400);
  const name = req.body.name;
  const age = req.body.age;
  pool.query("INSERT INTO users (name, age) VALUES (?,?)", [name, age], function (err, data) {
    if (err) return console.log(err);
    res.redirect("/");
  });
});

Esse método recebe os dados enviados e, por meio do comando SQL INSERT, os insere no banco de dados.

Ao clicar no link de edição 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 id = req.params.id;
  pool.query("SELECT * FROM users WHERE id=?", [id], function (err, data) {
    if (err) return console.log(err);
    res.render("edit.hbs", {
      user: data[0],
    });
  });
});

Esse método obtém o id, recupera o objeto correspondente no banco de dados e o envia para o formulário na visualização edit.hbs:

Editando dados do MySQL em 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 seguinte método:

app.post("/edit", urlencodedParser, function (req, res) {
  if (!req.body) return res.sendStatus(400);
  const name = req.body.name;
  const age = req.body.age;
  const id = req.body.id;
  pool.query("UPDATE users SET name=?, age=? WHERE id=?", [name, age, id], function (err, data) {
    if (err) return console.log(err);
    res.redirect("/");
  });
});

Esse método recebe os dados e, utilizando o comando UPDATE, atualiza o banco de dados.

Ao clicar no botão de exclusão na lista de objetos, o seguinte método é acionado:

app.post("/delete/:id", function (req, res) {
  const id = req.params.id;
  pool.query("DELETE FROM users WHERE id=?", [id], function (err, data) {
    if (err) return console.log(err);
    res.redirect("/");
  });
});

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

Assim, conseguimos integrar em uma aplicação Node.js com Express a interação com um banco de dados MySQL.