Модели и представления

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

Продолжим работу с проектом из прошлой темы и добавим в него остальные ключевые компоненты паттерна MVC - модели и представления. Итак, сейчас проект выглядит так

MVC контроллеры в Node.js

Прежде всего, добавим в проект пакет "hbs" для работы с представлениями. Вместо движка Handlebars естественно можно использовать любой другой движок представлений.

npm install --save hbs

Добавление моделей

Добавим в проект новую папку models и определим в ней новый файл user.js, который будет хранить код следующей модели:

const users = [];

module.exports= class User{

    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    save(){
        users.push(this);
    }
    static getAll(){
        return users;
    }
}

Модель фактически представляет класс User, который имеет два поля: name и age, которые представляют соответственно имя и возраст пользователя. Для упрощения демонстрации работы с моделями в данным случае все объекты User будут храниться в массиве users, однако в конечном счете это может быть любое хранилище - файлы, база данных. И с помощью методов save и getAll класса User мы можем сохранить текущего пользователя в массив, либо получить пользователей из массива. Следует обратить внимание, что метод getAll определен как статический, поэтому относится в целом ко всему классу User.

Добавление представлений

Теперь добавим в проект представления. В данном случае в качесте движка представлений будет использоваться движок Handlebars, но естественно можно использовать любой предпочтительный движок представлений.

Итак, определим в проекте папку views. Добавим в нее новый файл users.hbs, который будет выводить список пользователей на веб-страницу:

<!DOCTYPE html>
<html>
<head>
    <title>Список пользователей</title>
    <meta charset="utf-8" />
</head>
<body>
    <a href="/users/create">Добавить пользователя</a>
    <h1>Список пользователей</h1>
     <table>
         <tr><th>Имя</th><th>Возраст</th></tr>
         {{#each users}}
            <tr><td>{{this.name}}</td><td>{{this.age}}</td></tr>
         {{/each}}
     </table>
</body>
<html>

И также добавим в папку views второй файл - create.hbs:

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

Данное представление содержит форму для добавления нового пользователя.

Итоговый проект в итоге будет выглядеть следующим образом:

MVC в Express и Node.js

Теперь изменим контроллер userController:

const User = require("../models/user.js");

exports.addUser = function (request, response){
    response.render("create.hbs");
};
exports.getUsers = function(request, response){
    response.render("users.hbs", {
        users: User.getAll()
    });
};
exports.postUser= function(request, response){
    const username = request.body.name;
    const userage = request.body.age;
    const user = new User(username, userage);
    user.save();
    response.redirect("/users");
};

Контроллер теперь определяет три метода. Метод addUser() возвращает представление create.hbs для добавления нового пользователя.

Метод postUser() получает отправленные данные, создает объект User и вызывает у него метод save, тем самым сохраняя его в массив users из файла user.js. После добавления идет переадресация на список пользователей.

Метод getUsers() возвращает представление users.hbs, в которое передает список пользователей с помощью вызова метода User.getAll()

Теперь изменим файл userRouter.js для определения всех необходимых маршрутов:

const express = require("express");
const userController = require("../controllers/userController.js");
const userRouter = express.Router();

userRouter.use("/postuser", userController.postUser);
userRouter.use("/create", userController.addUser);
userRouter.use("/", userController.getUsers);

module.exports = userRouter;

И изменим главный файл приложения:

const express = require("express");
const app = express();
const userRouter = require("./routes/userRouter.js");
const homeRouter = require("./routes/homeRouter.js");

app.set("view engine", "hbs");
app.use(express.urlencoded({ extended: false }));

app.use("/users", userRouter);
app.use("/", homeRouter);

app.use(function (req, res, next) {
    res.status(404).send("Not Found");
});

app.listen(3000, ()=>console.log("Сервер запущен и ожидает подключения..."));

Запустим приложение и обратимся по адресу localhost:3000/users/create для добавления пользователя.

Модель в MVC в Node.js

И после добавления нас передресует на список пользователей

Представления в MVC в Node.js

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

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