Node.js express 轻松实现 CRUD 学生信息管理系统
2023-09-04 03:26:05
Node.js Express CRUD 学生信息管理系统
大家好，我是 Pubdreamcc。今天，我们将使用 Node.js 和 Express 框架构建一个基本的 CRUD（Create、Read、Update、Delete）学生信息管理系统。我们将学习如何使用 Express 路由来处理 HTTP 请求，如何使用 MongoDB 来存储和管理学生数据，以及如何使用 Pug 模板引擎来渲染 HTML 视图。
先决条件
在开始之前，您需要确保您已经安装了以下软件：
- Node.js
- Express
- MongoDB
- Pug
如果您还没有安装这些软件，请参考以下链接获取安装说明：
项目结构
我们的项目将由以下文件和文件夹组成：
app.js：Express 应用程序的主文件。index.pug：主页的 Pug 模板文件。students.js：处理学生数据的路由文件。db.js：连接到 MongoDB 数据库的文件。public文件夹：包含静态文件（如 CSS、JavaScript 和图像）。views文件夹：包含 Pug 模板文件。
创建 Express 应用程序
首先，我们需要创建一个新的 Express 应用程序。为此，请在终端中运行以下命令：
npm init -y
这将创建一个名为 package.json 的文件，其中包含有关您的应用程序的基本信息。
接下来，我们需要安装 Express 和 Pug：
npm install express pug --save
这将在您的 package.json 文件中添加对 Express 和 Pug 的依赖项。
现在，我们可以创建一个新的 Express 应用程序了：
const express = require('express');
const app = express();
app.set('view engine', 'pug');
app.set('views', './views');
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.listen(3000, () => {
console.log('Server listening on port 3000');
});
此代码创建了一个新的 Express 应用程序并将其配置为使用 Pug 作为模板引擎。它还配置了应用程序以使用 Express 内置的 JSON 解析器和 URL 编码解析器中间件。最后，它将应用程序设置为在端口 3000 上侦听请求。
连接到 MongoDB 数据库
接下来，我们需要连接到 MongoDB 数据库。为此，我们需要安装 MongoDB 驱动程序：
npm install mongodb --save
这将在您的 package.json 文件中添加对 MongoDB 驱动程序的依赖项。
现在，我们可以连接到 MongoDB 数据库了：
const MongoClient = require('mongodb').MongoClient;
const mongoClient = new MongoClient('mongodb://localhost:27017', { useNewUrlParser: true, useUnifiedTopology: true });
mongoClient.connect((err, client) => {
if (err) {
console.error('Error connecting to MongoDB:', err);
return;
}
const db = client.db('student-management-system');
app.locals.db = db;
});
此代码连接到本地 MongoDB 数据库并将其存储在 app.locals.db 中。
创建学生模型
接下来，我们需要创建一个学生模型来存储学生数据。为此，请在 models 文件夹中创建一个名为 Student.js 的文件，并添加以下代码：
const mongoose = require('mongoose');
const studentSchema = new mongoose.Schema({
name: {
type: String,
required: true
},
email: {
type: String,
required: true
},
phone: {
type: String,
required: true
}
});
const Student = mongoose.model('Student', studentSchema);
module.exports = Student;
此代码创建了一个新的学生模型，其中包含学生姓名、电子邮件和电话号码三个字段。
创建学生路由
接下来，我们需要创建学生路由来处理与学生数据相关的请求。为此，请在 routes 文件夹中创建一个名为 students.js 的文件，并添加以下代码：
const express = require('express');
const Student = require('../models/Student');
const router = express.Router();
// Create a new student
router.post('/students', async (req, res) => {
const student = new Student(req.body);
try {
await student.save();
res.status(201).send(student);
} catch (err) {
res.status(500).send(err);
}
});
// Get all students
router.get('/students', async (req, res) => {
try {
const students = await Student.find();
res.status(200).send(students);
} catch (err) {
res.status(500).send(err);
}
});
// Get a single student by id
router.get('/students/:id', async (req, res) => {
try {
const student = await Student.findById(req.params.id);
if (!student) {
return res.status(404).send();
}
res.status(200).send(student);
} catch (err) {
res.status(500).send(err);
}
});
// Update a student by id
router.put('/students/:id', async (req, res) => {
try {
const student = await Student.findByIdAndUpdate(req.params.id, req.body, { new: true });
if (!student) {
return res.status(404).send();
}
res.status(200).send(student);
} catch (err) {
res.status(500).send(err);
}
});
// Delete a student by id
router.delete('/students/:id', async (req, res) => {
try {
const student = await Student.findByIdAndDelete(req.params.id);
if (!student) {
return res.status(404).send();
}
res.status(200).send(student);
} catch (err) {
res.status(500).send(err);
}
});
module.exports = router;
此代码创建了一个新的 Express 路由器，其中包含五个路由：
POST /students：创建新的学生。GET /students：获取所有学生。GET /students/:id：获取单个学生。PUT /students/:id：更新单个学生。DELETE /students/:id：删除单个学生。
创建主页
最后，我们需要创建一个主页来显示所有学生。为此，请在 views 文件夹中创建一个名为 index.pug 的文件，并添加以下代码：
extends layout
block content
h1 Students
ul
each student in students
li
a(href=`/students/${student._id}`) #{student.name}
此代码创建了一个新的 Pug 模板，其中包含一个 <h1> 标题和一个 `
