手把手教你实现一个vue3+ts+nodeJS后台管理系统（四）

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天点击查看活动详情

前言

本文将继续上文来实现登录接口。前端的图形验证码图片是由后端返回，并可进行刷新等操作。由于存在多用户操作且频率较高，所以我们将验证码存在数据库的话压力就太大，所以应该将验证码缓存定时删除，作者使用的是redis数据库。

图形验证码的实现

安装依赖

图形验证码所用到的库是svg-captcha，它能够轻松地生成我们所需的图形验证码不需要额外的库，且可灵活地配置。官方文档

npm install svg-captcha@1.4.0

缓存所用数据库redis也需安装对应的模块（且系统需要安装好redis数据库！！！）

npm install redis@3.1.2

redis模块

1. 在utils文件夹下新建文件redis.js

2. 在config的index.js文件中添加连接redis数据库的配置信息

   post: 6379,
   url: '127.0.0.1',
   password: 123456
   

3. 编写redis模块

   • 导入ridis

     const redis = require('redis');
     

   • 导入配置

     const config = require('../config/index');
     

   • 创建连接

     const client = redis.createClient(config.post, config.url);
     const client = redis.createClient(config.post, config.url);
     ​
     client.on('error', function (err) {
       console.log('Error ' + err);
     });
     ​
     client.on('connect', () => {
       console.log('redis connect success');
     });
     ​
     client.auth(config.password);
     

   • 编写get、set函数（从数据库读写数据）

     // 要导出的对象
     const redisConnect = {};
     /**
      * 写入数据库函数
      * @param {*} key 设置属性key
      * @param {*} value 设置属性值
      * @param {*} expire 过期时间
      * @returns 
      */
     redisConnect.setKey = (key, value, expire) => {
       return new Promise((resolve, reject) => {
         client.set(key, value, (err, replay) => {
           if (err) {
             reject(err);
           }
           if (!isNaN(expire) && expire > 0) {
             client.expire(key, parseInt(expire));
           }
           resolve(replay);
         });
       });
     };
     ​
     /**
      * 读取数据库函数
      * @param {*} key 读取的属性key
      * @returns 
      */
     redisConnect.getKey = (key) => {
       return new Promise((resolve, reject) => {
         client.get(key, (err, replay) => {
           if (err) {
             reject(err);
           } else {
             resolve(replay);
           }
         });
       });
     };
     // 导出
     module.exports = redisConnect;
     

   这样redis模块就完成了

密码加密

由于存在数据库中的密码肯定要是密文，所以需要对密码进行加密。我们用到的是bcryptjs库

安装模块

npm install bcryptjs@2.4.3

添加用户接口

需要实现登录接口的准备都已经实现了。但我们数据库中还没有存储用户。所以我们先实现添加用户接口再进行登录。

校验添加用户接口入参

schema/user.js

exports.add_user_schema =joi.object().keys ({
    username,
    password,
});

添加路由

router/user.js

1. 添加添加用户路由（接口）

   // 添加用户接口
   router.post('/addUser', userHandler.addUser);
   

router_handler/user.js

2. 导入验证规则及其对象

   // 1. 导入需要的验证规则对象
   const {
     user_login_schema,
     add_user_schema,
   } = require('../schema/user');
   

3. 编写路由处理函数

   • 导入bcryptjs加密模块（添加用户时为密码加密）

     const bcrypt = require('bcryptjs');
     

   • 用户名判断是否重复否则对密码进行加密加入数据库

     // 添加用户的处理函数
     exports.addUser = (req, res) => {
       // 验证入参，错误时抛出以捕获
       const { error, value } = add_user_schema.validate(req.body);
       if (error) {
         throw error;
       }
       // 查询是否存在相同用户名
       UsersModel.findAll({
         where: {
           username: value.username
         }
       }).then((result) => {
         if (result && result.length)
           return res.send({
             code: 1,
             message: '用户名被占用，请更换后重试！',
             data: null
           });
         else {
           const password = value.password;
           // 加密
           value.password = bcrypt.hashSync(password, 10);
           const result = UsersModel.create(value);
           result.then(function (ret) {
             if (ret) {
               return res.send({
                 code: 0,
                 message: '新增成功',
                 data: ret
               });
             } else {
               return res.send({
                 code: 1,
                 message: ret,
                 data: null
               });
             }
           });
         }
       });
     };
     

node-dev

node-dev是一个node.js开发工具，当文件被修改时，它会自动重新启动node进程。

类似于nodemon，我们通过它来调试修改程序。

npm install node-dev@7.4.3

然后将其添加到启动脚本里

package.json

"scripts": {
    "start":"node-dev app.js",
    "test": "echo "Error: no test specified" && exit 1"
}

这样当在终端输入命令npm run start服务器就通过node-dev启动，之后再进行修改会自动进行重启

测试

1.若传参不全

2.成功