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

最新推荐文章于 2022-03-17 17:12:23 发布

置顶 shineTomorrow

最新推荐文章于 2022-03-17 17:12:23 发布

阅读量4.2k

点赞数 2

分类专栏：前端学习文章标签： express github mongodb nodejs

本文链接：https://blog.csdn.net/qq_29844559/article/details/76996790

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

代码目录

secondPost

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

创建并初始化目录

$ 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进行快速生成，当然大家可以进行美化。

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

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中的collection
var schema=mongoose.Schema

//实例化一个Schema
var 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名字字母全部变小写和在后面加复数s
var 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。

app.js

//导入express模块
var expres=require('express')
var bodyParser=require('body-parser')
//导入之前写的mydb.js
var 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 进行模板渲染。

就举一个栗子吧~~

添加页的 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

添加完毕，首页进行渲染 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}}

首页的 indexAjax.js(部分)

$(function () {
    $.ajax({
        type:'post',
        url:'/index',
        success:function (res) {
            //进行模板渲染
            var strHtml=template('showStu',res.data)
            $('#tb').html(strHtml)

            ......代码有点长就不放了哈~~........

结尾

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

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

shineTomorrow

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
基于Express+mongoose搭建的学生管理系统

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

扫一扫