Как создать систему управления общежитием с помощью Node.js?

В этой статье мы собираемся создать систему управления общежитием. Система управления общежитием используется для управления записью студентов колледжа, которому колледж предоставляет общежитие, где колледж может просматривать все данные о студентах, включая их имена, регистрационный номер, дату рождения, город, номер телефона, телефон отца. номер, номер комнаты и название общежития. Колледж может добавлять новых студентов, удалять записи о существующих студентах и изменять количество студентов в комнатах.

Функции: Колледж может выполнять следующие действия с помощью этой системы управления общежитием:

• Отображение записей учащегося
• Добавить новых студентов
• Удалить записи учащегося
• Получить конкретную информацию о студентах по их номеру
• Обновить номер комнаты студента

Подход: мы собираемся использовать Body Parser, с помощью которого мы можем фиксировать вводимые пользователем значения из формы, такие как имя студента, номер списка, дата рождения, город, номер телефона, номер телефона отца, номер комнаты, а также название общежития и магазин. их в коллекцию. Затем мы отправим данные студента на веб-страницу с помощью EJS. EJS — это промежуточное ПО, упрощающее отправку данных из файла вашего сервера (app.js или server.js) на веб-страницу.

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

Реализация: Ниже приведена пошаговая реализация описанного выше подхода.

Шаг 1: Настройка проекта

Инициализирует NPM: создайте и найдите папку проекта в терминале и введите команду

npm init -y

Он инициализирует наше приложение узла и создает файл package.json.

Установите зависимости: найдите корневой каталог проекта в терминале и введите команду

npm install express ejs body-parser

Чтобы установить Express, EJS и Body Parser в качестве зависимостей внутри вашего проекта

Создайте файл сервера: создайте файл «app.js», внутри этого файла укажите модуль Express и создайте постоянное «приложение» для создания экземпляра модуля Express, затем установите EJS в качестве механизма просмотра по умолчанию.

const express = require("express");
const app = express();
app.set("view engine", "ejs");

Переупорядочите свои каталоги: необходимо использовать «.ejs» в качестве расширения для файла HTML вместо «.html» для использования EJS внутри него. Затем вам нужно переместить каждый файл «.ejs» в каталоге представлений внутри вашего корневого каталога. EJS по умолчанию ищет файлы '.ejs' внутри папки представлений.

Используйте переменную EJS: Внутри вашего обновленного файла .ejs вы должны использовать переменные EJS для получения значений из файла вашего сервера. Вы можете объявлять переменные в EJS, например

<%= variableName %>

Отправка данных в переменную: внутри файла вашего сервера ( app.js или index.js ) вы можете отправить файл EJS вместе с некоторыми данными, используя метод рендеринга.

app.get("/", (req, res) => {
    res.render("home", { variableName: "Hello Geeks!" })
})

Извлечение данных из формы в app.js: чтобы получить входные значения формы, мы должны использовать пакет узлов с именем body-parser.

Установить парсер тела:

npm install body-parser

Требуется модуль body-parser:

const bodyParser = require("body-parser")

А потом:

app.use( bodyParser.json() );      
app.use(bodyParser.urlencoded({    
      extended: true
}));

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

Шаг 2: Получить записи учеников: у нас есть множество учеников с разными свойствами. Давайте отправим массив на нашу веб-страницу. На предыдущем шаге мы просто отправили значение переменной, теперь мы отправляем полный массив.

Поскольку у нас так много элементов внутри нашего массива, и мы должны распечатать каждый из них, поэтому мы должны использовать цикл For Each Loop, чтобы перебрать каждый отдельный элемент в нашей коллекции и отобразить детали.

Шаг 3: Добавьте учащихся в список. Для этого нам нужно создать форму и обработать данные формы в нашем файле app.js с помощью Body Parser.

<form action="/" method="post">
    <input type="text" placeholder="Name" name="name">
    <input type="text" placeholder="Roll No." name="rollNo">
    <input type="text" placeholder="DOB" name="dateOfBirth">
    <input type="text" placeholder="City" name="city">
    <input type="text" placeholder="Number" name="number">
    <input type="text" placeholder="Father"s Number" name="fatherNumber">
    <input type="text" placeholder="Room No." name="roomNo">
    <input type="text" placeholder="Hostel Name" name="hostelName">
    <button type="submit">Add</button>
</form>

Обработка данных формы внутри 'app.js': мы должны получить значения из формы, используя req.body.valueName, а затем упорядочить их как объект и поместить в массив нашего ученика.

app.post("/", (req, res) => {
   const name = req.body.name
   const rollNo = req.body.rollNo
   const dateOfBirth = req.body.dateOfBirth
   const city = req.body.city
   const number = req.body.number
   const fatherNumber = req.body.fatherNumber
   const roomNo = req.body.roomNo
   const hostelName = req.body.hostelName
   
   students.push({
       name: name,
       rollNo: rollNo,
       dateOfBirth: dateOfBirth,
       city: city,
       number: number,
       fatherNumber: fatherNumber,
       roomNo: roomNo,
       hostelName: hostelName
   })
   
   res.render("home", {
       data: students
   })
})

Шаг 4: Дополнительная информация: обновление веб-страницы с опцией «дополнительно» : нам нужно создать форму, которая отправляет номер студенческого списка, данные которого мы хотим получить из файла сервера «app.js».

<form action="/information" method="post">
    <input type="number" style="display: none;" 
        name="rollNo" value="<%= element.rollNo %>">
    <button type="submit">More Info.</button>
</form>

Для получения информации о студентах мы должны создать информационный маршрут, по которому мы собираемся получить номер списка запрошенного студента и найти элемент с таким же номером списка, а также отправить все данные об этом студенте на веб-страницу в формате JSON.

app.post("/information", (req, res) => {
    var requestedRollNo = req.body.rollNo;
   
    students.forEach(student => {
        if (student.rollNo == requestedRollNo) {
            res.json(student)
        }
    })
})

Шаг 5: Обновление номера комнаты: обновление веб-страницы с возможностью «обновления» : мы должны создать форму, которая отправляет номер списка учащегося, номер комнаты, который мы хотим обновить, и новый номер комнаты в файл сервера «app.js». .

<form action="/update" method="post">
    <input type="number" style="display: none;" 
        name="rollNo" value="<%= element.rollNo %>">   
    <input type="number" name="newroomno">   
    <button type="submit">Update</button>
</form>  

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

app.post("/update", (req, res) => {
    var requestedRollNo = req.body.rollNo;
    var newRoomNo = req.body.newroomno;
    
    students.forEach(student => {
        if (student.rollNo == requestedRollNo) {
            student.roomNo = newRoomNo;
        }
    })
    
    res.render("home", {
        data: students
    })
})

Шаг 6: Удалить запись: Обновление веб-страницы с возможностью удаления: Нам нужно создать форму, которая отправляет номер списка учащегося, который мы хотим удалить, в файл сервера «app.js».

<form action="/delete" method="post">
    <input type="number" style="display: none;" 
        name="rollNo" value="<%= element.rollNo %>">
    <button type="submit">Delete</button>
</form>

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

app.post("/delete", (req, res) => {
   var requestedRollNo = req.body.rollNo;
   var j = 0;
   students.forEach(students => {
       j = j + 1;
       if (students.rollNo === requestedRollNo) {
           students.splice((j - 1), 1)
       }
   })
   res.render("home", {
       data: students
   })
})

Полный код:

index.ejs