[已实现]后端动态路由模板

.eslintrc.js

@@ -1,18 +1,28 @@
 module.exports = {
   root: true,
-  'extends': [
-    'plugin:vue/essential',
-    '@vue/standard'
-  ],
+  extends: ["plugin:vue/essential", "@vue/standard"],
   rules: {
     // allow async-await
-    'generator-star-spacing': 'off',
+    "generator-star-spacing": "off",
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }],
-    'no-undef': 'off'
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    "vue/no-parsing-error": [
+      2,
+      {
+        "x-invalid-end-tag": false
+      }
+    ],
+    "no-undef": "off",
+    camelcase: "off",
+    quotes: [1, "double"],
+    semi: ["error", "always"],
+    "space-before-function-paren": [0, "always"]
+    // "space-before-function-paren": [2, {
+    //   "anonymous": "never",
+    //   "named": "never"
+    // }]
   },
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: "babel-eslint"
   }
-}
+};

.gitattributes

@@ -0,0 +1,3 @@
+*.js linguist-language=Vue
+*.css linguist-language=Vue
+*.html linguist-language=Vue

README.md

@@ -1,187 +1,143 @@
-<p align="center">
-    <a href="https://www.iviewui.com">
-        <img width="200" src="https://file.iviewui.com/logo-new.svg">
-    </a>
-</p>
-
-# iView Admin
-
-[![](https://img.shields.io/github/release/iview/iview-admin.svg)](https://github.com/iview/iview-admin/releases)
-[![](https://img.shields.io/travis/iview/iview-admin.svg?style=flat-square)](https://travis-ci.org/iview/iview-admin)
-[![vue](https://img.shields.io/badge/vue-2.5.10-brightgreen.svg?style=flat-square)](https://github.com/vuejs/vue)
-[![iview ui](https://img.shields.io/badge/iview-3.0.0-brightgreen.svg?style=flat-square)](https://github.com/iview/iview)
-[![npm](https://img.shields.io/npm/l/express.svg)]()
-
-[更新日志](https://github.com/iview/iview-admin/releases)
-
-[使用文档](https://lison16.github.io/iview-admin-doc/#/)
-
-[在线访问](https://admin.iviewui.com/)
-
-[简化版模板](https://github.com/iview/iview-admin/tree/template)
-
-[教学视频(26课时)](https://segmentfault.com/ls/1650000016221751?utm_source=banner)
-
-`注：在线版本会在开发版本新小版本发布后更新到相应版本，所以如果想体验最新版本iview-admin，请clone完整项目代码到本地运行。`
-
-## Install
-```bush
-// install dependencies
-npm install
-```
-## Run
-### Development
-```bush
-npm run dev
-```
-### Production(Build)
-```bush
-npm run build
-```
-
-## 简介
-&emsp;&emsp;iView admin是基于Vue.js，搭配使用[iView](https://www.iviewui.com) UI组件库形成的一套后台集成解决方案，由TalkingData前端可视化团队部分成员开发维护。iView admin遵守iView设计和开发约定，风格统一，设计考究，并且更多功能在不停开发中。
-如果您想查看iview-admin的更新动态，您可以到[更新日志](https://github.com/iview/iview-admin/releases)查看了解最新更新；如果您是新手，想快速入手iview-admin，您可以到[使用教程](https://github.com/iview/iview-admin/wiki)查看讲解；如果您想在线体验iview-admin，您可以到[在线访问](https://admin.iviewui.com/)体验。如果你只是想要一个清醒爽朗的界面，那你可以下载[简化版模板](https://github.com/iview/iview-admin/tree/template)来做开发。
-
-## 功能
-
-- 登录/登出
-- 权限管理
-    - 列表过滤
-    - 权限切换
-- 多语言切换
-- 组件
-    - 富文本编辑器
-    - Markdown编辑器
-    - 城市级联
-    - 图片预览编辑
-    - 可拖拽列表
-    - 文件上传
-    - 数字渐变
-    - split-pane
-- 表单编辑
-    - 文章发布
-    - 工作流
-- 表格
-    - 可拖拽排序
-    - 可编辑表格
-        - 行内编辑
-        - 单元格编辑
-    - 可搜索表格
-    - 表格导出数据
-        - 导出为Csv文件
-        - 导出为Xls文件
-    - 表格转图片
-- 错误页面
-    - 403页面
-    - 404页面
-    - 500页面
-- 高级路由
-    - 动态路由
-    - 带参页面
-- 换肤
-- 收缩侧边栏
-- tag标签导航
-- 面包屑导航
-- 全屏/退出全屏
-- 锁屏
-- 消息中心
-- 个人中心
-
-## 文件结构
-```shell
-.
-├── build  项目构建配置
-├── config  开发相关配置
-├── public  打包所需静态资源
-└── src
-    ├── api  AJAX请求
-    └── assets  项目静态资源
-        ├── icons  自定义图标资源
-        └── images  图片资源
-    ├── components  业务组件
-    ├── config  项目运行配置
-    ├── directive  自定义指令
-    ├── libs  封装工具函数
-    ├── locale  多语言文件
-    ├── mock  mock模拟数据
-    ├── router  路由配置
-    ├── store  Vuex配置
-    ├── view  页面文件
-    └── tests  测试相关
-```
-
-## Links
-
-- [TalkingData](https://github.com/TalkingData)
-- [iView](https://github.com/iview/iview)
-- [Vue](https://github.com/vuejs/vue)
-- [Webpack](https://github.com/webpack/webpack)
-
-## 效果展示
-
-- 响应式布局首页
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/home.gif)
-
-- 标签导航
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/page-tags.gif)
-
-- 权限管理
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/access.gif)
-
-- 可拖拽列表
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/dragable-list.gif)
-
-- 图片预览编辑
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/image-editor.gif)
-
-- 文件上传
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/upload.gif)
-
-- 数字渐变
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/count-to.gif)
-
-- split-pane
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/split-pane.gif)
-
-- 文章发布
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/article-publish.gif)
-
-- 工作流
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/workflow.gif)
-
-- 可拖拽表格
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/dragable-table.gif)
-
-- 可编辑表格
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/editable-table.gif)
-
-- 表格导出数据
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/exportable-table.gif)
-
-- 表格转图片
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/table2image.gif)
-
-- 错误页面
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/error-page.gif)
-
-- 锁屏
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/locking.gif)
-
-- 可收缩侧边栏
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/sidebarmenu.gif)
-
-- 主题切换
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/theme.gif)
-
-- 消息中心
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/message.gif)
-
-### 💖💖 If you find this project helpful, maybe you can buy me a coffee. 💖💖
-![image](https://github.com/iview/iview-admin/raw/dev/github-gif/code.png)
-
-
-## License
-[MIT](http://opensource.org/licenses/MIT)
-
-Copyright (c) 2016-present, iView
+<p align="center">
+  <a href="https://www.iviewui.com">
+    <img width="200" src="https://file.iviewui.com/logo-new.svg">
+  </a>
+</p>
+
+# iView DynamicRouter
+
+<a href="https://github.com/vuejs/vue">
+  <img src="https://img.shields.io/badge/vue-2.5.10-brightgreen.svg?style=flat-square">
+</a>
+<a href="https://github.com/iview/iview">
+  <img src="https://img.shields.io/badge/iview-3.1.3-brightgreen.svg?style=flat-square">
+</a>
+<a href="https://github.com/iview/iview-admin/tree/template">
+  <img src="https://img.shields.io/badge/iview--admin-template-brightgreen">
+</a>
+<p></p>
+
+<a href="https://github.com/simon9124/iview-dynamicRouter" target="_blank">iView-DynamicRouter</a> 基于 <a href="https://github.com/iview/iview-admin/tree/template" target="_blank">iview-admin(branch:template)</a>，由“后端动态提供路由数据，经前端处理后生成动态路由和菜单”的【后端动态路由模板】，内置“权限管理”业务模型，可任意调整左侧菜单栏、修改其相关权限、监听当前路由和菜单，是一套更安全、更智能的后台管理系统模板。
+
+## 在线预览
+
+- <a href="https://simon9124.github.io/iview-dynamicRouter" target="_blank">iview-dynamicRouter →</a>
+- userName：goku / trunks
+- password：any / any
+
+> 在控制台可监听 **当前路由和菜单**
+
+## 使用文档
+
+如果你想快速使用，请看 <a href="https://simon9124.github.io/iview-dynamicRouter-doc" target="_blank">**配置文档 →**</a>  
+如果你想和我一起，从 **iview-admin** 的原始框架一步步实现 **iView-DynamicRouter**，请看 <a href="https://simon9124.github.io/iview-dynamicRouter-doc/develop/axios/" target="_blank">**开发指南 →**</a>
+
+## 功能特点
+
+登录后，**不同权限**的用户监听到不同的**动态路由**和**动态菜单**：
+
+<img src="https://user-gold-cdn.xitu.io/2020/6/28/172f9ddb32aa32e3?w=1910&h=922&f=gif&s=1838123">
+
+菜单自由**选择上级**、自由**增删改**：
+
+<img src="https://user-gold-cdn.xitu.io/2020/6/28/172f9840378af7c0?w=1361&h=791&f=gif&s=1252459">
+
+自由**选择菜单的层级**，大屏路由亦可在子菜单挂载：
+
+<img src="https://user-gold-cdn.xitu.io/2020/6/28/172f9847696b997c?w=1505&h=851&f=gif&s=942974">
+
+修改“角色-菜单”关联，**控制菜单权限**：
+
+<img src="https://user-gold-cdn.xitu.io/2020/6/28/172f9dee14301a7d?w=1505&h=860&f=gif&s=1438180">
+
+功能汇总：
+
+```bash
+- 动态路由数据
+  - 路由改造（静态路由+动态路由）
+  - 路由数据处理
+  - 手动添加路由
+  - 路由清空
+  - 路由监听
+
+- 动态菜单渲染
+  - 菜单数据处理（大屏路由在二级/多级菜单）
+  - 菜单监听
+
+- 动态模拟数据mockData
+  - 用户列表、角色列表、路由列表、路由层级
+
+- 权限管理
+  - 用户管理（增删改查、用户1对多绑定角色）
+  - 角色管理（增删改查、角色1对多绑定菜单）
+  - 菜单管理（增删改查、修改层级、修改上级目录）
+  - 纯前端也可控制路由权限
+```
+
+## 目录结构
+
+```bash
+- config  开发相关配置
+- public  打包所需静态资源
+- src
+  - api  AJAX请求   -> 追加：动态获取路由方法
+  - assets  项目静态资源
+  - icons  自定义图标资源
+  - images  图片资源
+  - components  业务组件
+  - config  项目运行配置
+  - directive  自定义指令
+  - libs  封装工具函数   -> 追加：若干路由数据处理函数
+  - locale  多语言文件
+  - mock  mock模拟数据   -> 追加：路由列表、路由层级、角色列表 等数据
+  - router  路由配置   -> 有较多改动，路由改造
+  - store  Vuex配置   -> 有较多改动，菜单渲染改造
+  - view  页面文件   -> 追加【权限管理】模块、追加 template.vue 和 screent.vue 页面模板
+  - tests  测试相关
+```
+
+## 安装使用
+
+```bash
+# 克隆项目
+git clone https://github.com/simon9124/iview-dynamicRouter
+
+# 进入项目目录
+cd vue-element-admin
+
+# 安装依赖
+npm install
+
+# 本地开发 启动项目
+npm run dev
+```
+
+如果这个模板或模板中的代码段能够在开发中帮助到你，请到在 <a href="https://github.com/simon9124/iview-dynamicRouter" target="_blank">**项目地址**</a> 的右上角 :star: 一下，更可以买一杯果汁表示鼓励 :tropical_drink:，非常感谢！
+
+<img width="300" src="https://mmbiz.qpic.cn/mmbiz_png/Tlm6c1DNgXRhxyU1EIlwed2ErNQvYG7FnsRE7yMOwSwBicVNVhzJsiaDuEaiahTeiavk3Tm1ic5z5etIe5PVvI0J70w/0?wx_fmt=png">
+
+## 权限控制
+
+启动完成后，在控制台可监听【当前路由】和【左侧菜单】：
+
+<img src="https://mmbiz.qpic.cn/mmbiz_png/Tlm6c1DNgXQDvea6ZkJD5aNx25dymLfInAQzp6snhVQ36aH70AiaqINqCzFI60DiaIX0rkMjiaE7v8gIvY5TzxTnQ/0?wx_fmt=png">
+
+权限管理 - 菜单管理，可任意新增/更新菜单、修改层级、修改上级目录：
+
+<img src="https://mmbiz.qpic.cn/mmbiz_png/Tlm6c1DNgXRhxyU1EIlwed2ErNQvYG7FayPN5e59qlaRaL3bWk5wTHY4lIjk12IfZh9LHX5GUst1zictcTD5Ggg/0?wx_fmt=png">
+
+权限管理 - 角色管理，可任意新增/更新角色、修改角色关联的菜单：
+
+<img src="https://mmbiz.qpic.cn/mmbiz_png/Tlm6c1DNgXRhxyU1EIlwed2ErNQvYG7FxIxHjX8N9UeibatuJNPMQuFhhibEic9a3e4BXn1icQcoj7zVibEvgDvGgsw/0?wx_fmt=png">
+
+权限管理 - 用户管理，可任意新增/更新用户、修改用户关联的角色：
+
+<img src="https://mmbiz.qpic.cn/mmbiz_png/Tlm6c1DNgXRhxyU1EIlwed2ErNQvYG7FGmqiabpQSoJxjDbU1kQS70qXt7Bj7gjrZkaAuAP7OLjk28NyOTtD4Ig/0?wx_fmt=png">
+
+实现路由权限控制：
+
+<img src="https://mmbiz.qpic.cn/mmbiz_png/Tlm6c1DNgXSzsMiaymWHcjibfquK5EYaSzwLxvJvojntLcRLx8A8QUPIpQfa1lsSnLYykqHIF1jJ6jRJEasXJiaqA/0?wx_fmt=png">
+
+大屏路由在二级/多级菜单亦可挂载：
+
+<img src="https://mmbiz.qpic.cn/mmbiz_png/Tlm6c1DNgXSzsMiaymWHcjibfquK5EYaSz6zhTS8gF4n1gJOFRAqoQxm3IFCyUvPTicaVtWaicAaclqXDIn7TTw45A/0?wx_fmt=png">