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

一、用到的相关技术

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

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

初始化项目，在命令行执行 npm init 然后一路回车就行了（或者直接 npm init -y）生成 package.json 文件，它相当于是你项目的说明书

npm init

安装需要用到的各种包

# 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

三、项目结构说明

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

四、路由设计

请求方法	请求路径	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	处理删除请求

五、编写代码

入口模块： 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 ...')
})

路由模块： 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.findByIdAndRemove()
    User.findByIdAndRemove(req.query.id.replace(/"/g,''),function(err){
        if(err){
            return res.status(500).send('server error')
        }

    })
    res.redirect('/users')

})

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

创建数据库 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)

视图模块

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>

六、测试

连接数据库
```
mongod
           
```
开启服务
```
nodemon app.js
           
```
运行结果

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

个人做的小案例

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

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

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

一、用到的相关技术

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

三、项目结构说明

四、路由设计

五、编写代码

六、测试

继续阅读

SWFObject2

口语2

李开复给中国学生的第六封信：选择的智慧

Outlook Express 错误代码表

vue中父组件调用子组件的方法

Node.js介绍一、Node.js简介二、Node.js的结构分层三、支撑Node.js运行的基础构建包括的部分四、Node.js的特点

Vue - vue create、vue ui、vue init三种方式创建Vue项目

Vue - 安装Node.js（配置环境变量、配置NPM下载存放目录、NPM设置镜像仓库）

HP Proliant 系列服务器使用 SmartStart 光盘配置阵列卡过程

nodejs 实战项目学习数据库访问结果为undefined express ejs

美国商业服务外包方兴未艾（华盛顿邮报）

npm start 启动和webstorm中的绿色箭头启动node服务导致的差异

Jeecg-Boot 2.4.0版部署后无法加载验证码问题Provisional headers are shown Failed to load response data

企业最佳Node.js 应用案例分享

express 搭建后台构建工程目录结构