Express автогенератор додатку

Фреймворк Express має свій генератор додатків. Він орієнтується на MVC архітектуру додатків.

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

Установка такого додатку (на запит треба натиснути y і enter):

terminal

npx express-generator --view=ejs simple-express

npx - програма, уже встановлення під час інсталяції Node.js версії вище 8.x. Ця утиліта виконує команди інших утиліт не встановлюючи їх глобально у системі. Параметром --view=ejs ми вказуємо, що хочемо використати шаблон ejs. Останнім параметром вказуємо ім'я програми simple-express

Програма міститься у файлі app.js. Тут для початку потрібно замінити всі var на const:

app.js

const createError = require('http-errors');
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');

const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');

const app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Розберемо цей код:

Згори підключають всі сторонні пакети необхідні для роботи застосунку.

const createError = require('http-errors');
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');

Після цього підключають роути.

const indexRouter = require('./routes/index');
const usersRouter = require('./routes/users');

Створення екземпляра програми та підключення шаблону:

const app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

Потім підключене проміжне програмне забезпечення (middleware):

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

Підключено логер, обробник JSON і даних форм, і в кінці модуль для роботи з cookie.

Далі обробник статичних ресурсів

app.use(express.static(path.join(__dirname, 'public')));

Потім під'єднано роути програми

app.use('/', indexRouter);
app.use('/users', usersRouter);

Порядок проміжного ПЗ (middleware) має значення.

В кінці програми прописують обробник помилок. Спочатку відбувається обробка неіснуючого роуту чи помилка 404.

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

В цьому прикладі ми створюємо помилку і передаємо її далі для обробки.

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

А ось тут і відбувається обробка помилки. Ми передаємо змінні message та error у шаблон error.ejs і виконуємо його рендер.

Щоб розпочати роботу з додатком потрібно встановити пакети залежностей

terminal

npm install

Для режиму розробки (devDependencies) встановимо пакет nodemon. Він дозволяє виконувати перезавантаження сервера під час розробки.

terminal

npm i nodemon -D

У файлі package.json додамо скрипт start:dev

package.json

  "scripts": {
    "start": "node ./bin/www",
    "start:dev": "nodemon ./bin/www"
  },

Запуск програми в режимі розробки виконують такою командою з терміналу:

terminal

npm run start:dev

Запустимо програму з браузера

Програма виконує рендер одного шаблону. Сам рендер виконується у файлі роутингу routes/index.js

routes/index.js

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

Тепер можна змінити програму. Наприклад додати форму, щоб приймати дані. Файл index.ejs має виглядати так:

views/index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel="stylesheet" href="/stylesheets/style.css" />
  </head>
  <body>
    <form action="/login" method="POST">
      <label for="email">Email</label>
      <input type="text" name="email" id="email" />
      <label for="password">Пароль</label>
      <input type="password" name="password" id="password" />
      <button type="submit">Відправити</button>
    </form>
  </body>
</html>

Можна додати стилі для форми у файл public/stylesheets/style.css

public/stylesheets/style.css

form {
  display: flex;
  flex-direction: column;
  width: 400px;
}

input,
button {
  margin-bottom: 15px;
}

Додамо новий шаблон response.ejs в якому будемо виводити дані форми.

views/response.ejs

<!DOCTYPE html>
<html>
<head>
  <title><%= title %></title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<p>Email: <%= email %></p>
<p>Password: <%= password %></p>
<a href='/'>Повернутися на головну</a>
</body>
</html>

А тепер можна додати обробник для шляху /login на який приходитимуть дані від форми.

routes/index.js

router.post("/login", (req, res, next) => {
  const { email, password } = req.body;
  res.render("response", { title: "Simple express app", email, password });
});

Роутер максимально спрощений. Приходить дві змінні. Їх передаємо для рендерингу шаблону response.ejs, щоб показати, що дані отримано.

У цьому прикладі дані з фронтенду передаються за допомогою форми.

А тепер пропишемо роут для файлу user.js.

routes/user.js

var express = require('express');
var router = express.Router();

const contacts = [
  { id: "1", username: "Max", email: "[e-mail]" },
  { id: "2", username: "Helga", email: "[e-mail]" },
  { id: "3", username: "Angelina", email: "[e-mail]" },
];

/* GET users listing. */
router.get('/', function(req, res, next) {
res.json(contacts);
});

module.exports = router;

І якщо звернутися за адресою /users, то отримаємо json файл. Для гарного представлення json можна встановити додаток в chrome JSON Formatter.

Можна додати обробник для отримання унікального користувача за його id:

routes/user.js

router.get("/:id", function (req, res, next) {
  const { id } = req.params;
  const contact = contacts.filter((el) => el.id === id);
  res.json(contact);
});

Такий формат передачі даних використовують найчастіше.

Покликання:

Автогенератор додатку express

GitHub JSON Formatter