Добавлен: 06.11.2023
Просмотров: 36
Скачиваний: 2
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Министерство науки и высшего образования Российской Федерации
Федеральное государственное автономное образовательное
учреждение высшего образования
«ЮЖНЫЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ»
Инженерно-технологическая академия
Институт компьютерных технологий и информационной безопасности
Отчет по практической работе № 4
на тему «Работа с SQL БД в Web-приложениях Node.js»
по дисциплине «Технологии разработки серверной части веб-приложений»
Выполнила
студентка группы КТбо3-4 Н. И. Селевцова
Принял
доцент кафедры МОП ЭВМ А. Н. Шкурко
СОДЕРЖАНИЕ
ЦЕЛЬ РАБОТЫ 3
ЗАКЛЮЧЕНИЕ 11
ЛИСТИНГ ПРОГРАММЫ 12
ЦЕЛЬ РАБОТЫ
Данная практическая работа направлена на изучение и практическое использование базовых методов доступа к БД использующих SQL в web-приложениях Node.js.
Задание
В рамках выполнения практической работы требуется выполнить следующие задачи и продемонстрировать полученные навыки:
– Создать новое node.js приложение;
– Подключить к приложению библиотеки express.js и liquid;
– Разработать HTML-шаблоны для страниц приложения;
– Реализовать функциональность доступа к БД, необходимую для выполнения задания;
– Реализовать логику обработки на сервере согласно варианту задания.
Вариант задачи: 5
Необходимо реализовать простое приложение доски объявлений. На главной странице приложения пользователю отображается список добавленных объявлений. Отдельно доступна страница добавления объявления. Также на отдельной странице выводятся все объявления и доступно удаление отдельных объявлений по кнопке.
ХОД РАБОТЫ
Проект разрабатываемого веб-приложения имеет следующую файловую структуру – рисунок 1. В приложение были подключены библиотеки express.js и liquid, установлено соединение с локальным сервером и базой данных PostgreSQL.
Рисунок 1 – Файловая структура приложения
Рисунок 2 – Начальные настройки
На языке HTML был создан шаблон страницы приложения. Был использован шаблонизатор Liquid вместе с промежуточным обработчиком bodyParser. Во время выполнения механизм шаблонов заменяет переменные в файле шаблона фактическими значениями и преобразует шаблон в HTML-файл, отправляемый клиенту. Такой подход упрощает разработку HTML-страницы.
На рисунках 3-5 представлено содержание HTML-страниц с доской объявлений, страницей добавления и удаления объявлений.
Рисунок 3 – Страница с добавленными объявлениями
Рисунок 4 – Страница добавления объявления
Рисунок 5 – Страница удаления объявления
На рисунках 6-7 представлен код для функциональности доступа к БД. Далее представлен ход работы с приложением, отображенный в БД.
-
Рисунок 6 – Реализация работы БД в приложении
Рисунок 7 - Реализация работы БД в приложении [2]
Рисунок 8 – Страница с объявлениями
Рисунок 9 – Данные в БД
Рисунок 10 – Добавление объявления
Рисунок 11 – Появление объявления на странице
Рисунок 12 – Обновление в БД
Рисунок 13 – Страница удаления объявлений
Рисунок 14 – Удаление записи из БД
Рисунок 15 – Обновленная информация в приложении
ЗАКЛЮЧЕНИЕ
В ходе практической работы были изучены и использованы базовые методы доступа к БД, использующих SQL в web-приложениях Node.js. Было создано новое node.js приложение, подключены библиотеки express.js и liquid, разработаны HTML-шаблоны для страниц приложения, реализована функциональность доступа к БД, необходимая для выполнения задания, и логика обработки на сервере согласно варианту задания.
ЛИСТИНГ ПРОГРАММЫ
Файл index.js
const express = require('express');
const bodyParser = require('body-parser');
const { Sequelize, DataTypes } = require('sequelize');
const app = express();
app.use(express.static('public'));
const port = 3000;
var { Liquid } = require('liquidjs');
var engine = new Liquid();
app.use(bodyParser.urlencoded());
app.engine('liquid', engine.express());
app.set('views', './views'); // specify the views directory
app.set('view engine', 'liquid'); // set liquid to default
const sequelize = new Sequelize('postgres://postgres:1@localhost:5432/postgres');
const Ads = sequelize.define('Ads', {
text: {
type: DataTypes.STRING,
allowNull: false
},
name:{
type: DataTypes.STRING,
allowNull: false
},
phone:{
type: DataTypes.STRING,
allowNull: false
}
});
app.get('/', async (req, res) => {
const a = await Ads.findAll();
const model = {
active: a.map(x => x.get({plain:true})),
}
res.render('home', model);
});
app.get('/add', (req, res) => res.render('add'));
app.post('/add', async (req, res) => {
const ad = new Ads();
ad.text = req.body.text;
ad.name = req.body.name;
ad.phone = req.body.phone;
await ad.save();
res.redirect('/');
});
app.get('/arc', async (req, res) => {
const a = await Ads.findAll();
const model = {
active: a.map(x => x.get({plain:true})),
}
res.render('archive', model);
});
app.post('/delete', async (req, res) => {
const deletedKeys = Object.keys(req.body)
.filter(x=>x.startsWith('delete_'))
.map(x => x.split('_')[1]);
for (let id of deletedKeys) {
const ad = await Ads.findByPk(id);
await ad.destroy();
}
res.redirect('/');
});
Ads.sync();
app.listen(port, () => console.log('Server is running on port 3000'));
Файл home.liquid
html>
{% for a in active %}
{{ a.text }}
{{ a.name }}
{{ a.phone }}
{% endfor %}