Використання фреймворку Nuxt.JS 3 для розробки веб-додатку

Размещено на http://www.allbest.ru/

Дніпровський національний університет імені Олеся Гончара, Україна

Кафедра електронних обчислювальних машин

Використання фреймворку Nuxt.JS 3 для розробки веб-додатку

Матвеева Наталія Олександрівна

кандидат технічних наук, доцент

Нусс Владислав Дмитрович

магістр

Анотація

фреймворк контент веб-додаток сайт

За допомогою фреймворку Nuxt.JS 3 у поєднанні з ORM системою Prisma IO розроблено веб-додаток для інформаційного сайту новин. Фреймворк Nuxt.JS має оптимізовану швидкість виводу динамічних веб-сторінок, в той час як Prisma IO відповідає за розробку бази даних. Розроблено панель адміністратора для можливості швидкої роботи за контентом, редагування або видалення публікацій; надається можливість редагування сторінки користувача з панелі адміністратора.

Ключові слова: фреймворк, веб-додаток, NUXTJS 3, PRISMA IO, Mongo DB, API. JavaScript.

У наші дні Інтернет став основним каналом особистих та корпоративних взаємодій. За допомогою веб-додатків можна знайти супутникові знімки всієї Землі, розмістити особисті фотоальбоми, зробити покупки та багато іншого.

Фрейворки - найбільш зручний спосіб розробки веб-додатків [1]. Головною особливістю є велика гнучкість, яка зумовлена розробкою на основі мови програмування JavaScript. Усі вони є абсолютно безкоштовними тому кожен має можливість створити власний додаток, прикладаючи при цьому невеликі зусилля. Це каркас, який може включати: допоміжні програми, бібліотеки коду, мову сценаріїв та інше програмне забезпечення, що полегшує розробку та об'єднання різних компонентів великого програмного проекту. Зазвичай об'єднання відбувається за рахунок використання єдиного API. [1].

Однією з головних переваг при використанні додатків є стандартність структури. Каркаси стали популярними з появою графічних інтерфейсів користувача, стало набагато простіше створювати засоби для автоматичного створення графічних інтерфейсів, оскільки структура внутрішньої реалізації коду програми стала відома заздалегідь. Для забезпечення каркасу зазвичай використовуються техніки об'єктно-орієнтованого програмування.

Створення веб-додатків - складний процес, який включає використання множини динамічних частин та інтерактивних компонентів.

Веб-додаток - це комплекс, який являє собою сукупність програмного забезпечення, серверу, а також системного коду. Завдяки цьому можливо розробити унікальну веб-сторінку для конкретної задачі.

Процес створення складається з таких основних етапів: визначення мети клієнта.; створення технічного завдання; розробка прототипу; дизайну; перенесення в програмний код; розміщення контенту; тестовий запуск; перенесення на хостинг; підключення рекламної кампанії (за необхідності).

На теперішній час найбільшу увагу приділяють розробці унікального та зручного дизайну. Особливу увагу надають розробці інтерфейсу для смартфонів та планшетів, які стрімко замінюють собою стаціонарні комп'ютери.

Метою даної роботи є розробка веб-додатку для інформаційного сайту новин. Для цього обрано фреймворк Nuxt.JS 3 [3] у поєднанні з ORM (Object Relational Mapping)[2] системою Prisma IO [4]. Фреймворк Nuxt.JS має оптимізовану швидкість виводу динамічних веб-сторінок, в той час як Prisma IO буде відповідати за розробку баз даних, міграція баз даних відбувається на SQLite.

Даний додаток працює з системою універсального рендерінгу сторінок. Усі публікації користувач отримує за допомогою системи API. Інформація публікацій зберігається на окремому сервері у форматі JSON. Схема наведена на рисунку 1.

Рис. 1. Схема роботи сайту

Дана система працює наступним чином:

Клієнт виконує запит до серверу, на якому знаходиться сайт, Запит проходить проміжну перевірку у Middleware, де перевіряються дані, в залежності від яких відповідь на запит відрізняється:

якщо користувач не зареєстрований або не увійшов до акаунту на його запит буде відображатись сторінка гостьового режиму;

якщо токен авторизації є дійсним, користувач отримає сторінку з усіма доступними інструментами для створення та редагування публікацій;

З сервера користувач отримуватиме лише HTML та JavaScript-код.

Усе наповнення сайту та дані користувача будуть отримані з бази даних через систему API.

Важливою особливістю цього алгоритму є підвищення безпеки. Дані, які надходять до сервера будуть зашифровані. Це запобігає можливості підібрати логін та пароль користувача. Можливо лише побачити на панелі розробника у браузері код запиту 200 (успішного з'єднання) та токен авторизації.

Авторизований користувач матиме можливість створювати публікації, які зберігаються у базі даних через систему API.

Кожна сторінка сайту має наступну структуру:

Макети Layouts

Сторінки Pages

Компоненти Components

Макети -- це обгортки навколо сторінок, які містять загальний інтерфейс користувача для кількох сторінок, наприклад, відображення верхнього та нижнього колонтитулів. Макети -- це файли Vue, які використовують компоненти <slot /> для відображення вмісту сторінки. За замовчуванням використаємо файл layouts/default.vue. Спеціальні макети можна встановити як частину метаданих сторінки.

Сторінки представляють види, які використовуються для кожного конкретного шаблону маршруту. Кожен файл у каталозі pages/ представляє інший маршрут, який відображає його вміст.

Щоб скористуватися сторінкою, створюється файл pages/index.vue і додається компонента <NuxtPage /> до app.vue (або видаляється app.vue для запису за замовчуванням). Тепер можна створювати більше сторінок і відповідних маршрутів, додаючи нові файли в каталог pages/.

Більшість компонентів є багаторазовими частинами інтерфейсу користувача. У Nuxt [3] можна створити ці компоненти в каталозі components/, і вони будуть автоматично доступні у програмі без необхідності їх явного імпорту. Приклад сторінки наведено на рисунку 2 ( синім кольором на схемі позначено Layout; червоним - позначена сама сторінка; помаранчевим - одна із компонент сторінки).

Рис. 2. Архітектура сторінки

Для формування внутрішньої адресації розроблена наступна структура каталогів сайту (рис. 3).

Рис. 3. Структура каталогу сайт

Розроблена папка з усіма іншими розділами під час виконання запиту буде генерувати маршрут /about та інші. Для перегляду окремих публікації використовується система динамічного генерування адреси за допомогою [id].vue. Маршрут у такому випадку матиме наступній вигляд /war/1, war/2 і так далі. Це можливо завдяки системі автоматичної маршрутизації фреймворку.

У системі Object Relational Mapping Prisma IO [4, 5] розроблено базу даних для додатку. Схема зв'язків для даної бази даних наведена на рис. 4.

Рис. 4. Структура зв'язків для бази даних

Prisma IO[4, 6] має синтаксис подібний до JavaScript, за рахунок чого, спрощено створення таблиці бази даних. В залежності від того, в яку базу даних буде виконано міграцію. залежить кількість можливих типів даних, які будуть підтримуватись. Обрано Mongo DB[7] за можливість зберігати складний тип даних, такий як масиви.

Приклад готової сторінки представлено на рис. 5.

Рис. 5. Готова сторінка веб-додатку

Висновки

За допомогою даної системи розроблено веб-додаток для створення та публікації новин, який дозволяє користувачам швидко та зручно створювати публікації та безпечно проводити реєстрацію. Для цього розроблено панель адміністратора для можливості швидкої роботи за контентом, редагування або видалення публікацій; можливість редагування сторінки користувача з панелі адміністратора.

Для розробки веб-додатку обрано систему керування базами даних Prisma IO, для створення зручнішого інтерфейсу використано додаткові модулі Bootstrap 4. Налаштовано базу данних Mongo DB системи реєстрації користувачів.

Список використаних джерел

1. Framework [Електронний ресурс] -- Вилучено із: https://hackr.io/blog/best-javascript-frameworks.

2. ORM [Електронний ресурс] -- Вилучено із: https://en.wikipedia.org/wiki/Object%E2 %80%93relational_mapping.

3. Nuxt JS [Електронний ресурс] -- Вилучено із: https://nuxtjs.org/.

4. Prisma IO [Електронний ресурс] -- Вилучено із: https://www.prisma.io/.

5. Prisma Migration [Електронний ресурс] -- Вилучено із: https://www.prisma.io/docs/concepts/components/prisma-migrate/get-started.

6. Відношення у Prisma IO [Електронний ресурс] -- Вилучено із: https://www.prisma.io/docs/concepts/components/prisma-schema/relations.

7. Mongo DB [Електронний ресурс] -- Вилучено із: https://www.mongodb.com/.

Размещено на Allbest.ru