Node.js + MangoDB数据库实现学生数据查询

318 阅读3分钟

Node.js + MangoDB数据库实现学生数据查询

项目创作背景

目前高校对于学生信息掌控力度不足,查找学生信息效率低下,从节约时间成本和提升工作效率的角度出发,搭建数据库,并且利用node.js创建服务器,利用前后端分离实现一个简易版本的学生数据查询效果。

项目实现整体效果

页面设置查询输入框,点击搜索按钮实现完整姓名、部分名字以及姓氏查询。

学生查询.gif

查询到的结果被渲染在页面上,便于快速了解学生信息,工作效率得以大大提高。

项目实现代码分析

数据库连接管理

数据库创建是借用MongoDB实现的,创建一个JS文件对MongoDB数据库进行封装,实现数据的插入、查询、更新以及删除功能。

const { MongoClient } = require('mongodb');

class DB {
    constructor(数据库名称 = "云上教室") {
        this.uri = "mongodb://127.0.0.1:27017/";
        this.client = new MongoClient(this.uri);
        this.db = this.client.db(数据库名称);
    }

    async 连接数据库() {
        try {
            await this.client.connect();
            console.log('已连接到 MongoDB');
            return this.db;
        } catch (error) {
            console.error('连接到 MongoDB 时出错:', error);
            throw error;
        }
    }

    async 关闭连接() {
        try {
            await this.client.close();
            console.log('已断开与 MongoDB 的连接');
        } catch (error) {
            console.error('断开与 MongoDB 的连接时出错:', error);
            throw error;
        }
    }
}

创建一个查询数据的异步方法,将查询到的数据通过.toArray()转换成数组,便于查询到的数据在页面上显示。

async 查询数据(集合名称, 查询条件 = {}, 选项 = {}) {
        try {
            const collection = this.db.collection(集合名称);
            const cursor = collection.find(查询条件, 选项);
            return await cursor.toArray();
        } catch (error) {
            console.error('查询数据时出错:', error);
            throw error;
        }
    }

插入、更新以及删除功能与查询的方法类似,均可以通过这种异步操作对数据库进行功能实现。

express搭建服务器实现数据库与后端的连接

导入已经创建好的数据库连接

根据文件路径,导入已经搭建好的数据库

屏幕截图 2025-05-02 161909.png

const DB = require('./DB0422.js');
const 芒果 = new DB(`学校`);

注意文件的跨域资源请求的问题,通过npm install cors下载cors模块,并设置代码防止跨域请求失败。

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
});

同样为了加载静态页面资源,也可利用.static方式托管上层目录中的"前端"文件夹为静态资源

image.png

前后端创建数据接口

后端创建/api/findAll路由接口,利用动态的正则表达式实现搜索内容的模糊渲染

let regex = new RegExp(`^${stu_name}`);
    let data = await 芒果.db.collection('23级').aggregate([
        { $unwind: "$stu_data" },
        { $match: { "stu_data.stu_name": { $regex: regex } } },
        { $project: {
            class_name: 1,
            stu_name: "$stu_data.stu_name",
            stu_id: "$stu_data.stu_id",
            gender: "$stu_data.gender"
          }
        }
    ]).toArray();

前端接收后端创建的路由接口,在前端调用。

image.png

在JS部分运用for循环遍历查询数据,并且利用innerHTML将查询到的数据显示在页面上。

项目总结

项目主要通过MongoDB数据库和Node.js实现学生数据查询效果,不仅节约了时间成本,而且还能迅速掌握学生动向,一个简易的学生数据查询系统就此但诞生了。