开发规范

MrJason...大约 60 分钟

开发规范

#0. 实战案例

本小节，提供大家开发管理后台的功能时，最常用的普通列表、树形列表、新增与修改的表单弹窗、详情表单弹窗的实战案例。

#0.1 普通列表

可参考 [系统管理 -> 岗位管理] 菜单：

API 接口：/src/api/system/post/index.ts(opens new window)
列表界面：/src/views/system/post/index.vue(opens new window)
表单界面：/src/views/system/post/PostForm.vue(opens new window)

为什么界面拆成列表和表单两个 Vue 文件？

每个 Vue 文件，只实现一个功能，更简洁，维护性更好，Git 代码冲突概率低。

#0.2 树形列表

可参考 [系统管理 -> 部门管理] 菜单：

API 接口：/src/api/system/dept/index.ts(opens new window)
列表界面：/src/views/system/dept/index.vue(opens new window)
表单界面：/src/views/system/dept/DeptForm.vue(opens new window)

#0.3 高性能列表

可参考 [系统管理 -> 地区管理] 菜单，对应 /src/views/system/area/index.vue (opens new window)列表界面

基于 Virtualized Table 虚拟化表格 (opens new window)实现，解决一屏里超过 1000 条数据记录时，就会出现卡顿等性能问题。

#0.4 详情弹窗

可参考 [基础设施 -> API 日志 -> 访问日志] 菜单，对应 /src/views/infra/apiAccessLog/ApiAccessLogDetail.vue (opens new window)详情弹窗

#1. view 页面

在 @views (opens new window)目录下，每个模块对应一个目录，它的所有功能的 .vue 都放在该目录里。

一般来说，一个路由对应一个 index.vue 文件。

#2. api 请求

在 @/api (opens new window)目录下，每个模块对应一个 index.ts API 文件。

API 方法：会调用 request 方法，发起对后端 RESTful API 的调用。
interface 类型：定义了 API 的请求参数和返回结果的类型，对应后端的 VO 类型。

#2.1 请求封装

/src/config/axios/index.ts (opens new window)基于 axios (opens new window)封装，统一处理 GET、POST 方法的请求参数、请求头，以及错误提示信息等。

#2.1.1 创建 axios 实例

baseURL 基础路径
timeout 超时时间，默认为 30000 毫秒

实现代码 /src/config/axios/service.ts

#2.1.2 Request 拦截器

【重点】Authorization、tenant-id 请求头
GET 请求参数的拼接

实现代码 /src/config/axios/service.ts

#2.1.3 Response 拦截器

访问令牌 AccessToken 过期时，使用刷新令牌 RefreshToken 刷新，获得新的访问令牌
刷新令牌失败（过期）时，跳回首页进行登录
请求失败，Message 错误提示

实现代码 /src/config/axios/service.ts

#2.2 交互流程

一个完整的前端 UI 交互到服务端处理流程，如下图所示：

继续以 [系统管理 -> 岗位管理] 菜单为例，查看它是如何读取岗位列表的。代码如下：

// ① api/system/post/index.ts
import request from '@/config/axios'

// 查询岗位列表
export const getPostPage = async (params: PageParam) => {
  return await request.get({ url: '/system/post/page', params })
}

// ② views/system/post/index.vue
<script setup lang="tsx">
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    code: '',
    name: '',
    status: undefined
})

/** 查询岗位列表 */
const getList = async () => {
    loading.value = true
    try {
        const data = await PostApi.getPostPage(queryParams)
        list.value = data.list
        total.value = data.total
    } finally {
        loading.value = false
    }
}
</script>