node.js+express+mongoose实现用户增删查改案例

Posted zyxnb

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了node.js+express+mongoose实现用户增删查改案例相关的知识，希望对你有一定的参考价值。

node.js+express+mongodb对用户进行增删查改

一、用到的相关技术

  1. 使用 Node.js 的 express 框架搭建web服务
  2. 使用 express 中间件 body-parse 解析表单 post 请求体
  3. 使用 art-template 模板引擎渲染页面
  4. 使用第三方包 mongoose 来操作 MongoDB 数据库

二、在命令行用 npm 执行相关的命令

  1. 初始化项目，在命令行执行 npm init 然后一路回车就行了（或者直接 npm init -y）生成 package.json 文件，它相当于是你项目的说明书
npm init
  1. 安装需要用到的各种包
# Express 框架
npm install express

# 模板引擎(express-art-template 是模板引擎与 express 的关联包)
npm install art-template express-art-template

# express 中间件 body-parser
npm install body-parser

# mongoose
npm install mongoose

三、项目结构说明

四、路由设计

请求方法 请求路径 get 参数 post 参数 备注
GET /user 渲染首页
GET /add 渲染添加用户页面
POST /add name、age、gender、job、hobbies 处理添加用户请求
GET /edit id 渲染编辑页面
POST /edit id、name、age、gender、job、hobbies 处理编辑请求
GET /delete id 处理删除请求

五、编写代码

  1. 入口模块： app.js

    /**
 * app.js 服务入口模块
 * 1. 创建服务
 * 2. 做服务相关的配置
 *    2.1 模板引擎
 *    2.2 body-parser 解析表单 post 请求体
 *    2.3 提供相关的静态资源服务（开放public目录）
 * 3. 挂载路由
 * 4. 监听端口 开启服务
 * */

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

//创建你的服务器应用程序
var app = express()

//指定 .html 后缀的文件使用的解析引擎
app.engine('html',require('express-art-template'))

//开发静态资源
app.use('/public/',express.static('./public/'))
app.use('/node_modules/',express.static('./node_modules/'))

// 配置 body-parser 中间件（插件，专门用来解析表单 POST 请求体）
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())

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


//开启服务
app.listen(3000,function(){
    console.log('server is running ...')
})

  2. 路由模块： router.js

    /**
 *
 * router.js 路由模块
 * 根据不同的请求方法 + 请求路径 设置具体的请求处理函数
 *
 * */

var express = require('express')
var User = require('./user.js')

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

//2. 把路由都挂载到 router 路由容器中

// =============渲染用户列表页面=============
router.get('/users',function(req,res){
    User.find(function(err,users){
        if(err){
            return res.status(500).send('Server err')
        }
        res.render('index.html',{users:users})
    })
})

// =============渲染添加用户信息页面===========
router.get('/add',function(req,res){
    res.render('add.html')
})

// ==============处理添加用户==================
router.post('/add',function(req,res){
    //1. 获取表单数据 req.body
    //2. 处理：将数据保存到 db.json 文件中用以持久化
        new User(req.body).save(function(err){
        if(err){
            return res.status(500).send('server err')
        }
        //3. 重定向到首页
        res.redirect('/users')
    })
})

// =================渲染编辑用户信息页面============
router.get('/edit',function(req,res){
    //1. 在客户端的列表中处理链接问题（需要有 id 参数）
    //获取要编辑的学生 通过id
    User.findById(req.query.id.replace(/"/g,''),function(err,user){
        if(err){
            return res.status(500).send('Server error')
        }
        res.render('edit.html',{
            user:user
        })
    })
})

// ==================处理编辑用户信息================
router.post('/edit',function(req,res){
    //1. 获取表单数据 req.body
    //2. 通过 id 更新 User.findByIdAndUpdate()
    //3. 重定向到首页
    User.findByIdAndUpdate(req.body.id.replace(/"/g,''),req.body,function(err){
        if(err){
            return res.status(500).send('server error')
        }
        res.redirect('/users')
    })
})

// ==================删除用户====================
router.get('/delete',function(req,res){
    // 通过 id 查找到对应用户进行删除 User.findByIdAndDelete()
    User.findByIdAndRemove(req.query.id.replace(/"/g,''),function(err){
        if(err){
            return res.status(500).send('server error')
        }

    })
    res.redirect('/users')

})

// 把路由导出
module.exports = router

  3. 创建数据库 model 模块： user.js

    var mongoose = require('mongoose')

//连接数据库 数据库名(usersdb) 没有会自动创建
mongoose.connect('mongodb://localhost/usersdb')

//定义数据库表结构 schema
var Schema = mongoose.Schema

//设计表结构
var userSchema = new Schema({
    name:{
        type:String,
        require:true
    },
    gender:{
        type:Number,
        enum:[0,1],
        default: 0
    },
    age:{
        type:Number
    },
    job:{
        type:String
    },
    hobbies:{
        type:String
    }
})

//将文档结构发布为模型并导出
module.exports = mongoose.model('User',userSchema)

    1. 视图模块

      4.1 index.html

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="/public/css/css.css">
    <link rel="stylesheet" href="/public/css/index.css">
</head>
<body>
    <header>
        <div class="left">? 用户管理系统</div>
        <div class="right">? 欢迎登陆 admin | 退出</div>
    </header>
    <div class="slide">
        <ul>
            <li>用户信息</li>
        </ul>
    </div>
    <div class="add">
        <a href="/add">添加用户</a>
    </div>
    <div class="content">
        <table cellspacing="0">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>爱好</td>
                    <td>职位</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
            {{ each users }}
                <tr>
                    <td>{{ $value.name }}</td>
                    {{if $value.gender==0 }}
                    <td>男</td>
                    {{ else }}
                    <td>女</td>
                    {{ /if }}
                    <td>{{ $value.age }}</td>
                    <td>{{ $value.hobbies }}</td>
                    <td>{{ $value.job }}</td>
                    <td>
                        <!-- 注意这里 id={{  }} 的=(这个等号)前后不能打空格 不能打成 id = {{  }}
                            因为打了空格就相当于加了字符串空格，获取的id会有误 -->
                        <a href="/edit?id={{ $value._id }}">编辑</a>
                        <a href="/delete?id={{ $value._id }}">删除</a>
                    </td>
                </tr>
            {{ /each }}
            </tbody>
        </table>
    </div>
</body>
</html>

      4.2 add.html

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="/public/css/css.css">
    <link rel="stylesheet" href="/public/css/form.css">
</head>
<body>
<header>
    <div class="left">? 用户管理系统</div>
    <div class="right">? 欢迎登陆 admin | 退出</div>
</header>
    <div class="slide">
        <ul>
            <li>用户信息</li>
        </ul>
    </div>
    <div class="content">
        <div class="box">
            <div class="top">添加信息</div>
        <form action="/add" method="post">
            <table>
                <tr>
                    <td>姓名：</td>
                    <td><input type="text" name="name" class="text" placeholder="请输入用户名"></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        男：<input type="radio" name="gender" value="0">
                        女：<input type="radio" name="gender" value="1">
                    </td>
                </tr>
                <tr>
                    <td>年龄：</td>
                    <td><input type="number" name="age" class="text"></td>
                </tr>
                <tr>
                    <td>爱好：</td>
                    <td><input type="text" name="hobbies" class="text"></td>
                </tr>
                <tr>
                    <td>职位：</td>
                    <td><input type="text" name="job" class="text"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="提交" class="button">
                        <input type="reset" value="重置" class="button">
                    </td>
                </tr>
            </table>
        </form>
        </div>
    </div>
</body>
</html>

      4.3 edit.html

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="/public/css/css.css">
    <link rel="stylesheet" href="/public/css/form.css">
</head>
<body>
<header>
    <div class="left">? 用户管理系统</div>
    <div class="right">? 欢迎登陆 admin | 退出</div>
</header>
<div class="slide">
    <ul>
        <li>用户信息</li>
    </ul>
</div>
<div class="content">
    <div class="box">
        <div class="top">添加信息</div>
        <form action="/edit" method="post">
            <!--
            用来放一些不希望被用户看见，但是需要被提交到服务端的数据
           -->
            <input type="hidden" name="id" value="{{ user.id }}">
            <table>
                <tr>
                    <td>姓名：</td>
                    <td><input type="text" class="text" name="name" value="{{ user.name }}"></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        {{ if user.gender == 0 }}
                        男：<input type="radio" name="gender" value="0" checked>
                        女：<input type="radio" name="gender" value="1">
                        {{ else }}
                        男：<input type="radio" name="gender" value="0" >
                        女：<input type="radio" name="gender" value="1" checked>
                        {{ /if }}
                    </td>
                </tr>
                <tr>
                    <td>年龄：</td>
                    <td><input type="number" class="text" name="age" value="{{ user.age }}"></td>
                </tr>
                <tr>
                    <td>爱好：</td>
                    <td><input type="text" class="text" name="hobbies" value="{{ user.hobbies }}"></td>
                </tr>
                <tr>
                    <td>职位：</td>
                    <td><input type="text" class="text" name="job" value="{{ user.job }}"></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="提交" class="button">
                        <input type="reset" value="重置" class="button">
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>

六、测试

  1. 连接数据库

    mongod

  2. 开启服务

    nodemon app.js

  3. 运行结果

技术图片

项目下载地址：https://github.com/zyxWebGitHub/Node.git

以上是关于node.js+express+mongoose实现用户增删查改案例的主要内容，如果未能解决你的问题，请参考以下文章

mongoose、express 和 node.js 中回调函数的参数

如何使用 Node.js、Express 和 Mongoose 进行身份验证？

node.js+express+mongoose实现用户增删查改案例

您如何在 Node.js + Express + Mongoose + Jade 中处理表单验证，尤其是嵌套模型

无法使用 Node.js Express MongoDB Mongoose CoffeeScript 发布

如何从 Node.js / Express 应用程序的 Mongoose 预挂钩中查询？