Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Node.js
Code

Создание веб-приложений с помощью Node.js

by
Difficulty:BeginnerLength:LongLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

Введение

Помимо создания API-интерфейсов, Node.js отлично подходит для создания стандартных веб-приложений. Он имеет мощные инструменты для удовлетворения вкуса многих веб-разработчиков. В этом уроке вы будете создавать веб-приложение, которое может служить локальной библиотекой.

Во время разработки вы узнаете о некоторых типах middleware, вы увидите, как обрабатывать отправку форм в Node.js, и вы также сможете обработать две модели.

Давайте начнем.

Начиная

Начните с установки генератора express на вашем компьютере.

Запустите команду генератора express для создания вашего приложения.

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

Запустите команду для установки пакетов.

Настройка файла точки входа

app.js был создан при запуске команды генератора; однако вам необходимо настроить дополнительную конфигурацию. Отредактируйте файл, чтобы он выглядел так, как показано ниже.

  1. Вам потребуется два маршрута, которые вы будете использовать при создании этого приложения. Вы скоро создадите файл маршрутов. Необходимые маршруты назначаются как значения для двух разных переменных, которые используются при настройке middleware для ваших маршрутов.
  2. Вы устанавливаете Mongoose для использования global.Promise. Переменной MongoDB назначается MONGODB_URI вашей среды или путь к вашему локальному серверу mongo. Эта переменная передается как аргумент для подключения к работающему серверу MongoDB.
  3. Вы настроили middleware сессии с помощью express-session. Это middleware важно, поскольку вы будете показывать флэш-сообщения в некоторых частях вашего приложения.
  4. Вы отдельный middleware для валидации. Это middleware будет использоваться для проверки ввода формы, гарантируя, что пользователи приложения не отправят пустую форму. В валидации используется установленный пакет - express-validator.
  5. Вы устанавливаете middleware, которое пригодится при отображении флэш-сообщений. Это middleware использует connect-flash.
  6. Маршруты для приложения настроены, чтобы использовать необходимый файл маршрутов. Запросы, указывающие на /genres и /books, будут использовать файлы жанров и книг, соответственно. На данный момент вы не создали файлы маршрутов, но вы скоро это сделаете.

Модели: Книга и жанр

Модель книги будет использовать схему Mongoose, чтобы определить, как будут структурированы книги. Создайте каталог с именем models и новый файл Book.js. Вот как это выглядит.

Здесь у вас есть четыре поля. Последнее поле используется для хранения жанра, к которому принадлежит каждая книга. В поле genre описывается модель Genre, которая будет создана далее. Вот почему тип установлен в Schema.Types.ObjectId, в котором будут сохранены идентификаторы каждого ссылаемого жанра. ref указывает модель, на которую вы ссылаетесь. Обратите внимание, что жанр сохраняется как массив, что означает, что книга может иметь более одного жанра.

Давайте продолжим создание модели Genre.

Для вашего жанра вам нужно всего одно поле: name.

Маршрут index и просмотр жанра

Для этого урока вы будете использовать два маршрута путя для своего жанра: путь для добавления новых жанров, а другой - список жанров, которые у вас есть. Создайте файл в каталоге маршрутов genres.js.

Начните с запроса всех модулей, которые вы будете использовать.

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

Этот маршрут вызывается всякий раз, когда делаются запросы к /genres. Здесь вы вызываете метод find в своей модели Genre для получения всех жанров, которые были созданы. Затем эти жанры отображаются на шаблоне, называемом genres. Давайте продолжим и создадим его, но сначала обновим layout.pug, чтобы он выглядел следующим образом:

Это добавит вашим отображениям хорошую структуру для навигации. Теперь создайте файл отображения genre.pug. В этом файле вы будете проходится по всем созданным жанрам и выводить каждый жанр в виде неупорядоченного списка.

Вот как должен выглядеть файл.

Добавление новых жанров и просмотр

Вернитесь к вашему файлу routes/genres.js, чтобы добавить маршруты, которые будут обрабатывать создание новых жанров.

  1. Задача этого маршрутизатора - просто отобразить страницу для добавления новых жанров. Этот маршрутизатор вызывается всякий раз, когда делаются запросы к путю /genres/add.
  2. Этот маршрутизатор обрабатывает представление формы. Когда форма отправляется, мы проверяем, чтобы имя обязательно было введено пользователем. Если имя не введено, страница отображается повторно. Если проверки прошли, жанр сохраняется, и пользователь перенаправляется на страницу /genres.
  3. Модуль экспортируется как маршрутизатор.

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

Маршруты и просмотр книг

Создайте новый файл маршрута для книг и назовите его books.js. Как вы это делали ранее с жанром, начните с включения необходимых модулей.

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

Думаю, вы пробовали - вот как это должно выглядеть.

Когда этот маршрутизатор вызывается, выполняется запрос на поиск всех книг, сохраненных в базе данных. Если все идет хорошо, книги отображаются на странице /books, иначе возникает ошибка.

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

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

Маршруты для добавления и просмотра книг

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

Вот как выглядят маршрутизаторы.

На первом маршрутизаторе отображается страница /addBooks. Этот маршрутизатор вызывается, когда запрос делается для пути /add. Поскольку в книгах, как предполагается, есть жанры, вы хотите отобразить жанры, которые были сохранены в базе данных.

Приведенный выше код находит все жанры в вашей базе данных и возвращает их в переменной genres. При этом вы сможете проходиться по ним и отображать их как флажки.

Второй маршрутизатор обрабатывает представление формы. Во-первых, вы проверяете тело запроса, чтобы убедиться, что некоторые поля не пусты. Это место, где будет весьма удобно воспользоваться middleware express-validator из app.js. Если есть ошибки, страница отображается повторно. Если их нет, экземпляр новой книги сохраняется и пользователь перенаправляется на страницу /books.

Давайте продолжим и создадим представления.

Создайте новый файл отображения addBooks.pug. Обратите внимание, что имя файла совпадает с первым параметром, заданным для res.render. Это связано с тем, что вы создаете шаблон. Во время перенаправления вы просто передаете путь, на который хотите перенаправить, как вы это делали с res.redirect('/books').

Вот как должны выглядеть файлы отображений.

Здесь важно отметить действие и метод формы. Когда нажата кнопка отправки, вы делаете запрос POST на путь /books/add. Еще одна вещь: вы снова проходите по коллекции возвращаемых жанров и отображаете каждый из них.

Маршрут просмотра книги

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

Никакой магии здесь нет.

Во-первых, запросы, сделанные на этот маршрутизатор, должны иметь идентификатор: идентификатор книги. Этот идентификатор получается из параметров запроса, используя req.params.id. Это используется для идентификации конкретной книги, которая должна быть получена из базы данных, поскольку идентификаторы уникальны. Когда книга найдена, значение жанра этой книги заполняется всеми жанрами, которые были сохранены в этом экземпляре книги. Если все идет хорошо, отоюражается представление книги, иначе возникает ошибка.

Давайте создадим представление для книги. Вот как это должно выглядеть.

Вы можете запустить свой сервер node, выполнив:

Заключение

Теперь вы знаете, как создать стандартное веб-приложение в Node.js, а не просто консольное приложение. Вы смогли обрабатывать данные формы, ссылаться на две модели и настраивать middleware.

Вы можете пойти еще дальше, расширив приложение - попробуйте добавить возможность удалить книгу. Сначала добавьте кнопку на страницу просмотра книги, а затем перейдите к файлам маршрутов и добавьте для этого маршрутизатор. Обратите внимание, что это будет запрос POST.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.