Răsfoiți Sursa

# doc:用户管理模块的增删改查

yang yi 1 săptămână în urmă
părinte
comite
69353b9b74
1 a modificat fișierele cu 136 adăugiri și 0 ștergeri
  1. 136 0
      README.md

+ 136 - 0
README.md

@@ -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"
+     },
+   }
+   ```
+
+