(五)我的项目性能的实现之用户信息批改
用户批改和增加用户相似,区别在于会把id传回编辑页面并显示用户的Id
BLOG -- 源码目录 └── model -- 数据库操作 ├── public -- 动态资源 └── route -- 路由 └── admin --博客治理 ├── user-modify.js --用户批改性能路由 └── user-edit.js --用户编辑性能路由 └── admin.js --博客治理页面路由 └── views -- 模板 └── admin --博客治理页面art模板 ├── user-edit.art --用户编辑页面 └── user.art --用户列表页 └── app.js -- 创立网站服务
user.art
- 赋值id参数在地址栏来辨别增加和批改/admin/user-edit?id={{@$value._id}}
···<tbody> {{each users}} <tr> <td>{{@$value._id}}</td> <td>{{$value.username}}</td> <td>{{$value.email}}</td> <td>{{$value.role == 'admin' ? '超级管理员': '普通用户'}}</td> <td>{{$value.state == 0 ? '启用': '禁用'}}</td> <td> <a href="/admin/user-edit?id={{@$value._id}}" class="glyphicon glyphicon-edit"></a> <i class="glyphicon glyphicon-remove delete" data-toggle="modal" data-target=".confirm-modal" data-id="{{@$value._id}}"></i> </td> </tr> {{/each}} </tbody>···
user-edit.js
- 获取地址栏中的id参数,如果存在则是批改操作
- 引入用户的汇合构造函数,依据findOne来查找到这个用户,并将用户的信息渲染到用户的编辑页面
- 辨别表单的提交地址,增加和批改不同的Link,按钮也是
const { User } = require('../../model/user');module.exports = async (req, res) => { // 获取到地址栏中的id参数 const { message, id } = req.query; // 如果以后传递了id参数 if (id) { // 批改操作 let user = await User.findOne({_id: id}); // 渲染用户编辑页面(批改) res.render('admin/user-edit', { message: message, user: user, link: '/admin/user-modify?id=' + id, button: '批改' }); }else { // 增加操作 res.render('admin/user-edit', { message: message, link: '/admin/user-edit', button: '增加' }); } }
user-edit.art
- 对于用户名增加value值为user.username
- 如果是增加操作的话因为没有渲染user会报错,所以user&&user.username的短路个性来防止出错
- 对于邮箱、角色,状态,进行相似的操作增加value值
- 辨别表单的提交地址,增加和批改不同的Link,按钮也是
- 对于分类题目的Id也依据Button来辨别是否显示用户id
{{extend './common/layout.art'}}{{block 'main'}} {{include './common/header.art'}} <!-- /头部 --> <!-- 主体内容 --> <div class="content"> {{include './common/aside.art'}} <div class="main"> <!-- 分类题目 --> <div class="title"> <h4 style="display: {{button == '批改' ? 'block' : 'none'}}">{{@user && user._id}}</h4> <p class="tips">{{message}}</p> </div> <!-- /分类题目 --> <form class="form-container" action="{{link}}" method="post"> <div class="form-group"> <label>用户名</label> <input name="username" type="text" class="form-control" placeholder="请输出用户名" value="{{user && user.username}}"> </div> <div class="form-group"> <label>邮箱</label> <input type="email" class="form-control" placeholder="请输出邮箱地址" name="email" value="{{user && user.email}}"> </div> <div class="form-group"> <label>明码</label> <input type="password" class="form-control" placeholder="请输出明码" name="password"> </div> <div class="form-group"> <label>角色</label> <select class="form-control" name="role"> <option value="normal" {{user && user.role == 'normal' ? 'selected' : ''}}>普通用户</option> <option value="admin" {{user && user.role == 'admin' ? 'selected' : ''}}>超级管理员</option> </select> </div> <div class="form-group"> <label>状态</label> <select class="form-control" name="state"> <option value="0" {{user && user.state == '0' ? 'selected' : ''}}>启用</option> <option value="1" {{user && user.state == '1' ? 'selected' : ''}}>禁用</option> </select> </div> <div class="buttons"> <input type="submit" class="btn btn-primary" value="{{button}}"> </div> </form> </div> </div>{{/block}}
admin.js
- 增加用户批改路由
// 援用expess框架const express = require('express');// 创立博客展现页面路由const admin = express.Router();// 渲染登录页面admin.get('/login', require('./admin/loginPage'));// 实现登录性能admin.post('/login', require('./admin/login'));// 创立用户列表路由admin.get('/user', require('./admin/userPage'));// 实现退出性能admin.get('/logout', require('./admin/logout'));// 创立用户编辑页面路由admin.get('/user-edit', require('./admin/user-edit'));// 创立实现用户增加性能路由admin.post('/user-edit', require('./admin/user-edit-fn'));// 用户批改性能路由admin.post('/user-modify', require('./admin/user-modify'));// 将路由对象做为模块成员进行导出module.exports = admin;
user-modify.js
- 承受客户端传过来的申请参数(post)和要批改的用户的id(get)
- 导入用户汇合构造函数,通过findOne来依据id查问变量的明码
- 明码加密过了所以要导入bcrypt模块,同时通过bcrypt.compare进行明文明码和数据库明码进行比对,返回一个布尔值
- 如果明码比对失败则触发中间件,将页面跳转到user-edit,并呈现提醒的错误信息
- next承受字符串
- 如果比对胜利,则通过UpdateOne来更新批改之后的用户信息,明码是不能批改的所以不能写明码。通过一个const构造而后就不必了反复书写req.body
- 将页面重定向到用户列表页面
const { User } = require('../../model/user');const bcrypt = require('bcrypt');module.exports = async (req, res, next) => { // 接管客户端传递过去的申请参数 const { username, email, role, state, password } = req.body; // 行将要批改的用户id const id = req.query.id; // 依据id查问用户信息 let user = await User.findOne({_id: id}); // 明码比对 const isValid = await bcrypt.compare(password, user.password); // 明码比对胜利 if (isValid) { // res.send('明码比对胜利'); // 将用户信息更新到数据库中 await User.updateOne({_id: id}, { username: username, email: email, role: role, state: state }); // 将页面重定向到用户列表页面 res.redirect('/admin/user'); }else { // 明码比对失败 let obj = {path: '/admin/user-edit', message: '明码比对失败,不能进行用户信息的批改', id: id} next(JSON.stringify(obj)); } // 明码比对 // res.send(user);}
app.js
- 对于错误处理的中间件,如果明码比对不胜利,咱们心愿是跳转地址带有?message&和id,这种状况下咱们能够通过遍历和字符串拼接的形式来实现,例如params.push params.join办法
// 援用expess框架const express = require('express');// 解决门路const path = require('path');// 引入body-parser模块 用来解决post申请参数const bodyPaser = require('body-parser');// 导入express-session模块const session = require('express-session');// 导入art-tempate模板引擎const template = require('art-template');// 创立网站服务器const app = express();// 数据库连贯require('./model/connect');// 解决post申请参数app.use(bodyPaser.urlencoded({extended: false}));// 配置sessionapp.use(session({ secret: 'secret key', saveUninitialized: false, cookie: { maxAge: 24 * 60 * 60 * 1000 }}));// 通知express框架模板所在的地位app.set('views', path.join(__dirname, 'views'));// 通知express框架模板的默认后缀是什么app.set('view engine', 'art');// 当渲染后缀为art的模板时 所应用的模板引擎是什么app.engine('art', require('express-art-template'));// 凋谢动态资源文件app.use(express.static(path.join(__dirname, 'public')));// 引入路由模块const home = require('./route/home');const admin = require('./route/admin');// 拦挡申请 判断用户登录状态app.use('/admin', require('./middleware/loginGuard'));// 为路由匹配申请门路app.use('/home', home);app.use('/admin', admin);app.use((err, req, res, next) => { // 将字符串对象转换为对象类型 // JSON.parse() const result = JSON.parse(err); // {path: '/admin/user-edit', message: '明码比对失败,不能进行用户信息的批改', id: id} let params = []; for (let attr in result) { if (attr != 'path') { params.push(attr + '=' + result[attr]); } } res.redirect(`${result.path}?${params.join('&')}`);})// 监听端口app.listen(80);console.log('网站服务器启动胜利, 请拜访localhost')