Sequelize и Express

Последнее обновление: 24.11.2023

Создадим простейшее веб-приложение с использованием Express, которое взаимодействует с бд SQLite через Sequelize. Прежде всего определим новый проект и добавим в него пакеты express, sqlite3, sequelize и handlebars:

npm install --save hbs express sqlite3 sequelize

В качестве визуальной части мы будем использовать представления 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 Sequelize = require("sequelize");
const express = require("express");

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

// определяем объект Sequelize
const sequelize = new Sequelize({
  dialect: "sqlite",
  storage: "metanit.db",
  define: {
    timestamps: false
  }
});

// определяем модель 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");

// синхронизация с бд, после успшной синхронизации запускаем сервер
sequelize.sync().then(()=>{
  app.listen(3000, function(){
    console.log("Сервер ожидает подключения...");
  });
}).catch(err=>console.log(err));

// получение данных
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");
});

// добавление данных
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));
});

// получаем объект по id для редактирования
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));
});

// обновление данных в БД
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));
});

// удаление данных
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));
});

Итоговая структура проекта:

MySQL, Sequelize и Node.js

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

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

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

Получение данных из MySQL в Node.js

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

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

Метод возвращает клиенту форму для добавления:

Добавление данных в MySQL через Sequelize в Express и Node.js

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

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

Метод получает данные и отправляет их БД.

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

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

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

Редактирование данных в MySQL через Sequelize в Express и Node.js

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

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

Метод получает данные и отправляет их в БД.

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

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

Метод получает id удаляемого объекта и удаляет его из базы данных.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850