添加diboot-antd-admin相关文档
This commit is contained in:
Zhaoyang
parent
e9003ad3bc
commit
c948dfd129
|
|
@ -39,6 +39,20 @@ module.exports = {
|
|||
]
|
||||
}
|
||||
],
|
||||
'/guide/diboot-antd-admin/': [
|
||||
{
|
||||
title: 'Diboot-antd-admin 项目指南',
|
||||
collapsable: true,
|
||||
sidebarDepth: 2,
|
||||
children: [
|
||||
['/guide/diboot-antd-admin/介绍', '介绍'],
|
||||
['/guide/diboot-antd-admin/开始使用', '开始使用'],
|
||||
['/guide/diboot-antd-admin/添加页面', '添加页面'],
|
||||
['/guide/diboot-antd-admin/权限控制', '权限控制'],
|
||||
['/guide/diboot-antd-admin/CRUD快速集成', 'CRUD快速集成'],
|
||||
]
|
||||
}
|
||||
],
|
||||
'/guide/diboot-devtools/': [
|
||||
{
|
||||
title: 'diboot-devtools 使用指南',
|
||||
|
|
@ -61,6 +75,12 @@ module.exports = {
|
|||
{ text: 'core基础内核', link: '/guide/diboot-core/安装' },
|
||||
{ text: 'IAM身份认证', link: '/guide/diboot-iam/介绍' }
|
||||
]
|
||||
}, {
|
||||
text: '前端项目 指南',
|
||||
items: [
|
||||
{ text: 'diboot-antd-admin', link: '/guide/diboot-antd-admin/介绍' },
|
||||
{ text: 'diboot-element-admin', link: '/guide/diboot-antd-admin/介绍' }
|
||||
]
|
||||
}, {
|
||||
text: 'devtools助理 指南',
|
||||
link: '/guide/diboot-devtools/介绍'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,124 @@
|
|||
# CRUD快速集成
|
||||
|
||||
## 开始之前
|
||||
|
||||
* 在diboot-antd-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'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
4. 配置columns数据：columns数据是定义该列表页需要显示哪些列的，默认的column只需要配置title与dataIndex属性即可，如下：
|
||||
```javascript
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'realname'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
5. 删除数据：直接在删除按钮上调用remove函数即可，传入需要删除的当前id。
|
||||
6. 导出数据：直接在导出按钮上调用exportData函数即可，将会传入当前查询参数，并异步下载文件。
|
||||
6. 钩子函数：afterLoadList，在列表加载完毕将会执行该操作，另外，删除函数返回的是 Promise对象，所以可以使用.then在删除完毕时执行某些操作。
|
||||
7. 相关配置：
|
||||
* customQueryParam: 不会被搜索栏改变的初始查询参数对象，一般用于页面固定的查询参数
|
||||
* queryParam：与查询条件绑定的查询参数对象
|
||||
* advanced：用于构建可收缩/展开的查询框的状态参数
|
||||
* 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之后，默认为 /
|
||||
* model: 更新时加载的原数据
|
||||
* 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：关闭之后执行的函数
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
# diboot-antd-admin前端基础项目
|
||||
|
||||
## 说明
|
||||
diboot-antd-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/)
|
||||
* Ant Design 的 Vue 实现：[Ant Design Vue](https://www.antdv.com/docs/vue/introduce/)
|
||||
* 中后台解决方案：[ant-design-pro-vue](https://github.com/sendya/ant-design-pro-vue)
|
||||
* ES6 语法
|
||||
|
||||
## 项目特性
|
||||
|
||||
* 基于开源项目[ant-design-pro-vue](https://github.com/sendya/ant-design-pro-vue)；
|
||||
* 在**ant-design-pro-vue**项目基础上，进行精简；
|
||||
* 登录、权限、接口对接上，与diboot-v2相关组件构建的后端应用无缝集成且开箱可用；
|
||||
* 提取CRUD页面相关通用属性与方法到mixins文件中，少写代码，多做事情；
|
||||
* 菜单到按钮级别的细粒度权限控制；
|
||||
* 智能化的权限配置方案；
|
||||
* 自动化的token交换方案；
|
||||
* 预置多种常用请求方式，轻松完成异步文件下载等；
|
||||
* 数据字典管理功能；
|
||||
* 登录人员管理界面；
|
||||
* 角色与权限管理功能；
|
||||
* 权限管理功能；
|
||||
* 登录日志管理功能。
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
# 开始使用diboot-antd-admin
|
||||
|
||||
## 新建项目
|
||||
|
||||
从Github仓库中clone最新的项目到本地
|
||||
|
||||
```bash
|
||||
git clone https://github.com/dibo-software/diboot-antd-admin my-admin
|
||||
cd my-admin
|
||||
```
|
||||
|
||||
## 安装依赖
|
||||
|
||||
项目根目录下执行以下命令，安装项目所需依赖
|
||||
|
||||
```bash
|
||||
yarn
|
||||
# OR
|
||||
npm install
|
||||
```
|
||||
|
||||
## 检查接口前缀与代理配置
|
||||
|
||||
对于axios和vue.config.js的devServer的proxy配置中，接口前缀需要与后端一致，项目默认为 /api，如果您的后端context-path也是 /api，那么axios和vue.config.js中的接口前缀不必改动。
|
||||
|
||||
默认后端接口端口为8080，如果您的后端端口不是8080，需要更改vue.config.js中关于devServer的proxy配置。
|
||||
|
||||
若需更改axios中接口前缀，需在**src/utils/request.js**文件中更改常量BASE_URL的值，如下：
|
||||
|
||||
```javascript
|
||||
const BASE_URL = '/api'
|
||||
```
|
||||
|
||||
若需更改项目接口代理，需更改项目根目录下**vue.config.js**文件中的devServer配置项，如下：
|
||||
|
||||
```javascript
|
||||
devServer: {
|
||||
port: 9000,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080',
|
||||
ws: true,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/api': '/api'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 启动项目
|
||||
|
||||
执行以下命令启动项目
|
||||
|
||||
```bash
|
||||
yarn server
|
||||
# OR
|
||||
npm run server
|
||||
```
|
||||
|
||||
运行完成后，点击命令行提示出的地址，打开页面成功，项目启动就完成了。
|
||||
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
# 权限控制
|
||||
|
||||
## 简介
|
||||
|
||||
* 该项目使用的权限控制模型为RBAC角色权限模型；
|
||||
* 支持按钮级别的权限控制；
|
||||
* 权限分发路径：菜单/按钮/权限-->树状层级结构的权限集-->角色-->角色列表-->用户；
|
||||
* 在添加新的需要进行权限控制的页面后，需要进行该页面权限的配置，然后在相关角色中对该权限进行授权；
|
||||
|
||||
## 菜单权限配置
|
||||
|
||||
菜单如果要进行权限控制，一定需要添加在 **src/config/router.config.js** 文件中的 asyncRouterMap 中，且需要配置 meta 属性中的 permission 列表，如下：
|
||||
```javascript
|
||||
{
|
||||
path: '/system/iamLoginTrace/list',
|
||||
name: 'IamLoginTraceList',
|
||||
component: () => import('@/views/system/iamLoginTrace/list'),
|
||||
meta: { title: '登录日志查看', keepAlive: true, permission: ['IamLoginTrace'] }
|
||||
}
|
||||
```
|
||||
|
||||
## 按钮权限配置
|
||||
|
||||
按钮的权限控制，是通过指令控制该按钮是否显示来实现的，一共具有三个指令来控制是否按钮是否显示。
|
||||
|
||||
* v-action
|
||||
* 控制按钮可以显示；
|
||||
* 只能添加单条按钮权限编码，比如 v-action:add 意味着具有add编码的新建权限该按钮将会显示, v-action:update意味着具有update编码的更新权限时该按钮显示等。
|
||||
* v-permission
|
||||
* 控制按钮可以显示；
|
||||
* 可以添加多条按钮权限编码，有一条权限存在，就将显示该按钮，比如 v-permission="['update', 'delete']"，标识当具有update或者delete中的一种权限时，该按钮将会显示。
|
||||
* v-permission-missing
|
||||
* 控制按钮可以不显示；
|
||||
* 可以添加多条权限编码，有一条权限存在，就将隐藏该按钮，如下代码就将会在没有详情、更新、删除权限时，将操作栏显示为 -
|
||||
|
||||
```html
|
||||
<span v-permission-missing="['detail', 'update', 'delete']">
|
||||
-
|
||||
</span>
|
||||
```
|
||||
|
||||
上述按钮权限配置，可以在已有的相关功能中找到：
|
||||
```html
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a v-action:detail href="javascript:;" @click="$refs.detail.open(record.id)">详情</a>
|
||||
<a-divider v-action:detail v-permission="['update', 'delete']" type="vertical" />
|
||||
<a-dropdown v-permission="['update', 'delete']">
|
||||
<a class="ant-dropdown-link">
|
||||
更多 <a-icon type="down"/>
|
||||
</a>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item v-action:update>
|
||||
<a @click="$refs.form.open(record.id)">编辑</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item v-action:delete>
|
||||
<a href="javascript:;" @click="remove(record.id)">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-dropdown>
|
||||
<span v-permission-missing="['detail', 'update', 'delete']">
|
||||
-
|
||||
</span>
|
||||
</span>
|
||||
```
|
||||
|
||||
## 菜单权限管理
|
||||
|
||||
* 使用具有超级管理员权限的账号登入项目；
|
||||
* 打开 系统管理-->菜单权限管理 页面，可看到已有权限列表；
|
||||
|
||||
* 点击新建，开始配置新增页面的权限，下图是已有权限配置好之后的表单示例：
|
||||
|
||||
* 菜单编码对应上述**菜单权限配置**中的permission列表中的值，默认我们只在meta的permission中配置一个值与此处对应即可；
|
||||
* 下方**按钮/权限里列表**配置中，按钮/权限编码，需要与上述添加在按钮的指令中的参数一致，这里默认配置了一些常用操作类型到数据字典中，如果有新的操作按钮，可以到数据字典的**前端按钮/权限编码**中进行增加；
|
||||
* 在权限配置中，对于常用的权限，都可以通过点击和选取来完成对菜单和按钮权限的配置；
|
||||
* 在配置好前端菜单与接口列表，和前端按钮与接口列表后，也完成了前端菜单与按钮和后端接口的关系绑定，之后在对角色设置相关权限后，控制前端界面是否显示的同时，也控制了该角色下的用户对后端对应接口的访问权限；
|
||||
* 在权限配置完成后，如果需要更改权限显示顺序，可以点击该列表页面右上角“排序”按钮进行权限拖拽排序操作。
|
||||
|
||||
## 角色授权管理
|
||||
|
||||
* 打开 系统管理-->角色权限管理 页面，可看到当前已有角色列表；
|
||||
* 新建角色 或 选择需要更改授权的角色进行编辑操作；
|
||||
* 对需要授权的权限进行选中，不需要的权限取消即可，操作直观简便。
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
# 添加页面
|
||||
|
||||
添加页面需要添加页面相关的Vue组件与相对应的路由配置
|
||||
|
||||
## 添加Vue组件
|
||||
|
||||
* 在**src/views**文件夹下创建页面对应的文件夹以及对应的页面组件文件
|
||||
|
||||
## 添加路由配置
|
||||
|
||||
* 后台菜单是根据路由配置自动生成的，具体可参考[路由与菜单](https://pro.loacg.com/docs/router-and-nav)
|
||||
* 在**src/config/router.config.js**文件中，可以配置需要新增页面的路由。
|
||||
* 对于需要进行权限控制的菜单，需要放到asyncRouterMap中进行配置，其他不需要进行权限控制或所有人可用的菜单，可以放到constantRouterMap中。
|
||||
* 路由配置方式，可参考已有配置，如下：
|
||||
|
||||
```javascript
|
||||
// 系统管理
|
||||
{
|
||||
path: '/system',
|
||||
redirect: '/system/dictionary/list',
|
||||
component: PageView,
|
||||
meta: { title: '系统管理', icon: 'dashboard' },
|
||||
children: [
|
||||
{
|
||||
path: '/system/dictionary/list',
|
||||
name: 'DictList',
|
||||
component: () => import('@/views/system/dictionary/list'),
|
||||
meta: { title: '数据字典管理', keepAlive: true, permission: ['Dictionary'] }
|
||||
},
|
||||
{
|
||||
path: '/system/iamUser/list',
|
||||
name: 'IamUserList',
|
||||
component: () => import('@/views/system/iamUser/list'),
|
||||
meta: { title: '系统用户管理', keepAlive: true, permission: ['IamUser'] }
|
||||
},
|
||||
{
|
||||
path: '/system/iamRole/list',
|
||||
name: 'IamRoleList',
|
||||
component: () => import('@/views/system/iamRole/list'),
|
||||
meta: { title: '角色权限管理', keepAlive: true, permission: ['IamRole'] }
|
||||
},
|
||||
{
|
||||
path: '/system/iamFrontendPermission/list',
|
||||
name: 'IamFrontendPermission',
|
||||
component: () => import('@/views/system/iamFrontendPermission/list'),
|
||||
meta: { title: '菜单权限管理', keepAlive: true, permission: ['IamFrontendPermission'] }
|
||||
},
|
||||
{
|
||||
path: '/system/iamLoginTrace/list',
|
||||
name: 'IamLoginTraceList',
|
||||
component: () => import('@/views/system/iamLoginTrace/list'),
|
||||
meta: { title: '登录日志查看', keepAlive: true, permission: ['IamLoginTrace'] }
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
* keepAlive：设置为true，将会在重新进入该页面时保持之前的数据，如果设置为false，则会重新加载数据；
|
||||
* permission：为显示该菜单所需要该用户具有的权限码，这个码会在稍后配置系统权限的时候自动代入。
|
||||
* 如果不配置permission，将不会对该菜单进行权限验证，所有用户都可以访问该页面，如果permission的列表中配置了多个权限码，那么具有其中一个就将会具有当前菜单的访问权限。
|
||||
* 配置完成后，就可以对这些页面进行访问了（如果配置了权限码，可以先使用具有管理员权限的账号访问到）。
|
||||
Loading…
Reference in New Issue