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:

Ukrainian (українська мова) translation by AlexBioJS (you can also view the original English article)

Вступ

Node.js відмінно підходить для створення не тільки API (* Application Programming Interface - інтерфейс прикладних програм. Тут і надалі примітка перекладача), а й стандартних веб-застосунків. Вона має потужні інструменти для задоволення смаків веб-розробників. У цьому посібнику ви будете створювати веб-застосування, яке може бути локальною бібліотекою.

Протягом створення ви дізнаєтеся про деякі типи ПЗ (* програмне забезпечення) проміжного шару, ви побачите, як обробляти дані форми в Node.js, до того ж ви зможете звернутися до двох моделей.

Поїхали

Початок роботи

Почніть з установлення генератора застосунків Express на ваш комп'ютер.

Виконайте команду express генератора Express, щоб згенерувати ваш застосунок.

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

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

Налаштування точки входу застосунка

Файл app.js було створено після того, як ви виконали команду генератора. Проте вам необхідно провести додаткове налаштування конфігурації. Відредагуйте файл таким чином, щоб він мав такий вигляд, як мій нижче.

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

Моделі Book та Genre

Модель Book буде використовувати схему Mongoose для визначення структури книг. Створіть папку під назвою models та новий файл під назвою Book.js. Його представлено нижче.

Тут у нас мається чотири поля. Останнє поле використовується для зберігання  жанру, до якого належить кожна книга. Поле genre (* жанр) тут посилається на модель Genre, яку буде створено в наступному прикладі. Через це тип поля має значення Schema.Types.ObjectId, де й будуть збережені _id (*  унікальний ідентифікатор об'єкта, первинний ключ). Властивість ref встановлює модель, на яку ви посилаєтеся. Зверніть увагу, що жанр зберігається в якості масиву, тобто книга може належати до декількох жанрів.

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

Для моделі Genre необхідне лише одне поле, name.

Маршрут та представлення для каталогу жанрів

В цьому посібнику ви будете використовувати два шляхи маршрутів для ваших жанрів: шлях для додавання нового жанру та шлях для відображення списку наявних у вас жанрів. Створите файл під назвою 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. Після цього ви зможете пробігтися по жанрам і відобразити їх у вигляді прапорців.

Другий маршрутизатор займається обробленням даних форми. Спочатку ви перевіряєте тіло запиту, щоб переконатися, що деякі поля заповнені. Тут нам і стає у нагоді ПЗ проміжного шару express-validator, що ви встановили у файлі app.js. За наявності помилок сторінка addBooks знову відправляється користувачеві. Інакше новий екземпляр моделі Book зберігається, і користувач перенаправлюється на сторінку /books.

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

Створіть новий файл представлення під назвою addBooks.pug. Зверніть увагу, що назва представлення збігається з назвою першого параметра, переданого до методу res.render. Це через те, що ви виконуєте шаблон. Під час переадресації ви просто передаєте шлях, на який ви хочете виконати перенаправлення, як ви зробили з res.redirect('/books').

Після цього переходимо до створення представлення, наведеного нижче.

Тут варто звернути увагу на значення атрибутів форми: action (* вказує обробник, до якого передаються дані форми при їх відправленні до сервера) і method (* метод, яким дані форми відправляються до сервера). Після натискання кнопки submit ви виконуєте запит POST до /books/add. Також зверніть увагу, що ви знову пробігаєтеся по колекції жанрів та відображуєте кожний із них.

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

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

Ніякого чарування.

Запити, що виконуються до цього маршрутизатора, повинні містити параметр id - значення властивості книги id. Це значення отримуємо з параметрів запиту, використовуючи req.params.id. Воно використовується для ідентифікації окремої книги, яку необхідно отримати із бази даних, оскільки значення id унікальні. Після знаходження книги її значення властивості genre заповнюється усіма жанрами, котрі були збережені для цього екземпляру книги. Якщо все гаразд, то виконується представлення для книги, інакше викидається помилка.

Давайте створимо представлення для книги. Нижче показано, як воно повинно виглядати.

Ви можете запустити ваш сервер node за допомогою команди:

Завершення

Тепер ви знаєте, як створювати стандартний веб-застосунок в Node.js, а не просто додаток для створення списку завдань. Ви змогли обробити дані форми, послатися на дві моделі та встановити деяке ПЗ проміжного шару.

Ви можете продовжити та розширити функціональність веб-додатка. Наприклад, спробуйте додати можливість видалення книги. Спочатку додайте кнопку на сторінці для показу книги, потім перейдіть до файлів маршрутизаторів і додайте маршрутизатор для видалення книги. Зверніть увагу, що це буде відбуватися за допомогою запитів 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.