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

前言

前面已经实现了登录所需的接口，接下来主要针对获取用户分页列表和修改用户接口进行说明，其它大同小异，实现逻辑与思路都差不多。但是首先，这些接口都是需要权限才能访问的，即请求头带上token访问，所以首先我们先要解析是否有token。

获取用户分页列表主要分以下几个步骤

1. 获取前端给的分页参数（当前所处页数：currentPage、页条数：pageSize），还可能有对应的接口参数（例如：username），这个时候就判断其有无再来决定要不要加到数据库查询参数中。
2. 接下来就是用这些分页参数（比如第一页5条）、接口参数去查询数据库返回对应数据就行

修改用户接口就是

1. 获取要查询参数id（可通过query、params入参方式接收）和要修改的用户参数（body接收）
2. 根据id去到数据库中修改相应数据

解析接口的token

我们在手把手教你实现一个vue3+ts+nodeJS后台管理系统（三）中有说到express-jwt库，这个库就是用来解析token的。我们只需要在app.js主文件中添加这个中间件即可实现token解析。但是切记要给他传递解析token的密钥。

...
// 导入配置文件
const config = require('./config/index');
// 解析 token 的中间件
const expressJWT = require('express-jwt');
// 使用 .unless({ path: [/^/api//] }) 指定哪些接口不需要进行 Token 的身份认证
app.use(
  expressJWT({ secret: config.jwtSecretKey }).unless({ path: ['/user/login', '/user/checkCode', '/user/refreshToken'] })
);
...路由模块

然后如果没有解析成功的访问，应当返回错误代码401。所以我们要在路由之后捕获解析错误

...路由之后
// 定义错误级别的中间件
app.use((err, req, res, next) => {
  // 数据验证失败
  if (err instanceof joi.ValidationError) return res.send({ code: 1, message: err.message });
  // token解析失败
  if (err.name === 'UnauthorizedError') return res.send({ code: 401, message: '身份认证失败' });
  // 未知错误
  return res.send({ code: 500, message: err });
});
...
app.listen(...)

获取用户列表

1. 添加路由 router/user.js

   // 获取用户列表
   router.get('/list', userHandler.getList);
   

2. 校验分页参数

   const pageSize = joi.number().required();
   const currentPage = joi.number().required();
   ​
   // 获取用户列表接口
   exports.get_list = joi.object().keys({
     pageSize,
     currentPage,
     status
   });
   

3. 获取分页参数和接口字段参数（可选） router_handler/user.js

   // 导入校验规则
   const { user_login_schema, add_user_schema, get_list} = require('../schema/user');
   ...
   exports.getList = (req, res) => {
     const { value, error } = get_list.validate(req.query);
     if (error) throw error;
     // 接收前端参数
     let { pageSize, currentPage } = req.query;
   })
   

4. 处理入参，若有接口字段的参数，拼接到where对象中

   // 默认值
   limit = pageSize ? Number(pageSize) : 10;
   offset = currentPage ? Number(currentPage) : 1;
   offset = (offset - 1) * pageSize;
   let where = {};
   let username = req.query.username;
   let status = req.query.status;
   if (username) {
     where.username = { [Op.like]: `%${username}%` };
   }
   if (status === 0 || status === 1) {
     where.status = { [Op.eq]: status };
   }
   

5. 查询数据库 这里我们用到的是sequelize库的findAndCountAll方法。接收limit（页条数）和offset（跳过的条数）。我们对之前接收到的参数做一些处理，然后用这个方法就可以实现。

    UsersModel.findAndCountAll({
       attributes: { exclude: ['password'] },
       offset: offset,
       limit: limit,
       where: where
     }).then(function (users) {
       return res.send({
         code: 0,
         message: '获取成功',
         data: users
       });
     });
   

   对于sequelize库的操作有疑问的可以看我之前的文章手把手教你实现一个vue3+ts+nodeJS后台管理系统（二）

修改用户接口

1. 添加接口 router/user.js

   // 修改用户信息
   router.post('/editUser/:id', userHandler.editUser);
   

2. 校验入参 schema/user.js

   // 用户名的校验规则
   const username = joi.string().alphanum().min(1).max(10).required();
   // 密码的验证规则
   const password = joi
     .string()
     .pattern(/^[\S]{6,12}$/)
     .required();
   const checkCode = joi.string().alphanum().min(4).max(4).required();
   const uuid = joi.number().required();
   const nickname = joi.string();
   const email = joi.string().email();
   const status = joi.number().valid(0, 1);
   ​
   // 更新用户接口
   exports.update_user_schema = joi.object().keys({
     username,
     status,
     nickname,
     email
   });
   

3. 获取要修改的参数id（以params参数为例），校验入参（要先引入入参规则） router_handler/user.js

   //  导入需要的验证规则对象
   const { user_login_schema, add_user_schema, get_list, update_user_schema } = require('../schema/user');
   ...
   exports.editUser = (req, res) => {
     const user_id = req.params.user_id;
     const { value, error } = update_user_schema.validate(req.body);
     if (error) throw error;
     ...
   };
   

4. 查询修改的用户名是否重复 这里我们引入sequelize的Op模块，它可以用来执行一些sql操作，例如[Op.and]相当于数据库连接语句的and，[Op.or]相当于or等

   • 在文件开头引入Op模块

     const { Op } = require('sequelize');
     

   • 利用它来查询数据库，不重复则更新数据库

       UsersModel.findAll({
         where: {
           [Op.and]: {
             user_id: {
               [Op.ne]: user_id
             },
             username: {
               [Op.eq]: value.username
             }
           }
         }
       }).then((result) => {
         if (result && result.length)
           return res.send({
             code: 1,
             message: '用户名被占用，请更换后重试！',
             data: null
           });
         else {
           const result = UsersModel.update(value, {
             where: {
               user_id: user_id
             }
           });
           result.then(function (ret) {
             if (ret) {
               return res.send({
                 code: 0,
                 message: '修改成功',
                 data: ret
               });
             } else {
               return res.send({
                 code: 1,
                 message: ret,
                 data: null
               });
             }
           });
         }
       });
     

测试

1.不带token访问

2.登录后带token访问

3.带上分页参数

4.修改用户