diff --git a/.env b/.env index a9a2aae..a3fa2fc 100644 --- a/.env +++ b/.env @@ -2,7 +2,6 @@ VITE_BASE_URL=/ # 项目名称 VITE_APP_NAME=Nova - Admin - # 路由模式 VITE_ROUTE_MODE = web # 权限路由模式: static ｜ dynamic diff --git a/README.md b/README.md index 362487b..58ed718 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ ## features - **Latest popular technology stack** - Developed based on the latest technology stack such as Vue3, Vite, TypeScript, NaiveUI, Pinia, etc -- **Network request function encapsulation** - Perfect axios encapsulation and configuration, unified response processing and multi-scenario capability +- **Network request function encapsulation** - Based on [alova](https://alova.js.org/) encapsulation and configuration, unified response processing and multi-scenario capabilities - **Authority Control** - Perfect front and back-end authority management solution - **Routing system** - Supports local static and dynamic routing - **Component packaging** - Secondary packaging of components with high frequency of daily use to meet basic workrequirements diff --git a/README.zh-CN.md b/README.zh-CN.md index 52eeaa8..2bf7612 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -21,7 +21,7 @@ ## 特性 - **最新流行技术栈** - 基于Vue3、Vite、TypeScript、NaiveUI、Pinia等最新技术栈开发 -- **网络请求功能封装** - 完善的axios封装和配置，统一的响应处理和多场景能力 +- **网络请求功能封装** - 基于[alova](https://alova.js.org/)封装和配置，统一的响应处理和多场景能力 - **权限控制** - 完善的前后端权限管理方案 - **路由系统** - 支持本地静态路由和动态路由 - **组件封装** - 对日常使用频率较高的组件二次封装,满足基础工作需求 diff --git a/package.json b/package.json index ef0c5a7..e4deb9a 100644 --- a/package.json +++ b/package.json @@ -37,22 +37,22 @@ "UnoCSS" ], "scripts": { - "dev": "vite --mode dev", + "dev": "vite --mode dev --port 9980", "dev:test": "vite --mode test", "dev:prod": "vite --mode prod", "build": "vue-tsc --noEmit && vite build --mode prod", "build:dev": "vue-tsc --noEmit && vite build --mode dev", "build:test": "vue-tsc --noEmit && vite build --mode test", - "preview": "vite preview", + "preview": "vite preview --port 9981", "lint": "eslint .", "lint:fix": "eslint . --fix", "sizecheck": "npx vite-bundle-visualizer" }, "dependencies": { + "@alova/scene-vue": "^1.4.5", "@tinymce/tinymce-vue": "^5.1.1", "@vueuse/core": "^10.9.0", "alova": "^2.17.1", - "axios": "^1.6.7", "crypto-js": "^4.2.0", "echarts": "^5.5.0", "md-editor-v3": "^4.11.3", diff --git a/src/config/index.ts b/src/config/index.ts index 61c0f29..b0f2905 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -1,4 +1,3 @@ export * from './sdk' -export * from './service' export * from './env' export * from './system' diff --git a/src/config/service.ts b/src/config/service.ts deleted file mode 100644 index 2bdb542..0000000 --- a/src/config/service.ts +++ /dev/null @@ -1,59 +0,0 @@ -/** 默认实例的Aixos配置 */ -import type { AxiosRequestConfig } from 'axios' - -export const DEFAULT_AXIOS_OPTIONS: AxiosRequestConfig = { - // 请求超时时间,默认15秒 - timeout: 15 * 1000, -} - -/** 默认实例的后端字段配置 */ -export const DEFAULT_BACKEND_OPTIONS = { - codeKey: 'code', - dataKey: 'data', - msgKey: 'msg', - successCode: 200, -} - -/** 错误信息的显示时间 */ -export const ERROR_MSG_DURATION = 3 * 1000 - -/** 默认的请求错误code */ -export const DEFAULT_REQUEST_ERROR_CODE = 'DEFAULT' - -/** 默认的请求错误文本 */ -export const DEFAULT_REQUEST_ERROR_MSG = '请求错误~' - -/** 请求超时的错误code */ -export const REQUEST_TIMEOUT_CODE = 'TIME_OUT' - -/** 请求超时的错误文本 */ -export const REQUEST_TIMEOUT_MSG = '请求超时~' - -/** 默认的请求错误code */ -export const NETWORK_ERROR_CODE = 'NETWORK_ERROR' - -/** 默认的请求错误文本 */ -export const NETWORK_ERROR_MSG = '网络错误' - -/** 请求不成功各种状态的错误 */ -export const ERROR_STATUS = { - 400: '400: 请求出现语法错误~', - 401: '401: 用户未授权~', - 403: '403: 服务器拒绝访问~', - 404: '404: 请求的资源不存在~', - 405: '405: 请求方法未允许~', - 408: '408: 网络请求超时~', - 500: '500: 服务器内部错误~', - 501: '501: 服务器未实现请求功能~', - 502: '502: 错误网关~', - 503: '503: 服务不可用~', - 504: '504: 网关超时~', - 505: '505: http版本不支持该请求~', - [DEFAULT_REQUEST_ERROR_CODE]: DEFAULT_REQUEST_ERROR_MSG, -} - -/** token刷新的code */ -export const REFRESH_TOKEN_CODE = [888, 999] - -/** 没有错误提示的code */ -export const ERROR_NO_TIP_STATUS = [10000] diff --git a/src/layouts/components/header/Github.vue b/src/layouts/components/header/Github.vue index 7f2844f..014a77e 100644 --- a/src/layouts/components/header/Github.vue +++ b/src/layouts/components/header/Github.vue @@ -2,7 +2,7 @@ import HeaderButton from '../common/HeaderButton.vue' function toMyGithub() { - window.open('https://github.com/iam-see') + window.open('https://github.com/chansee97') } diff --git a/src/service/api/mock.ts b/src/service/api/list.ts similarity index 100% rename from src/service/api/mock.ts rename to src/service/api/list.ts diff --git a/src/service/api/login.ts b/src/service/api/login.ts index b6c2a9c..8ff5688 100644 --- a/src/service/api/login.ts +++ b/src/service/api/login.ts @@ -9,7 +9,11 @@ export function fetchLogin(params: Ilogin) { return alovaInstance.Post('/login', params) } export function fetchUpdateToken(params: any) { - return alovaInstance.Post('/updateToken', params) + const method = alovaInstance.Post('/updateToken', params) + method.meta = { + authRole: 'refreshToken', + } + return method } export function fetchUserInfo(params: any) { return alovaInstance.Get('/getUserInfo', { params }) diff --git a/src/service/api/test.ts b/src/service/api/test.ts index 91e56d3..91a8ffb 100644 --- a/src/service/api/test.ts +++ b/src/service/api/test.ts @@ -1,16 +1,17 @@ import qs from 'qs' -import { alovaInstance } from '../http' +import { alovaInstance, blankInstance } from '../http' /* get方法测试 */ export function fetachGet(params?: any) { return alovaInstance.Get('/getAPI', { params }) } + /* post方法测试 */ -export function fetachPost(data: any) { +export function fetchPost(data: any) { return alovaInstance.Post('/postAPI', data) } /* formPost方法测试 */ -export function fetachFormPost(data: any) { +export function fetchFormPost(data: any) { return alovaInstance.Post('/postAPI', qs.stringify(data), { headers: { 'Content-Type': 'application/x-www-form-urlencoded', @@ -18,23 +19,54 @@ export function fetachFormPost(data: any) { }) } /* delete方法测试 */ -export function fetachDelete() { +export function fetchDelete() { return alovaInstance.Delete('/deleteAPI') } /* put方法测试 */ -export function fetachPut(data: any) { +export function fetchPut(data: any) { return alovaInstance.Put('/putAPI', data) } - +/* 不携带token的接口 */ +export function withoutToken() { + const methodInstance = alovaInstance.Get('/getAPI') + methodInstance.meta = { + authRole: null, + } + return methodInstance +} +/* 接口数据转换 */ +export function dictData() { + return alovaInstance.Get('/getDictData', { + transformData(rawData, _headers) { + const { data } = rawData as any + return { + gender: data.gender === 0 ? '男' : '女', + status: `状态是${data.status}`, + } + }, + }) +} +/* 模拟获取二进制文件 */ +export function getBlob() { + const methodInstance = blankInstance.Get('https://images.unsplash.com/photo-1663529628961-80aa6ebcd157?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80') + methodInstance.meta = { + isDownload: true, + } + return methodInstance +} /* 测试状态码500失败 */ -export function testFailedRequest() { +export function FailedRequest() { return alovaInstance.Get('/serverError') } /* 测试业务码500失败 */ -export function testFailedResponse() { +export function FailedResponse() { return alovaInstance.Post('/businessError') } +/* 测试业务码10000失败,无提示 */ +export function FailedResponseWithoutTip() { + return alovaInstance.Post('/businessErrorWithoutTip') +} /* token失效的接口 */ export function expiredTokenRequest() { return alovaInstance.Get('/expiredToken') diff --git a/src/service/http/alova.ts b/src/service/http/alova.ts index 42f501d..a6122be 100644 --- a/src/service/http/alova.ts +++ b/src/service/http/alova.ts @@ -1,7 +1,7 @@ -import type { Method } from 'alova' import { createAlova } from 'alova' import VueHook from 'alova/vue' import GlobalFetch from 'alova/GlobalFetch' +import { createServerTokenAuthentication } from '@alova/scene-vue' import { handleBusinessError, handleRefreshToken, @@ -11,22 +11,31 @@ import { import { DEFAULT_ALOVA_OPTIONS, DEFAULT_BACKEND_OPTIONS, - REFRESH_TOKEN_CODE, } from './config' import { local } from '@/utils' -// docs path of alova.js https://alova.js.org/ -/** - * 前端alova的配置 - */ -interface AlovaConfig { - baseURL: string - timeout?: number - beforeRequest?: (method: Method>) => void -} +const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication({ + // 服务端判定token过期 + refreshTokenOnSuccess: { + // 当服务端返回401时，表示token过期 + isExpired: (response, _method) => { + return response.status === 401 + }, + // 当token过期时触发，在此函数中触发刷新token + handler: async (_response, _method) => { + await handleRefreshToken() + }, + }, + // 添加token到请求头 + assignToken: (method) => { + method.config.headers.Authorization = `Bearer ${local.get('token')}` + }, +}) + +// docs path of alova.js https://alova.js.org/ export function createAlovaInstance( - alovaConfig: AlovaConfig, + alovaConfig: Service.AlovaConfig, backendConfig?: Service.BackendConfig, ) { const _backendConfig = { ...DEFAULT_BACKEND_OPTIONS, ...backendConfig } @@ -39,30 +48,25 @@ export function createAlovaInstance( baseURL: _alovaConfig.baseURL, timeout: _alovaConfig.timeout, - beforeRequest(method) { - // 添加token到请求头 - method.config.headers.token = `Bearer ${local.get('token')}` + beforeRequest: onAuthRequired((method) => { alovaConfig.beforeRequest?.(method) - }, - - responded: { - // 请求成功的拦截器 + }), + responded: onResponseRefreshToken({ + // 请求成功的拦截器 onSuccess: async (response, method) => { const { status } = response if (status === 200) { - // 获取返回的数据 + // 返回blob数据 + if (method.meta?.isDownload) + return response.blob() + + // 返回json数据 const apiData = await response.json() // 请求成功 if (apiData[_backendConfig.codeKey] === _backendConfig.successCode) return handleServiceResult(apiData.data, null) - // token失效, 刷新token - if (REFRESH_TOKEN_CODE.includes(apiData[_backendConfig.codeKey])) { - await handleRefreshToken() - method.send() - } - // 业务请求失败 const errorResult = handleBusinessError(apiData, _backendConfig) return handleServiceResult(null, errorResult) @@ -71,13 +75,14 @@ export function createAlovaInstance( const errorResult = handleResponseError(response) return handleServiceResult(null, errorResult) }, - onError: (error, _method) => { - console.warn('🚀 ~ error:', error) + onError: (error, method) => { + const tip = `[${method.type}] - [${method.url}] - ${error.message}` + window.$message?.warning(tip) }, onComplete: async (_method) => { // 处理请求完成逻辑 }, - }, + }), }) } diff --git a/src/service/http/config.ts b/src/service/http/config.ts index c3b7c64..1fc7cd0 100644 --- a/src/service/http/config.ts +++ b/src/service/http/config.ts @@ -1,11 +1,5 @@ /** 默认实例的Aixos配置 */ -import type { AxiosRequestConfig } from 'axios' - -export const DEFAULT_AXIOS_OPTIONS: AxiosRequestConfig = { - // 请求超时时间,默认15秒 - timeout: 15 * 1000, -} -export const DEFAULT_ALOVA_OPTIONS: AxiosRequestConfig = { +export const DEFAULT_ALOVA_OPTIONS = { // 请求超时时间,默认15秒 timeout: 15 * 1000, } @@ -18,29 +12,9 @@ export const DEFAULT_BACKEND_OPTIONS = { successCode: 200, } -/** 错误信息的显示时间 */ -export const ERROR_MSG_DURATION = 3 * 1000 - -/** 默认的请求错误code */ -export const DEFAULT_REQUEST_ERROR_CODE = 'DEFAULT' - -/** 默认的请求错误文本 */ -export const DEFAULT_REQUEST_ERROR_MSG = '请求错误~' - -/** 请求超时的错误code */ -export const REQUEST_TIMEOUT_CODE = 'TIME_OUT' - -/** 请求超时的错误文本 */ -export const REQUEST_TIMEOUT_MSG = '请求超时~' - -/** 默认的请求错误code */ -export const NETWORK_ERROR_CODE = 'NETWORK_ERROR' - -/** 默认的请求错误文本 */ -export const NETWORK_ERROR_MSG = '网络错误' - /** 请求不成功各种状态的错误 */ export const ERROR_STATUS = { + 0: '请求错误~', 400: '400: 请求出现语法错误~', 401: '401: 用户未授权~', 403: '403: 服务器拒绝访问~', @@ -53,11 +27,7 @@ export const ERROR_STATUS = { 503: '503: 服务不可用~', 504: '504: 网关超时~', 505: '505: http版本不支持该请求~', - [DEFAULT_REQUEST_ERROR_CODE]: DEFAULT_REQUEST_ERROR_MSG, } -/** token刷新的code */ -export const REFRESH_TOKEN_CODE = [888, 999] - /** 没有错误提示的code */ export const ERROR_NO_TIP_STATUS = [10000] diff --git a/src/service/http/handle.ts b/src/service/http/handle.ts index 5669527..d7aa168 100644 --- a/src/service/http/handle.ts +++ b/src/service/http/handle.ts @@ -1,13 +1,6 @@ -import type { AxiosError } from 'axios' import { showError } from './utils' import { - DEFAULT_REQUEST_ERROR_CODE, - DEFAULT_REQUEST_ERROR_MSG, ERROR_STATUS, - NETWORK_ERROR_CODE, - NETWORK_ERROR_MSG, - REQUEST_TIMEOUT_CODE, - REQUEST_TIMEOUT_MSG, } from './config' import { useAuthStore } from '@/store' import { fetchUpdateToken } from '@/service' @@ -16,61 +9,19 @@ import { local } from '@/utils' type ErrorStatus = keyof typeof ERROR_STATUS /** - * @description: 处理axios或http错误 - * @param {AxiosError} err - * @return {*} - */ -export function handleFontEndError(err: AxiosError) { - const error: Service.RequestError = { - type: 'Alova', - code: DEFAULT_REQUEST_ERROR_CODE, - msg: DEFAULT_REQUEST_ERROR_MSG, - } - // 网络错误 - if (!window.navigator.onLine || err.message === 'Network Error') - Object.assign(error, { code: NETWORK_ERROR_CODE, msg: NETWORK_ERROR_MSG }) - - // 超时错误 - if (err.code === REQUEST_TIMEOUT_CODE && err.message.includes('timeout')) { - Object.assign(error, { - code: REQUEST_TIMEOUT_CODE, - msg: REQUEST_TIMEOUT_MSG, - }) - } - // 请求错误 - if (err.response) { - const errorCode: ErrorStatus = (err.response?.status as ErrorStatus) || 'DEFAULT' - const msg = ERROR_STATUS[errorCode] - Object.assign(error, { code: errorCode, msg }) - } - - showError(error) - - return error -} - -/** - * @description: 处理axios请求成功，但返回后端服务器报错 - * @param {AxiosResponse} response + * @description: 处理请求成功，但返回后端服务器报错 + * @param {Response} response * @return {*} */ export function handleResponseError(response: Response) { const error: Service.RequestError = { - type: 'Axios', - code: DEFAULT_REQUEST_ERROR_CODE, - msg: DEFAULT_REQUEST_ERROR_MSG, - } - - if (!window.navigator.onLine) { - // 网路错误 - Object.assign(error, { code: NETWORK_ERROR_CODE, msg: NETWORK_ERROR_MSG }) - } - else { - // 请求成功的状态码非200的错误 - const errorCode: ErrorStatus = response.status as ErrorStatus - const msg = ERROR_STATUS[errorCode] || DEFAULT_REQUEST_ERROR_MSG - Object.assign(error, { type: 'Response', code: errorCode, msg }) + type: 'Response', + code: 0, + msg: ERROR_STATUS[0], } + const errorCode: ErrorStatus = response.status as ErrorStatus + const msg = ERROR_STATUS[errorCode] || ERROR_STATUS[0] + Object.assign(error, { code: errorCode, msg }) showError(error) @@ -80,10 +31,10 @@ export function handleResponseError(response: Response) { /** * @description: * @param {Record} data 接口返回的后台数据 - * @param {Service} config axios字段配置 + * @param {Service} config 后台字段配置 * @return {*} */ -export function handleBusinessError(data: Record, config: Service.BackendConfig) { +export function handleBusinessError(data: Record, config: Required) { const { codeKey, msgKey } = config const error: Service.RequestError = { type: 'Business', @@ -123,14 +74,13 @@ export function handleServiceResult(data: any, error: Service.RequestEr */ export async function handleRefreshToken() { const authStore = useAuthStore() - const refreshToken = local.get('refreshToken') - const { data } = await fetchUpdateToken(refreshToken) + const data = await fetchUpdateToken({ refreshToken: local.get('refreshToken') }) if (data) { local.set('token', data.accessToken) local.set('refreshToken', data.refreshToken) } else { - // 刷新失败，推出 + // 刷新失败，退出 await authStore.resetAuthStore() } } diff --git a/src/service/http/index.ts b/src/service/http/index.ts index a1733da..c84f796 100644 --- a/src/service/http/index.ts +++ b/src/service/http/index.ts @@ -1,4 +1,3 @@ -import { createRequest } from './request' import { createAlovaInstance } from './alova' import { proxyConfig } from '@/config' @@ -6,17 +5,16 @@ const { url, urlPattern } = proxyConfig[import.meta.env.MODE] const isHttpProxy = import.meta.env.VITE_HTTP_PROXY === 'Y' || false -export const request = createRequest({ +export const request = createAlovaInstance({ baseURL: isHttpProxy ? urlPattern : url, }, { - msgKey: 'message', -}) - -// export const secondRequest = createRequest({ baseURL: isHttpProxy ? secondUrlPattern : secondUrl }); -export const mockRequest = createRequest({ baseURL: 'https://mock.apifox.com/m1/4071143-0-default' }, { - msgKey: 'message', + msgKey: 'msg', }) export const alovaInstance = createAlovaInstance({ baseURL: 'https://mock.apifox.com/m1/4071143-0-default', }) + +export const blankInstance = createAlovaInstance({ + baseURL: '', +}) diff --git a/src/service/http/instance.ts b/src/service/http/instance.ts deleted file mode 100644 index 6a45432..0000000 --- a/src/service/http/instance.ts +++ /dev/null @@ -1,87 +0,0 @@ -import axios from 'axios' -import type { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios' -import { - handleBusinessError, - handleFontEndError, - handleRefreshToken, - handleResponseError, - handleServiceResult, -} from './handle' -import { clearInvalidParameters, transformRequestData } from './utils' -import { DEFAULT_AXIOS_OPTIONS, DEFAULT_BACKEND_OPTIONS, REFRESH_TOKEN_CODE } from './config' -import { local } from '@/utils' - -/** - * @description: 封装axios请求类 - */ -export default class CreateAxiosInstance { - // axios 实例 - instance: AxiosInstance - // 后台字段配置 - backendConfig: Service.BackendConfig - // 基础配置 - axiosConfig: AxiosRequestConfig = {} - - constructor(axiosConfig: AxiosRequestConfig, backendConfig: Partial = DEFAULT_BACKEND_OPTIONS) { - // 设置了axios实例上的一些默认配置,新配置会覆盖默认配置 - this.backendConfig = { ...DEFAULT_BACKEND_OPTIONS, ...backendConfig } - this.instance = axios.create({ ...DEFAULT_AXIOS_OPTIONS, ...axiosConfig }) - this.setInterceptor() - } - - // 设置类拦截器的函数 - setInterceptor() { - this.instance.interceptors.request.use( - async (config) => { - const handleConfig = { ...config } - if (handleConfig.headers) { - // 清除无效字段 - handleConfig.data = clearInvalidParameters(handleConfig.data) - // 数据格式转换 - const contentType = handleConfig.headers.getContentType() as unknown as UnionKey.ContentType - if (contentType) - handleConfig.data = await transformRequestData(handleConfig.data, contentType) - - // 设置token - handleConfig.headers.setAuthorization(`Bearer ${local.get('token') || ''}`) - } - return handleConfig - }, - (error: AxiosError) => { - const errorResult = handleFontEndError(error) - return handleServiceResult(null, errorResult) - }, - ) - this.instance.interceptors.response.use( - async (response): Promise => { - const { status } = response - if (status === 200) { - // 获取返回的数据 - const apiData = response.data - const { codeKey, successCode, dataKey } = this.backendConfig - // 请求成功 - if (apiData[codeKey] === successCode) - return handleServiceResult(apiData[dataKey], null) - - // token失效, 刷新token - if (REFRESH_TOKEN_CODE.includes(apiData[codeKey])) { - const config = await handleRefreshToken(response.config) - if (config) - return this.instance.request(config) - } - // 业务请求失败 - const errorResult = handleBusinessError(apiData, this.backendConfig) - return handleServiceResult(null, errorResult) - } - // 接口请求失败 - const errorResult = handleResponseError(response) - return handleServiceResult(null, errorResult) - }, - (error: AxiosError) => { - // 处理http常见错误，进行全局提示等 - const errorResult = handleFontEndError(error) - return handleServiceResult(null, errorResult) - }, - ) - } -} diff --git a/src/service/http/request.ts b/src/service/http/request.ts deleted file mode 100644 index 1c625ed..0000000 --- a/src/service/http/request.ts +++ /dev/null @@ -1,125 +0,0 @@ -import type { AxiosInstance, AxiosRequestConfig } from 'axios' -import CreateAxiosInstance from './instance' - -type RequestMethod = 'get' | 'post' | 'put' | 'delete' | 'patch' -interface RequestParam { - url: string - method?: RequestMethod - data?: any - config?: AxiosRequestConfig -} - -async function getRequestResponse(options: { - instance: AxiosInstance - method: RequestMethod - url: string - data?: any - config?: AxiosRequestConfig -}) { - const { instance, method, url, data, config } = options - - let res: any - if (method === 'get' || method === 'delete') - res = await instance[method](url, config) - else res = await instance[method](url, data, config) - - return res -} - -/** - * @description: - * @param {AxiosRequestConfig} axiosConfig - axios配置 - * @param {Service} backendConfig - 后台字段配置 - * @return {*} - */ -export function createRequest( - axiosConfig: AxiosRequestConfig, - backendConfig?: Partial, -) { - const axiosInstance = new CreateAxiosInstance(axiosConfig, backendConfig) - /** - * 异步promise请求 - * @param param - 请求参数 - * - url: 请求地址 - * - method: 请求方法(默认get) - * - data: 请求的body的data - * - config: axios配置 - */ - async function asyncRequest( - param: RequestParam, - ): Promise> { - const { url, method = 'get', data, config } = param - const { instance } = axiosInstance - const res = (await getRequestResponse({ - instance, - method, - url, - data, - config, - })) as Service.RequestResult - return res - } - /** - * get请求 - * @param url - 请求地址 - * @param config - axios配置 - */ - function get(url: string, config?: AxiosRequestConfig) { - return asyncRequest({ url, config }) - } - - /** - * post请求 - * @param url - 请求地址 - * @param data - 请求的body的data - * @param config - axios配置 - */ - function post(url: string, data?: any, config?: AxiosRequestConfig) { - return asyncRequest({ url, method: 'post', data, config }) - } - - /** - * post请求-form参数形式 - * @param url - 请求地址 - * @param data - 请求的body的data - * @param config - axios配置 - */ - function formPost( - url: string, - data?: any, - config: AxiosRequestConfig = {}, - ) { - config.headers = { 'Content-Type': 'application/x-www-form-urlencoded' } - return asyncRequest({ url, method: 'post', data, config }) - } - - /** - * delete请求 - * @param url - 请求地址 - * @param config - axios配置 - */ - function handleDelete( - url: string, - config?: AxiosRequestConfig, - ) { - return asyncRequest({ url, method: 'delete', config }) - } - - /** - * put请求 - * @param url - 请求地址 - * @param data - 请求的body的data - * @param config - axios配置 - */ - function put(url: string, data?: any, config?: AxiosRequestConfig) { - return asyncRequest({ url, method: 'put', data, config }) - } - - return { - get, - post, - formPost, - put, - delete: handleDelete, - } -} diff --git a/src/service/http/utils.ts b/src/service/http/utils.ts index cb3dede..8560d77 100644 --- a/src/service/http/utils.ts +++ b/src/service/http/utils.ts @@ -1,5 +1,5 @@ import qs from 'qs' -import { ERROR_MSG_DURATION, ERROR_NO_TIP_STATUS } from '@/config' +import { ERROR_NO_TIP_STATUS } from './config' import { isArray, isEmpty, isFile, isNullOrUnDef } from '@/utils' export function showError(error: Service.RequestError) { @@ -8,8 +8,7 @@ export function showError(error: Service.RequestError) { if (ERROR_NO_TIP_STATUS.includes(code)) return - window.console.warn(error.code, error.msg) - window.$message?.error(error.msg, { duration: ERROR_MSG_DURATION }) + window.$message?.error(error.msg) } /** * 请求数据的转换 @@ -21,7 +20,7 @@ export function transformRequestData( contentType?: UnionKey.ContentType, ) { // application/json类型不处理,清除发送参数的无效字段 - let data: any = clearInvalidParameters(requestData) + let data: any = requestData // form类型转换 if (contentType === 'application/x-www-form-urlencoded') @@ -49,17 +48,3 @@ function handleFormData(data: Record) { return formData } - -/** - * 接口提交的参数去除无效字段 - * @param requestData -接口提交的参数 - */ -export function clearInvalidParameters(requestData?: Record) { - const result: Record = {} - for (const key in requestData) { - if (isEmpty(requestData[key]) || isNullOrUnDef(requestData[key])) - continue - result[key] = requestData[key] - } - return result -} diff --git a/src/service/index.ts b/src/service/index.ts index e0bc411..ff23946 100644 --- a/src/service/index.ts +++ b/src/service/index.ts @@ -1,3 +1,3 @@ -export * from './api/test' +export * from './api/list' export * from './api/login' -export * from './api/mock' +export * from './api/test' diff --git a/src/typings/service.d.ts b/src/typings/service.d.ts index 7fd2199..f96cef6 100644 --- a/src/typings/service.d.ts +++ b/src/typings/service.d.ts @@ -1,19 +1,26 @@ /** 请求的相关类型 */ declare namespace Service { + import type { Method } from 'alova' + + interface AlovaConfig { + baseURL: string + timeout?: number + beforeRequest?: (method: Method>) => void + } /** 后端接口返回的数据结构配置 */ interface BackendConfig { /** 表示后端请求状态码的属性字段 */ - codeKey: string + codeKey?: string /** 表示后端请求数据的属性字段 */ - dataKey: string + dataKey?: string /** 表示后端消息的属性字段 */ - msgKey: string + msgKey?: string /** 后端业务上定义的成功请求的状态 */ - successCode: number | string + successCode?: number | string } - type RequestErrorType = 'Axios' | 'Alova' | 'Response' | 'Business' + type RequestErrorType = 'Alova' | 'Response' | 'Business' type RequestCode = string | number interface RequestError { diff --git a/src/views/list/commonList/index.vue b/src/views/list/commonList/index.vue index d42f758..0683ec9 100644 --- a/src/views/list/commonList/index.vue +++ b/src/views/list/commonList/index.vue @@ -169,37 +169,35 @@ function handleAddTable() { - - + + - + - + - + - - - - 搜索 - - - - - - 重置 - - + + + + 搜索 + + + + 重置 + + diff --git a/src/views/test/test1/index.vue b/src/views/test/test1/index.vue index 41210e4..85bc967 100644 --- a/src/views/test/test1/index.vue +++ b/src/views/test/test1/index.vue @@ -1,20 +1,32 @@ diff --git a/vite.config.ts b/vite.config.ts index c42e47a..b1c6fc5 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -11,7 +11,7 @@ export default defineConfig(({ mode }: ConfigEnv) => { // 根据当前工作目录中的 `mode` 加载 .env 文件 // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。 - const env = loadEnv(mode, __dirname, '') as unknown as ImportMetaEnv + const env = loadEnv(mode, __dirname, '') as ImportMetaEnv const envConfig = proxyConfig[mode as ServiceEnvType] return { @@ -24,13 +24,9 @@ export default defineConfig(({ mode }: ConfigEnv) => { }, server: { host: '0.0.0.0', - port: 4000, proxy: env.VITE_HTTP_PROXY === 'Y' ? createViteProxy(envConfig) : undefined, }, - preview: { - port: 5211, - }, build: { target: 'esnext', reportCompressedSize: false, // 启用/禁用 gzip 压缩大小报告