diff --git a/.vscode/settings.json b/.vscode/settings.json
index e865471..1896e70 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -46,5 +46,10 @@
},
"editor.suggest.snippetsPreventQuickSuggestions": false,
"prettier.htmlWhitespaceSensitivity": "ignore",
- "prettier.vueIndentScriptAndStyle": true
+ "prettier.vueIndentScriptAndStyle": true,
+ "docthis.authorName": "chuzhixin 1204505056@qq.com",
+ "docthis.includeAuthorTag": true,
+ "docthis.includeDescriptionTag": true,
+ "docthis.enableHungarianNotationEvaluation": true,
+ "docthis.inferTypesFromNames": true
}
diff --git a/mock/controller/changeLog.js b/mock/controller/changeLog.js
index 4e51fc1..d272895 100644
--- a/mock/controller/changeLog.js
+++ b/mock/controller/changeLog.js
@@ -162,13 +162,17 @@ const data = [
content: "全局axios请求全面支持Status Code拦截处理",
timestamp: "2020-07-29",
},
+ {
+ content: "重构全局loadding加载代码",
+ timestamp: "2020-07-31",
+ },
];
export default [
{
url: "/changeLog/getList",
type: "post",
- response(config) {
+ response() {
return {
code: 200,
msg: "success",
diff --git a/package.json b/package.json
index ac7887a..303ac82 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
"jsencrypt": "^3.0.0-rc.1",
"jsonlint": "^1.6.3",
"lodash": "^4.17.19",
- "maptalks": "^0.47.5",
+ "maptalks": "^0.48.0",
"mapv": "^2.0.56",
"nprogress": "^0.2.0",
"qs": "^6.9.4",
@@ -88,7 +88,7 @@
"@vue/cli-plugin-vuex": "^4.4.6",
"@vue/cli-service": "^4.4.6",
"@vue/eslint-config-prettier": "^6.0.0",
- "autoprefixer": "^9.8.5",
+ "autoprefixer": "^9.8.6",
"babel-eslint": "^10.1.0",
"compression-webpack-plugin": "^4.0.0",
"eslint": "^7.5.0",
diff --git a/src/layouts/components/index.js b/src/layouts/components/index.js
index 645619d..4e7b8cd 100644
--- a/src/layouts/components/index.js
+++ b/src/layouts/components/index.js
@@ -2,20 +2,20 @@
* @copyright chuzhixin 1204505056@qq.com
* @description 公共布局导出,已封装成npm,便于此后在线升级,当然也存在一定的弊端,给开发者自定义增加了一定的困难,如果您一定要进行高度自定义,请仔细阅读VIP群文档,layouts本地化篇
*/
-export { default as ColorfullIcon } from "zx-layouts/ColorfullIcon";
-export { default as RemixIcon } from "zx-layouts/RemixIcon";
-export { default as VabDrag } from "zx-layouts/Drag";
-export { default as VabPermissions } from "zx-layouts/Permissions";
-export { default as VabQueryForm } from "zx-layouts/VabQueryForm/export";
-export { default as Logo } from "zx-layouts/Logo";
-export { default as Avatar } from "zx-layouts/Avatar";
+export { default as ColorfullIcon } from "./zx-layouts/ColorfullIcon";
+export { default as RemixIcon } from "./zx-layouts/RemixIcon";
+export { default as VabDrag } from "./zx-layouts/Drag";
+export { default as VabPermissions } from "./zx-layouts/Permissions";
+export { default as VabQueryForm } from "./zx-layouts/VabQueryForm/export";
+export { default as Logo } from "./zx-layouts/Logo";
+export { default as Avatar } from "./zx-layouts/Avatar";
export { default as Ad } from "./Ad";
-export { default as AppMain } from "zx-layouts/AppMain";
-export { default as TagsBar } from "zx-layouts/TagsBar";
-export { default as SideBar } from "zx-layouts/SideBar";
-export { default as Breadcrumb } from "zx-layouts/Breadcrumb";
-export { default as FullScreenBar } from "zx-layouts/FullScreenBar";
-export { default as ErrorLog } from "zx-layouts/ErrorLog";
-export { default as ThemeBar } from "zx-layouts/ThemeBar";
-export { default as TopBar } from "zx-layouts/TopBar";
-export { default as NavBar } from "zx-layouts/NavBar";
+export { default as AppMain } from "./zx-layouts/AppMain";
+export { default as TagsBar } from "./zx-layouts/TagsBar";
+export { default as SideBar } from "./zx-layouts/SideBar";
+export { default as Breadcrumb } from "./zx-layouts/Breadcrumb";
+export { default as FullScreenBar } from "./zx-layouts/FullScreenBar";
+export { default as ErrorLog } from "./zx-layouts/ErrorLog";
+export { default as ThemeBar } from "./zx-layouts/ThemeBar";
+export { default as TopBar } from "./zx-layouts/TopBar";
+export { default as NavBar } from "./zx-layouts/NavBar";
diff --git a/src/utils/request.js b/src/utils/request.js
index cb9b3e7..5084f08 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,59 +1,90 @@
+import Vue from "vue";
import axios from "axios";
import {
baseURL,
contentType,
+ debounce,
invalidCode,
- messageDuration,
noPermissionCode,
requestTimeout,
successCode,
tokenName,
- debounce,
} from "@/config/settings";
-import { Loading, Message } from "element-ui";
import store from "@/store";
import qs from "qs";
import router from "@/router";
-import _ from "lodash";
import { isArray } from "@/utils/validate";
-const service = axios.create({
+let loadingInstance;
+
+/**
+ * @copyright chuzhixin 1204505056@qq.com
+ * @description 判断当前url是否需要加loading
+ * @param {*} config
+ * @returns
+ */
+const needLoading = (config) => {
+ let status = false;
+ debounce.forEach((item) => {
+ if (Vue.prototype.$baseLodash.includes(config.url, item)) {
+ status = true;
+ }
+ });
+ return status;
+};
+
+/**
+ * @copyright chuzhixin 1204505056@qq.com
+ * @description 处理code异常
+ * @param {*} code
+ * @param {*} msg
+ */
+const handleCode = (code, msg) => {
+ switch (code) {
+ case invalidCode:
+ Vue.prototype.$baseMessage(msg || `后端接口${code}异常`, "error");
+ store.dispatch("user/resetAccessToken").catch(() => {});
+ break;
+ case noPermissionCode:
+ router.push({ path: "/401" }).catch(() => {});
+ break;
+ default:
+ Vue.prototype.$baseMessage(msg || `后端接口${code}异常`, "error");
+ break;
+ }
+};
+
+const instance = axios.create({
baseURL,
timeout: requestTimeout,
headers: {
"Content-Type": contentType,
},
});
-let loadingInstance;
-service.interceptors.request.use(
+
+instance.interceptors.request.use(
(config) => {
if (store.getters["user/accessToken"]) {
config.headers[tokenName] = store.getters["user/accessToken"];
}
- if (config.data) {
- //这里会过滤所有为空、0、false的key,如果不需要请自行注释
- config.data = _.pickBy(config.data, _.identity);
- }
- if (process.env.NODE_ENV !== "preview") {
- if (contentType === "application/x-www-form-urlencoded;charset=UTF-8") {
- if (config.data) {
- config.data = qs.stringify(config.data);
- }
- }
- }
- const needLoading = () => {
- let status = false;
- debounce.forEach((item) => {
- if (_.includes(config.url, item)) {
- status = true;
- }
- });
- return status;
- };
- if (needLoading()) {
- loadingInstance = Loading.service();
+ //这里会过滤所有为空、0、false的key,如果不需要请自行注释
+ if (config.data)
+ config.data = Vue.prototype.$baseLodash.pickBy(
+ config.data,
+ Vue.prototype.$baseLodash.identity
+ );
+
+ if (
+ process.env.NODE_ENV !== "preview" &&
+ contentType === "application/x-www-form-urlencoded;charset=UTF-8" &&
+ config.data
+ ) {
+ config.data = qs.stringify(config.data);
}
+ if (needLoading(config)) {
+ loadingInstance = Vue.prototype.$baseLoading();
+ }
return config;
},
(error) => {
@@ -61,41 +92,21 @@ service.interceptors.request.use(
}
);
-const errorMsg = (message) => {
- return Message({
- message: message,
- type: "error",
- duration: messageDuration,
- });
-};
-
-service.interceptors.response.use(
+instance.interceptors.response.use(
(response) => {
- if (loadingInstance) {
- loadingInstance.close();
- }
+ if (loadingInstance) loadingInstance.close();
+
const { status, data, config } = response;
const { code, msg } = data;
// 操作正常Code数组
- let codeVerificationArray = isArray(successCode)
+ const codeVerificationArray = isArray(successCode)
? [...successCode]
: [...[successCode]];
// 是否操作正常
if (codeVerificationArray.includes(code)) {
return data;
} else {
- switch (code) {
- case invalidCode:
- errorMsg(msg || `后端接口${code}异常`);
- store.dispatch("user/resetAccessToken").catch(() => {});
- break;
- case noPermissionCode:
- router.push({ path: "/401" }).catch(() => {});
- break;
- default:
- errorMsg(msg || `后端接口${code}异常`);
- break;
- }
+ handleCode(code, msg);
return Promise.reject(
"vue-admin-beautiful请求异常拦截:" +
JSON.stringify({ url: config.url, code, msg }) || "Error"
@@ -103,26 +114,14 @@ service.interceptors.response.use(
}
},
(error) => {
- if (loadingInstance) {
- loadingInstance.close();
+ if (loadingInstance) loadingInstance.close();
+ const { response, message } = error;
+ if (error.response && error.response.data) {
+ const { status, data } = response;
+ handleCode(status, data.msg || message);
+ return Promise.reject(error);
}
- /*网络连接过程异常处理*/
- let { message } = error;
- if (message === "Network Error") {
- message = "后端接口连接异常";
- }
- if (message.includes("timeout")) {
- message = "后端接口请求超时";
- }
- if (message.includes("Request failed with status code")) {
- message = "后端接口" + message.substr(message.length - 3) + "异常";
- }
- if (error.response) {
- const { data } = error.response;
- message = data.msg;
- }
- errorMsg(message || "后端接口未知异常");
- return Promise.reject(error);
}
);
-export default service;
+
+export default instance;
diff --git a/src/utils/vab.js b/src/utils/vab.js
index 3b82a87..91854cd 100644
--- a/src/utils/vab.js
+++ b/src/utils/vab.js
@@ -17,7 +17,7 @@ const install = (Vue, opts = {}) => {
return title;
})();
/* 全局加载层 */
- Vue.prototype.$baseLoading = (index, text, callback) => {
+ Vue.prototype.$baseLoading = (index, text) => {
let loading;
if (!index) {
loading = Loading.service({
@@ -33,16 +33,10 @@ const install = (Vue, opts = {}) => {
background: "hsla(0,0%,100%,.8)",
});
}
- if (callback) {
- callback(loading);
- } else {
- setTimeout(() => {
- loading.close();
- }, messageDuration);
- }
+ return loading;
};
/* 全局多彩加载层 */
- Vue.prototype.$baseColorfullLoading = (index, text, callback) => {
+ Vue.prototype.$baseColorfullLoading = (index, text) => {
let loading;
if (!index) {
loading = Loading.service({
@@ -73,13 +67,7 @@ const install = (Vue, opts = {}) => {
background: "hsla(0,0%,100%,.8)",
});
}
- if (callback) {
- callback(loading);
- } else {
- setTimeout(() => {
- loading.close();
- }, messageDuration);
- }
+ return loading;
};
/* 全局Message */
Vue.prototype.$baseMessage = (message, type) => {
diff --git a/src/views/vab/loading/index.vue b/src/views/vab/loading/index.vue
index 243c584..509edee 100644
--- a/src/views/vab/loading/index.vue
+++ b/src/views/vab/loading/index.vue
@@ -11,9 +11,6 @@
效果7
效果8
效果9
-
- 全局默认骨架屏(仿支付宝)
-
@@ -41,13 +38,16 @@
},
methods: {
handleLoading(index) {
- this.$baseLoading(index);
+ const Loading = this.$baseLoading(index);
+ setTimeout(() => {
+ Loading.close();
+ }, 3000);
},
handleColorfullLoading(index) {
- this.$baseColorfullLoading(index);
- },
- test() {
- location.reload();
+ const Loading = this.$baseColorfullLoading(index);
+ setTimeout(() => {
+ Loading.close();
+ }, 3000);
},
},
};