express框架+mongodb简易学生管理

最新推荐文章于 2024-06-28 13:32:33 发布

明天——

最新推荐文章于 2024-06-28 13:32:33 发布

阅读量2.9k

点赞数 2

分类专栏： node.js 文章标签： mongodb node.js html http

本文链接：https://blog.csdn.net/weixin_43741547/article/details/111939553

版权

node.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、先创建数据库，再创建集合，用到了数据库图形界面Robo 3T，数据集合如下所示：

在这里插入图片描述

2、安装express脚手架

	npm i express-generator -g  //在终端中输入

3、创建项目

	express stuSystem //执行完成之后根据提示执行以下内容：
	cd stuSystem   //进入stuSystem这个目录
	npm install   //安装相关的依赖包
	npm start     //服务器运行开始

4、在浏览器中输入http://localhost:3000/，结果如下：

在这里插入图片描述

5、进行完第4步，就搭建好了项目，项目的目录结构如下：

	- app.js：入口文件
	- bin：二进制目录
	- node_modules：依赖包
	- package.json：依赖包的记录文件
	- public：静态目录
	- routes：路由
	- views：页面模板

6、现在开始创建学生管理系统相关的文件：

在public文件夹下创建一个index.html文件（public是专门用来管理静态资源的，在public下创建index.html，express就会自动访问到它），服务器一启动就运行。
在routes路由这个文件夹建stu.js文件，用于接收前端ajax请求，以及返回响应数据
修改app.js文件的有关内容（app.js文件是生成项目就有的）

	var stuRouter = require('./routes/stu');//在路由这个文件夹下面创建了stu.js文件，在这里通过require()引入这个文件，定义一个stuRouter变量来得到
	app.use('/stu', stuRouter); //注册中间件stuRouter

在目录中创建Service文件夹，创建stuService.js文件
在目录中创建Dao文件夹，创建stuDao.js文件、db.js文件以及Model文件夹，再在Model下创建stuModel.js文件

整体文件如下：
在这里插入图片描述

7、上面介绍了项目大体的文件，接下来是具体的内容，具体的内容涉及到两个知识点：

Restful（表现层状态转移）

Restful就是规范url，url本身就是标志资源的，不应该标志这个资源要做什么，例如下面两条url都是标志删除资源的操作

  http://abc.com/?method=comment.del&id=XXX
  http://abc.com/comment/del/xxx

所以应该使用 http不同的请求方式来表达要对一个资源做什么事情：

  - 新增：【POST】http://abc.com/comment
  - 查询：【GET】http://abc.com/comment/x
  - 删除：【DELETE】http://abc.com/comment/x
  - 修改：【PUT】http://abc.com/comment/x

三层架构
- 表示层： 主要对用户的请求接受，以及数据的返回，为客户端提供应用程序的访问。
- 业务逻辑层： 主要负责对数据层的操作。也就是说把一些数据层的操作进行组合。
- 数据访问层： 主要看数据层里面有没有包含逻辑处理，实际上它的各个函数主要完成各个对数据文件的操作。而不必管其他操作。
- 具体的实现就是目录表中对应的文件夹：
```
  - routes：表现层
  - service：业务层
  - dao：持久层
```

8、具体文件内容：

index.html

//这是html部分
	<div class="container">
        <h1>学生管理系统</h1>
        <form>
            <!-- 姓名 -->
            <div>
                <label for="name">姓名：</label>
                <input type="text" name="name" id="name">
            </div>
            <!-- 年龄 -->
            <div>
                <label for="age">年龄：</label>
                <input type="text" name="age" id="age">
            </div>
            <!-- 性别 -->
            <div>
                <label for="gender">性别：</label>
                <input type="radio" name="gender" value="男" id="male" checked>男
                <input type="radio" name="gender" value="女" id="female">女
            </div>
            <!-- 分数 -->
            <div>
                <label for="score">分数：</label>
                <input type="text" name="score" id="score">
            </div>
            <!-- 提交、重置 -->
            <div class="btn">
                <input type="button" value="提交" class="submitBtn">
                <input type="reset" value="重置" class="reset">
            </div>
        </form>

        <h2>学生信息表</h2>
        <table></table>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

//javascript部分
	<script>
        let id =0;
        // 渲染表格的render函数
        function render(arr) {
            $('table').html('');
            let tHead = `
                <tr>
                    <th>学生姓名</th>
                    <th>学生年龄</th>
                    <th>学生性别</th>
                    <th>学生分数</th>
                    <th>操作</th>
                </tr>
            `;

            let tBody = arr.map(item => {
                return `
                    <tr>
                        <td>${item.name}</td>
                        <td>${item.age}</td>
                        <td>${item.gender}</td>
                        <td>${item.score}</td>
                        <td> 
                            <button class="editBtn" data-id=${item._id}>修改</button>
                            <button class="delBtn" data-id=${item._id}>删除</button>
                        </td>
                    </tr>
                `
            }).join('');
            $("table").html(tHead + tBody);
        }

        // 发送请求到后端得到数据库数据
        const stuInfo = function () {
            $.ajax({
                url: '/stu',
                type: 'GET',
                success: function (data) {
                    render(data);
                }
            })
        };
        stuInfo();

        // submit按钮绑定点击事件，（既是提交也是修改）
        $(".submitBtn").on('click', function () {
            let data = $("form").serializeArray();
            if (data.every(item => {
                    return item.value !== ''
                })) {
                // 根据提交按钮的文字来判定用户是做新增还是修改
                if ($(".submitBtn").val() === '提交') {
                    // 新增操作
                    $.ajax({
                        url: '/stu',
                        type: 'POST',
                        data: $('form').serialize(),
                        success: function (data) {
                            $('form')[0].reset();
                            stuInfo();
                        }
                    })
                } else {
                    // 修改操作
                    $.ajax({
                        url: '/stu',
                        type: 'PUT',
                        data: {
                            id,
                            info: $('form').serialize()},
                        success: function (data) {
                            $('form')[0].reset();
                            $('.submitBtn').val('提交');
                            stuInfo();
                        }
                    })
                }
            } else {
                window.alert("不能为空！！！！")
            }
        })

        // 获取一个学生信息
        const oneStuInfo=async function(id){
            return new Promise((resolve,reject)=>{
                $.ajax({
                    url:'/stu/findOneStu',
                    type:'GET',
                    data:{id},
                    success:function(data){
                        resolve(data);
                    }
                })
            })
        }

        // 删除（事件委托）
        $('table').on('click','.delBtn',async function(e){
            let data=await oneStuInfo(e.target.dataset.id);
            if(window.confirm(`你确定要删除此学生吗？
                学生姓名：${data[0].name}
                学生年龄：${data[0].age}
                学生性别：${data[0].gender}
                学生分数：${data[0].score}
            `)){
                $.ajax({
                    url:'/stu',
                    type:'DELETE',
                    data:{id:e.target.dataset.id},
                    success:function(){
                        stuInfo();
                    }
                });
            }
        });

        //修改（事件委托）
        $('table').on("click",".editBtn",async function(e){
            let data=await oneStuInfo(e.target.dataset.id);
            id=e.target.dataset.id;
            // 将数据进行回填
            $('#name').val(data[0].name); 
            $('#age').val(data[0].age); 
            if(data[0].gender==='男'){
                $('#male').prop('checked',true);
            }else{
                $('#female').prop('checked',true);
            }
            $('#score').val(data[0].score); 
            $('.submitBtn').val("修改");
        })
    </script>

stu.js

// 表现层
//在这里就用到了Restful（表现层状态转移）
var express = require('express');
var router = express.Router();

const {findStuService,addStuService,findOneStuService,delStuService,editStuService} = require('../Service/stuService');

router.get('/', async function (req, res, next) {
  res.send(await findStuService());
});

// 增加学生
router.post('/', async function (req, res, next) {
  res.send(await addStuService(req.body));
});


// 获取一个学生信息
router.get('/findOneStu', async function (req, res, next) {
  res.send(await findOneStuService(req.query.id));
});

// 删除学生信息
router.delete('/', async function (req, res, next) {
  res.send(await delStuService(req.body.id));
});

// 修改学生信息
router.put('/', async function (req, res, next) {
  console.log(req.body);
  res.send(await editStuService(req.body));
});

module.exports = router;

stuService.js

// 这一层就是业务层
const urlencode = require('urlencode');
const {findStuDao,addStuDao,findOneStuDao,delStuDao,editStuDao} = require('../Dao/stuDao');
// 查找所有进行渲染表格
module.exports.findStuService = async function(){
    console.log(findStuDao,'func')
    return await findStuDao()
}

// 增加学生
module.exports.addStuService = async function(newStu){
    return await addStuDao(newStu)
}

// 获取一个学生信息
module.exports.findOneStuService = async function(id){
    return await findOneStuDao(id);
}

// 删除学生信息
module.exports.delStuService = async function(id){
    return await delStuDao(id);
}


// 修改学生信息
module.exports.editStuService = async function(stu){
    // 'name=%E5%90%8E%E5%A4%A9&age=44&gender=%E7%94%B7&score=34'
    let stuInfo=urlencode.decode(stu.info).split('&').map(item=>{
        return item.split('=');
    });
    let data={};
    for(let i of stuInfo){
        data[i[0]]=i[1];  //键=值
    }
    data.id=stu.id;
    return await editStuDao(data);
}

stuDao.js

//持久层
const stuModel = require('./Model/stuModel');
// 查找所有进行渲染表格
module.exports.findStuDao = async function () {
    return await stuModel.find();
}

// 增加学生
module.exports.addStuDao = async function (newStu) {
    console.log(newStu);
    return await stuModel.create(newStu);
}

// 获取一个学生信息
module.exports.findOneStuDao = async function (id) {
    return await stuModel.find({_id : id});
}

// 删除学生信息
module.exports.delStuDao = async function (id) {
    return await stuModel.deleteOne({_id : id}); 
}

// 修改学生信息
module.exports.editStuDao = async function(stu){
    // {"name":"xiejie"},{"name" : "谢杰"}
    console.log(stu);
    return await stuModel.updateOne({_id : stu.id},stu);
}

stuModel.js

// stuModel.js是数据模型文件
require('../db.js')
const mongoose = require('mongoose');

// 1. 创建 Schema，Schema 就是我们数据模型的骨架
// 在创建 Schema，就需要和集合（表）进行对应
const stuSchema = new mongoose.Schema({
    name: String,
    age: Number,
    gender: String,
    score:Number
},{versionKey:false});

// 2. 根据上面创建的 Schema 来生成数据模型
// (1) model 的名字 （2）定义的 Schema （3）和数据库的哪个集合关联
mongoose.model('stuModel', stuSchema, 'student');//相对应的集合

// 3. 将这个模型导出去，后面所有的操作（增删改查）都是基于这个模型
module.exports = mongoose.model('stuModel');

db.js

// 这个文件负责书写连接数据库的相关配置
const mongoose = require('mongoose');
const dbURI = 'mongodb://localhost/students'; // 配置要连接的数据库

mongoose.connect(dbURI,{useNewUrlParser : true, useUnifiedTopology : true});

mongoose.connection.on('connected',()=>{
    console.log('数据库已经连接...');
})

9、最后效果如下：

在这里插入图片描述

明天——

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
5
评论
express框架+mongodb简易学生管理

1、先创建数据库，再创建集合，用到了数据库图形界面Robo 3T，数据集合如下所示：2、安装express脚手架 npm i express-generator -g //在终端中输入3、创建项目 express stuSystem //执行完成之后根据提示执行以下内容： cd stuSystem //进入stuSystem这个目录 npm install //安装相关的依赖包 npm start //服务器运行开始4、在浏览器中输入http://localhost:
复制链接

扫一扫