From 76f15c8d5a9b56178fae864ff8fff5eefa4fe0bf Mon Sep 17 00:00:00 2001 From: chansee97 Date: Fri, 15 Mar 2024 17:28:25 +0800 Subject: [PATCH] chore: modfify 2 alova --- README.md | 24 +++--- README.zh-CN.md | 24 +++--- index.html | 31 ++++---- package.json | 16 ++-- src/service/api/login.ts | 10 +-- src/service/api/mock.ts | 4 +- src/service/api/test.ts | 38 +++++----- src/service/http/alova.ts | 83 +++++++++++++++++++++ src/service/http/config.ts | 63 ++++++++++++++++ src/service/http/handle.ts | 31 ++++---- src/service/http/index.ts | 5 ++ src/service/http/instance.ts | 12 +-- src/service/http/request.ts | 2 +- src/service/http/utils.ts | 2 +- src/typings/service.d.ts | 5 +- src/views/list/commonList/index.vue | 109 ++++++---------------------- src/views/test/test1/index.vue | 106 +++++++-------------------- 17 files changed, 301 insertions(+), 264 deletions(-) create mode 100644 src/service/http/alova.ts create mode 100644 src/service/http/config.ts diff --git a/README.md b/README.md index 203a2f4..362487b 100644 --- a/README.md +++ b/README.md @@ -11,14 +11,14 @@
- **English** | [中文](./README.zh-CN.md) + English | [中文](./README.zh-CN.md)
-## 🌈introduction +## introduction [Nova-admin](https://github.com/chansee97/nova-admin) A free and open-source template for middle platform/back-end based on Vue3, Vite4, Typescript, pinia, Naive UI, and Vue-Router to help improve the development efficiency of middle platform/back-end -## ⚡features +## 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 @@ -28,7 +28,7 @@ - **Theme Configuration** - Dark Theme Adaptation - **Code Specification** - Only perform eslint verification at commit time, no too many restrictions, easier development -## 😎project preview & display +## project preview & display - [Nova-Admin preview](https://admin-nova.vercel.app/) @@ -38,11 +38,11 @@ ![image.png](https://s2.loli.net/2023/10/10/cy8nrv1kSLpjCT9.png) ![image.png](https://s2.loli.net/2023/10/10/rACdG2fUI6oJN7H.png) -## 💎related projects +## related projects - [Nova-admin-nest](https://github.com/chansee97/nove-admin-nest) (under development) Nova-Admin supporting background project based on TS, NestJs, typeorm -## 🚧install and use +## install and use The local development environment is recommended to use pnpm 8.x, Node.js 16.x @@ -58,22 +58,26 @@ pnpm build ``` -## 🙌 learn to communicate +## learn to communicate Nova-Admin is a completely open-source and free project. It is still being optimized and iterated. It is designed to help developers more conveniently develop medium and large management systems. If you have any questions, please ask questions in the QQ exchange group. ![image.png](https://s2.loli.net/2023/08/26/PQJjURT7V46Lw2d.png) -## 🧩contribution +## contribution If you find any issues or have suggestions for improvement, please create an issue or submit a PR. We welcome your contributions! -## 🤗support +## support If you feel that this project is helpful for your work or study, please help me order a ✨ Star, which will be a great encouragement and support for me, or you can buy me a cup of coffee below ![sponsor](https://cdn.jsdelivr.net/gh/chansee97/static/sponsor.png) -## 🧾License +## [Contributors](https://github.com/chansee97/nova-admin/graphs/contributors) + +![Contributors](https://contrib.rocks/image?repo=chansee97/nova-admin) + +## License [MIT](LICENSE) diff --git a/README.zh-CN.md b/README.zh-CN.md index 24d9256..52eeaa8 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -11,14 +11,14 @@
- [English](./README.md) | **中文** + [English](./README.md) | 中文
-## 🌈 介绍 +## 介绍 [Nova-admin](https://github.com/chansee97/nova-admin)一个基于Vue3、Vite4、Typescript、pinia、Naive UI、Vue-Router的后台管理免费开源模板，助力提高中后台开发效率 -## ⚡特性 +## 特性 - **最新流行技术栈** - 基于Vue3、Vite、TypeScript、NaiveUI、Pinia等最新技术栈开发 - **网络请求功能封装** - 完善的axios封装和配置，统一的响应处理和多场景能力 @@ -28,7 +28,7 @@ - **主题配置** - 黑暗主题适配 - **代码规范** - 仅在提交时进行eslint校验，没有过多限制，开发更简便 -## 😎 项目预览&展示 +## 项目预览&展示 - [Nova-Admin 预览](https://admin-nova.vercel.app/) @@ -38,11 +38,11 @@ ![image.png](https://s2.loli.net/2023/10/10/cy8nrv1kSLpjCT9.png) ![image.png](https://s2.loli.net/2023/10/10/rACdG2fUI6oJN7H.png) -## 💎 相关项目 +## 相关项目 - [Nova-admin-nest](https://github.com/chansee97/nove-admin-nest) (开发中)基于TS, NestJs, typeorm的Nova-Admin配套后台项目 -## 🚧 安装使用 +## 安装使用 本地开发环境建议使用 pnpm 8.x 、Node.js 16.x @@ -58,22 +58,26 @@ pnpm build ``` -## 🙌 学习交流 +## 学习交流 Nova-Admin 是完全开源免费的项目，目前仍然在优化迭代中，旨在帮助开发者更方便地进行中大型管理系统开发，有使用问题欢迎在QQ交流群内提问。 ![image.png](https://s2.loli.net/2023/08/26/PQJjURT7V46Lw2d.png) -## 🧩贡献 +## 贡献 如果您发现了任何问题或有改进建议，请创建一个issue或提交一个PR。我们欢迎您的贡献！ -## 🤗 支持 +## 支持 如果感觉本项目对你工作或学习有帮助，请帮我点一个✨Star,这将是对我极大的鼓励与支持, 也可以在下方请我喝一杯咖啡 ![sponsor](https://cdn.jsdelivr.net/gh/chansee97/static/sponsor.png) -## 🧾License +## [贡献者](https://github.com/chansee97/nova-admin/graphs/contributors) + +![Contributors](https://contrib.rocks/image?repo=chansee97/nova-admin) + +## 协议 [MIT](LICENSE) diff --git a/index.html b/index.html index e10ae82..fbc0533 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,17 @@ - - - - - %VITE_APP_NAME% - - -
-
- - + + + + + + %VITE_APP_NAME% + + + +
+
+ + + diff --git a/package.json b/package.json index adbcd65..ef0c5a7 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "admin-template", "vue-admin", "vue-admin-template", - "Vite4", + "Vite5", "Vite", "vite-admin", "TypeScript", @@ -44,17 +44,14 @@ "build:dev": "vue-tsc --noEmit && vite build --mode dev", "build:test": "vue-tsc --noEmit && vite build --mode test", "preview": "vite preview", - "lint": "eslint . --fix", + "lint": "eslint .", + "lint:fix": "eslint . --fix", "sizecheck": "npx vite-bundle-visualizer" }, - "config": { - "commitizen": { - "path": "./node_modules/cz-customizable" - } - }, "dependencies": { "@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", @@ -91,6 +88,11 @@ "vite-plugin-svg-icons": "^2.0.1", "vue-tsc": "^1.8.27" }, + "workspaces": { + "packages": [ + "packages/*" + ] + }, "simple-git-hooks": { "pre-commit": "pnpm lint-staged" }, diff --git a/src/service/api/login.ts b/src/service/api/login.ts index 96eb73d..b6c2a9c 100644 --- a/src/service/api/login.ts +++ b/src/service/api/login.ts @@ -1,4 +1,4 @@ -import { mockRequest } from '../http' +import { alovaInstance } from '../http' interface Ilogin { username: string @@ -6,14 +6,14 @@ interface Ilogin { } export function fetchLogin(params: Ilogin) { - return mockRequest.post('/login', params) + return alovaInstance.Post('/login', params) } export function fetchUpdateToken(params: any) { - return mockRequest.post('/updateToken', params) + return alovaInstance.Post('/updateToken', params) } export function fetchUserInfo(params: any) { - return mockRequest.get('/getUserInfo', { params }) + return alovaInstance.Get('/getUserInfo', { params }) } export function fetchUserRoutes(params: { id: number }) { - return mockRequest.get('/getUserRoutes', { params }) + return alovaInstance.Get('/getUserRoutes', { params }) } diff --git a/src/service/api/mock.ts b/src/service/api/mock.ts index ffac9ee..ce33ebc 100644 --- a/src/service/api/mock.ts +++ b/src/service/api/mock.ts @@ -1,5 +1,5 @@ -import { mockRequest } from '../http' +import { alovaInstance } from '../http' export function fetchUserList() { - return mockRequest.get('/userList') + return alovaInstance.Get('/userList') } diff --git a/src/service/api/test.ts b/src/service/api/test.ts index e3e2989..91e56d3 100644 --- a/src/service/api/test.ts +++ b/src/service/api/test.ts @@ -1,45 +1,45 @@ -import { mockRequest, request } from '../http' +import qs from 'qs' +import { alovaInstance } from '../http' /* get方法测试 */ export function fetachGet(params?: any) { - return request.get('/getAPI', { params }) + return alovaInstance.Get('/getAPI', { params }) } /* post方法测试 */ export function fetachPost(data: any) { - return request.post('/postAPI', data) + return alovaInstance.Post('/postAPI', data) } /* formPost方法测试 */ export function fetachFormPost(data: any) { - return request.formPost('/postAPI', data) + return alovaInstance.Post('/postAPI', qs.stringify(data), { + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + }) } /* delete方法测试 */ export function fetachDelete() { - return request.delete('/deleteAPI') + return alovaInstance.Delete('/deleteAPI') } /* put方法测试 */ export function fetachPut(data: any) { - return request.put('/putAPI', data) + return alovaInstance.Put('/putAPI', data) } /* 测试状态码500失败 */ export function testFailedRequest() { - return request.get('/filedRequest') + return alovaInstance.Get('/serverError') } /* 测试业务码500失败 */ export function testFailedResponse() { - return request.get('/filedResponse') + return alovaInstance.Post('/businessError') +} +/* token失效的接口 */ +export function expiredTokenRequest() { + return alovaInstance.Get('/expiredToken') } /* 测试token刷新接口 */ -export function testUpdataToken() { - return request.get('/updataToken') -} -/* 测试token刷新接口 */ -export function testFailedResponse_NT() { - return request.get('/failedResponse_NT') -} - -/* mock方法测试 */ -export function fetchMock() { - return mockRequest.post('/login') +export function refreshToken() { + return alovaInstance.Get('/updataToken') } diff --git a/src/service/http/alova.ts b/src/service/http/alova.ts new file mode 100644 index 0000000..42f501d --- /dev/null +++ b/src/service/http/alova.ts @@ -0,0 +1,83 @@ +import type { Method } from 'alova' +import { createAlova } from 'alova' +import VueHook from 'alova/vue' +import GlobalFetch from 'alova/GlobalFetch' +import { + handleBusinessError, + handleRefreshToken, + handleResponseError, + handleServiceResult, +} from './handle' +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 +} + +export function createAlovaInstance( + alovaConfig: AlovaConfig, + backendConfig?: Service.BackendConfig, +) { + const _backendConfig = { ...DEFAULT_BACKEND_OPTIONS, ...backendConfig } + const _alovaConfig = { ...DEFAULT_ALOVA_OPTIONS, ...alovaConfig } + + return createAlova({ + statesHook: VueHook, + requestAdapter: GlobalFetch(), + localCache: null, + baseURL: _alovaConfig.baseURL, + timeout: _alovaConfig.timeout, + + beforeRequest(method) { + // 添加token到请求头 + method.config.headers.token = `Bearer ${local.get('token')}` + alovaConfig.beforeRequest?.(method) + }, + + responded: { + // 请求成功的拦截器 + onSuccess: async (response, method) => { + const { status } = response + + if (status === 200) { + // 获取返回的数据 + 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) + } + // 接口请求失败 + const errorResult = handleResponseError(response) + return handleServiceResult(null, errorResult) + }, + onError: (error, _method) => { + console.warn('🚀 ~ error:', error) + }, + + onComplete: async (_method) => { + // 处理请求完成逻辑 + }, + }, + }) +} diff --git a/src/service/http/config.ts b/src/service/http/config.ts new file mode 100644 index 0000000..c3b7c64 --- /dev/null +++ b/src/service/http/config.ts @@ -0,0 +1,63 @@ +/** 默认实例的Aixos配置 */ +import type { AxiosRequestConfig } from 'axios' + +export const DEFAULT_AXIOS_OPTIONS: AxiosRequestConfig = { + // 请求超时时间,默认15秒 + timeout: 15 * 1000, +} +export const DEFAULT_ALOVA_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/service/http/handle.ts b/src/service/http/handle.ts index 266df2c..5669527 100644 --- a/src/service/http/handle.ts +++ b/src/service/http/handle.ts @@ -1,4 +1,4 @@ -import type { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios' +import type { AxiosError } from 'axios' import { showError } from './utils' import { DEFAULT_REQUEST_ERROR_CODE, @@ -8,7 +8,7 @@ import { NETWORK_ERROR_MSG, REQUEST_TIMEOUT_CODE, REQUEST_TIMEOUT_MSG, -} from '@/config' +} from './config' import { useAuthStore } from '@/store' import { fetchUpdateToken } from '@/service' import { local } from '@/utils' @@ -20,9 +20,9 @@ type ErrorStatus = keyof typeof ERROR_STATUS * @param {AxiosError} err * @return {*} */ -export function handleAxiosError(err: AxiosError) { +export function handleFontEndError(err: AxiosError) { const error: Service.RequestError = { - type: 'Axios', + type: 'Alova', code: DEFAULT_REQUEST_ERROR_CODE, msg: DEFAULT_REQUEST_ERROR_MSG, } @@ -54,7 +54,7 @@ export function handleAxiosError(err: AxiosError) { * @param {AxiosResponse} response * @return {*} */ -export function handleResponseError(response: AxiosResponse) { +export function handleResponseError(response: Response) { const error: Service.RequestError = { type: 'Axios', code: DEFAULT_REQUEST_ERROR_CODE, @@ -83,7 +83,7 @@ export function handleResponseError(response: AxiosResponse) { * @param {Service} config axios字段配置 * @return {*} */ -export function handleBusinessError(data: Record, config: Service.BackendResultConfig) { +export function handleBusinessError(data: Record, config: Service.BackendConfig) { const { codeKey, msgKey } = config const error: Service.RequestError = { type: 'Business', @@ -119,23 +119,18 @@ export function handleServiceResult(data: any, error: Service.RequestEr /** * @description: 处理接口token刷新 - * @param {AxiosRequestConfig} config axios字段配置 * @return {*} */ -export async function handleRefreshToken(config: AxiosRequestConfig) { +export async function handleRefreshToken() { const authStore = useAuthStore() const refreshToken = local.get('refreshToken') const { data } = await fetchUpdateToken(refreshToken) if (data) { - local.set('refreshToken', data.accessToken) - local.set('token', data.refreshToken) - - // 设置token - if (config.headers) - typeof config.headers.set === 'function' && config.headers.set('Authorization', `Bearer ${data.accessToken || ''}`) - - return config + local.set('token', data.accessToken) + local.set('refreshToken', data.refreshToken) + } + else { + // 刷新失败，推出 + await authStore.resetAuthStore() } - await authStore.resetAuthStore() - return null } diff --git a/src/service/http/index.ts b/src/service/http/index.ts index 00a115f..a1733da 100644 --- a/src/service/http/index.ts +++ b/src/service/http/index.ts @@ -1,4 +1,5 @@ import { createRequest } from './request' +import { createAlovaInstance } from './alova' import { proxyConfig } from '@/config' const { url, urlPattern } = proxyConfig[import.meta.env.MODE] @@ -15,3 +16,7 @@ export const request = createRequest({ export const mockRequest = createRequest({ baseURL: 'https://mock.apifox.com/m1/4071143-0-default' }, { msgKey: 'message', }) + +export const alovaInstance = createAlovaInstance({ + baseURL: 'https://mock.apifox.com/m1/4071143-0-default', +}) diff --git a/src/service/http/instance.ts b/src/service/http/instance.ts index 3420f4d..6a45432 100644 --- a/src/service/http/instance.ts +++ b/src/service/http/instance.ts @@ -1,15 +1,15 @@ import axios from 'axios' import type { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios' import { - handleAxiosError, 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' -import { DEFAULT_AXIOS_OPTIONS, DEFAULT_BACKEND_OPTIONS, REFRESH_TOKEN_CODE } from '@/config' /** * @description: 封装axios请求类 @@ -18,11 +18,11 @@ export default class CreateAxiosInstance { // axios 实例 instance: AxiosInstance // 后台字段配置 - backendConfig: Service.BackendResultConfig + backendConfig: Service.BackendConfig // 基础配置 axiosConfig: AxiosRequestConfig = {} - constructor(axiosConfig: AxiosRequestConfig, backendConfig: Partial = DEFAULT_BACKEND_OPTIONS) { + constructor(axiosConfig: AxiosRequestConfig, backendConfig: Partial = DEFAULT_BACKEND_OPTIONS) { // 设置了axios实例上的一些默认配置,新配置会覆盖默认配置 this.backendConfig = { ...DEFAULT_BACKEND_OPTIONS, ...backendConfig } this.instance = axios.create({ ...DEFAULT_AXIOS_OPTIONS, ...axiosConfig }) @@ -48,7 +48,7 @@ export default class CreateAxiosInstance { return handleConfig }, (error: AxiosError) => { - const errorResult = handleAxiosError(error) + const errorResult = handleFontEndError(error) return handleServiceResult(null, errorResult) }, ) @@ -79,7 +79,7 @@ export default class CreateAxiosInstance { }, (error: AxiosError) => { // 处理http常见错误，进行全局提示等 - const errorResult = handleAxiosError(error) + const errorResult = handleFontEndError(error) return handleServiceResult(null, errorResult) }, ) diff --git a/src/service/http/request.ts b/src/service/http/request.ts index 7edb2df..1c625ed 100644 --- a/src/service/http/request.ts +++ b/src/service/http/request.ts @@ -34,7 +34,7 @@ async function getRequestResponse(options: { */ export function createRequest( axiosConfig: AxiosRequestConfig, - backendConfig?: Partial, + backendConfig?: Partial, ) { const axiosInstance = new CreateAxiosInstance(axiosConfig, backendConfig) /** diff --git a/src/service/http/utils.ts b/src/service/http/utils.ts index 432b7f8..cb3dede 100644 --- a/src/service/http/utils.ts +++ b/src/service/http/utils.ts @@ -54,7 +54,7 @@ function handleFormData(data: Record) { * 接口提交的参数去除无效字段 * @param requestData -接口提交的参数 */ -export function clearInvalidParameters(requestData: Record) { +export function clearInvalidParameters(requestData?: Record) { const result: Record = {} for (const key in requestData) { if (isEmpty(requestData[key]) || isNullOrUnDef(requestData[key])) diff --git a/src/typings/service.d.ts b/src/typings/service.d.ts index f830c3c..7fd2199 100644 --- a/src/typings/service.d.ts +++ b/src/typings/service.d.ts @@ -1,7 +1,8 @@ /** 请求的相关类型 */ declare namespace Service { + /** 后端接口返回的数据结构配置 */ - interface BackendResultConfig { + interface BackendConfig { /** 表示后端请求状态码的属性字段 */ codeKey: string /** 表示后端请求数据的属性字段 */ @@ -12,7 +13,7 @@ declare namespace Service { successCode: number | string } - type RequestErrorType = 'Axios' | 'Response' | 'Business' + type RequestErrorType = 'Axios' | '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 f8d8b00..d42f758 100644 --- a/src/views/list/commonList/index.vue +++ b/src/views/list/commonList/index.vue @@ -19,7 +19,7 @@ const model = ref({ ...initialModel }) const formRef = ref() function sendMail(id: number) { - window.$message?.success(`用户id:${id}`) + window.$message?.success(`删除用户id:${id}`) } const columns: DataTableColumns = [ { @@ -166,63 +166,24 @@ function handleAddTable() {