Статьи

Создавайте новые приложения Express.js за считанные минуты с помощью Express Generator

Август 30, 2018

Express.js — это веб-инфраструктура Node.js, которая приобрела огромную популярность благодаря своей простоте. Он имеет простую в использовании маршрутизацию и простую поддержку движков представлений, значительно опережая базовый HTTP-сервер Node.

Однако запуск нового приложения Express требует определенного количества стандартного кода: запуск нового экземпляра сервера, настройка механизма представления, настройка обработки ошибок.

Хотя существуют различные начальные проекты и шаблоны, Express имеет собственный инструмент командной строки, который позволяет легко запускать новые приложения, называемые express-generator .

Что такое экспресс?

В Express есть много встроенных функций и гораздо больше функций, которые вы можете получить из других пакетов, которые легко интегрируются, но есть три основных вещи, которые он делает для вас из коробки:

  1. Маршрутизация Вот как / home / blog и / about all дают вам разные страницы. Express упрощает модульность этого кода, позволяя помещать разные маршруты в разные файлы.
  2. Промежуточное ПО . Если вы новичок в этом термине, в основном промежуточное ПО — это «программный клей». Он обращается к запросам до того, как их получат ваши маршруты, что позволяет им обрабатывать такие сложные вещи, как разбор файлов cookie, загрузка файлов, ошибки и многое другое.
  3. Просмотров . Представления — это то, как страницы HTML отображаются с пользовательским содержимым. Вы передаете данные, которые хотите визуализировать, и Express выполнит рендеринг с данным механизмом просмотра.

Начиная

Начать новый проект с генератором Express так же просто, как выполнить несколько команд: 

npm install express-generator -g

Это устанавливает генератор Express как глобальный пакет, позволяющий вам запускать команду express в вашем терминале: 

 express myapp

Это создает новый проект Express под названием myapp который затем помещается в каталог myapp . 

 cd myapp

Если вы не знакомы с терминальными командами, этот поместит вас в каталог myapp . 

 npm install

npm является менеджером пакетов Node.js по умолчанию. Запуск npm install устанавливает все зависимости для проекта. По умолчанию express-generator включает в себя несколько пакетов, которые обычно используются с сервером Express.

Параметры

Генератор CLI принимает полдюжины аргументов , но два наиболее полезных из них следующие:

  • -v , Это позволяет вам выбрать движок представления для установки. По умолчанию это jade . Хотя это все еще работает, оно не рекомендуется в пользу pug .
  • -с , По умолчанию генератор создает очень простой файл CSS для вас, но при выборе движка CSS ваше новое приложение будет сконфигурировано с промежуточным программным обеспечением для компиляции любых из перечисленных выше параметров.

Теперь, когда мы настроили наш проект и установили зависимости, мы можем запустить новый сервер, выполнив следующее: 

 npm start

Затем перейдите по http://localhost:3000 в вашем браузере.

Структура приложения

Сгенерированное приложение Express запускается с четырьмя папками.

бункер

Папка bin содержит исполняемый файл, который запускает ваше приложение. Он запускает сервер (на порту 3000, если не предоставлена ​​альтернатива) и настраивает базовую обработку ошибок. Вам не нужно беспокоиться об этом файле, потому что npm start запустит его для вас.

общественности

Общая папка является одной из важных: все в этой папке доступно людям, подключающимся к вашему приложению. В эту папку вы поместите JavaScript, CSS, изображения и другие ресурсы, которые нужны людям при подключении к вашему веб-сайту.

маршруты

Папка routes — это место, куда вы положите файлы своего роутера. Генератор создает два файла, index.js и users.js , которые служат примерами того, как отделить конфигурацию маршрута вашего приложения.

Как правило, здесь у вас будет отдельный файл для каждого основного маршрута на вашем сайте. Поэтому в этой папке могут быть файлы с именем blog.js , home.js и / или about.js .

взгляды

В папке views находятся файлы, используемые вашим движком шаблонов. Генератор настроит Express так, чтобы он искал подходящее представление при вызове метода render .

За пределами этих папок есть один файл, который вы должны хорошо знать.

app.js

Файл app.js особенный, потому что он настраивает ваше приложение Express и склеивает все разные части вместе. Давайте пройдемся по тому, что он делает. Вот как начинается файл: 

 var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser');

Эти первые шесть строк файла являются обязательными. Если вы новичок в Node, обязательно прочитайте Understanding module.exports и export в Node.js. 

 var routes = require('./routes/index'); var users = require('./routes/users');

Следующие две строки кода требуют различных файлов маршрутов, которые генератор Express устанавливает по умолчанию: маршруты и пользователи. 

 var app = express();

После этого мы создаем новое приложение, вызывая express() . Переменная app содержит все настройки и маршруты для вашего приложения. Этот объект склеивает ваше приложение. 

 app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade');

Как только экземпляр приложения создан, шаблонизатор настроен на рендеринг представлений. Здесь вы можете изменить путь к файлам просмотра, если хотите.

После этого вы увидите, что Express настроен на использование промежуточного программного обеспечения. Генератор устанавливает несколько распространенных промежуточных программ, которые вы, вероятно, будете использовать в веб-приложении. 

 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public')));
  • фавикон . Этот довольно понятен: он просто подает ваш favicon.ico из вашего публичного каталога.
  • регистратор При запуске приложения вы можете заметить, что все запрошенные маршруты записываются в консоль. Если вы хотите отключить это, вы можете просто закомментировать это промежуточное ПО.
  • bodyParser . Вы можете заметить, что есть две строки для анализа тела входящих HTTP-запросов. Первая строка обрабатывает, когда JSON отправляется через POST-запрос, и помещает эти данные в request.body . Вторая строка анализирует данные строки запроса в URL (например, /profile?id=5 ) и помещает их в request.query .
  • cookieParser . Это берет все куки, которые отправляет клиент, и помещает их в request.cookies . Это также позволяет вам изменять их перед отправкой обратно клиенту, изменяя response.cookies .
  • экспресс.статик Это промежуточное ПО обслуживает статические ресурсы из вашей public папки. Если вы хотите переименовать или переместить общедоступную папку, вы можете изменить путь здесь.

Далее идет маршрутизация: 

 app.use('/', routes); app.use('/users', users);

Здесь примеры файлов маршрутов, которые были необходимы, прикреплены к нашему приложению. Если вам нужно добавить дополнительные маршруты, вы должны сделать это здесь.

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

Полезный инструмент

Надеюсь, теперь у вас есть четкое представление о том, как инструмент экспресс-генератора может сэкономить ваше время на написание повторяющихся шаблонов при запуске новых проектов на основе Express.

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

46
Share: