Файл: Работа с sql бд в Webприложениях Node js.docx

Министерство науки и высшего образования Российской ФедерацииФедеральное государственное автономное образовательноеучреждение высшего образования«ЮЖНЫЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ»Инженерно-технологическая академияИнститут компьютерных технологий и информационной безопасностиОтчет по практической работе № 4на тему «Работа с SQL БД в Web-приложениях Node.js»по дисциплине «Технологии разработки серверной части веб-приложений»Выполниластудентка группы КТбо3-4 Н. И. СелевцоваПринялдоцент кафедры МОП ЭВМ А. Н. Шкурко

СОДЕРЖАНИЕ

ЦЕЛЬ РАБОТЫ

Данная практическая работа направлена на изучение и практическое использование базовых методов доступа к БД использующих 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.jsconst 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 directoryapp.set('view engine', 'liquid');       // set liquid to defaultconst 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 %}

     

   

   

Добавьте свое объявление!

     
Текст вашего объявления:



     

Как к вам обращаться?



     
Номер телефона:


     

   

   

   

Удалить объявление

   

     

       


        {% for a in active %}

         

            {{ a.text }}


            {{ a.name }}


            {{ a.phone }}

         

         


         
            type="submit"

            name="delete_{{a.id}}"

            value="Удалить" />

         

        {% endfor %}

     

   

---