基于Express+mongoose搭建的学生管理系统

上一周学了下mongoose，虽然学了点皮毛，但还是想写写总结总结，这也是我的第一篇技术博客。还是蛮开心的，happy~~来，切入正题！项目源码我会放在github上。 github 地址

代码目录

有些东西可根据自己喜好设置，并非必须。

创建并初始化目录

$ mkdir student_manage$ cd student_manage$ npm init

第三方模块安装

1. Express

1.1　Express 基于 Node.js 平台，快速、开放、极简的 web 开发框架。
　Express 4.x API 中文手册　安装如下：

$ npm install express --save

1.2　body-parser用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文件的上传处理。安装如下：

$ npm install body-parser --save

2. mongoose

2.1　　mongoose是在node.js异步环境下对mongodb进行便捷操作的对象模型工具。
mongoose文档　安装如下：

$ npm install mongoose --save

开始写代码咯~~

当然在项目开始前要确定电脑是否安装mongoDB　

mongoDB下载地址　
mongoDB图形化界面robomongo

下载好具体怎么配置还请问度娘或Google吧，本文不做介绍了哈。注意：安装完mongoDB的时候进行项目时要把lib目录下的mongod服务器打开哈~~

先展示下最终实现的项目效果，以防大家心里有数。

首页

添加页

修改页

前台具体代码就不列出来，比较简单，为了节约时间，就使用bootstrap进行快速生成，当然大家可以进行美化。

核心代码(敲黑板~~~)

1. mydb.js 对数据库进行连接

    //引入mongoose模块var mongoose=require('mongoose')//数据库连接地址  链接到myStudent数据库var DB_URL='mongodb://localhost:27017/myStudent'//数据库连接mongoose.connect(DB_URL)//连接成功终端显示消息mongoose.connection.on('connected',function () {    console.log('mongoose connection open to '+DB_URL)})//连接失败终端显示消息mongoose.connection.on('error',function () {    console.log('mongoose error ')})//连接断开终端显示消息mongoose.connection.on('disconnected',function () {    console.log('mongoose disconnected')})//创建一个Schema  每一个schema会一一对应mongo中的collectionvar schema=mongoose.Schema//实例化一个Schemavar studentSchema=new schema(    {        //设置studentSchema信息的数据格式        name:{type:String},        sex:{type:String},        age:{type:Number},        phone:{type:String},        email:{type:String},        other:{type:String},    },    //{versionKey: false}是干嘛用？如果不加这个设置，我们通过mongoose第一次创建某个集合时，    // 它会给这个集合设定一个versionKey属性值，我们不需要，所以不让它显示    {        versionKey:false    })//生成一个具体student的model并导出//第一个参数是集合名，在数据库中会自动加s//把Model名字字母全部变小写和在后面加复数svar student=mongoose.model('student',studentSchema)//将Student的model导出module.exports=student

里面的代码我已逐条进行注释。有几个要说明的地方：1.可能大家看到Schema的时候有一点懵，不过他理解起来挺简单的就像关系型数据库里面的表。定义可以这么讲：schema是mongoose里会用到的一种数据模式，可以理解为表结构的定义；每个schema会映射到mongodb中的一个collection，它不具备操作数据库的能力。2.生成一个student的model的时候，如果myStudent数据库里面没有student(第一个参数的值)集合的话，系统会自动创建一个students的collection，注意在student后面加了s。

1. app.js

//导入express模块var expres=require('express')var bodyParser=require('body-parser')//导入之前写的mydb.jsvar student=require('./mydb')//调用函数， express实例化var app=expres()app.use(bodyParser.urlencoded({extended:false}))app.use(bodyParser.json())//处理静态目录app.use(expres.static('www'))// 允许跨域访问／／／app.all('/api/*', function (req, res, next) {    res.header('Access-Control-Allow-Origin', '*')    res.header('Access-Control-Allow-Headers', 'x-Request-with')    res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')    res.header('X-Powered-By', '4.15.2')    res.header('Content-Type', 'application/json;charset=utf-8')    next()   //执行下一个中间件。})//首页展示获取数据app.post('/index',function (req,res) {    //mongoose 数据查找    student.find({}).exec(function (error,data) {        if (error){            console.log('数据获取失败'+error)        }        else{            res.json({                status:'y',                message:'查询成功',                //传递返回的数据                data:data            })        }    })})//修改页面 获取数据app.post('/modify',function (req,res) {    //mongoose根据条件进行查找    student.find({_id: req.body.id}).exec(function (error,data) {        console.log('2')        if (error){            console.log('数据获取失败'+error)        }        else{            console.log(data)            res.json({                status:'y',                message:'查询成功',                data:data            })            console.log(4)        }    })})//修改提交修改数据库app.post('/modifyStu',function (req,res) {    console.log('1')    console.log(req.body)    //查询的条件    var whereStr={_id:req.body.id}    //更新的内容    var updateStr={        $set:{            name:req.body.name,            sex:req.body.sex,            age: req.body.age,            phone:req.body.phone,            email:req.body.email,            other:req.body.other,        }    }    //对数据库进行更新    student.update(whereStr,updateStr,function (error) {        if (error){            console.log('数据修改失败:'+error)            res.json({                status:'y',                message:'修改失败',                data:req.body            })        }        else{            console.log('数据修改成功')            res.json({                status:'y',                message:'修改成功',                data:req.body            })        }    })})//删除数据库其中的项app.post('/del',function (req,res) {    //mongoose根据指定条件进行删除    student.remove({_id: req.body.id},function(error){        if (error){            console.log('数据获取失败'+error)            res.json({                status:'y',                message:'删除不成功',            })        }        else{            res.json({                status:'y',                message:'删除成功',            })        }    })})//导航栏search操作app.post('/findName',function (req,res) {    console.log(req.body.searchName)    student.find({name: req.body.searchName}).exec(function (error,data) {        if (error){            console.log('查询失败'+error)            res.json({                status:'y',                message:'查询失败',            })        }        else{            res.json({                status:'y',                message:'查询成功',                data:data            })        }    })})//添加数据库操作app.post('/addStu',function (req,res) {    console.log(req.body)    //实例化一个student    var newStu=new student({        name:req.body.name,        sex:req.body.sex,        age:req.body.age,        phone:req.body.phone,        email:req.body.email,        other:req.body.other,    })    //对实例化的内容进行保存    newStu.save(function (error) {        if (error){            console.log('数据添加失败:'+error)            res.json({                status:'y',                message:'添加失败',                data:req.body            })        }        else {            console.log('数据添加成功')            res.json({                status:'y',                message:'添加成功',                data:req.body            })        }    })})//服务器监听端口app.listen(3000,()=>{    console.log('node is ok')})

到处服务器搭建完成，接下来就是对各个js代码进行操作，ajax获取表单数据请求服务器，ajax获取地址栏请求服务器等等。然后ajax在接收到服务器返回的数据，对此进行渲染到前台页面，此项目我用的是 artTemplate 进行模板渲染。

就举一个栗子吧~~

1. 添加页的 addAjax.js

$(function () {    //添加表单验证方法   手机号的验证    $.validator.addMethod('isPhone',function (value,ele) {        var length=value.length        var reg=/^1[34578]\d{9}$/        if (length >= 11 && reg.test(value)){            return true        }        else {            return false        }    })    //对表单进行验证    $('#addForm').validate({        debug:true,        //验证的规则        rules:{            name:{                required:true,                minlength:3            },            age:{                required:true            },            phone:{                required:true,                isPhone:true            },            email:{                required:true,                email:true            }        },        //错误的提示信息        messages:{            name:{                required:'姓名不能为空',                minlength:'姓名不能少于3位'            },            age:{                required:'年龄不能为空'            },            phone:{                required:'手机号不能为空',                isPhone:'手机号格式错误'            },            email:{                required:'邮箱不能为空',                email:'邮箱格式错误'            }        },        //正确时执行的函数        submitHandler:function (form) {            //ajax请求            $.ajax({                type:'post',                url:'/addStu',                dataType:'json',                //表单数据序列化                data:$(form).serialize(),                //ajax请求成功操作                success:function (res) {                    $('.modal-body').text(res.message)                    //显示出模态框                    $('.modal').modal('show').on('hidden.bs.modal',function () {                        if (res.message == '添加成功'){                            location.href='index.html'                        }                    })                },                //ajax请求失败操作                error:function (jqXHR) {                    console.log(jqXHR.status)                }            })        },    })})

表单验证我用了 jquery.validate.js

1. 添加完毕，首页进行渲染 index.html(部分)

{{each}}    <tr>        <td>{{$value.name}}</td>        <td>{{$value.sex}}</td>        <td>{{$value.age}}</td>        <td>{{$value.phone}}</td>        <td>{{$value.email}}</td>        <td>            <a href="/modify.html?id={{$value._id}}" class="modify" data-index="{{$value._id}}">修改</a>            <a href="" class="del" data-index="{{$value._id}}">删除</a>        </td>    </tr>    {{/each}}

1. 首页的 indexAjax.js(部分)

$(function () {    $.ajax({        type:'post',        url:'/index',        success:function (res) {            //进行模板渲染            var strHtml=template('showStu',res.data)            $('#tb').html(strHtml)            ......代码有点长就不放了哈~~........

结尾

夜已深。不知不觉写这个文章也花了挺长时间的，哈哈哈，不过自己开心就行~~ 自己在做这个项目的时候，以为会很快搞完，但是还是遇到了问题，哎，纠结了好久，现在也没得出个答案，后来用了另一种的解决方法，感觉有点像投机取巧，但好像也不能怎么说，哈哈…个人技术水平真的很渣，写文章一方面是分享，一方面是再次重温自己的思路。请勿喷哈~~自己的第一篇技术博客，写的有点匆忙，不过还是希望可以给大家带来帮助。
　　　　　　
　　　　　　
　　　　　　
　　　　　　 　　　　　于 厦门高崎新村 自己的小屋
　　　　　　 　　　　　
　　　　　　 　　　　　
　　　　　　 　　　　　
　　　　　　 　　　　　

本文首发于个人博客　>> 黄明照–一个在路上慢慢行走的前端人