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

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

三、项目结构说明

四、路由设计

请求方法	请求路径	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.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

创建数据库 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
```
运行结果

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

node.js+express+mongoose实现用户增删查改案例的更多相关文章

[node.js]express+mongoose+mongodb的开发笔记
时间过得很快,6月和7月忙的不可开交,糟心的事儿也是不少,杭州大连来回飞,也是呵呵. 希望下个阶段能沉浸下来,接着学自己想学的.记一下上几周用了几天时间写的课设.因为课设的缘故,所以在短时间里了解下e ...
js实现对数据库的增删查改
1.查询复制代码代码如下: <HTML> <HEAD> <TITLE>数据查询</TITLE> <Script > var conn = ...
博客系统实战——SprintBoot 集成Thymeleaf 实现用户增删查改（含源码）
近来在学习SprintBoot +Thymeleaf +Maven搭建自己的博客系统,故在学习过程中在此记录一下,也希望能给广大正在学习SprintBoot和Thymeleaf的朋友们一个参考. 以下 ...
SpringBoot整合Mybatis-plus实现增删查改
今天给大家分享一下SpringBoot整合Mybatis-plus的增删查改案例. pom.xml <?xml version="1.0" encoding="UT ...
node.js+mysql增删查改
数据库和表: -- -- 数据库: `test` -- -- -------------------------------------------------------- -- -- 表的结构 ` ...
Node.js Express+Mongodb 项目实战
Node.js Express+Mongodb 项目实战这是一个简单的商品管理系统的小项目,包含的功能还算挺全的,项目涵盖了登录.注册,图片上传以及对商品进行增.删.查.改等操作,对于新手来说是个很 ...
modeJS 深了解（1）： Node.js + Express 构建网站预备知识
转载:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp1.html 目录前言新建express项目并自定义路由规则如何提取页面中的 ...
Node.js+Express+MongoDB数据库实现网页注册登入功能
通过 Node.js + Express + MongoDB 实现网页注册账号和登入账号的功能项目准备: 1: 事先准备好项目的页面 (首页页面 index.html)(登入页面 login.h ...
Node.js Express 框架学习
转载:http://JavaScript.ruanyifeng.com/nodejs/express.html#toc0 感觉很牛的样子,不过觉得对初学者没太大用,里面很多例子用的api都没有详细的说 ...

随机推荐

顺丰丰桥软件开发工具包 (.NET)
丰桥 - 一站式对接服务平台, 打通客户与顺丰系统之间的信息流, 实现物流供应链一体化. 随着一个电商项目和顺丰合作, 信息流对接就是我们开发的事了. 顺丰通过丰桥提供了一些开放接口, 不过丰桥提供的 ...
自学 JAVA 的几点建议
微信公众号:一个优秀的废人如有问题或建议,请后台留言,我会尽力解决你的问题. 前言许久不见,最近公众号多了很多在校的师弟师妹们.有很多同学都加了我微信问了一些诸如 [如何自学 Java ]的问题, ...
20190918Java课堂记录
1. EnumTest.java public class EnumTest { public static void main(String[] args) { Size s=Size.SMALL; ...
kafka 中 zookeeper 具体是做什么的？
zookeeper 是 kafka 不可分割的一部分,可见其重要程度,所以我们有必要了解一下 zookeeper 在 kafka 中的具体工作内容. 而且,这也是面试时经常问的. zookeeper ...
OA系统、ERP系统、CRM系统的区别和联系有哪些？企业该如何使用？
我们经常听到很多企业会花重金购买适合企业的ERP.OA和CRM系统,使得公司的管理运营更加高效有序,节省公司运营成本,带来更大的经济效益,但实际上很多人员都不太理解他们之间的区别和联系是什么,到底该如 ...
c语言-输出圆形
#include<stdio.h> #define high 100//定义界面大小 #define wide 100 void Circle(int ridus) //确定坐标 {int ...
SuperSocket Code解析
SuperSocket1.6Code解析 Normal Socket System.Net.Sockets.dll程序集中使用socket类: 服务器: 创建socket:_socket = new ...
1. RevitAPI 基础（上）
一重要的基本设置: 1. 类库:revitAPI.DLL, revitAPIUI.DLL,个人理解前者包括了revit软件所特有的数据类型及软件中存在的全部后台数据,而后者是包含了大量与实现UI交互 ...
NOI2019滚粗记
Day -15 期末考完了,爆炸爆炸,就连数学和物理都错了好多傻*错误QwQ 哎呀管他的,NOI我来了! 跑到广附集训来了23333 Day -14 -- -2 做题,听题,哇和一群队爷在一个教室,真 ...
influxdb+Grafana+jmeter监控搭建
安装InfluxDB InfluxDB的简介 InfluxDB 是用Go语言编写的一个开源分布式时序.事件和指标数据库,无需外部依赖. 类似的数据库有Elasticsearch.Graphite等.. ...

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

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

一、用到的相关技术

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

三、项目结构说明

四、路由设计

五、编写代码

六、测试

node.js+express+mongoose实现用户增删查改案例的更多相关文章

随机推荐

热门专题