✨ 1.更新依赖 2.拆分公共配置 3.完善登录、公共请求逻辑

mock/controller/router.js

@@ -6,7 +6,7 @@
  * name:"Demo"                    首字母大写，一定要与vue文件的name对应起来，用于noKeepAlive缓存控制（该项特别重要）
  * meta:{
     title:"title"                 菜单、面包屑、多标签页显示的名称
-    roles:["admin","..."]         当config/settings.js中rolesControl配置开启时，用于控制角色
+    roles:["admin","..."]         当config/index.js中rolesControl配置开启时，用于控制角色
     roles: {
       role: ["admin"],
       ability: ["READ","WRITE","DELETE"],         ability: ["READ","WRITE"],

mock/mockServer.js

@@ -3,7 +3,7 @@ const bodyParser = require("body-parser");
 const chalk = require("chalk");
 const path = require("path");
 const Mock = require("mockjs");
-const { baseURL } = require("../src/config/settings");
+const { baseURL } = require("../src/config");
 const mockDir = path.join(process.cwd(), "mock");
 
 /**

package.json

@@ -38,8 +38,8 @@
     "compression-webpack-plugin": "^6.0.2",
     "eslint": "^7.10.0",
     "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-vue": "^7.0.0",
-    "filemanager-webpack-plugin": "^2.0.5",
+    "eslint-plugin-vue": "^7.0.1",
+    "filemanager-webpack-plugin": "^3.0.0-alpha.1",
     "less": "^3.13.1-alpha.1",
     "less-loader": "^7.0.1",
     "lint-staged": "^10.4.0",

src/api/user.js

@@ -1,5 +1,5 @@
 import request from "@/utils/request";
-import { tokenName } from "@/config/settings";
+import { tokenName } from "@/config";
 
 export async function login(data) {
   return request({

src/config/config.js

@@ -0,0 +1,7 @@
+/**
+ * @description 导出自定义配置
+ **/
+const config = {
+  layout: "gallery",
+};
+module.exports = config;

src/config/default/index.js

@@ -0,0 +1,8 @@
+/**
+ * @description 导出默认配置(通用配置|主题配置|网络配置)
+ **/
+const setting = require("./setting.config");
+const theme = require("./theme.config");
+const network = require("./net.config");
+
+module.exports = { setting, theme, network };

src/config/default/net.config.js

@@ -0,0 +1,14 @@
+/**
+ * @description 导出默认网路配置
+ **/
+const network = {
+  //配后端数据的接收方式application/json;charset=UTF-8 或 application/x-www-form-urlencoded;charset=UTF-8
+  contentType: "application/json;charset=UTF-8",
+  //消息框消失时间
+  messageDuration: 3000,
+  //最长请求时间
+  requestTimeout: 10000,
+  //操作正常code，支持String、Array、int多种类型
+  successCode: [200, 0],
+};
+module.exports = network;

src/config/default/setting.config.js

@@ -1,8 +1,7 @@
 /**
- * @author chuzhixin 1204505056@qq.com
- * @description 全局变量配置
+ * @description 导出默认通用配置
  */
-module.exports = {
+const setting = {
   //开发以及部署时的URL，hash模式时在不确定二级目录名称的情况下建议使用""代表相对路径或者"/二级目录/"，history模式默认使用"/"或者"/二级目录/"
   publicPath: "",
   //生产环境构建文件的目录名
@@ -12,16 +11,12 @@ module.exports = {
   //开发环境每次保存时是否输出为eslint编译警告
   lintOnSave: true,
   //进行编译的依赖
-  transpileDependencies: [],
+  transpileDependencies: ["vue-echarts", "resize-detector"],
   //默认的接口地址 如果是开发环境和生产环境走vab-mock-server，当然你也可以选择自己配置成需要的接口地址
   baseURL:
-    process.env.NODE_ENV === "development"
-      ? "vab-mock-server"
-      : "vab-mock-server",
-  //是否显示logo，不显示时设置false，显示时请填写remixIcon图标名称，暂时只支持设置remixIcon
-  logo: "vuejs-fill",
+    process.env.NODE_ENV === "development" ? "mock-server" : "mock-server",
   //标题 （包括初次加载雪花屏的标题 页面的标题 浏览器的标题）
-  title: "vue-admin-beautiful-antdv",
+  title: "vue-admin-beautiful-pro",
   //标题分隔符
   titleSeparator: " - ",
   //标题是否反转 如果为false:"page - title"，如果为ture:"title - page"
@@ -34,40 +29,51 @@ module.exports = {
   version: process.env.VUE_APP_VERSION,
   //pro版本copyright可随意修改
   copyright: "chuzhixin 1204505056@qq.com",
+  //缓存路由的最大数量
+  keepAliveMaxNum: 99,
+  //路由模式，可选值为 history 或 hash
+  routerMode: "hash",
   //不经过token校验的路由
   routesWhiteList: ["/login", "/register", "/callback", "/404", "/401"],
+  //加载时显示文字
+  loadingText: "正在加载中...",
   //token名称
   tokenName: "accessToken",
   //token在localStorage、sessionStorage、cookie存储的key的名称
-  tokenTableName: "vue-admin-beautiful-accessToken",
+  tokenTableName: "accessToken",
   //token存储位置localStorage sessionStorage cookie
   storage: "localStorage",
   //token失效回退到登录页时是否记录本次的路由
   recordRoute: true,
-  //配后端数据的接收方式application/json;charset=UTF-8或者application/x-www-form-urlencoded;charset=UTF-8
-  contentType: "application/json;charset=UTF-8",
-  //消息框消失时间
-  messageDuration: 3000,
-  //最长请求时间
-  requestTimeout: 10000,
-  //操作正常code，支持String、Array、int多种类型
-  successCode: [200, 0],
-  //登录失效code
-  invalidCode: 402,
-  //无角色code
-  noRoleCode: 401,
+  //是否显示logo，不显示时设置false，显示时请填写remixIcon图标名称，暂时只支持设置remixIcon
+  logo: "vuejs-fill",
+  //语言类型zh、en
+  i18n: "zh",
+  //在哪些环境下显示高亮错误
+  errorLog: ["development", "production"],
   //是否开启登录拦截
   loginInterception: true,
+  //是否开启登录RSA加密
+  loginRSA: false,
   //intelligence（前端导出路由）和all（后端导出路由）两种方式
   authentication: "intelligence",
   //是否开启roles字段进行角色权限控制（如果是all模式后端完全处理角色并进行json组装，可设置false不处理路由中的roles字段）
   rolesControl: true,
+  //vertical gallery comprehensive common布局时是否只保持一个子菜单的展开
+  uniqueOpened: false,
+  //vertical布局时默认展开的菜单path，使用逗号隔开建议只展开一个
+  defaultOpeneds: ["/vab"],
   //需要加loading层的请求，防止重复提交
   debounce: ["doEdit"],
   //需要自动注入并加载的模块
   providePlugin: {},
   //npm run build时是否自动生成7z压缩包
   build7z: false,
+  //代码生成机生成在view下的文件夹名称
+  templateFolder: "project",
   //是否显示终端donation打印
   donation: false,
+  //画廊布局和综合布局时，是否点击一级菜单默认开启第一个二级菜单
+  openFirstMenu: true,
 };
+module.exports = setting;

src/config/default/theme.config.js

@@ -0,0 +1,28 @@
+/**
+ * @description 导出默认主题配置
+ */
+const theme = {
+  //布局种类 horizontal vertical gallery comprehensive common
+  layout: "horizontal",
+  //主题名称 default ocean green glory white
+  themeName: "default",
+  //是否固定头部
+  fixedHeader: true,
+  //是否显示顶部进度条
+  showProgressBar: true,
+  //是否显示多标签页
+  showTabsBar: true,
+  //是否显示语言选择组件
+  showLanguage: true,
+  //是否显示刷新组件
+  showRefresh: true,
+  //是否显示搜索组件
+  showSearch: true,
+  //是否显示主题组件
+  showTheme: true,
+  //是否显示通知组件
+  showNotice: true,
+  //是否显示全屏组件
+  showFullScreen: true,
+};
+module.exports = theme;

src/config/index.js

@@ -0,0 +1,9 @@
+/**
+ * @description 3个子配置，通用配置|主题配置|网络配置，建议在当前目录下修改config.js修改配置，会覆盖默认配置，也可以直接修改默认配置
+ */
+//默认配置
+const { setting, theme, network } = require("./default");
+//自定义配置
+const config = require("./config");
+//导出配置（以自定义配置为主）
+module.exports = Object.assign({}, setting, theme, network, config);

src/layout/vab-avatar/index.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-  import { recordRoute } from "@/config/settings";
+  import { recordRoute } from "@/config";
   import { DownOutlined } from "@ant-design/icons-vue";
 
   import { mapGetters } from "vuex";

src/store/modules/routes.js

@@ -29,7 +29,6 @@ const actions = {
   async setRoutes({ commit }) {
     const finallyRoutes = filterRoutes([...constantRoutes, ...asyncRoutes]);
     commit("setRoutes", finallyRoutes);
-    console.log(asyncRoutes);
     return [...asyncRoutes];
   },
   /**

src/store/modules/settings.js

@@ -2,7 +2,7 @@
  * @author chuzhixin 1204505056@qq.com
  * @description 所有全局配置的状态管理，如无必要请勿修改
  */
-import defaultSettings from "@/config/settings";
+import defaultSettings from "@/config";
 import { isJson } from "@/utils/validate";
 
 const {

src/store/modules/user.js

@@ -8,7 +8,8 @@ import {
   removeAccessToken,
   setAccessToken,
 } from "@/utils/accessToken";
-import { tokenName } from "@/config/settings";
+import { title, tokenName } from "@/config";
+import { message, notification } from "ant-design-vue";
 
 const state = {
   accessToken: getAccessToken(),
@@ -75,11 +76,23 @@ const actions = {
     const accessToken = data[tokenName];
     if (accessToken) {
       commit("setAccessToken", accessToken);
+      const hour = new Date().getHours();
+      const thisTime =
+        hour < 8
+          ? "早上好"
+          : hour <= 11
+          ? "上午好"
+          : hour <= 13
+          ? "中午好"
+          : hour < 18
+          ? "下午好"
+          : "晚上好";
+      notification.open({
+        message: `欢迎登录${title}`,
+        description: `${thisTime}！`,
+      });
     } else {
-      /*  Vue.prototype.$baseMessage(
-        `登录接口异常，未正确返回${tokenName}...`,
-        "error"
-      ); */
+      message.error(`登录接口异常，未正确返回${tokenName}...`);
     }
   },
   /**
@@ -91,7 +104,7 @@ const actions = {
   async getUserInfo({ commit, dispatch, state }) {
     const { data } = await getUserInfo(state.accessToken);
     if (!data) {
-      /*  Vue.prototype.$baseMessage("验证失败，请重新登录...", "error"); */
+      message.error(`验证失败，请重新登录...`);
       return false;
     }
     let { username, avatar, roles, ability } = data;
@@ -102,7 +115,7 @@ const actions = {
       commit("setUsername", username);
       commit("setAvatar", avatar);
     } else {
-      console.log("用户信息接口异常");
+      message.error("用户信息接口异常");
     }
   },
 

src/utils/accessToken.js

@@ -1,4 +1,4 @@
-import { storage, tokenTableName } from "@/config/settings";
+import { storage, tokenTableName } from "@/config";
 import cookie from "js-cookie";
 
 /**

src/utils/pageTitle.js

@@ -1,4 +1,4 @@
-import { title, titleReverse, titleSeparator } from "@/config/settings";
+import { title, titleReverse, titleSeparator } from "@/config";
 
 /**
  * @author chuzhixin 1204505056@qq.com

src/utils/request.js

@@ -8,11 +8,12 @@ import {
   requestTimeout,
   successCode,
   tokenName,
-} from "@/config/settings";
+} from "@/config";
 import store from "@/store";
 import qs from "qs";
 import router from "@/router";
 import { isArray } from "@/utils/validate";
+import { message } from "ant-design-vue";
 
 let loadingInstance;
 
@@ -25,14 +26,14 @@ let loadingInstance;
 const handleCode = (code, msg) => {
   switch (code) {
     case invalidCode:
-      alert(msg || `后端接口${code}异常`, "error");
+      message.error(msg || `后端接口${code}异常`);
       store.dispatch("user/resetAll").catch(() => {});
       break;
     case noRoleCode:
       router.push({ path: "/401" }).catch(() => {});
       break;
     default:
-      alert(msg || `后端接口${code}异常`, "error");
+      message.error(msg || `后端接口${code}异常`);
       break;
   }
 };
@@ -117,7 +118,7 @@ instance.interceptors.response.use(
         const code = message.substr(message.length - 3);
         message = "后端接口" + code + "异常";
       }
-      alert(message || `后端接口未知异常`, "error");
+      message.error(message || `后端接口未知异常`);
       return Promise.reject(error);
     }
   }

src/utils/routes.js

@@ -1,6 +1,6 @@
 import router from "@/router";
 import path from "path";
-import { rolesControl } from "@/config/settings";
+import { rolesControl } from "@/config";
 import { isExternal } from "@/utils/validate";
 import { hasRole } from "@/utils/hasRole";
 

src/vab/plugins/permissions.js

@@ -10,7 +10,7 @@ import {
   loginInterception,
   recordRoute,
   routesWhiteList,
-} from "@/config/settings";
+} from "@/config";
 
 router.beforeEach(async (to, from, next) => {
   let hasToken = store.getters["user/accessToken"];
@@ -32,7 +32,7 @@ router.beforeEach(async (to, from, next) => {
           if (loginInterception) {
             await store.dispatch("user/getUserInfo");
           } else {
-            //settings.js loginInterception为false（关闭登录拦截时）时，创建虚拟角色
+            //loginInterception为false（关闭登录拦截时）时，创建虚拟角色
             await store.dispatch("user/setVirtualRoles");
           }
 

vue.config.js

@@ -16,7 +16,7 @@ const {
   providePlugin,
   build7z,
   donation,
-} = require("./src/config/settings");
+} = require("./src/config");
 const {
   webpackBarName,
   webpackBanner,