devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于element-ui 搭建管理后台_element ui 后台

作者：凡人多烦事01 | 2024-02-19 01:20:16

赞

踩

element ui 后台

本文档从零开始搭建一个通用的管理后台，技术栈为vue2.0 + vue-router + vuex + element-ui + axios 。最终效果如下：

 

左侧为菜单栏，右侧包含头部，面包屑，主内容区。左侧菜单栏可折叠，可全屏，刷新页面后还是之前页面状态。gitee地址：

https://gitee.com/liubangbo/yilin-admain/tree/master

如对您有帮助，麻烦给个star。另外如有问题，欢迎在此留言讨论。

下面对此框架主要部分进行详细阐述。

1. 准备工作

     此框架采用了vue-cli 脚手架创建的项目，选中vuex vue-router，然后按官方文档安装element-ui 并按需加载。最后在安装sass sass-loader的时候如果报错的话，则直接在package.json的devDependencies字段加上"sass": "^1.53.0",  "sass-loader": "^8.0.2",  再npm install 一下就可以了。

2. 模块化业务

   业务按模块划分，在每个模块下写上路由，以及vuex状态。通过接口获取动态路由，对动态路由进行了一个map映射，这样前端就可以自己组织页面结构了。这一块代码在src/register-route-store.js 中：

  1. import { router, store } from "./main";
  2. // import { get } from "./http/index.js";  //real routes fetched from platform
  3. import { get } from "./mockRoutes.js";  //mock routes 
  4.  
  5. export let routesMap = new Map();
  6.  
  7. const recursionRoutes = (destRoutes, sourceRoutes) => {
  8.   if (sourceRoutes.length) {
  9.     let temp = null;
  10.     sourceRoutes.forEach((item, index) => {
  11.       temp = routesMap.get(item.id) ? routesMap.get(item.id) : {};
  12.       destRoutes.children &&
  13.         destRoutes.children.push(
  14.           Object.assign(
  15.             {
  16.               path: temp.path,
  17.               component:
  18.                 `${item.children}` && `${item.children.length}`
  19.                   ? (resolve) =>
  20.                       require([
  21.                         "@/layouts/components/rightRouteView/index.vue",
  22.                       ], resolve)
  23.                   : temp.component,
  24.               children:
  25.                 `${item.children}` && `${item.children.length}` ? [] : null,
  26.             },
  27.             {
  28.               meta: {
  29.                 label: item.label,
  30.                 icon: item.icon,
  31.               },
  32.             }
  33.           )
  34.         );
  35.       if (item.children && item.children.length) {
  36.         recursionRoutes(destRoutes.children[index], item.children);
  37.       }
  38.     });
  39.   }
  40. };
  41.  
  42. const register_dynamicRoutes_store = (dynamicRoutes) => {
  43.   console.log("dynamic routes: ", dynamicRoutes);
  44.   let routes = [...require("@/layouts/routes/index.js").default];
  45.   store.registerModule("layouts", require("@/layouts/store/index.js").default);
  46.  
  47.   dynamicRoutes.length &&
  48.     dynamicRoutes.forEach((item, index) => {
  49.       require(`@/views${item.path}/routes/index.js`);
  50.       routes[0].children.push(
  51.         Object.assign(
  52.           {
  53.             path: item.path,
  54.             component: (resolve) =>
  55.               require([
  56.                 `${item.children}` && `${item.children.length}`
  57.                   ? "@/layouts/components/rightContent/index.vue"
  58.                   : `@/views${item.path}`,
  59.               ], resolve),
  60.             children:
  61.               `${item.children}` && `${item.children.length}` ? [] : null,
  62.           },
  63.           {
  64.             meta: {
  65.               label: item.label,
  66.               icon: item.icon,
  67.             },
  68.           }
  69.         )
  70.       );
  71.       store.registerModule(
  72.         item.path.slice(1),
  73.         require(`@/views${item.path}/store/index.js`).default
  74.       );
  75.       if (item.children && item.children.length) {
  76.         recursionRoutes(routes[0].children[index], item.children);
  77.       }
  78.     });
  79.  
  80.   console.log("mapped routes is: ", routes);
  81.   router.addRoutes(routes);
  82.   store.commit("layouts/setSubRoutesList", routes[0].children);
  83. };
  84.  
  85. const register_login_route = () => {
  86.   const routes = [...require("@/views/login/routes/index.js").default];
  87.   router.addRoutes(routes);
  88. };
  89.  
  90. export const getRoutes = async () => {
  91.   try {
  92.     const res = await get({
  93.       urlKey: "layouts-getNav",
  94.     });
  95.  
  96.     if (res.success && res.data && res.data.length) {
  97.       //had login, register dynamic routes
  98.       register_dynamicRoutes_store(res.data);
  99.       router.replace({ path: "/" });
  100.     }
  101.   } catch (error) {
  102.     //no login, register login route
  103.     console.error("get nav error, go to login: ", error);
  104.     register_login_route();
  105.     router.push({
  106.       path: "/login",
  107.     });
  108.   }
  109. };
  110. getRoutes();

3. axios封装

    之前接触的框架，网络接口一般定义在一个文件中，所有业务模块用到的网络接口都写到一个文件中，文件比较长，维护起来也费尽。这里我们把网络接口也进行了业务划分，每个模块写自己用到的网络接口。这部分代码在src/http/index.js文件中：

  1. import axios from "axios";
  2. import { getStorage } from "@/common/js/util.js";
  3. import { TOKEN } from "@/common/js/constant.js";
  4.  
  5. let pagesUrls = [];
  6. pagesUrls.push({
  7.   key: "layouts-getNav",
  8.   url: "web/user/getNav",
  9. });
  10. const _pagesUrls = require.context("../views/", true, /urls\/index\.js/);
  11.  
  12. _pagesUrls.keys().forEach((key) => {
  13.   const _moduleName = key.split("/")[1];
  14.   const _moduleUrls = require("@/views/" +
  15.     _moduleName +
  16.     "/urls/index.js").default;
  17.   pagesUrls.push(..._moduleUrls);
  18. });
  19.  
  20. const urlMap = new Map();
  21. pagesUrls.forEach((i) => {
  22.   if (i.url) {
  23.     urlMap.set(i.key, {
  24.       url: "/" + i.url.replace(/^\//, ""), //  both sg/cms/homepage  and  /sg/cms/homepage  are OK
  25.     });
  26.   }
  27. });
  28.  
  29. let _httpRequest = (obj, _method) => {
  30.   if (Object.prototype.toString.call(obj) !== "[object Object]") {
  31.     console.error(`the params of http request should be Object`);
  32.     return;
  33.   }
  34.   if (!obj.urlKey || !obj.urlKey.length) {
  35.     console.error(`url is empty, you should set it`);
  36.     return;
  37.   }
  38.  
  39.   const hostKey = obj.hostKey || "HOST";
  40.   let _url = urlMap.get(obj.urlKey).url;
  41.   if (obj.dynamic) _url = `${_url}${obj.dynamic}`; //dynamic url
  42.   delete obj.urlKey;
  43.   delete obj.hostKey;
  44.   return new Promise((resolve, reject) => {
  45.     let _params = {
  46.       method: _method,
  47.       url: _url,
  48.       baseURL: process.env[`VUE_APP_${hostKey.toUpperCase()}`],
  49.     };
  50.     Object.assign(_params, obj);
  51.     axios(_params)
  52.       .then((res) => {
  53.         resolve(res.data);
  54.       })
  55.       .catch((err) => {
  56.         console.error("axios error: ", err.response);
  57.         if (err.response.data.code === 401) {
  58.           // loginAgain()
  59.         }
  60.         reject(err);
  61.       });
  62.   });
  63. };
  64.  
  65. axios.interceptors.request.use((config) => {
  66.   const token = getStorage(TOKEN);
  67.   if (token) {
  68.     config.headers["novaAuth"] = token;
  69.   } else {
  70.     config.headers["Authorization"] = "Basic dGVuYW50OjEyMzQ1Ng==";
  71.   }
  72.   return config;
  73. });
  74.  
  75. axios.interceptors.response.use((res) => {
  76.   console.log("http res: ", res);
  77.   //TODO token过期需要处理
  78.   return res;
  79. });
  80. /**
  81.  * get方法，对应get请求
  82.  * @param {Object} obj
  83.  */
  84. export function get(obj) {
  85.   return _httpRequest(obj, "GET");
  86. }
  87. /**
  88.  * post方法，对应post请求
  89.  * @param {Object} obj
  90.  */
  91. export function post(obj) {
  92.   return _httpRequest(obj, "POST");
  93. }

4. 常量定义

在项目中如果多人协作开发，定义通用常量还是比较重要的，防止出现奇怪bug。例如local-storage的key，我们统一写到常量文件中。这部分代码在src/common/js/constant.js中：

  1. const TOKEN = "iotToken"
  2. const USER_NAME = "userName"
  3.  
  4. const TABS = "tabs"
  5. const ACTIVE_TAB = "activeTabs"
  6.  
  7. export {
  8.   TOKEN,
  9.   USER_NAME,
  10.   TABS,
  11.   ACTIVE_TAB
  12. }

5. 假路由数据

    在这个通用框架中我们定义了一个假路由数据，如果你们后端返回的动态路由和这个假路由一样，那么这个框架就可以直接拿来用了，直接上手写业务。假路由数据在src/mockRoutes.js中。

  1. const mockRoutes = {
  2.   code: 200,
  3.   success: true,
  4.   data: [
  5.     {
  6.       id: "8",
  7.       icon: "el-icon-setting",
  8.       label: "系统管理",
  9.       path: "/config",
  10.       children: [
  11.         {
  12.           id: "9",
  13.           icon: "el-icon-setting",
  14.           label: "页面管理",
  15.           path: "/web",
  16.           children: [],
  17.         },
  18.       ],
  19.     },
  20.     {
  21.       id: "100",
  22.       icon: "el-icon-user",
  23.       label: "测试",
  24.       path: "/test",
  25.       children: [
  26.         {
  27.           id: "101",
  28.           icon: "el-icon-user",
  29.           label: "测试一级菜单",
  30.           path: "/test1",
  31.           children: [
  32.             {
  33.               id: "101-0",
  34.               icon: "el-icon-user",
  35.               label: "一级子页面",
  36.               path: "/big",
  37.               children: [],
  38.             },
  39.           ],
  40.         },
  41.         {
  42.           id: "102",
  43.           icon: "el-icon-user",
  44.           label: "测试一级页面",
  45.           path: "/test2",
  46.           children: [],
  47.         },
  48.         {
  49.           id: "103",
  50.           icon: "el-icon-user",
  51.           label: "测试一级菜单",
  52.           path: "/test3",
  53.           children: [
  54.             {
  55.               id: "103-0",
  56.               icon: "el-icon-user",
  57.               label: "测试二级菜单",
  58.               path: "/third",
  59.               children: [
  60.                 {
  61.                   id: "103-0-0",
  62.                   icon: "el-icon-user",
  63.                   label: "二级子页面",
  64.                   path: "/small",
  65.                   children: [],
  66.                 },
  67.               ],
  68.             },
  69.           ],
  70.         },
  71.       ],
  72.     },
  73.   ],
  74. };
  75. const get = (obj) => {
  76.   return new Promise((resolve, reject) => {
  77.     setTimeout(() => {
  78.       if (obj) {
  79.         resolve(mockRoutes);
  80.       } else {
  81.         reject({});
  82.       }
  83.     }, 200);
  84.   });
  85. };
  86.  
  87. export { get };

在src/register-route-store.js中的如下代码是进行真假路由数据切换的地方：

  1. // import { get } from "./http/index.js";  //real routes fetched from platform
  2. import { get } from "./mockRoutes.js";  //mock routes

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/111768
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号