blackteay/nova-admin
1
0
Fork 0
mirror of https://github.com/chansee97/nova-admin.git synced 2025-04-06 03:57:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(projects): 增加axios

Browse Source
This commit is contained in:
‘chen.home’ 2022-08-07 01:45:38 +08:00
parent 8f0adf25c9
commit cbe7ed73ae
13 changed files with 140 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintignore
View File

@ -11,5 +11,5 @@ lib
/docs /docs
.vscode .vscode
.local .local
!.env-config.ts !.env.config.ts
components.d.ts components.d.ts

2
build/plugins/compress.ts
View File

@ -1,6 +1,6 @@
import viteCompression from 'vite-plugin-compression'; //https://github.com/vbenjs/vite-plugin-compression/blob/main/README.zh_CN.md import viteCompression from 'vite-plugin-compression'; //https://github.com/vbenjs/vite-plugin-compression/blob/main/README.zh_CN.md
export default (env) => { export default (env: ImportMetaEnv) => {
// 默认使用gzip压缩 // 默认使用gzip压缩
const { VITE_COMPRESS_TYPE = 'gzip' } = env; const { VITE_COMPRESS_TYPE = 'gzip' } = env;
return viteCompression({ return viteCompression({

2
build/plugins/index.ts
View File

@ -10,7 +10,7 @@ import unplugin from './unplugin';
* @param {*} env - 环境变量配置 * @param {*} env - 环境变量配置
* @return {*} * @return {*}
*/ */
export function setVitePlugins(env) { export function setVitePlugins(env: ImportMetaEnv) {
const plugins = [...vue, html(env), unocss, ...unplugin]; const plugins = [...vue, html(env), unocss, ...unplugin];
// 是否压缩 // 是否压缩
if (env.VITE_COMPRESS_OPEN === 'Y') { if (env.VITE_COMPRESS_OPEN === 'Y') {

2
index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/pixel.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title %></title> <title><%= title %></title>
</head> </head>

1
package.json
View File

@ -24,6 +24,7 @@
"./src/**/*.{js,jsx,ts,tsx,less,json}": "prettier --loglevel warn --write" "./src/**/*.{js,jsx,ts,tsx,less,json}": "prettier --loglevel warn --write"
}, },
"dependencies": { "dependencies": {
"axios": "^0.27.2",
"vue": "^3.2.37", "vue": "^3.2.37",
"vue-router": "^4.1.3" "vue-router": "^4.1.3"
}, },

0
public/pixel.svg → public/favicon.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

2
src/App.vue
View File

@ -16,7 +16,7 @@ const themeOverrides: GlobalThemeOverrides = {
</script> </script>
<template> <template>
<n-config-provider :theme="null" :locale="locale" :date-locale="dateLocale" :theme-overrides="themeOverrides"> <n-config-provider wh-full :theme="null" :locale="locale" :date-locale="dateLocale" :theme-overrides="themeOverrides">
<router-view /> <router-view />
</n-config-provider> </n-config-provider>
</template> </template>

4
src/types/env.d.ts vendored
View File

@ -5,10 +5,10 @@ interface ImportMetaEnv {
readonly VITE_APP_TITLE: string; readonly VITE_APP_TITLE: string;
/** 开启请求代理 */ /** 开启请求代理 */
readonly VITE_HTTP_PROXY?: 'Y' | 'N'; readonly VITE_HTTP_PROXY?: 'Y' | 'N';
/** 是否开启打包压缩 */
readonly VITE_COMPRESS?: 'Y' | 'N';
/** 是否开启打包依赖分析 */ /** 是否开启打包依赖分析 */
readonly VITE_VISUALIZER?: 'Y' | 'N'; readonly VITE_VISUALIZER?: 'Y' | 'N';
/** 是否开启打包压缩 */
readonly VITE_COMPRESS_OPEN?: 'Y' | 'N';
/** 压缩算法类型 */ /** 压缩算法类型 */
readonly VITE_COMPRESS_TYPE?: 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw'; readonly VITE_COMPRESS_TYPE?: 'gzip' | 'brotliCompress' | 'deflate' | 'deflateRaw';
/** hash路由模式 */ /** hash路由模式 */

14
src/types/systeam.d.ts vendored Normal file
View File

@ -0,0 +1,14 @@
/** 请求的相关类型 */
declare namespace Service {
/** 后端接口返回的数据结构配置 */
interface BackendResultConfig {
/** 表示后端请求状态码的属性字段 */
codeKey: string;
/** 表示后端请求数据的属性字段 */
dataKey: string;
/** 表示后端消息的属性字段 */
msgKey: string;
/** 后端业务上定义的成功请求的状态 */
successCode: number | string;
}
}

0
src/utils/http/index.ts Normal file
View File

54
src/utils/http/instance.ts Normal file
View File

@ -0,0 +1,54 @@
import axios from 'axios';
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
/**
* @description: 封装axios请求类
*/
export default class createAxiosInstance {
// axios 实例
instance: AxiosInstance;
// 后台字段配置
backendConfig: Service.BackendResultConfig;
// 基础配置，url和超时时间
baseConfig: AxiosRequestConfig = { baseURL: '/api', timeout: 60000 };
constructor(
config: AxiosRequestConfig,
backendConfig: Service.BackendResultConfig = {
codeKey: 'code',
dataKey: 'data',
msgKey: 'msg',
successCode: '200',
},
) {
this.backendConfig = backendConfig;
this.instance = axios.create(config);
this.setInterceptor();
}
// 设置类拦截器
setInterceptor() {
this.instance.interceptors.request.use(
(config: AxiosRequestConfig) => {
// 一般会请求拦截里面加token
console.log('全局请求拦截器');
return config;
},
(err: any) => err,
);
this.instance.interceptors.response.use(
// 因为接口的数据都在res.data下，所以直接返回res.data
// 系统如果有自定义code也可以在这里处理
(res: AxiosResponse) => {
console.log('全局响应拦截器');
return res.data;
},
(err: any) => {
// 这里用来处理http常见错误，进行全局提示
console.log('错误状态码：', err.response.status);
// 这里是AxiosError类型，所以一般我们只reject我们需要的响应即可
return Promise.reject(err.response);
},
);
}
}

58
src/utils/http/request.ts Normal file
View File

@ -0,0 +1,58 @@
import type { AxiosInstance, AxiosRequestConfig } from 'axios';
import createAxiosInstance from './instance';
type RequestMethod = 'get' | 'post' | 'put' | 'delete';
// 获取aixos请求方法
async function getRequestResponse(
instance: AxiosInstance,
method: RequestMethod,
url: string,
data?: any,
config?: AxiosRequestConfig,
) {
let res: any;
if (method === 'get' || method === 'delete') {
res = await instance[method](url, config);
} else {
res = await instance[method](url, data, config);
}
return res;
}
interface RequestParam {
url: string;
method?: RequestMethod;
data?: any;
axiosConfig?: AxiosRequestConfig;
}
export function createRequest(axiosConfig: AxiosRequestConfig, backendConfig?: Service.BackendResultConfig) {
const axiosInstance = new createAxiosInstance(axiosConfig, backendConfig);
/**
* 异步promise请求
* @param param - 请求参数
* - url: 请求地址
* - method: 请求方法(默认get)
* - data: 请求的body的data
* - axiosConfig: axios配置
*/
async function asyncRequest(param: RequestParam) {
const { instance } = axiosInstance;
const method = param.method || 'get';
const { url } = param;
const res = await getRequestResponse(instance, method, url, param.data, param.axiosConfig);
return res;
}
/**
* @description: get请求
* @param {string} url
* @param {AxiosRequestConfig} config
* @return {*}
*/
function get(url: string, config: AxiosRequestConfig) {
return asyncRequest({ url, method: 'get', axiosConfig: config });
}
}

7
src/views/test/test1.vue
View File

@ -1,7 +1,12 @@
<template> <template>
<div text-center c-blue>I prove that you have made the jump test1.</div> <div text-center c-blue>I prove that you have made the jump test1.</div>
<div @click="pinter">click me</div>
</template> </template>
<script setup lang="ts"></script> <script setup lang="ts">
const pinter = () => {
console.log('打印环境配置', import.meta.env);
};
</script>
<style scoped></style> <style scoped></style>