开发规范

MrJason...大约 35 分钟

开发规范

#1. view 页面

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

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

#2. api 请求

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

每个 API 方法，会调用 request 方法，发起对后端 RESTful API 的调用。

#2.1 请求封装

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

#2.1.1 创建 axios 实例

baseURL 基础路径
timeout 超时时间

实现代码

#2.1.2 Request 拦截器

Authorization、tenant-id 请求头
GET 请求参数的拼接

实现代码

#2.1.3 Response 拦截器

Token 失效、登录过期时，跳回首页
请求失败，Message 错误提示

实现代码

#2.2 交互流程

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

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

// ① api/system/user.js
import request from '@/utils/request'

// 查询用户列表
export function listUser(query) {
    return request({
        url: '/system/user/page',
        method: 'get',
        params: query
    })
}

// ② views/system/user/index.vue
import { listUser } from "@/api/system/user";

export default {
  data() {
    userList: null,
    loading: true
  },
  methods: {
    getList() {
      this.loading = true
      listUser().then(response => {
        this.userList = response.rows
        this.loading = false
      })
    }
  }
}

#2.3 自定义 `baseURL` 基础路径

如果想要自定义的 baseURL 基础路径，可以通过 baseURL 进行直接覆盖。示例如下：

export function listUser(query) {
    return request({
        url: '/system/user/page',
        method: 'get',
        params: query,
        baseURL: 'https://www.iocoder.cn' // 自定义
    })
}