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") 
})