新增接口

在 src/api 目录按模块定义接口函数，页面直接调用即可。Token 注入和响应统一处理已封装在 src/utils/request.ts，无需手写。

新增接口函数

在对应模块文件（如 src/api/system/user.ts）中导出函数：

import request from "@/utils/request";

// 列表查询
export function getUserList(params: UserQuery) {
  return request({
    url: "/api/v1/users",
    method: "get",
    params,
  });
}

// 新增
export function addUser(data: UserForm) {
  return request({
    url: "/api/v1/users",
    method: "post",
    data,
  });
}

// 详情
export function getUser(id: number) {
  return request({
    url: `/api/v1/users/${id}`,
    method: "get",
  });
}

// 编辑
export function updateUser(id: number, data: UserForm) {
  return request({
    url: `/api/v1/users/${id}`,
    method: "put",
    data,
  });
}

// 删除
export function deleteUser(id: number) {
  return request({
    url: `/api/v1/users/${id}`,
    method: "delete",
  });
}

目录结构

按业务模块拆分，避免单文件过大：

src/api/
├── system/
│   ├── user.ts
│   ├── role.ts
│   └── menu.ts
├── monitor/
│   └── log.ts
└── ...

在页面调用

<script setup lang="ts">
import UserAPI from "@/api/system/user";

const loading = ref(false);
const userList = ref<User[]>([]);

async function fetchUsers() {
  loading.value = true;
  try {
    const data = await UserAPI.getUserList({ pageNum: 1, pageSize: 10 });
    userList.value = data.list;
  } finally {
    loading.value = false;
  }
}

onMounted(fetchUsers);
</script>

统一响应

后端返回 code === "00000" 时直接返回 data，否则自动 ElMessage.error(msg) 并 reject。页面用 try/catch 或 .catch 处理异常即可，无需判断 code。

接口代理

本地开发通过 .env.development 的 VITE_APP_BASE_API 转发请求：

VITE_APP_BASE_API = "/api"

接口路径以 /api 开头即可命中 Vite 代理，无需写完整域名。