|
|
@@ -98,4 +98,140 @@ Learn more about the recommended Project Setup and IDE Support in the [Vue Docs
|
|
|
|
|
|
4. 添加axios依赖
|
|
|
|
|
|
+ ```shell
|
|
|
+ npm install axios
|
|
|
+ ```
|
|
|
+
|
|
|
+ 配置axios-instance.ts
|
|
|
+
|
|
|
+ ```typescript
|
|
|
+ import axios, {type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios';
|
|
|
+
|
|
|
+ // 自定义配置接口
|
|
|
+ export interface CustomInstanceConfig extends AxiosRequestConfig {
|
|
|
+ // 可以添加自定义配置
|
|
|
+ skipAuth?: boolean; // 是否跳过鉴权
|
|
|
+ }
|
|
|
+
|
|
|
+ // 创建 Axios 实例
|
|
|
+ const axiosInstance: AxiosInstance = axios.create({
|
|
|
+ baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
|
|
|
+ timeout: 30000,
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json',
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 请求拦截器
|
|
|
+ axiosInstance.interceptors.request.use(
|
|
|
+ (config) => {
|
|
|
+ // 添加 token
|
|
|
+ const token = localStorage.getItem('token');
|
|
|
+ if (token) {
|
|
|
+ config.headers.Authorization = `Bearer ${token}`;
|
|
|
+ }
|
|
|
+ return config;
|
|
|
+ },
|
|
|
+ (error) => {
|
|
|
+ return Promise.reject(error);
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ // 响应拦截器
|
|
|
+ axiosInstance.interceptors.response.use(
|
|
|
+ (response: AxiosResponse) => {
|
|
|
+ // 根据后端返回格式调整
|
|
|
+ if (response.data.code !== 0) {
|
|
|
+ return Promise.reject(new Error(response.data.message || '请求失败'));
|
|
|
+ }
|
|
|
+ return response.data;
|
|
|
+ },
|
|
|
+ (error) => {
|
|
|
+ // 统一错误处理
|
|
|
+ if (error.response?.status === 401) {
|
|
|
+ // 未授权,跳转登录
|
|
|
+ window.location.href = '/login';
|
|
|
+ }
|
|
|
+ return Promise.reject(error);
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ // 自定义实例函数(供 Orval 使用)
|
|
|
+ export const customAxiosInstance = <T>(config: CustomInstanceConfig): Promise<T> => {
|
|
|
+ return axiosInstance(config);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 也可以导出第二参数形式(如需处理完整响应)
|
|
|
+ export const customAxiosInstanceWithFullResponse = <T>(
|
|
|
+ config: CustomInstanceConfig
|
|
|
+ ): Promise<AxiosResponse<T>> => {
|
|
|
+ return axiosInstance(config);
|
|
|
+ };
|
|
|
+ ```
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
5. openAPI自动生成接口调用
|
|
|
+
|
|
|
+ 使用orval进行API生成
|
|
|
+
|
|
|
+ ```shell
|
|
|
+ npm install orval
|
|
|
+ ```
|
|
|
+
|
|
|
+ 编写orval.config.ts配置文件
|
|
|
+
|
|
|
+ ```typescript
|
|
|
+ import { defineConfig } from 'orval';
|
|
|
+
|
|
|
+ export default defineConfig({
|
|
|
+ 'your-api': {
|
|
|
+ // OpenAPI 规范文件路径(支持本地文件或 URL)
|
|
|
+ input: {
|
|
|
+ target: 'http://localhost:8080/v3/api-docs', // 可改为你的 Swagger JSON 地址,如:http://localhost:8000/openapi.json
|
|
|
+ },
|
|
|
+ output: {
|
|
|
+ // 生成代码的模式:tags-按接口标签拆分文件
|
|
|
+ mode: 'tags',
|
|
|
+ // 客户端类型:使用 axios
|
|
|
+ client: 'axios',
|
|
|
+ // 生成 vue-query hooks
|
|
|
+ target: './src/api/client.ts',
|
|
|
+ // 生成的 TypeScript 类型存放目录
|
|
|
+ schemas: './src/api/models',
|
|
|
+ // 每次生成前自动清理旧文件
|
|
|
+ clean: true,
|
|
|
+ // 覆盖默认配置
|
|
|
+ override: {
|
|
|
+ // 自定义 axios 实例
|
|
|
+ mutator: {
|
|
|
+ path: './src/util/axios-instance.ts',
|
|
|
+ name: 'customAxiosInstance',
|
|
|
+ },
|
|
|
+ // 为每个接口生成 vue-query hooks
|
|
|
+ query: {
|
|
|
+ useQuery: true, // 生成 useGetXXX hooks
|
|
|
+ useMutation: true, // 生成 usePostXXX hooks
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 生成后自动格式化代码
|
|
|
+ hooks: {
|
|
|
+ afterAllFilesWrite: 'prettier --write',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ ```
|
|
|
+
|
|
|
+ 配置package.json文件中
|
|
|
+
|
|
|
+ ```json
|
|
|
+ {
|
|
|
+ "scripts": {
|
|
|
+ ...,
|
|
|
+ "api:gen": "orval"
|
|
|
+ },
|
|
|
+ }
|
|
|
+ ```
|
|
|
+
|
|
|
+
|