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
原文地址：https://www.cnblogs.com/zyxnb/p/10808221.html
时间： 2024-10-04 16:13:13