码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2019-05-04 13:29:10      阅读：569      评论：0      收藏：0      [点我收藏+]

标签：status   中间   项目结构   als   connect   r.js   err   https   管理系   

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实现用户增删查改案例

标签：status   中间   项目结构   als   connect   r.js   err   https   管理系   

原文地址：https://www.cnblogs.com/zyxnb/p/10808221.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！