MySQL e Express - Node.js
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: idnameage
Primeiro, vamos definir um novo projeto e adicionar os pacotes expressmysql2handlebars
npm install --save hbs express mysql2
Para a parte visual, utilizaremos as visualizações do Handlebars. Portanto, vamos criar uma nova pasta chamada viewsindex.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.hbsviews
<!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.hbsviews
<!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
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
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:
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
Ao clicar no link de edição na lista de objetos, o id
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 idedit.hbs
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
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 idDELETE
Assim, conseguimos integrar em uma aplicação Node.js com Express a interação com um banco de dados MySQL.