diff --git a/diboot-docs/.vuepress/config.js b/diboot-docs/.vuepress/config.js index ad9edfc..3897169 100644 --- a/diboot-docs/.vuepress/config.js +++ b/diboot-docs/.vuepress/config.js @@ -41,7 +41,7 @@ module.exports = { ], '/guide/diboot-antd-admin/': [ { - title: 'Diboot-antd-admin 项目指南', + title: 'diboot-antd-admin 项目指南', collapsable: true, sidebarDepth: 2, children: [ @@ -53,6 +53,20 @@ module.exports = { ] } ], + '/guide/diboot-element-admin/': [ + { + title: 'diboot-element-admin 指南', + collapsable: true, + sidebarDepth: 2, + children: [ + ['/guide/diboot-element-admin/介绍', '介绍'], + ['/guide/diboot-element-admin/开始使用', '开始使用'], + ['/guide/diboot-element-admin/添加页面', '添加页面'], + ['/guide/diboot-element-admin/权限控制', '权限控制'], + ['/guide/diboot-element-admin/CRUD快速集成', 'CRUD快速集成'], + ] + } + ], '/guide/diboot-devtools/': [ { title: 'diboot-devtools 使用指南', @@ -79,7 +93,7 @@ module.exports = { text: '前端项目 指南', items: [ { text: 'diboot-antd-admin', link: '/guide/diboot-antd-admin/介绍' }, - { text: 'diboot-element-admin', link: '/guide/diboot-antd-admin/介绍' } + { text: 'diboot-element-admin', link: '/guide/diboot-element-admin/介绍' } ] }, { text: 'devtools助理 指南', diff --git a/diboot-docs/guide/diboot-antd-admin/images/permission-form.png b/diboot-docs/guide/diboot-antd-admin/images/permission-form.png new file mode 100644 index 0000000..f3f5e40 Binary files /dev/null and b/diboot-docs/guide/diboot-antd-admin/images/permission-form.png differ diff --git a/diboot-docs/guide/diboot-antd-admin/images/permission-list.png b/diboot-docs/guide/diboot-antd-admin/images/permission-list.png new file mode 100644 index 0000000..0fa0c31 Binary files /dev/null and b/diboot-docs/guide/diboot-antd-admin/images/permission-list.png differ diff --git a/diboot-docs/guide/diboot-antd-admin/images/role-permission-form.png b/diboot-docs/guide/diboot-antd-admin/images/role-permission-form.png new file mode 100644 index 0000000..502ddb3 Binary files /dev/null and b/diboot-docs/guide/diboot-antd-admin/images/role-permission-form.png differ diff --git a/diboot-docs/guide/diboot-antd-admin/权限控制.md b/diboot-docs/guide/diboot-antd-admin/权限控制.md index 7134411..ac7faef 100644 --- a/diboot-docs/guide/diboot-antd-admin/权限控制.md +++ b/diboot-docs/guide/diboot-antd-admin/权限控制.md @@ -24,13 +24,13 @@ 按钮的权限控制，是通过指令控制该按钮是否显示来实现的，一共具有三个指令来控制是否按钮是否显示。 * v-action - * 控制按钮可以显示； + * 将该按钮或元素在具有配置的权限时显示出来； * 只能添加单条按钮权限编码，比如 v-action:add 意味着具有add编码的新建权限该按钮将会显示, v-action:update意味着具有update编码的更新权限时该按钮显示等。 * v-permission - * 控制按钮可以显示； + * 将该按钮或元素在具有权限列表中某条权限时显示出来； * 可以添加多条按钮权限编码，有一条权限存在，就将显示该按钮，比如 v-permission="['update', 'delete']"，标识当具有update或者delete中的一种权限时，该按钮将会显示。 * v-permission-missing - * 控制按钮可以不显示； + * 对该按钮或元素在具有权限的时候隐藏； * 可以添加多条权限编码，有一条权限存在，就将隐藏该按钮，如下代码就将会在没有详情、更新、删除权限时，将操作栏显示为 - ```html @@ -66,7 +66,7 @@ ## 菜单权限管理 * 使用具有超级管理员权限的账号登入项目； -* 打开 系统管理-->菜单权限管理 页面，可看到已有权限列表； +* 打开 系统管理-->菜单权限管理 页面，可看到已有权限列表： ![权限列表页面](./images/permission-list.png) * 点击新建，开始配置新增页面的权限，下图是已有权限配置好之后的表单示例： ![权限表单页面](./images/permission-form.png) diff --git a/diboot-docs/guide/diboot-element-admin/CRUD快速集成.md b/diboot-docs/guide/diboot-element-admin/CRUD快速集成.md new file mode 100644 index 0000000..bb41ada --- /dev/null +++ b/diboot-docs/guide/diboot-element-admin/CRUD快速集成.md @@ -0,0 +1,109 @@ +# CRUD快速集成 + +## 开始之前 + +* 在diboot-element-admin中，我们对CRUD等常用功能进行了一些抽象，将常用的列表、详情、新建、更新、删除等功能需要的相关属性与方法都抽象成了vue的mixins文件，这些文件在**src/components/diboot/mixins**文件夹下，强烈建议您先阅览以下他们。 +* 也可以对已有的一些页面组件代码进行阅读，比如**src/views/system/iamUser**文件夹下的相关组件代码。 + +## 列表页 + +1. 引入列表的mixins文件，如下： +```javascript +import list from '@/components/diboot/mixins/list' + +export default { + mixins: [list] +} +``` +2. 配置列表页的接口前缀，这个接口前缀在mixins的处理中，会自动拼接'/list'，如果后端代码是通过diboot自动生成的，这也是后端默认的接口规则； +3. 自定义列表接口：如果您的列表接口最后面不是'/list'，而是'/getList'，那么可以在data中设置listApi属性，如下： +```javascript +export default { + data () { + return { + listApi: 'getList' + } + } +} +``` +5. 删除数据：直接在删除按钮上调用remove函数即可，传入需要删除的当前id。 +6. 导出数据：直接在导出按钮上调用exportData函数即可，将会传入当前查询参数，并异步下载文件。 +6. 钩子函数：afterLoadList，在列表加载完毕将会执行该操作，另外，删除函数返回的是 Promise对象，所以可以使用.then在删除完毕时执行某些操作。 +7. 相关配置： + * customQueryParam: 不会被搜索栏改变的初始查询参数对象，一般用于页面固定的查询参数 + * queryParam：与查询条件绑定的查询参数对象 + * more：当前对象的关联数据对象 + * getMore：是否在该页面初始化时加载当前对象的关联数据对象，加载的关联数据对象存储在more中，默认为false + * getListFromMixin：是否在页面初始化时自动加载列表数据，默认为true + * loadingData：标记页面加载数据状态 + * pagination：分页配置 + * baseApi：接口前缀（必须配置） + * listApi：列表数据接口，默认为 /list + * deleteApiPrefix：删除接口前缀，默认为 / + * exportApi: 导出接口，默认为 /export + +## 新建与更新 + +1. 引入表单的mixins文件，如下： +```javascript +import form from '@/components/diboot/mixins/form' + +export default { + mixins: [form] +} +``` +2. 相同业务对象的新建与更新使用同一个表单组件，默认以抽屉形式打开，可在引入地方，直接调用该组件的open方法进行打开。 +3. 使用以上引入列表mixins的方式引入form的mixins文件，将会具有mixins中的所有能力。 +4. 已有功能： + * open函数，可直接调用打开该表单 + * 提供根据open中参数情况自动切换新建与更新操作 + * 提供打开与关闭完成的钩子函数 + * 提供表单提交函数 onSubmit + * 对form下校验规则的自动校验 + * 提供对校验的自定义操作 + * 提供校验完成后的enhance钩子函数，可对需要提交的数据进行再处理 + * 可以对新建数据或更新数据的方法重写 + * 提供提交成功与提交失败的钩子函数 + * 提供表单默认布局参数 + * 提供对关联数据的自动加载 + * 提供各项配置支持自定义接口等 +5. 相关配置： + * baseApi：与列表页相同 + * createApi：新建接口，将自动拼接在baseApi之后，默认为 / + * updateApiPrefix: 更新接口前缀，将自动拼接在baseApi之后，默认为 / + * initFormData：表单初始数据（表示表单数据结构） + * form: 更新时装载加载的原数据，新建时为上述initFormData数据的克隆 + * title：页面标题，默认为新建或更新 + * reloadMore：加载的关联数据对象，默认为{}，如果list页面以及由more数据，且不与自身关联，可通过传参方式直接使用list中的more参数 + * getMore：初始化时是否加载reloadMore数据，默认为false + * state：当前组件状态对象，默认为：{visible: false, confirmSubmit: false} +6. 钩子函数： + * afterOpen：在组件打开后，或者更新时数据加载完毕后，执行该函数 + * afterClose： 在组件关闭后，执行该函数 + * enhance：在校验完成后，对提交数据进行处理的函数 + * submitSuccess： 提交成功后，执行该函数，默认关闭该组件，并发送complete和changeKey事件 + * submitFailed： 提交失败后，执行该函数，默认提示错误消息 + +## 查看详情 + +1. 引入表单的mixins文件，如下： +```javascript +import detail from '@/components/diboot/mixins/detail' + +export default { + mixins: [detail] +} +``` +2. 已有功能： + * 自动加载当前记录数据 + * 关闭弹窗或者抽屉 + * 可通过父组件传入width参数，控制抽屉的宽度 +3. 相关配置： + * baseApi：与列表页相同 + * visible：当前组件显示状态，默认为false + * model：当前详情框详情数据 + * title：当前详情框标题 +4. 钩子函数： + * afterOpen: 打开详情之后执行的函数 + * afterClose：关闭之后执行的函数 + \ No newline at end of file diff --git a/diboot-docs/guide/diboot-element-admin/images/permission-form.png b/diboot-docs/guide/diboot-element-admin/images/permission-form.png new file mode 100644 index 0000000..4eb035a Binary files /dev/null and b/diboot-docs/guide/diboot-element-admin/images/permission-form.png differ diff --git a/diboot-docs/guide/diboot-element-admin/images/permission-list.png b/diboot-docs/guide/diboot-element-admin/images/permission-list.png new file mode 100644 index 0000000..38fffd0 Binary files /dev/null and b/diboot-docs/guide/diboot-element-admin/images/permission-list.png differ diff --git a/diboot-docs/guide/diboot-element-admin/images/role-permission-form.png b/diboot-docs/guide/diboot-element-admin/images/role-permission-form.png new file mode 100644 index 0000000..f638e84 Binary files /dev/null and b/diboot-docs/guide/diboot-element-admin/images/role-permission-form.png differ diff --git a/diboot-docs/guide/diboot-element-admin/介绍.md b/diboot-docs/guide/diboot-element-admin/介绍.md new file mode 100644 index 0000000..d1d1920 --- /dev/null +++ b/diboot-docs/guide/diboot-element-admin/介绍.md @@ -0,0 +1,31 @@ +# diboot-element-admin前端基础项目 + +## 说明 +diboot-element-admin前端基础项目，是一个与diboot其他后端组件构成的后端系统相吻合的前端项目。 + +您可以将此用于您的日常开发中，和diboot其他组件一起用于快速构建您的实际项目，享受自动化带来的快速开发体验。 + +此间开发，披星戴月，日夜兼程，难免有不完善之处，恳请您加入我们diboot的QQ群或微信群，一起来讨论，留下您宝贵的指点与建议，或者在github中向我们提交PR，感念不尽！ + +## 相关技术栈 + * 前端基础（自不必多言） + * Vue全家桶套餐：[Vue](https://cn.vuejs.org/index.html), [vue-router](https://router.vuejs.org/zh/), [axios](https://github.com/axios/axios), [vuex](https://vuex.vuejs.org/zh/) + * 组件库：[Element](https://element.eleme.cn/#/zh-CN) + * 基于Element的中后台管理基础项目：[vue-element-admin](https://panjiachen.github.io/vue-element-admin-site/zh/) + * ES6 语法 + +## 项目特性 + +* 基于开源项目[vue-element-admin](https://panjiachen.github.io/vue-element-admin-site/zh/)的基础模板[vue-admin-template](https://github.com/PanJiaChen/vue-admin-template)； +* 在**vue-admin-template**项目基础上，增加了vue-element-admin具有的多页签、菜单搜索、全屏显示、调整布局大小等功能； +* 登录、权限、接口对接上，与diboot-v2相关组件构建的后端应用无缝集成且开箱可用； +* 提取CRUD页面相关通用属性与方法到mixins文件中，少写代码，多做事情； +* 菜单到按钮级别的细粒度权限控制； +* 智能化的权限配置方案； +* 自动化的token交换方案； +* 预置多种常用请求方式，轻松完成异步文件下载等； +* 数据字典管理功能； +* 登录人员管理界面； +* 角色与权限管理功能； +* 权限管理功能； +* 登录日志管理功能。 diff --git a/diboot-docs/guide/diboot-element-admin/开始使用.md b/diboot-docs/guide/diboot-element-admin/开始使用.md new file mode 100644 index 0000000..a03eee0 --- /dev/null +++ b/diboot-docs/guide/diboot-element-admin/开始使用.md @@ -0,0 +1,38 @@ +# 开始使用diboot-element-admin + +## 新建项目 + +从Github仓库中clone最新的项目到本地 + +```bash +git clone https://github.com/dibo-software/diboot-element-admin my-admin +cd my-admin +``` + +## 安装依赖 + +项目根目录下执行以下命令，安装项目所需依赖 + +```bash +yarn +# OR +npm install +``` + +## 检查接口前缀 + +* 开发环境下需检查项目根目录下 .env.development 文件内配置项**VUE_APP_BASE_API**，该配置项需要与后端接口前缀（即context-path）相同，默认为/api； +* 生产环境下需检查项目根目录下 .env.production 文件内相关配置项。 + +## 启动项目 + +执行以下命令启动项目 + +```bash +yarn server +# OR +npm run server +``` + +运行完成后，点击命令行提示出的地址，打开页面成功，项目启动就完成了。 + diff --git a/diboot-docs/guide/diboot-element-admin/权限控制.md b/diboot-docs/guide/diboot-element-admin/权限控制.md new file mode 100644 index 0000000..6cfb6dc --- /dev/null +++ b/diboot-docs/guide/diboot-element-admin/权限控制.md @@ -0,0 +1,120 @@ +# 权限控制 + +## 简介 + +* 该项目使用的权限控制模型为RBAC角色权限模型； +* 支持按钮级别的权限控制； +* 权限分发路径：菜单/按钮/权限-->树状层级结构的权限集-->角色-->角色列表-->用户； +* 在添加新的需要进行权限控制的页面后，需要进行该页面权限的配置，然后在相关角色中对该权限进行授权； + +## 菜单权限配置 + +菜单如果要进行权限控制，一定需要添加在 **src/router/index.js** 文件中的 asyncRoutes 中，且需要配置 meta 属性中的 permission 列表，如下： +```javascript +{ + path: 'iamLoginTrace/list', + name: 'IamLoginTraceList', + component: () => import('@/views/system/iamLoginTrace/list'), + meta: { title: '登录日志查看', permission: ['IamLoginTrace'] } +} +``` + +## 按钮权限配置 + +按钮的权限控制，是通过指令控制该按钮是否显示来实现的，一共具有三个指令来控制是否按钮是否显示。 + +* v-permission + * 将该按钮或元素在具有权限列表中的某条权限时显示出来； + * 可以添加多条按钮权限编码，有一条权限存在，就将显示该按钮，比如 v-permission="['update', 'delete']"，标识当具有update或者delete中的一种权限时，该按钮将会显示。 +* v-permission-again + * 与上述v-permission指令功能一样，用于为同一按钮同时设置两条与逻辑的指令，即 v-permission 与 v-permission-again 这两条指令的权限都存在时，才显示该按钮或元素。 + +```html + + + +``` + +* v-permission-missing + * 对该按钮或元素在具有权限的时候隐藏； + * 可以添加多条权限编码，有一条权限存在，就将隐藏该按钮，如下代码就将会在没有详情、更新、删除权限时，将操作栏显示为 - + +```html + + - + +``` + +上述按钮权限配置，可以在已有的相关功能中找到： +```html + +``` + +## 菜单权限管理 + +* 使用具有超级管理员权限的账号登入项目； +* 打开 系统管理-->菜单权限管理 页面，可看到已有权限列表： +![权限列表页面](./images/permission-list.png) +* 点击新建，开始配置新增页面的权限，下图是已有权限配置好之后的表单示例： +![权限表单页面](./images/permission-form.png) +* 菜单编码对应上述**菜单权限配置**中的permission列表中的值，默认我们只在meta的permission中配置一个值与此处对应即可； +* 下方**按钮/权限里列表**配置中，按钮/权限编码，需要与上述添加在按钮的指令中的参数一致，这里默认配置了一些常用操作类型到数据字典中，如果有新的操作按钮，可以到数据字典的**前端按钮/权限编码**中进行增加； +* 在权限配置中，对于常用的权限，都可以通过点击和选取来完成对菜单和按钮权限的配置； +* 在配置好前端菜单与接口列表，和前端按钮与接口列表后，也完成了前端菜单与按钮和后端接口的关系绑定，之后在对角色设置相关权限后，控制前端界面是否显示的同时，也控制了该角色下的用户对后端对应接口的访问权限； +* 在权限配置完成后，如果需要更改权限显示顺序，可以点击该列表页面右上角“排序”按钮进行权限拖拽排序操作。 + +## 角色授权管理 + +* 打开 系统管理-->角色权限管理 页面，可看到当前已有角色列表； +* 新建角色 或 选择需要更改授权的角色进行编辑操作； +* 对需要授权的权限进行选中，不需要的权限取消即可，操作直观简便。 +![角色授权页面](./images/role-permission-form.png) + diff --git a/diboot-docs/guide/diboot-element-admin/添加页面.md b/diboot-docs/guide/diboot-element-admin/添加页面.md new file mode 100644 index 0000000..67a1840 --- /dev/null +++ b/diboot-docs/guide/diboot-element-admin/添加页面.md @@ -0,0 +1,61 @@ +# 添加页面 + +添加页面需要添加页面相关的Vue组件与相对应的路由配置 + +## 添加Vue组件 + +* 在**src/views**文件夹下创建页面对应的文件夹以及对应的页面组件文件 + +## 添加路由配置 + +* 后台菜单是根据路由配置自动生成的，具体可参考[路由和侧边栏](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html) +* 在**src/router/index.js**文件中，可以配置需要新增页面的路由。 +* 对于需要进行权限控制的菜单，需要放到asyncRoutes中进行配置，其他不需要进行权限控制或所有人可用的菜单，可以放到constantRoutes中。 +* 路由配置方式，可参考已有配置，如下： + +```javascript +// 系统管理 +{ + path: '/system', + component: Layout, + redirect: '/system/dictionary/list', + name: 'System', + meta: { title: '系统管理', icon: 'dashboard' }, + children: [ + { + path: 'dictionary/list', + name: 'DictList', + component: () => import('@/views/system/dictionary/list'), + meta: { title: '数据字典管理', permission: ['Dictionary'] } + }, + { + path: 'iamUser/list', + name: 'IamUserList', + component: () => import('@/views/system/iamUser/list'), + meta: { title: '系统用户管理', permission: ['IamUser'] } + }, + { + path: 'iamRole/list', + name: 'IamRoleList', + component: () => import('@/views/system/iamRole/list'), + meta: { title: '角色权限管理', permission: ['IamRole'] } + }, + { + path: 'iamFrontendPermission/list', + name: 'IamFrontendPermission', + component: () => import('@/views/system/iamFrontendPermission/list'), + meta: { title: '菜单权限管理', permission: ['IamFrontendPermission'] } + }, + { + path: 'iamLoginTrace/list', + name: 'IamLoginTraceList', + component: () => import('@/views/system/iamLoginTrace/list'), + meta: { title: '登录日志查看', permission: ['IamLoginTrace'] } + } + ] +} +``` + +* permission：为显示该菜单所需要该用户具有的权限码，这个码会在稍后配置系统权限的时候自动代入。 +* 如果不配置permission，将不会对该菜单进行权限验证，所有用户都可以访问该页面，如果permission的列表中配置了多个权限码，那么具有其中一个就将会具有当前菜单的访问权限。 +* 配置完成后，就可以对这些页面进行访问了（如果配置了权限码，可以先使用具有管理员权限的账号访问到）。