关于javascript:多人后台管理博客DAY03

11次阅读

共计 5602 个字符，预计需要花费 15 分钟才能阅读完成。

(三) 我的项目性能的实现之新增用户 

BLOG -- 源码目录
  └── model -- 数据库操作
       └── user.js -- 用户治理
   ├──  public -- 动态资源
   └──  route -- 路由
        └──  admin -- 博客治理              
               ├── user-edit-fn.js -- 用户增加页面路由
               └── user-edit.js -- 用户编辑页面路由
        └── admin.js -- 博客治理页面路由
 └── views -- 模板
      └── admin -- 博客治理页面 art 模板
          ├── user-edit.art -- 用户编辑页面
          └── user.art -- 用户列表页
 ├── app.js -- 创立网站服务
 └──joi.js -- JavaScript 对象的规定描述语言和验证器

1.user.art

  • 为新增用户增加跳转链接到 user-edit.art
{{extend './common/layout.art'}}
{{block 'main'}}
    <!-- 子模板的相对路径绝对的就是以后文件 因为它是由模板引擎解析的 而不是浏览器 -->
    {{include './common/header.art'}}
    <!-- 主体内容 -->
    <div class="content">
        {{include './common/aside.art'}}
        <div class="main">
            <!-- 分类题目 -->
            <div class="title">
                <h4> 用户 </h4>
                <span> 找到 1 个用户 </span>
                <a href="/admin/user-edit" class="btn btn-primary new"> 新增用户 </a>
            </div>           
{{/block}}

2.user-edit.art

  • 为新增用户表单指定申请地址、申请形式、为表单项增加 name 属性 (method\value\name\action)
  • <p class="tips">{{message}}</p> 示意用户提交的错误信息的显示 
{{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}}

  1. admin.js

    • 创立用户编辑页面路由, 渲染 user-edit
    • 减少实现增加用户的性能路由,user-edit-fn
// 援用 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'));
// 将路由对象做为模块成员进行导出
module.exports = admin;

  1. user.js

    • 引入 joi 模块，定义验证规定, 将模块对象抛出 
// 创立用户汇合
// 引入 mongoose 第三方模块
const mongoose = require('mongoose');
// 导入 bcrypt
const bcrypt = require('bcrypt');
// 引入 joi 模块
const Joi = require('joi');
// 创立用户汇合规定
const userSchema = new mongoose.Schema({
    username: {
        type: String,
        required: true,
        minlength: 2,
        maxlength: 20
    },
    email: {
        type: String,
        // 保障邮箱地址在插入数据库时不反复
        unique: true,
        required: true
    },
    password: {
        type: String,
        required: true
    },
    // admin 超级管理员
    // normal 普通用户
    role: {
        type: String,
        required: true
    },
    // 0 启用状态
    // 1 禁用状态
    state: {
        type: Number,
        default: 0
    }
});

// 创立汇合
const User = mongoose.model('User', userSchema);

async function createUser () {const salt = await bcrypt.genSalt(10);
    const pass = await bcrypt.hash('123456', salt);
    const user = await User.create({
        username: 'iteheima',
        email: 'itheima@itcast.cn',
        password: pass,
        role: 'admin',
        state: 0
    });
}

// createUser();

// 验证用户信息
const validateUser = user => {
    // 定义对象的验证规定
    const schema = {username: Joi.string().min(2).max(12).required().error(new Error('用户名不合乎验证规定')),
        email: Joi.string().email().required().error(new Error('邮箱格局不符合要求')),
        password: Joi.string().regex(/^[a-zA-Z0-9]{3,30}$/).required().error(new Error('明码格局不符合要求')),
        role: Joi.string().valid('normal', 'admin').required().error(new Error('角色值非法')),
        state: Joi.number().valid(0, 1).required().error(new Error('状态值非法'))
    };
    // 施行验证
    return Joi.validate(user, schema);
}

// 将用户汇合做为模块成员进行导出
module.exports = {
    User,
    validateUser
}

5.joi.js

  • JavaScript 对象的规定描述语言和验证器 npm install joi
// 引入 joi 模块
const Joi = require('joi');

// 定义对象的验证规定
const schema = {username: Joi.string().min(2).max(5).required().error(new Error('username 属性没有通过验证')),
    birth: Joi.number().min(1900).max(2020).error(new Error('birth 没有通过验证'))
};

async function run () {
    try {
        // 施行验证
        await Joi.validate({username: 'ab', birth: 1800}, schema);
    }catch (ex) {console.log(ex.message);
        return;
    }
    console.log('验证通过')
    
}

run();

7、user-edit.js

  • 通过 req.query 获取 message 并渲染到 user-edit.art 中 
module.exports = async (req, res) => {
    // 获取到地址栏中的 id 参数
    const {message} = req.query;
    // 进行渲染
res.render('admin/user-edit', {message: message,});

8、user-edit-fn.js

  • 通过引入 validateUser 构造函数，验证没有通过，获取 e.message 并重定向回用户增加页面
  • 依据邮箱地址查问用户是否存在，如果用户曾经存在 邮箱地址曾经被他人占用重定向回用户增加页面
  • 如果都没有问题，阐明能够增加用户，则进行明码加密，引入 bcrypt，将用户信息增加到数据库中，实现用户增加后重定向回用户列表页面 
// 引入用户汇合的构造函数
const {User, validateUser} = require('../../model/user');
// 引入加密模块
const bcrypt = require('bcrypt');

module.exports = async (req, res, next) => {

    try {await validateUser(req.body)
    }catch (e) {
        // 验证没有通过
        // e.message
        // 重定向回用户增加页面
        // return res.redirect(`/admin/user-edit?message=${e.message}`);
        // JSON.stringify() 将对象数据类型转换为字符串数据类型
        return next(JSON.stringify({path: '/admin/user-edit', message: e.message}))
    }

    // 依据邮箱地址查问用户是否存在
    let user = await User.findOne({email: req.body.email});
    // 如果用户曾经存在 邮箱地址曾经被他人占用
    if (user) {
        // 重定向回用户增加页面
        // return res.redirect(`/admin/user-edit?message= 邮箱地址曾经被占用 `);
        return next(JSON.stringify({path: '/admin/user-edit', message: '邮箱地址曾经被占用'}))
    }
    // 对明码进行加密解决
    // 生成随机字符串
    const salt = await bcrypt.genSalt(10);
    // 加密
    const password = await bcrypt.hash(req.body.password, salt);
    // 替换明码
    req.body.password = password;
    // 将用户信息增加到数据库中
    await User.create(req.body);
    // 将页面重定向到用户列表页面
    res.redirect('/admin/user');
}
正文完
javascript
发表至： javascript
2022-03-29
 0
关于javascript:vue模板编译实现原理
js设计模式–单例模式
关于javascript:http状态码汇总全
一个函数让你看懂 ‘Why 0.1+0.2!=0.3’

站内搜索

-「」