API 文档

本文主要介绍 API 模块的配置规则，API 提供统一的接口调用方式，与 CRUD 组件配合使用，实现代码简化和自动关联。因此，list、add 这些方法名称是固定的。

方法	说明	请求方式
list(data)	获取列表数据	GET /
add(data)	添加数据	POST /
edit(id, data)	编辑数据	PUT /{id}
del(id)	删除数据	DELETE /{id}
detail(id)	获取 edit 详情数据	GET /{id}
dynamicSearch(data)	获取动态搜索栏字段信息	GET /getAFields

---

API 配置

createApi

每个模块（页面）单独对应一个 API 配置脚本，使用 createApi 方法创建实例，同时可指定基础路径 baseURL。

• 此处 baseURL 不是服务器基础路径，是指接口基础路径。
• 比如 service.com/home/list、 service.com/home/add, 当前的 baseURL 指 /home。

示例：

import createApi from "@/api";
const { get, post, put, del } = createApi("/permission");

export default {
  list: (data) => get("", data),
  add: (data) => post("", data),
  edit: (id, data) => put(`/${id}`, data),
  del: (id) => del(`/${id}`),
  detail: (id) => get(`/${id}`),
  dynamicSearch: (data) => get(`/getAFields`, data)
};

API 方法说明

方法	说明	参数
get(url, params)	发送 GET 请求	url：接口路径，params：请求参数
post(url, data, useParams)	发送 POST 请求	url：接口路径，data：提交数据，useParams：是否作为查询参数
put(url, data, useParams)	发送 PUT 请求	同 post 方法
del(url, data)	发送 DELETE 请求	url：接口路径，data：删除参数

---

字典数据处理

字典 API 配置

在不同的程序设计开发中，后端会提供字典查询接口。方便前后端数据对接。 本项目中，后端没有提供字典查询接口，但是为了方便使用、复用、统一管理，所以前端增加了字典配置。

import menu from "@/api/system/menu"; // 引入对应的 API 接口
import role from "@/api/system/role"; // 引入对应的 API 接口

export default {
  // 普通字典
  // 注：在实际调用字典的时候，还可以通过 clean 字段控制是否使用 label-value || 源格式
  role: {
    api: role.list,
    label: "title",
    value: "id",
    handle: (res) => res.data.data
  },
  // 树形字典
  menu: {
    api: menu.list,
    params: { is_all: true },
    tree: true,
    label: "meta.title",
    value: "id",
    children: "children"
  }
};

字典参数说明

参数	说明
api	请求数据的 API 接口
params	请求参数，可选，用于附加额外参数
tree	是否返回树形结构数据，默认为 false
label	指定返回数据的 label 字段
value	指定返回数据的 value 字段
children	指定子级数据字段（适用于树形数据）
handle	自定义数据处理方法，可用于格式化返回值

实际使用：

// 字典
async function setOptions() {
  const { role, menu } = await proxy.$dict(["role", "menu"]);
  config.find("roles").setOptions(role);
  config.find("menu").setOptions(menu);
  data.roles = role;
  data.menu = menu;

  // 如果不想使用 value，需要明确的 id、或者关联的 pid 等其他字段时
  // 可以指定 clean 字段为 false
  const { role } = await proxy.$dict(["role"], false);
  // 此时返回的数据格式为：
  // {
  //   id: 1,
  //   name: "管理员",
  //   pid: 0
  // }
}