узел.js

Что такое Express.js?

Альтернативы?

  • Ванильный узел.js
  • Adonis.js
  • Коа
  • Паруса.js

Использование команды

>>> npm install --save express

сейчас мы устанавливаем фреймворк express.js.

Почему мы опустили -dev❓

Это производственная зависимость. Мы используем эту структуру не только как инструмент во время разработки, но и как неотъемлемую часть нашего приложения. Он должен работать при развертывании.

Теперь импортируйте expess.js в app.js и выполните его!!

const express = require('express');
const app = express()

Затем мы передаем приложение в параметр createServer!

const server = http.createServer(app);

Что дальше? 😊 СТАРТ НПМ 😊

Он буквально создаст сервер, но пока ничего не сделает. Он устанавливает определенный способ обработки входящих запросов, который определяет ключевые характеристики express.js!

ПО промежуточного слоя

const app = express();
app.use((req, res, next) => {
    console.log('In the middleware!');
    next(); // Allows the request to continue to the next middleware in line
});
app.use('/', (req, res, next) => {
    console.log('In another middleware!')
    res.send('<h1>Hello from Express!</h1>');
});
const server = http.createServer(app);
server.listen(3000);
  • use() позволяет добавить новую функцию промежуточного программного обеспечения, и она принимает путь в качестве своего первого параметра, указанный путь является полным путем, но должен начинаться с него.
  • next — это функция, которая должна быть выполнена, чтобы запрос мог перейти к следующему промежуточному программному обеспечению.

Также мы можем сократить создание кода сервера.

app.listen(3000);

Разбор входящих запросов

Мы можем добавить еще один путь выше

app.use('/add-product', (req, res, next) => {
    res.send('<form action="/product" method="POST"><input type="text" name="title"><button type="submit">Add Product</button></form>');
});
app.use('/product', (req,res,next) => {
    console.log(req.body);
    res.redirect('/');
});

В консоли он вернет undefined, потому что request не пытается анализировать тело входящего запроса. Нам нужно зарегистрировать синтаксический анализатор, добавив еще одно промежуточное ПО перед нашим промежуточным ПО для обработки маршрутов, потому что синтаксический анализ тела должен выполняться независимо от того, где заканчивается запрос.

>>> npm install --save body-parser

Затем нам нужно импортировать установленный пакет вверху:

const bodyParser = require('body-parser');

Добавьте новое промежуточное ПО.

app.use(bodyParser.urlencoded({extended : false}));
  • urlencoded(): регистрирует промежуточное программное обеспечение, поэтому эта функция дает нам такую ​​функцию промежуточного программного обеспечения, и этот пакет вызывает следующий в конце, чтобы он достиг остальной части промежуточного программного обеспечения, но прежде чем это сделать, он выполнит анализ всего тела.

Затем в консоли мы увидим

>>> { title: 'Book'}

✔️ Заметки!

  • Альтернативой app.use() запроса GET является app.get().
  • Альтернативой app.use() запроса POST является app.post().

Экспресс-маршрутизатор

Теперь мы разделяем промежуточное ПО в зависимости от его функциональности. Просто создайте новое имя папки route и создайте новые файлы js: admin.js и shop.js.

admin.js

const express = require('express');
const Router = express.Router();
router.get('/add-product', (req, res, next) => {
    res.send('<form action="/product" method="POST"><input type="text" name="title"><button type="submit">Add Product</button></form>');
});
router.post('/product', (req,res,next) => {
    console.log(req.body);
    res.redirect('/');
});
module.exports = router;

Маршрутизатор похож на мини-экспресс-приложение, связанное с другим экспресс-приложением, которое мы можем экспортировать в конце.

Импорт admin.js в app.js:

const adminRoutes = require('./routes/admin');

Затем нам нужно вызвать новое промежуточное ПО.

ВАЖНЫЙ!! Порядок имеет значение!

app.use(adminRoutes);

Это должно произойти сразу после промежуточного программного обеспечения для разбора тела.

Добавление кода состояния

app.use((req, res, next) => {
    res.status(404).send('<h1>Page not found</h1>');
});

Путь фильтрации

В app.js мы можем добавить

app.use('./admin', adminRoutes);

Таким образом, файл express.js автоматически опускает './admin' в пути admin.js, '/add-product' и соответствует './admin/add-product'. >.

Обслуживание HTML-страниц

Создайте папку с именем views и поместите в нее файлы html.

shop.js

router.get('/', (req,res,next) => {
    res.sendFile('/views/shop.html');
});

Это не сработает, потому что «/» означает корневой путь операционной системы, а не корневой путь этого проекта.

Итак, чтобы указать абсолютный путь,

const path = require('path');

это даст нам решение!!

router.get('/', (req,res,next) => {
    res.sendFile(path.join(__dirname, '../', 'views', 'shop.html'));
});
  • __dirname: глобальная переменная, доступная с помощью node.js, просто хранит абсолютное значение в нашей операционной системе для этой папки проекта.

Мы также можем создать новую отдельную папку с именем util и указать path.js, который мог бы заменить __dirname, ‘../’.

const path = require('path');
module.exports = path.dirname(process.mainModule.filename);

Затем в admin.js и shop.js импортируйте путь, как показано ниже,

const rootDir = require('../util/path');

и замените его, как показано ниже.

res.sendFile(path.join(rootDir, 'views', 'add-product.html'))

Статическое обслуживание файлов

Мы добавляем

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

в app.js, чтобы сделать общую папку доступной для всех.