Node.js学生管理系统（Express+MongoDB）

这次的案例，数据持久化，用的MongoDB

如果想看用其他数据持久化案例（如MySQL数据库），可以点击  Node学生管理案例 

---

目录

一、完成功能：实现对“学生信息”的增删改查。并且实现了数据持久化。

数据库为MongoDB。

二、使用到的技术：基于Express框架和art-template模板引擎，并且将路由模块分离出来，更利于开发和维护

三、编写代码

1.首先初始化项目（package.json）

2.安装要用到的包

3.编写核心模块app.js

4.路由模块router.js

         5.封装MongoDB对学生处理模块student.js

6.视图

      1.index.html

      2.new.html

四、页面展示：

1.首页  http://localhost:8888/students

2.搜索

3.编辑 

4.添加

五、源码下载

---

一、完成功能：实现对“学生信息”的增删改查。并且实现了数据持久化。

数据库为MongoDB。

二、使用到的技术：基于Express框架和art-template模板引擎，并且将路由模块分离出来，更利于开发和维护

"art-template": "^4.12.2",

"body-parser": "^1.18.3",

"bootstrap": "^4.1.3",

"express": "^4.16.3",

"express-art-template": "^1.0.1",

"mongoose": "^5.2.7"

由于MongoDB官方提供的API比较繁琐，所以这里使用一个第三方包（mongoose），其对官方的API进行了二次封装，非常方便。 

三、编写代码

1.首先初始化项目（package.json）

npm init -y

2.安装要用到的包

# Express框架

npm i -S express


# 模板引擎

npm i -S art-template


# 模板引擎与Express的关联包

npm i -S express-art-template


# post请求解析工具

npm i -S body-parser

# mongoose第三方包
npm i -S mongoose

 

3.编写核心模块app.js

/**
 * app.js 入门模块
 * 职责：
 *   创建服务
 *   做一些服务相关配置
 *     模板引擎
 *     body-parser 解析表单 post 请求体
 *     提供静态资源服务
 *   挂载路由
 *   监听端口启动服务
 */

var express = require('express');
var router = require('./router');
var bodyParser = require('body-parser');

var app = express();

app.use('/node_modules/',express.static('./node_modules/'));
app.use('/public',express.static('./public/'));

// 配置模板引擎和 body-parser 一定要在 app.use(router) 挂载路由之前
// parse application/x-www-form-urlencoded
app.engine('html',require('express-art-template'));
app.use(bodyParser.urlencoded({extended:false}));
// parse application/json
app.use(bodyParser.json());

//挂载路由到app服务中
app.use(router);

app.listen(8888,function () {
    console.log('running  8888 ....')
})

4.路由模块router.js

/**
 * router.js 路由模块
 * 职责：
 *   处理路由
 *   根据不同的请求方法+请求路径设置具体的请求处理函数
 * 模块职责要单一，不要乱写
 * 我们划分模块的目的就是为了增强项目代码的可维护性
 * 提升开发效率
 */

var fs = require('fs');
var Student = require('./student');


// Express 提供了一种更好的方式
// 专门用来包装路由的

var express = require('express');

// 1、创建一个路由容器
var router = express.Router();

//2.把路由挂载到router路由中

/*
渲染学生列表界面
 */
router.get('/students', function (req, res) {
    if (req.query.name != null && req.query.name != undefined && req.query.name != '') {
        Student.findOne({name : req.query.name.replace(/"/g, '')}, function (err, student) {
            if (err) {
                return res.status(500).send('Server error');
            }
            if (student == undefined) {
                res.render('index.html', {
                    count: 0,
                    student: student
                })
            } else {
                res.render('index.html', {
                    count: 1,
                    student: student
                })
            }
        })
    } else {
        Student.find(function (err, students) {
            if (err) {
                return res.status(500).send('Server error');
            }
            if (students.length >= 3) {
                var top = [
                    students[0],
                    students[1],
                    students[2],
                ]
            }
            res.render('index.html', {
                top: top,
                students: students
            })
        })
    }
})
/**
 * 渲染添加学生的页面
 */
router.get('/students/new', function (req, res) {
    res.render('new.html');
});

/*
 * 处理添加学生
 */
router.post('/students/new', function (req, res) {
    new Student(req.body).save(function (err) {
        if (err) {
            return res.status(500).send('Server error');
        }
        res.redirect('/students')
    })
})
/*
 * 渲染编辑学生页面
 */
router.get('/students/edit', function (req, res) {
    // 1. 在客户端的列表页中处理链接问题（需要有 id 参数）
    // 2. 获取要编辑的学生 id
    //
    // 3. 渲染编辑页面
    //    根据 id 把学生信息查出来
    //    使用模板引擎渲染页面

    Student.findById(req.query.id.replace(/"/g, ''), function (err, student) {
        if (err) {
            console.log(err)
            return res.status(500).send('Server error.');
        }
        res.render('edit.html', {
            student: student
        })
    })
})

/*
 * 处理编辑学生
 */
router.post('/students/edit', function (req, res) {
    // 1. 获取表单数据
    //    req.body
    // 2. 更新
    //    Student.updateById()
    // 3. 发送响应
    var id = req.body.id.replace(/"/g, '')
    Student.findByIdAndUpdate(id, req.body, function (err) {
        if (err) {
            return res.status(500).send('Server error.')
        }
        res.redirect('/students')
    })
})

/*
 * 处理删除学生
 */
router.get('/students/delete', function (req, res) {
    // 1. 获取要删除的 id
    // 2. 根据 id 执行删除操作
    // 3. 根据操作结果发送响应数据
    var id = req.query.id.replace(/"/g, '')
    Student.findByIdAndRemove(id, function (err) {
        if (err) {
            return res.status(500).send('Server error.')
        }
        res.redirect('/students')
    })
})

// 3. 把 router 导出
module.exports = router;

 5.封装MongoDB对学生处理模块student.js

var mongoose =require('mongoose');

//建立数据库链接
mongoose.connect('mongodb://localhost:27017/NodeStudent',{userMongoClient:true});

var Schema = mongoose.Schema

//新建约束
var studentSchema = new Schema({
    name:{
        type:String,
        require:true
    },
    gender:{
        type:Number,
        enum:[0,1],
        default:0
    },
    age:{
        type:Number
    },
    hobbies:{
        type:String
    }
})
//导出模板构造函数
module.exports = mongoose.model('Student',studentSchema);

6.视图

1.index.html

    
    
    
    
    
    
    
    
    
    
    
    




    

        学生管理系统
    
    

    
    

        
Top3
        

            {{ each top }}
            

                
                
{{ $value.name }}
                {{ $value.hobbies }}
            
            {{ /each }}
        
        
学生列表
        

            

                搜索:
                
            
            

                搜索
                添加学生
            
        
        

            
                {{if count == 0}}
                
                {{else if count == 1}}
                
                    {{if index == null}}
                    
                    {{else}}
                    
                    {{/if}}
                    
                    {{if student.gender==0 }}
                    
                    {{else}}
                    
                    {{/if}}
                    
                {{else}}

                {{each students}}
                
                    {{if $value.gender==0 }}
                    
                    {{else}}
                    
                    {{/if}}
                    
                {{ /each }}

                {{/if}}


                

                

                

                    
#
                    
姓名
                    
性别
                    
年龄
                    
爱好
                    
操作
                
                
                


                
                

                    未找到该姓名,请重新查询!
                
                
1
{{ $index +1 }}
{{ student.name }}
男
女
 {{ student.age }}
                    
{{ student.hobbies }}
                    

                        编辑
                        删除
                    
                

                    
{{ $index +1 }}
                    
{{ $value.name }}
男
女
 {{ $value.age }}
                    
{{ $value.hobbies }}
                    

                        编辑
                        删除
                    
                
            
        
    

2.new.html

    
    
    
    
    
    
    
    
    
    
    
    




    

        学生管理系统
    


    

        

            
添加学生
            

                

                    姓名
                    
                
                

                    性别
                    

                        
                             男
                        
                        
                             女
                        
                    
                
                

                    年龄
                    
                
                

                    爱好
                    
                
                

                    

                        提交
                    
                    

                    
                    


                        
                            取消
                        
                    
                
            

        
    

四、页面展示：

1.首页  http://localhost:8888/students

 

2.搜索

 

3.编辑 

4.添加

 

五、源码下载

https://gitee.com/litong-zero/Student-Express-MongoDB