• 【Vue + Koa 前后端分离项目实战5】使用开源框架==＞快速搭建后台管理系统 -- part5 后端实现最新期刊列表管理【增删查改】

    “我们领教了世界是何等凶顽，同时又得知，世界也可以变得温存和美好。”

    愿你我皆心存善意，遇到的，都是善良的人。

    上节回顾：【Vue + Koa 前后端分离项目实战4】使用开源框架==＞快速搭建后台管理系统 -- part4 后端实现【增删改查】功能_小白Rachel的博客-CSDN博客

    本章主要讲解：最新期刊列表管理模块的增删查改功能，是上一节的强化。 

    目录

    一、最新期刊内容新增

    1.自定义参数校验器

    2.在model层定义字段信息

    3.在dao层编写新增逻辑

    4.在接口层完成逻辑

    5.在测试工具上测试

    二、（重点）最新期刊列表

    1.在dao层定义查询列表函数

    2.在service层处理数据格式

    3.在接口层视图函数处理参数

    4.使用测试工具测试

    三、（重点）编辑最新期刊列表

     1.自定义校验器

    2.在dao层定义修改逻辑

    3.在接口层获取对应字段

    4.接口测试工具测试

     四、删除最新期刊

     1.自定义校验器

    2.在dao层操作数据库

    3.在接口层传参并操作

    4.接口测试工具测试

    五、后端部分结束

    往期回顾

    一、最新期刊内容新增

    类比期刊新增功能，首先在相应的目录下建立文件夹，并ctrl+CV关键重复信息 

    1.自定义参数校验器

    1. validator/flow.js
    2. class AddFlowValidator extends LinValidator {
    3.   constructor () {
    4.     super();
    5.     this.index = [
    6.       new Rule('isNotEmpty', '必须指定新增期刊内容排序'),
    7.       new Rule('isInt', '期刊内容序号必须是数字且大于0', { min: 1 })
    8.     ]
    9.     this.type = [
    10.       new Rule('isNotEmpty', '内容类型不能为空'),
    11.       new Rule('isInt', '内容类型id必须是数字')
    12.     ]
    13.     this.art_id = [
    14.       new Rule('isNotEmpty', '期刊内容id不能为空'),
    15.       new Rule('isInt', '内容类型id必须是数字')
    16.     ]
    17.     this.status = [
    18.       new Rule('isNotEmpty', '内容有效状态未指定'),
    19.       new Rule('isInt', '内容有效状态标识不正确')
    20.     ]
    21.   }
    22. }

    2.在model层定义字段信息

    1. import { Sequelize, Model } from 'sequelize';
    2. import sequelize from '../libs/db';
    3.  
    4. class Flow extends Model {
    5.  
    6. }
    7.  
    8. Flow.init (
    9.   {
    10.     id: {
    11.       type: Sequelize.INTEGER,
    12.       primaryKey: true,
    13.       autoIncrement: true
    14.     },
    15.     index: {
    16.       type: Sequelize.INTEGER,
    17.       allowNull: true,
    18.     },
    19.     type: {
    20.       type: Sequelize.INTEGER,
    21.       allowNull: true,
    22.     },
    23.     art_id: {
    24.       type: Sequelize.INTEGER,
    25.       allowNull: true,
    26.     },
    27.     status: {
    28.       type: Sequelize.INTEGER
    29.     }
    30.   },
    31.   {
    32.     tableName: 'flow',
    33.     modelName: 'flow',
    34.     paranoid: true,
    35.     underscored: true,
    36.     timestamps: true,
    37.     createdAt: 'created_at',
    38.     updatedAt: 'updated_at',
    39.     deletedAt: 'deleted_at',
    40.     sequelize
    41.   }
    42. )
    43.  
    44. export { Flow as FlowModel }

    3.在dao层编写新增逻辑

    1. import { FlowModel } from '../models/flow';
    2.  
    3. // 在Dao层中调用模型层
    4. class Flow {
    5.   static async createFlow (v) {
    6.     const res = await FlowModel.create({
    7.       index: v.get('body.index'),
    8.       type: v.get('body.type'),
    9.       art_id: v.get('body.art_id'),
    10.       status: v.get('body.status')
    11.     })
    12.     return res
    13.   }
    14. }
    15.  
    16. export { Flow as FlowDao }

    4.在接口层完成逻辑

    1. import { LinRouter } from "lin-mizar";
    2. import { groupRequired } from "../../middleware/jwt";
    3. import { logger } from "../../middleware/logger";
    4. import { AddFlowValidator } from '../../validators/flow';
    5. import { FlowDao } from '../../dao/flow';
    6.  
    7. const flowApi = new LinRouter({
    8.   prefix: "/v1/flow", // 配置路由前缀
    9. });
    10.  
    11. /**
    12.  * 新增期刊内容
    13.  */
    14. flowApi.linPost(
    15.   "addFlow", // 函数唯一标识
    16.   "/",
    17.   {
    18.     permission: "新增最新期刊", // 权限名称
    19.     module: "最新期刊管理", // 权限所属模块
    20.     mount: true,
    21.   },
    22.   groupRequired, // 权限级别
    23.   logger("{user.username}新增了最新期刊内容"),
    24.   async (ctx) => {
    25.     // 1.参数校验
    26.     const v = await new AddFlowValidator().validate(ctx);
    27.     // 2.执行业务逻辑
    28.     // 3.插入数据库-直接在dao层(省去service层)
    29.     await FlowDao.createFlow(v)
    30.     // 4.返回成功
    31.     ctx.success({
    32.       msg: "期刊内容新增成功",
    33.     });
    34.   }
    35. );
    36.  
    37. module.exports = { flowApi };

    5.在测试工具上测试

    接口：post   http://localhost:5000/v1/flow

    在数据库中最新期刊的数据库表是flow，主要用于存储期刊id(art_id)，期刊类型（type）状态（status）等字段。

    二、（重点）最新期刊列表

    功能说明：进入页面展示最新期刊数据，主要包含：序号、内容标题、内容类型、内容介绍、排序、是否展示。

    api/v1/flow.js  接口实现思路：

    （1）查询flow表 （从数据库中查询flow表的信息，返回结果列表并按照index字段排序）

    （2）根据结果里面的art_id、type字段查询对应类型期刊  （flow表格中只有期刊id和type并没有详情信息，因此需要再次查询期刊详情数据并拼接到结果数据中）

    （3）对于查询的数据格式化

    （4）返回数据

    1.在dao层定义查询列表函数

    定义查询方法getFLowList()   获取flow表的数据，并按照index排序结果 

    1. // dao/flow.js
    2. static async getFlowList () {
    3.     // 查询并按照index字段排序
    4.     return await FlowModel.findAll({
    5.       order: ['index']
    6.     })
    7.   }

    2.在service层处理数据格式

    定义getFlowList() 方法。

    逻辑：（1）首先获取flow表格中的数据flowList

    （2）对于不为空的列表数据，循环拼凑detail数据。根据结果里面的art_id、type两个字段查询对应类型期刊详情数据（findByPk(flowList[i].art_id)）。 并得到最后的结果newFlowList

    1. // service/flow.js
    2. class Flow {
    3.   static async getFlowList () {
    4.     const flowList = await FlowDao.getFlowList()
    5.     // 判断数组长度是否为0，为零直接返回
    6.     if (flowList.length === 0) {
    7.       return flowList
    8.     }
    9.     const newFlowList = []
    10.     for (let i = 0; i < flowList.length; i++) {
    11.       let detail
    12.       // 根据类型判断
    13.       switch (flowList[i].type) {
    14.         case 100:
    15.           detail = await MovieModel.findByPk(flowList[i].art_id)
    16.           break
    17.         case 200:
    18.           detail = await MusicModel.findByPk(flowList[i].art_id)
    19.           break
    20.         case 300:
    21.           detail = await SentenceModel.findByPk(flowList[i].art_id)
    22.           break
    23.       }
    24.       // 将detail详情数据添加到每一条记录中
    25.       flowList[i].setDataValue('detail', detail)
    26.       newFlowList.push(flowList[i])
    27.     }
    28.     return newFlowList
    29.   }
    30. }

    3.在接口层视图函数处理参数

    1. // api/v1/flow.js
    2. flowApi.get('/', async ctx => {
    3.   // 1.查询flow表
    4.   // 2.根据结果里面的art_id、type字段查询对应类型期刊
    5.   // 3.对于查询的数据格式化
    6.   // 4.返回数据
    7.   const flowList = await FlowService.getFlowList()
    8.   ctx.json(flowList)
    9. })

    4.使用测试工具测试

    get方法 http://localhost:5000/v1/flow

    三、（重点）编辑最新期刊列表

     功能描述：点击列表的”编辑“按钮，弹框展示期刊详情。可以修改：排序、期刊内容、是否展示。修改完成之后，点胶机”保存“按钮，保存修改。

     1.自定义校验器

    1. // validator/flow.js
    2. class EditFlowValidator extends AddFlowValidator {  // 继承add校验器
    3.   constructor () {
    4.     super();
    5.     this.id = [
    6.       new Rule('isNotEmpty', '最新期刊id不能为空'),
    7.       new Rule('isInt', '最新期刊id必须是数字且大于0', { min: 1 })
    8.     ]
    9.   }
    10. }

    2.在dao层定义修改逻辑

    定义editFlow (id, index, type, art_id, status)方法，需要传入5个参数.其中id用于查询出修改的数据，其余字段用于修改。

    1. // dao/flow.js
    2. static async editFlow (id, index, type, art_id, status) {
    3.     // 查询到需要修改的数据
    4.     const flow = await FlowModel.findByPk(id)
    5.     if (!flow) {
    6.       throw new NotFound()
    7.     }
    8.     // 修改前端传入的全部数据 相同的覆盖 不同的修改
    9.     await flow.update({ index, type, art_id, status })
    10.   }

    3.在接口层获取对应字段

    定义put接口，并依次按照接口传参获取数据，并调用dao层方法。

    1. flowApi.linPut(
    2.   'editFlow',
    3.   '/:id',
    4.   {
    5.     permission: "编辑最新期刊", // 权限
    6.     module: "最新期刊管理",
    7.     mount: true
    8.   },
    9.   groupRequired, // 权限级别
    10.   logger("{user.username}编辑了最新期刊"),
    11.   async ctx => {
    12.     // 校验数据
    13.     const v = await new EditFlowValidator().validate(ctx)
    14.     // 没有过多业务逻辑-直接调用dao层
    15.     // 在请求接口中获取id
    16.     const id = v.get('path.id')
    17.     // 请求体中获取index type art_id status
    18.     const index = v.get('body.index')
    19.     const type = v.get('body.type')
    20.     const art_id = v.get('body.art_id')
    21.     const status = v.get('body.status')
    22.     await FlowDao.editFlow(id, index, type, art_id, status)  // 使用dao层方法
    23.     ctx.success({
    24.       msg: '最新期刊编辑成功'
    25.     })
    26.   })

    4.接口测试工具测试

    put 请求 http://localhost:5000/v1/flow/1

    示例：修改排序号index 1-->10

     四、删除最新期刊

    功能说明：删除最新期刊只是解除了【当前期刊是最新期刊】并没有删除其在数据库中的记录，相应的期刊列表还是有数据的。相当于一个【发布/取消发布】

     1.自定义校验器

    老生常谈

    1. class DeleteFLowValidator extends LinValidator {
    2.   constructor () {
    3.     super();
    4.     this.id = [
    5.       new Rule('isNotEmpty', '最新期刊id不能为空'),
    6.       new Rule('isInt', '最新期刊id必须是数字且大于0', { min: 1 })
    7.     ]
    8.   }
    9. }

    2.在dao层操作数据库

    根据id删除记录

    1. static async deleteFlow (id) {
    2.     // 根据id获取数据
    3.     const flow = await FlowModel.findByPk(id)
    4.     if (!flow) {
    5.       throw new NotFound()
    6.     }
    7.     // 删除
    8.     await flow.destroy()
    9.   }

    3.在接口层传参并操作

    1. flowApi.linDelete(
    2.   "deleteFlow",
    3.   "/:id",
    4.   {
    5.     permission: "删除最新期刊", // 权限
    6.     module: "最新期刊管理",
    7.     mount: true
    8.   },
    9.   groupRequired, // 权限级别
    10.   logger("{user.username}删除了最新期刊"),
    11.   async (ctx) => {
    12.     // 校验前端传入的id
    13.     const v = await new DeleteFLowValidator().validate(ctx)
    14.     await FlowDao.deleteFlow(v.get('path.id'))
    15.     ctx.success({
    16.       msg: "最新期刊删除成功",
    17.     });
    18.   }
    19. );

    4.接口测试工具测试

    delete方法  http://localhost:5000/v1/flow/1

    五、后端部分结束

    至此，经过前面四节，所有的后端部分都已实现完成，接下开的小节将展示前端部分。

    潜在优化点：在service层，反复使用到了switch语言三次，此处可以优化。

    官方文档：http://doc.cms.talelin.com/

    往期回顾

    第一节我们简单介绍了林间有风框架

    第二到第五节：展开讲解后端部分【期刊列表】【最新期刊】的增删查改功能

    第六到第七节：展开讲解前端功能实现

    【Vue + Koa 前后端分离项目实战】使用开源框架==＞快速搭建后台管理系统 -- part1 项目搭建_小白Rachel的博客-CSDN博客_vue+koa

    【Vue + Koa 前后端分离项目实战2】使用开源框架==＞快速搭建后台管理系统 -- part2 后端新增期刊功能实现_小白Rachel的博客-CSDN博客_koa 开源项目

    【Vue + Koa 前后端分离项目实战3】使用开源框架==＞快速搭建后台管理系统 -- part3 权限控制+行为日志_小白Rachel的博客-CSDN博客

    https://blog.csdn.net/Sabrina_cc/article/details/127732328【Vue + Koa 前后端分离项目实战4】使用开源框架==＞快速搭建后台管理系统 -- part4 后端实现【增删改查】功能_小白Rachel的博客-CSDN博客

     

  • 相关阅读:
    Rollup打包导入assert、path、util、fs模块
    4.基础纹理
    视频画面噪点太多难处理？AI工具一键消除
    传递函数的推导和理解
    【App自动化测试】（一）Appium和移动端自动化
    互联网上门洗衣洗鞋小程序搭建
    FFmpeg源代码简单分析-其他-libswscale的sws_getContext()
    js总结笔记
    Android学习笔记 49. Android 多媒体技术——MediaPlayer播放视频
    在城市与自然中穿行：探索自然的全新方式，健康、环保、快乐的生活方式
  • 原文地址：https://blog.csdn.net/Sabrina_cc/article/details/127732328