node.js+MongoDB数据库实现学生数据管理系统
项目创作背景
为了实现校园
学生信息的共享和数据的集中管理，节约时间成本提升工作效率，在原有数据的基础之上，利用Node.js和MongoDB之间的结合实现学生信息管理系统
项目整体预览
页面连接数据库并渲染数据，在页面上对数据进行增删改查的数据操作。
在表单控件中输入对应信息便可实现查询和新增数据的效果，同样表格每行都设置了修改和删除按钮，方便进行对应数据的修改。
项目代码具体剖析
搭建服务器
主要引入express模块和剖析出mongoDB模块内部的MongoClient和ObjectId，以便后续连接数据库并处理数据库文档。
js
// 导入模块
const express = require('express');
const fs = require('fs');
const path = require('path');
const cors = require('cors');
// 从 MongoDB 模块中结构出 MongoClient连接mongoDB数据库 和 ObjectId处理数据库的文档ID
const { MongoClient, ObjectId } = require('mongodb');
const app = express();
const port = 3000; // 设置端口号
// 配置静态文件，告诉 Express 服务器，将项目根目录下的 public 文件夹作为静态资源目录，客户端可以通过 URL 直接访问这个文件夹里的所有文件
app.use(express.static('public'));
app.listen(port, () => {
console.log(`http://localhost:${port}`);
});连接数据库
在以下代码中每一部分都使用了try...catch...语句捕获并处理代码块中的异常，以便能够迅速找出代码错误。
mongoDB数据库中的数据渲染了两个班级，以至于并没有对页面进行分页甚至是班级查询，并在后续通过.concat()方式将两个班级的数据合并。
js
// 连接 MongoDB
const uri = 'mongodb://localhost:27017';
// 创建MongoClient实例，连接到本地MongoDB服务器，提供与mongoDB服务器交互的增删改查
const client = new MongoClient(uri);
async function getCollections() {
try {
// 暂停函数的执行，直到连接成功或失败
// client.connect() 方法用于建立与 MongoDB 服务器的连接
await client.connect();
// console.log('数据库连接成功');
// 从数据库中获取两个集合，分别是 java1班 和 java2班
const java1Class = client.db('playground').collection('java1班');
const java2Class = client.db('playground').collection('java2班');
return { java1Class, java2Class }; // 返回两个集合的引用
} catch (error) {
console.error('数据库连接失败:', error);
throw error;
}
}增加和查询功能的效果实现
增加和查询功能是直接通过输入对话框点击按钮实现的效果，二者的逻辑大致没有什么差别。
以下便是查询操作实现的具体实例
- 前端实现
判断表单内部输入内容是否合法，并通过fetch的方式向后端发起请求。
js
const queryParams = {
grade: grade || undefined,
major: major || undefined,
counselor: counselor || undefined,
class: className || undefined,
name: name || undefined,
gender: gender || undefined,
active: active || undefined
};
// 检查 queryParams 对象中是否至少有一个属性值不为 undefined
const hasQueryParams = Object.values(queryParams).some(value => value !== undefined);
// 如果queryParams 对象都是undefined的话，那么页面弹出提示框
if (!hasQueryParams) {
alert('请输入至少一个查询条件');
return;
}
// 前端通过fetch()方法发起一个POST请求，将查询条件以JSON格式发送到服务器的/search接口
// 发起网络请求，返回promiase对象，会在请求的响应可用时被解决
fetch('/search', {
// 发送方式指定为POST
method: 'POST',
headers: { //设置HTTP请求头，可以为服务器传递额外的信息
'Content-Type': 'application/json' //application/json请求体的数据是JSON格式，服务器在接受到请求后，会根据请求头来正确解析请求体中的数据
},
body: JSON.stringify(queryParams) //将查询参数对象转换为JSON字符串发送
})
.then(response => { //处理promise对象被调用，response参数是服务器返回的响应对象
// response.ok 是一个布尔值，如果响应的状态码在 200 - 299 之间，它的值为 true，表示请求成功；否则为 false
if (!response.ok) {
// 响应状态码为false的话抛出错误，被catch捕获
throw new Error(`HTTP error! status: ${response.status}`);
}
// 响应状态码为true的话，调用response.json()方法，返回一个promise对象，解析为JSON格式的数据
// 属于异步，返回一个新的promise，结果作为下一个then方法参数
return response.json();
})
.then(data => { //处理服务器返回的查询结果数据，并在页面上更新表格和清空查询表单
console.log('查询结果:', data);
renderTable(data);
// 清空表单内容
document.getElementById('grade').value = '';
document.getElementById('major').value = '';
document.getElementById('counselor').value = '';
document.getElementById('class').value = '';
document.getElementById('name').value = '';
// 取消表单中已经选中的单选按钮
const genderChecked = document.querySelector('input[name="gender"]:checked');
if (genderChecked) {
genderChecked.checked = false;
}
const activeChecked = document.querySelector('input[name="active"]:checked');
if (activeChecked) {
activeChecked.checked = false;
}
})
.catch(error => { //处理promise对象被拒绝时抛出的异常
console.error('Error:', error);
});- 后端路由
用POST方式接受前端发过来的请求，注意前后端路由名称必须保持一致。通过for循环遍历查找表格渲染的数据做到精确匹配。
js
app.post('/search', async (req, res) => {
try {
const { java1Class, java2Class } = await getCollections();
// 将前端发送的查询参数赋值给 queryParams 变量，后续会根据这些参数构建数据库查询条件
const queryParams = req.body;
// console.log('查询条件:', queryParams);
// 构建查询条件
// 创建一个空对象，存储最终的数据库查询条件
const query = {};
// 遍历 queryParams 对象的每个键值对，将键值对添加到 query 对象中，作为数据库查询条件
for (const key in queryParams) {
// 如果属性值为真值，则将该属性及其值添加到 query 对象中，实现精确匹配查询
if (queryParams[key]) {
query[key] = queryParams[key]; // 使用精确匹配
}
}
const java1Students = await java1Class.find(query).toArray();
const java2Students = await java2Class.find(query).toArray();
// 合并两个班级的数据
const filteredStudents = java1Students.concat(java2Students);
// console.log('查询结果:', filteredStudents);
res.json(filteredStudents);
} catch (error) {
console.error('查询出错:', error);
res.status(500).json({ error: 'Internal Server Error' });
}
});删除和修改功能的效果实现
删除和修改功能处理逻辑与增加和查询功能的代码实现效果相似。
不过在删除和修改按钮之间需要找到所点击按钮的对应行，在没有渲染个人学号的状况下只能通过设置空数组来接受数据库传来的每个特定数据的_id值来找寻所在对应行，实现删除和修改的功能。
项目总结
实现学生信息管理系统，在该项目中实现数据渲染，创建增删改查四个功能。用四个字来总结就是"望闻问切"。
"望"是将数据库中的数据渲染出来，在页面中显示，呈现出学生的具体信息。
"闻"顾名思义就是查询功能啦，从数据库中获取学生信息，而用户根据不同的条件在进行查询，获取特定的学生信息。
"问"相当于是增加数据的过程，输入学生对应的各项信息，将新数据添加到数据库当中。
"切"即删除和修改，学生数据与事实不符，即可迅速对症下药，对数据进行调整。
以上便是我对于学生管理系统从提出到实现的全部过程。
感谢各位的观看！！！