В этом посте я собираюсь показать вам, как создать базовый сервер Express.js для ваших веб -приложений. Мы рассмотрим запуск сервера, настраиваем простые маршруты и выводим различные типы данных.
Node.js ворвался на сцену в 2009 году, когда Райан Дал вытащил двигатель JavaScript из браузера и положил его на сервер. В отличие от других внутренних технологий, таких как PHP или Java, Node.js не является языком. Это среда времени выполнения, которая позволяет серверу интерпретировать и запускать код JavaScript, как браузер.
Способность использовать JavaScript для бэк-конца изменила правила игры, хотя это не было без проблем. Используя его в качестве дополнительной конфигурации и много кода, что затрудняет проникновение и взрыв за короткий промежуток времени. Бороться с этим, Express.js был создан в 2010 году, чтобы дать разработчикам инструменты для выдержания node.js в кратчайшие сроки.
Что такое Express.js?
Express.js-это структура для Node.js, чтобы предоставить разработчикам надежные инструменты для создания бэк-конца для веб-сайта или веб-приложения. Он включает в себя маршрутизацию, простую настройку для шаблона и еще много преимуществ. Из -за зрелости и простоты использования Express.js была самой популярной структурой Node.js в течение многих лет. На вершине созданы даже другие рамки Node.js, такие как Sails.js , Koa.js и Nest.js Анкет
Несмотря на количество инструментов, которые он предоставляет, это очень неопитанная структура. Способность структурировать ваш бэк-энд любые способы, которые вы хотите, означает, что она может быть настолько гибкой, насколько вам нужно. По этой причине это основной продукт для наборов инструментов для многих разработчиков. Express.js дает нам «E» в стеке среднего стека, стека Mern или Stack. Теперь, когда вы лучше понимаете, что такое Express.js, давайте построим что -то с этим!
Настройка начального проекта
Прежде чем вы сможете начать использовать Express.js для создания бэк-энда, вам необходимо настроить папку проекта, добавить свои зависимости и инициализировать репозиторий GIT (при условии, что вы используете GIT). Сначала создайте папку и введите ее с помощью команды ниже:
Терминал
$ mkdir basic-express && cd $_
Оказавшись внутри недавно созданной папки проекта, вам необходимо инициализировать NPM и настроить зависимости. Хотя вы можете заполнить все детали в своем npm init Я действительно не забочусь об этом ради этого учебника. Я собираюсь запустить следующую команду, чтобы настроить NPM с помощью лесов по умолчанию.
Терминал
$ npm init -y
После Package.json Файл создан, вы можете добавить необходимые зависимости, которые перечислены ниже. Прежде чем двигаться вперед, давайте немного поговорим о том, почему мы устанавливаем эти пакеты. Экспресс Пакет – это фреймворк, которую вы используете для маршрутизации, шаблона и многого другого. Body-Parser Позволяет получить тело из HTTP -запроса и использовать данные в вашем приложении. В этом уроке я решил использовать Мопс Для шаблона, хотя есть много разных вариантов, которые вы могли бы использовать. Мопс – просто популярный вариант и прост в использовании.
Терминал
$ npm i express body-parser pug
Следующий шаг для выполнения – Настройка вашего репозитория GIT Анкет Это необязательный шаг в зависимости от того, используете ли вы GIT для управления версиями. Если вы используете git, я также рекомендую добавить .gitginore Файл, чтобы исключить /node_modules каталог из репо. Сохранение каталога node_modules будет раздувать вашу кодовую базу и вызовет проблемы с GIT. Код для .gitignore ниже:
.gitignore
node_modules
Создание сервера Express
Первый файл, который вы должны создать в своем экспресс -проекте, будет файлом сервера. Цель этого файла – настроить любое промежуточное программное обеспечение, которое вы будете использовать, настроить механизм шаблона, создать сам сервер и многое другое. Вы также можете поместить свои маршруты в этот файл, но, по моему мнению, это становится довольно грязным, если у вас есть более 1 или 2 маршрута. Вы можете позвонить в файл сервера, что угодно, хотя его часто называют app.js или Server.js Анкет Я буду называть свою Server.js В этом проекте.
Терминал
$ touch server.js
Откройте свой недавно созданный файл, и вы можете начать создавать простой сервер. Сначала мы импортируем экспресс и назначим порт, на котором может работать наш сервер. Внутри файла вашего сервера добавьте следующий код:
Server.js
const express = require('express');
const app = express();
const port = 4000;
app.listen(port, () => {
console.log(`Success! Your application is running on port ${port}.`);
});
Давайте поближе посмотрим на то, что здесь происходит. Строка 1 импортирует экспресс -библиотеку в проект. Строка 2 создает инстанции, экспрессирующие внутри переменной, называемой приложение . Я создаю переменную для своего порта в строке 3, чтобы изменить ее в одном месте и обновлять ее в любом месте, где я вхожу в систему или использую его.
Как только эти переменные установлены, вы можете создать сервер, используя app.listen () Анкет Во -первых, пропустите порт, в котором вы хотите запустить сервер. Это может быть любое значение, если это целое число. После порта может предоставить обратный вызов. В этом случае я использовал обратный вызов для регистрации сообщения в консоли, указывающая на запуск сервера. Это не требуется, но мне нравится иметь сообщение, чтобы указать, что терминал работает, как и ожидалось.
Настройка маршрутов в Express
Перед настройкой маршрутов вам необходимо включить пакет Body Parser, который мы включили, чтобы Express Can использовал информацию, поступающую из HTTP-запроса. Для этого измените файл сервера так:
Server.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 4000;
// Add the bodyParser middelware to the express application
app.use(bodyParser.urlencoded({ extended: false }));
app.listen(port, () => {
console.log(`Success! Your application is running on port ${port}.`);
});
Теперь, когда Express может анализировать HTTP -запросы, вы можете настроить свои маршруты. Ранее я упоминал, что вы можете разместить свои маршруты в файл сервера. Я покажу вам, как это сделать так, а потом сделать это моим предпочтительным способом.
Размещение маршрутов в файл сервера
Express позволяет использовать переменную приложения с помощью метода для желаемого типа запроса для установления маршрутов. Чтобы проиллюстрировать это, вы добавите 2 маршрута в файл сервера, а затем запустите сервер и перейдите с одного к другому.
Server.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 4000;
app.use(bodyParser.urlencoded({ extended: false }));
// Set up home route
app.get('/', (req, res) => {
res.send("This is the homepage");
})
// Set up second page
app.get('/second', (req, res) => {
res.send("This is the second page");
})
app.listen(port, () => {
console.log(`Success! Your application is running on port ${port}.`);
});
Чтобы запустить сервер, запустите Node Server.js в вашем терминале. Вы должны увидеть журнал консоли в app.listen () обратный вызов, указывающий, что приложение работает на порту 4000. Как только сервер запускается, вы можете перейти к http://localhost: 4000 И вы увидите страницу с текстом, на которой написано «Это домашняя страница». Это / маршрут. Если вы посетите http://localhost: 4000/second , вы увидите текст «Это вторая страница».
На данный момент файл сервера не выглядит плохо. По мере роста вашего приложения вам понадобятся все больше и больше маршрутов, что в конечном итоге приведет к тому, что файл станет длиной в милю, что заставляет меня считать с ума. Если вы предпочитаете держать все в одном файле, во что бы то ни стало, сделайте это. Это только мое личное предпочтение.
Использование контроллеров и маршрутов файл
При создании приложения с помощью Express.js я предпочитаю придерживаться архитектуры MVC. Если вы не знакомы с этим, это означает, что модель-контроллер. Это архитектурная модель, которая существует уже давно, и есть много информации. Чтобы поместить это в самые основные, упрощенные термины:
- Модель – Данные в нашем приложении
- Просмотр – то, что видит пользователь
- Контроллер – Что должны делать маршруты
Я буду использовать такую структуру в этом уроке, хотя у нас не будет никаких моделей. Они могут настроены с использованием различных инструментов, известных как ORM, для подключения баз данных. Для этого проекта я буду использовать контроллер для упрощения маршрутизации и мопса для представлений. Во -первых, давайте настроим контроллер.
Терминал
$ mkdir controllers && touch controllers/BasicController.js
Теперь вы можете открыть BasicController.js Анкет Этот файл начнется с module.exports, и мы будем экспортировать объект методов, которые составляют контроллеры. Если это сбивает с толку, приведенный ниже код может помочь немного лучше:
Controllers/BasicController.js
module.exports = {
home: (req, res) => {
res.send("This is the home page");
},
second: (req, res) => {
res.send("This is the second page");
}
}
module.exports делает этот объект доступным для других кусков приложения. Внутри объекта у нас есть первый ключ (дом), который является функцией. При настройке маршрута в Express функция обратного вызова принимает запрос ( req ) и параметр ответа ( res ). Запрос позволяет вам получить информацию о представленном запросе на сервер, и ответ позволяет вам определить, каким будет ответ.
Теперь, когда у вас установлен контроллер, для маршрутов необходимо создать файл:
Терминал
$ touch routes.js
routes.js Файл будет размещать все маршруты для проекта. Использование контроллеров помогает сохранить этот файл в чистоте, поскольку вы можете просто сказать, какой контроллер и метод вы хотите использовать для обратного вызова. Настройка маршрута идет от (потенциально) многих линий к одной линии, что делает быстрое и легко сказать, какие маршруты делают то, что вещи. Приведенный ниже код иллюстрирует, как должен выглядеть файл маршрутов, учитывая эту настройку:
routes.js
const express = require('express');
const router = express.Router();
const basic = require('./controllers/BasicController.js');
router.get('/', basic.home);
router.get('/second', basic.second);
module.exports = router;
Сначала вы импортируете Express Library и Router () метод Затем импортируйте любые файлы контроллера, используемые в ваших маршрутах. В этом случае у вас есть только BasicController.js файл. После этого вы можете начать настройку маршрутов. Поскольку маршруты находятся в отдельном файле от приложение переменная, вы будете использовать маршрутизатор переменная, как вы сделали с приложение Анкет Наконец, переменная маршрутизатора с новыми маршрутами должна быть экспортирована для использования в файле сервера.
Вы почти готовы проверить это! Последний шаг, чтобы получить эту работу, – это изменить файл сервера, например, так:
Server.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 4000;
app.use(bodyParser.urlencoded({ extended: false }));
// Specify the url prefix and import routes
app.use('/', require('./routes'));
app.listen(port, () => {
console.log(`Success! Your application is running on port ${port}.`);
});
Линия кода, которую вы добавили выше, говорится: «Используйте это промежуточное программное обеспечение, используйте префикс / для любых маршрутов в контроллере и используйте файл маршрутов для маршрутизации. Этот префикс может быть любым способом, который вы хотите в начале маршрутов в файле маршрута. В этом случае я хочу, чтобы маршруты находились на корневом уровне вместо префикса, поэтому я использовал / Анкет Добавление префиксов может быть полезно для API или других таких инструментов.
Теперь, если вы запустите Node Server.js , вы увидите такой же вывод, что и раньше, потому что серверы работают так же. На мой взгляд, обработка маршрутов таким образом гораздо более разборчива и масштабируемо.
Добавление просмотров с мопсом
Теперь вы настроили сервер, создали контроллеры для обработки запросов, и настройки маршрутов, чтобы сделать данные доступными для пользователей. Последний шаг, чтобы получить настройку базового экспресс-сервера (при условии, что вы хотите вывести какой-то фронт-конце, а не просто API),-это настроить шаблонный двигатель для представлений.
Поскольку мопс уже установлен, мы можем просто сказать Express, чтобы использовать это в качестве шаблонного двигателя. По умолчанию он будет искать представления в Просмотры/ Папка, поэтому там нет дальнейшей конфигурации.
Server.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 4000;
// Set up pug as view engine
app.set('view engine', 'pug');
app.use(bodyParser.urlencoded({ extended: false }));
app.use('/', require('./routes'));
app.listen(port, () => {
console.log(`Success! Your application is running on port ${port}.`);
});
Теперь, когда настраивается двигатель View, вы можете начать создавать представления. В этом уроке я собираюсь создать пару действительно основных файлов мопса для представлений. PUG предлагает все виды классных функций, что делает его отличным для строительства фронтальных веществ, но я не буду покрывать это здесь. Чтобы начать настройку представлений, создайте папку представлений, а затем создайте файлы для каждого из наших представлений.
Терминал
$ mkdir views && touch views/home.pug views/second.pug
Мопс позволяет вам написать своего рода упрощенный HTML. Это устраняет необходимость открытия и закрытия тегов, но означает, что отступ имеет решающее значение. Чтобы сделать вещи простыми, я разместил код для обоих файлов представления ниже. Они почти такие же, за исключением имени страницы.
Просмотры/Home.pug
html
head
title Homepage
body
h1 This is the homepage
p Here is some text for the homepage. This is pretty awesome!
a(href="/second") Go to the second page
Просмотры/Second.pug
html
head
title Second Page
body
h1 This is the second page
p Here is some text for the second page. This is pretty awesome!
a(href="/") Go to the home page
Последний шаг к добавлению представлений – обновить методы, которые вы создали в BasicController.js файл. Вы можете обновить res.send () к res.render () Анкет Первый аргумент, который вы проходите в res.render () Имя файла в папке представлений, которую вы хотите отображать. Необязательный второй параметр – это объект, который содержит любые переменные, которые вы хотите передать в шаблон. В этом случае я не буду беспокоиться о переменных. Обновленный код контроллера ниже. Как только это было обновлено, вы можете запустить Node Server.js и попробовать приложение. Вы должны увидеть заголовок, немного текста и ссылку на другую страницу для каждой страницы.
Controllers/BasicController.js
module.exports = {
home: (req, res) => {
res.render('home');
},
second: (req, res) => {
res.render('second');
}
}
Вывод
Поздравляю! Теперь у вас есть рабочее экспресс -приложение с маршрутизацией, контроллерами и представлениями. Вы можете добавить больше предметов, как вы считаете нужным, чтобы продолжить и построить свое приложение. Следующими шагами будет добавление базы данных с моделями, настройка авторизации для пользователей и настройка частных маршрутов. Теперь иди и создай великие дела!
Есть мысли или вопросы? Вы можете связаться со мной в Твиттере в @iam_timsmith .
Оригинал: “https://dev.to/iam_timsmith/creating-a-basic-server-with-express-js-1aa2”