(五)我的项目性能的实现之用户信息批改

用户批改和增加用户相似,区别在于会把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')