Файл: Работа с 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.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 %}

     

   

   

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

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



     

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



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


     

   

   

   

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

   

     

       


        {% for a in active %}

         

            {{ a.text }}


            {{ a.name }}


            {{ a.phone }}

         

         


         
            type="submit"

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

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

         

        {% endfor %}

     

   

---