Nest实战 - 员工模块

前言

本系列主要通过实现一个后台管理系统作为切入点，帮助掘友熟悉nest的开发套路

本系列作为前后端分离项目，主要讲解nest相关知识，前端项目知识一笔带过

完整的示例代码在最后

本章属于实战系列第二章，主要讲解员工模块相关内容，包括

• 头像上传本地文件上传和阿里oss文件上传* 头像识别百度AI识别图像，部分数据完成自动填充* typeORM 公共字段填充@BeforeInsert和@BeforeUpdate的使用和注意事项* 扩展 process.env 的类型* 数据库相关知识In Like 分页* Restful风格的代码开发* 密码md5 处理技术栈

---

• node：19.x
• 后端：nest + mysql
• 前端：react + redux + antd

规则

• 本系列完全遵循RestFul风格进行开发，即Get Post Put Delete
• 本系列的调用链 controller --> service --> 三方服务 ｜ 数据库
• 本系列的三方服务被消费时，统一注入到nest的IOC中，统一风格；其他函数的使用直接调用即可

员工模块-分页

介绍

• 在本人目前的开发中，分页功能是最常见的功能
• 好处* 服务端： 提升性能，减小内存的压力，查询效率高* 客户端： 页面渲染快，不然几万个DOM同时渲染，更改，页面直接GG

页面预览

• 
• 
• 
• 
• 

开发- controller

代码

• 打开 EmployeeController，加入以下代码@ApiOperation({summary: '分页',})@Get('page')page(@Query('page') page: number,@Query('pageSize') pageSize: number,@Query('name') name?: string,) {return this.employeeService.page(page, pageSize, name);} #### 说明

• 正常来说，nest接收到的所有基本类型的参数类型都是string，上一章我们在AppModule中加入了全局管道验证，并设置了属性转换功能transform为true，这样nest内部就可以通过ts的类型自动转换了

• @Query装饰器可以拿到url问号（？）后边的参数值

• page当前页数，最少传1

• pageSize 每页多少条

• name 用户名，做模糊查询用

• 接下来就把接收到的参数传入EmployeeService的page方法中

开发- service

代码

• 打开EmployeeService，加入分页代码````/** * * @param page 页数 * @param pageSize 每页多少条 * @param name 用户名 * @returns 分页 */async page(page: number, pageSize: number, name = '') {const [employeeList, total] = await this.employeeRepository.findAndCount({where: {name: Like(%${name}%`),},skip: (page - 1) * pageSize,take: pageSize,});return new BasePage(page, pageSize, total, employeeList);} ```#### 说明

• 上一章中注入了employeeRepository，所以这里可以直接调用

• employeeRepository.findAndCount方法返回一个promise数组，数组的第0项是查询到的对象数组，第1项是符合当前条件的总条数

• name字段默认空字符串 '',不然会被当作undefind处理

• where 中的 Like 等同于 sql 语句中的 Like,Like(%${name}%)表示值左右模糊查询

• skip表示跳过多少条数据

• take 表示查询多少条数据，即(每页多少条)

• skip 和take对应sql中的LIMIT关键字

• 执行查询操作时，sql语句如下所示

• 共执行了俩次sql语句第一句查询列表信息，第二句查询总条数

• 注意在第一条sql语句中，有排序查询

• orderBy关键字，是通过添加到实体类Employee文件Entity装饰器中实现的，这样只要执行select语句的时候,在没有手动添加updateTime排序规则的时候，就总会按照updateTime的倒序进行排序

• page方法中最后返回了类BasePage，BasePage只做了一件事情，就是对分页数据进行封装

开发工具类 - 封装分页数据

代码

• 新建 src/common/database/pageInfo.ts，写入/** * 分页数据封装 */export class BasePage<T> {constructor( private page: number,private pageSize: number,private total: number,private records: T[], ) {}} #### 说明

• 分页数据每个模块都会使用，故进行封装，统一调用即可

前端开发 - 拦截器处理

• 

说明

• 我们在登陆接口进行了jwt验证，故没有添加@isPublic()装饰器的接口都需要进行token验证
• 我们会在登陆页面点击登陆的时候,把员工数据写入redux中
• 前端主要注意拦截器处理，其他的正常开发即可

前端分页 - 效果截图

• 全量搜索
• 模糊搜索

公共模块 - 文件上传/预览

介绍

• 文件上传下载功能比较通用，且为了遵循软件的单一原则，所以把它抽离成基础公共模块
• 如果所示，我们会在新增 修改时使用文件上传 预览功能

本地文件上传

安装

• 安装@types/multer提供ts类型支持yarn add @types/multer #### 代码

• 终端中执行nest g module basenest g service basenest g controller base * 会生成以下结构文件，当然手动创建也可以，注意⚠️手动创建的模块需要手动引入到AppModule中