ВЗАИМОДЕЙСТВИЕ С БАЗОЙ ДАННЫХ ЧЕРЕЗ САЙТ (Vue.js + Express.js + PostgreSQL)

Примечание: Этот проект НЕ требует постоянных обновлений кода.

Статус Проекта: 🟩 Активен

📑Содержание

1. Цели и Задачи

2. Основная работа

   а) Главная страница

   • Добавление новой категории товаров
   • Добавление нового товара
   • Удаление товара по его ID

   б) Страница "products"

   • Поиск товара по критериям

   в) Страница "categories"

3. Стек технологий

4. Установка

---

❗ Цели и задачи

Необходимо создать оконное приложение (можно веб-приложение) "Склад" (используя любой язык программирования), которое будет подключаться к серверу PostgreSQL и конкретно к базе данных Northwind. В приложении необходимо вывести все данные из таблицы products и categories, а также настроить возможность работы с этими данными.

Функционал:

1. В категории необходимо иметь возможность только создавать новую категорию продуктов.

2. Необходимо создать функцию добавления нового продукта, удаления старого продукта (по id номеру), поиска продукта (продуктов) по нескольким параметра:

   • по category_id (номеру категории);
   • по product_name (названию продукта);
   • по количеству продуктов units_in_stock (больше или меньше определенного значения).

---

Основная работа

Сайт состоит из трёх страниц:

• Главная страница. Здесь представлены задачи данной работы. Также здесь прописан функционал для добавления и удаления товара, добавления новой категории товаров.
• Страница с таблицей "products". Показать таблицу с товарами. Таблицу можно сортировать по столбцам (по алфавиту). На этой странице реализован функционал поиска товаров по параметрам (category_id, product_name и больше/меньше, чем количество units_in_stock).
• Страница с таблицей "categories". Показать таблицу с категориями товаров. Таблицу можно сортировать по столбцам (по алфавиту).

Главная страница

Примечание: Оранжевым цветом отмечены обязательные для заполнения поля. Для данной работы была реализована примитивная валидация данных форм (без доп. библиотек).

Главная страница сайта:

В случае, если валидация полей не прошла, будет выведен alert с сообщением об ошибке. Также в консоли браузера это сообщение дублируется.

Добавление новой категории товаров

Для того, чтобы добавить новую категорию товаров, нужно заполнить поле "Название категории". Поле "Описание категории" не обязательно для заполнения:

Если валидация данных прошла успешно, то результат можно будет посмотреть на странице с таблицей "categories".

Добавление нового товара

Для того, чтобы добавить новый товар, нужно заполнить поля "Название товара", "ID поставщика", "ID категории товаров" и "discontinued (0 или 1)". Остальные поля не обязательны для заполнения:

Если валидация данных прошла успешно, то результат можно будет посмотреть на странице с таблицей "products". ID добавленного товара вычисляется автоматически (максимальный индекс + 1).

Удаление товара по его ID

Форма для удаления товара по ID содержит только одно поле:

Если валидация данных прошла успешно, то результат можно будет посмотреть на странице с таблицей "products". Товара с введённым ID быть не должно в результате отправки формы.

Страница "products"

При переходе на данную страницу будет произведён запрос на чтение данных из БД (таблица "products"):

Поиск товара по критериям

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

Например, ниже представлен результат поиска товаров с категорией товаров №3:

А здесь представлен результат поиска товаров с названием "Chai":

А здесь представлен результат поиска товаров со значением units_in_stock>200 штук:

А здесь представлен результат поиска товаров со значением units_in_stock<5 штук:

Страница "categories"

При переходе на данную страницу будет произведён запрос на чтение данных из БД (таблица "categories"):

---

💻 Стек технологий

В проекте был использован следующий стек технологий:

• HTML
• CSS
• JavaScript
• Vue.js
• Vue Router
• Git
• Vite.js

• EJS
• Express.js
• PostgreSQL
• Axios
• concurrently
• nodemon

---

⏬ Установка

Клонируем удалённый репозиторий на локальную машину:

git clone https://github.com/Nico-kun123/vue-pg-database

Устанавливаем все необходимые компоненты:

cd vue-pg-database
npm install

Содержание package.json:

{
  "name": "northwind-app",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "concurrently 'npm:dev:frontend' 'npm:dev:backend'",
    "dev:frontend": "vite",
    "dev:backend": "nodemon server/index.js",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.6.7",
    "ejs": "^3.1.9",
    "express": "^4.18.3",
    "pg": "^8.11.3",
    "vue": "^3.4.15",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.3",
    "concurrently": "^8.2.2",
    "nodemon": "^3.1.0",
    "vite": "^5.0.11"
  }
}

В проекте есть следующие разделы:

• dependencies: Это пакеты, необходимые для работы приложения.
• devDependencies: Это пакеты, которые нужны только для разработки и тестирования приложения. Они не будут включены в окончательную сборку приложения.

В проекте есть следующие скрипты:

• "dev". Этот скрипт запускает сервер разработки Vite на локальной машине;
• "dev:frontend" и "dev:backend". Запуск только клиентской и серверной части сайта.
• "build". Этот скрипт используется для сборки проекта для production. Он минимизирует и оптимизирует код для лучшей производительности в production;
• "preview". Этот скрипт предназначен для предварительного просмотра собранного проекта. Он запускает сервер, который позволяет увидеть, как он будет выглядеть и работать в production;

❗ Чтобы запустить сайт, нужно просто запустить скрипт "dev" и перейти на http://localhost:3000.

---

Автор

Кудрявцев Николай (Электронная почта: nicolay.kudryavtsev@gmail.com)