关于前端:多人博客后台管理系统DAY05

用户批改和增加用户相似，区别在于会把 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}));
// 配置 session
app.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')

关于前端:多人博客后台管理系统DAY05

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

Just My Socks（注册教程内含优惠码）

关于前端:多人博客后台管理系统DAY05

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

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）