MySQL и Express

MySQL и Express

Здравствуйте! В этом уроке рассмотрим взаимодействие  с  базой данных MySQL и Express.  Создадим простейшее веб-приложение, которое взаимодействует с бд MySQL. Для работы возьмем созданную ранее базу данных, которая хранит пользователей и имеет три столбца: id, name и age.

Mysql и Express

Прежде всего определим новый проект и добавим в него пакеты express, mysql2 и handlebars:

npm install --save hbs express mysql2

В качестве визуальной части мы будем использовать представления Handlebars. Поэтому определим в проекте новую папку views. В нее добавим новый файл index.hbs:

<!DOCTYPE html>
<html>
<head>
<title>Список пользователей</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Список пользователей</h1>
<p><a href="/create">Добавить пользователя</a></p>
<table>
<tr><th>Name</th><th>Age</th><th></th></tr>
{{#each users}}
<tr>
<td>{{this.name}}</td>
<td>{{this.age}}</td>
<td>
<a href="/edit/{{this.id}}">Edit</a>|
<form action="delete/{{this.id}}" method="POST" style="display:inline;">
<input type="submit" value="Delete" />
</form>
</td>
</tr>
{{/each}}
</table>
</body>
<html>

Данное представление выводит список объектов в виде таблицы. Рядом с каждый объектом определена ссылка на редактирования объекта и кнопка для удаления объекта. Над таблицей определена ссылка на добавление новых объектов.

Также добавим в папку views новый файл create.hbs с формой для создания нового объекта:

<!DOCTYPE html>
<html>
<head>
<title>Добавление пользователя</title>
<meta charset="utf-8" />
<style>.field{width:180px;}</style>
</head>
<body>
<h1>Добавление пользователя</h1>
<form method="POST">
<label>Имя</label><br>
<input name="name" class="field"/><br><br>
<label>Возраст</label><br>
<input name="age" type="number" class="field" min="1" max="110" /><br><br>
<input type="submit" value="Отправить" />
</form>
<a href="/">К списку пользователей</a>
</body>
<html>

И также добавим в папку views новый файл edit.hbs с формой для редактирования объекта:

<!DOCTYPE html>
<html>
<head>
<title>Редактирование пользователя</title>
<meta charset="utf-8" />
<style>.field{width:180px;}</style>
</head>
<body>
<h1>Редактирование пользователя</h1>
<form action="/edit" method="POST">
<input type="hidden" name="id" value="{{user.id}}" />
<label>Имя</label><br>
<input name="name" value="{{user.name}}" class="field" /><br><br>
<label>Возраст</label><br>
<input name="age" type="number" min="1" max="110" value="{{user.age}}" class="field" /><br><br>
<input type="submit" value="Отправить" />
</form>
<a href="/">К списку пользователей</a>
</body>
<html>

И определим в корневой папке проекта файл app.js, который будет представлять главный файл приложения:

const mysql = require("mysql2");
const express = require("express");

const app = express();
const urlencodedParser = express.urlencoded({extended: false});

const pool = mysql.createPool({
connectionLimit: 5,
host: "localhost",
user: "root",
database: "usersdb2",
password: "123456"
});

app.set("view engine", "hbs");

// получение списка пользователей
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
});
});
});
// возвращаем форму для добавления данных
app.get("/create", function(req, res){
res.render("create.hbs");
});
// получаем отправленные данные и добавляем их в БД
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("/");
});
});

// получем 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]
});
});
});
// получаем отредактированные данные и отправляем их в БД
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("/");
});
});

// получаем id удаляемого пользователя и удаляем его из бд
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("/");
});
});

app.listen(3000, function(){
console.log("Сервер ожидает подключения...");
});

При обращении к корню приложения срабатывает метод

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
});
});
});

Он получает данные из бд и передает их представлению index.hbs. И если в бд есть уже какие-нибудь данные, то при запуске приложения мы увидим их на странице:
Получение данных из MySQL в Node.js

Читайте также  Выполнение запросов к MySQL

При нажатии на ссылку добавления серверу будет отправлятьс get-запрос, который будет обрабатываться следующим методом:

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

Метод возвращает пользователю форму для добавления:
Добавление данных из MySQL в Express и Node.js

После заполнения формы и нажатия на кнопку данные в запросе POST отправляются методу:

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("/");
});
});

Метод получает отправленные данные и посредством SQL-команды INSERT отправляет их БД.

При нажатии на ссылку редактирования в списке объектов следующему методу в GET-зпросе передается 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]
});
});
});

Метод получает id и по нему извлекает из БД нужный объект из БД и передается его на форму в представлении edit.hbs:
Редактирование данных из MySQL в Express и Node.js

После редактирования и нажатия на кнопку данные отправляются в POST-запросе следующему методу:

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("/");
});
});

Метод получает данные и с помощью команды UPDATE отправляет их в БД.

При нажатии на кнопку удаления в списке объектов срабатывает метод

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("/");
});
});

Метод получает id удаляемого объкта и удаляет его из БД с помощью команды DELETE.

Таким образом, мы можем связать в приложении Node.js Express и взаимодействие с базой данных MySQL.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться
(Visited 13 times, 1 visits today)

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: