当前位置：极客教程 > Node.js > Node.js 精品文章 > Node.js 如何构建宿舍管理系统

Node.js 如何构建宿舍管理系统

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 模块，并创建一个常量 ‘app’ 用于创建 express 模块的实例，然后将 EJS 设置为默认的视图引擎。

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

重新排列您的目录： 使用”.ejs”作为HTML文件的扩展名，而不是使用EJS在其中使用”.html”。然后，您必须将视图目录中的每个”.ejs”文件移动到根目录中。EJS默认情况下在视图文件夹中查找”.ejs”文件。

使用EJS变量： 在更新的.ejs文件中，您必须使用EJS变量从服务器文件接收值。您可以在EJS中声明变量，如下所示：

<%= variableName %>

<!DOCTYPE html> 
<html> 
   
<head> 
    <title>Page Title</title> 
</head> 
   
<body> 
    <%= variableName %> 
</body> 
  
</html>

将数据发送到一个变量中： 在你的服务器文件（app.js 或 index.js）中，你可以使用 render 方法来发送一个 EJS 文件以及一些数据。

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

const express = require('express') 
const app = express() 
app.set('view engine', 'ejs') 
  
app.get("/", (req, res) => { 
     res.render("home", { variableName: "Hello Geeks!" }) 
}) 
  
app.listen(3000, (req, res) => { 
     console.log("App is running on port 3000") 
})

从表单提取数据到app.js： 要接收表单的输入值，我们必须使用一个名为body-parser的节点包。

安装body-parser：

npm install body-parser

使用 body-parser 模块：

const bodyParser = require('body-parser')

然后：

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

然后，我们可以使用请求对象处理表单数据。

步骤2：获取学生记录： 我们有一个具有不同属性的学生数组。让我们将数组发送到我们的网页。在上一步中，我们只是将一个值发送到变量，现在我们正在发送完整的数组。

const express = require('express') 
const bodyParser = require('body-parser') 
const students = [{ 
    name: "Aditya Gupta", 
    rollNo: 413020, 
    dataOFBirth: "29/09/2000", 
    city: "Mirzapur", 
    number: 6388339966, 
    fatherNumber: 6388339977, 
    roomNo: 23, 
    hostelName: "BH-2"
}] 
  
const app = express() 
  
app.set('view engine', 'ejs') 
  
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ 
    extended: true
})) 
  
app.get("/", function (req, res) { 
    res.render("home", { 
        data: students 
    }) 
}) 
  
app.listen(3000, (req, res) => { 
    console.log("App is running on port 3000") 
})

由于我们的数组中有很多元素，并且我们必须打印出每一个元素，所以我们必须使用foreach循环来遍历我们集合中的每一个元素并显示细节。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>LMS</title> 
  
    <style> 
        table { 
            font-family: arial, sans-serif; 
            border-collapse: collapse; 
            width: 100%; 
        } 
  
        td, 
        th { 
            border: 1px solid #dddddd; 
            text-align: left; 
            padding: 8px; 
        } 
  
        tr:nth-child(even) { 
            background-color: #dddddd; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>All Books</h1> 
    <table> 
        <tr> 
            <th>Name</th> 
            <th>Roll No.</th> 
            <th>Room No.</th> 
            <th>Hostel Name</th> 
        </tr> 
        <% data.forEach(element=> { %> 
            <tr> 
                <td> 
                    <%= element.name %> 
                </td> 
                <td> 
                    <%= element.rollNo %> 
                </td> 
                <td> 
                    <%= element.roomNo %> 
                </td> 
                <td> 
                    <%= element.hostelName %> 
                </td> 
            </tr> 
            <% }) %> 
    </table> 
</body> 
  
</html>

步骤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>

更新房间号码，我们需要创建一个更新路径，通过获取学生的Roll号码并搜索Roll号码对应的元素，将元素的房间号码属性更改为更新表单中的值。

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

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        table { 
            font-family: arial, sans-serif; 
            border-collapse: collapse; 
            width: 100%; 
        } 
  
        td, 
        th { 
            border: 1px solid #dddddd; 
            text-align: left; 
            padding: 8px; 
        } 
  
        tr:nth-child(even) { 
            background-color: #dddddd; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>All Students</h1> 
  
    <table> 
        <tr> 
            <th>Name</th> 
            <th>Roll No.</th> 
            <th>Room No.</th> 
            <th>Hostel Name</th> 
            <th>More Info.</th> 
            <th>Update Room No.</th> 
            <th>Delete</th> 
        </tr> 
        <% data.forEach(element=> { %> 
            <tr> 
                <td> 
                    <%= element.name %> 
                </td> 
                <td> 
                    <%= element.rollNo %> 
                </td> 
                <td> 
                    <%= element.roomNo %> 
                </td> 
                <td> 
                    <%= element.hostelName %> 
                </td> 
                <td> 
                    <form action="/information" method="post"> 
                        <input type="number" style="display: none;" 
                            name="rollNo" value="<%= element.rollNo %>"> 
                        <button type="submit">More Info.</button> 
                    </form> 
                </td> 
                <td> 
                    <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> 
                </td> 
                <td> 
                    <form action="/delete" method="post"> 
                        <input type="number" style="display: none;" 
                            name="rollNo" value="<%= element.rollNo %>"> 
                        <button type="submit">Delete</button> 
                    </form> 
                </td> 
            </tr> 
        <% }) %> 
    </table> 
  
    <h1>Add Student</h1> 
  
    <form action="/" method="post"> 
        <input type="text" placeholder="Name" name="name"> 
        <input type="number" placeholder="Roll No." name="rollNo"> 
        <input type="text" placeholder="DOB" name="dateOfBirth"> 
        <input type="text" placeholder="City" name="city"> 
        <input type="number" placeholder="Number" name="number"> 
        <input type="number" placeholder="Father's Number" 
            name="fatherNumber"> 
        <input type="number" placeholder="Room No." name="roomNo"> 
        <input type="text" placeholder="Hostel Name" name="hostelName"> 
        <button type="submit">Add</button> 
    </form> 
</body> 
  
</html>

app.js

const express = require('express') 
const bodyParser = require('body-parser') 
const students = [{ 
    name: "Aditya Gupta", 
    rollNo: 413020, 
    dateOfBirth: "29/09/2000", 
    city: "Mirzapur", 
    number: 6388339966, 
    fatherNumber: 6388339977, 
    roomNo: 23, 
    hostelName: "BH-2"
}] 
  
const app = express() 
  
app.set('view engine', 'ejs') 
  
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ 
    extended: true
})) 
  
app.get("/", function (req, res) { 
    res.render("home", { 
        data: students 
    }) 
}) 
  
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 
    }) 
}) 
  
app.post('/information', (req, res) => { 
    var requestedRollNo = req.body.rollNo; 
    students.forEach(student => { 
        if (student.rollNo == requestedRollNo) { 
            res.json(student) 
        } 
    }) 
}) 
  
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 
    }) 
}) 
  
app.post('/delete', (req, res) => { 
    var requestedRollNo = req.body.rollNo; 
    var j = 0; 
    students.forEach(student => { 
        j = j + 1; 
        if (student.rollNo === requestedRollNo) { 
            students.splice((j - 1), 1) 
        } 
    }) 
    res.render("home", { 
        data: students 
    }) 
}) 
  
app.listen(3000, (req, res) => { 
    console.log("App is running on port 3000") 
})

输出:

Node.js 如何构建宿舍管理系统

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

Node.js 精品教程