Skip to content

L
ldp-docs
Commit d5e41a75 authored by 祁新's avatar 祁新
Browse files
Options

feat: 添加LDP前端框架自定义组件使用说明

parent 0505c597
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 202 deletions
开发文档/LDP前端框架自定义组件使用说明.md
View file @ d5e41a75
......@@ -8,200 +8,77 @@
>
> 功能封装于`utils/request.js`中
- 接口请求数据说明
```javascript
// 访问接口需要传递X-Ldp-Token, 和 X-Realm
service.interceptors.request.use(
config => {
if (store.getters.token) {
// 判断是否默认有设置请求头 如果有则不读取缓存信息
if (!config.headers['X-Ldp-Token']) {
config.headers['X-Ldp-Token'] = getToken()
}
if (!config.headers['X-Realm']) {
config.headers['X-Realm'] = process.env.VUE_APP_REALMCODE
}
}
if (config.showLoading) {
showLoading(config.loading)
}
return config
},
error => {
return Promise.reject(error)
}
)
```
- 接口返回数据`response`拦截器说明
> 默认情况下如果数据错误，会报错提示。
>
> 如果错误401请查看 `会话失效说明`
```javascript
service.interceptors.response.use(
response => {
const res = response.data
if (response.config.showLoading) {
closeLoading()
}
if (checkToken(response)) {
return res
}
if (response.config && response.config.noMessage) {
return res
}
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
(error, response) => {
// 判断设置中是否有showLoading 如果有则直接关闭loading状态
if (error.config.showLoading) {
closeLoading()
}
if (checkToken(error.response)) {
return Promise.reject(error)
}
if (error.config && error.config.noMessage) {
return Promise.reject(error)
}
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
```
- `axios`其他 功能配置说明
- `axios`部分功能使用说明
1. `显示loading状态`
1. 调用接口时显示**loading状态**
```javascript
import request from '@/utils/request'
request({
url: url,
method: 'get',
// 设置显示loading状态
showLoading: true
})
```
2. `关闭默认错误提示`
```
})
```
2. 调用接口时**关闭默认错误提示**
```javascript
import request from '@/utils/request'
request({
url: url,
method: 'get',
// 设置关闭报错提示
noMessage: true
})
```
})
```
### 会话失效说明
### 会话已过期说明
> 当用户登录token过期后，访问接口会报错401，此时从axios拦截器中获取到错误码，会默认进行跳转到401页面。目前会话失效有两种模型。(跳转模式，弹框模式)
> 当用户登录token过期后，访问接口会报错401，此时从axios拦截器中获取到错误码，会默认进行跳转到401页面。目前会话失效有两种模式。(跳转模式，弹框模式)
- 拦截器逻辑代码
- 会话失效两种模式的配置方法
```javascript
// ... axios拦截器 路径: utils/request.js
service.interceptors.response.use(
response => {
const res = response.data
// ...
// 获取到数据成功后判断token
if (checkToken(response)) {
return res
}
// ...
},
(error, response) => {
// ...
// 报错后判断token
if (checkToken(error.response)) {
return Promise.reject(error)
}
/ ...
}
)
/**
* @description 检查token是否过期 查看stauts 401
* @param {Object} response axios拦截器返回信息
*/
function checkToken(response) {
let isExpired = false
if (!response) return
if (typeof response !== 'object') return
// 判断是否不验证登录失效检测
if (response.config && response.config.noCheckToken) {
return false
}
// 查看http 状态码是否是401
if (response.status === 401) {
isExpired = true
} else if (response.data && response.data.code && response.data.code === 401) {
isExpired = true
}
if (isExpired) {
let redirect = ''
// 判断axios请求参数中是否有设置重定向， 如果设置重定向则重定向当前页面
if (response.config && response.config.isRedirect) {
redirect = location.href
}
// 判断是跳转401页面
if (settings.checkTokenType === 0) {
router.push({
path: '401',
query: {
redirect
}
})
} else if (settings.checkTokenType === 1) { // 判断是否是弹框提示
if (isTokenExpired) return isExpired
isTokenExpired = true
const msg = response.data && response.data.code && response.data.msg ||
'会话已过期，请点击确定重新登录！'
MessageBox.alert(msg, '会话已过期', {
confirmButtonText: '确定',
callback: action => {
isTokenExpired = false
if (action === 'confirm') {
logout(redirect)
}
}
})
}
}
return isExpired
}
> 配置文件在 `src/setting.js`中
>
> `checkTokenType` 0 表示跳转401页面， 1表示弹框提示
```
- 模式的配置
>配置文件在 `src/setting.js`中
>
>`checkTokenType` 0 表示跳转401页面， 1表示弹框提示
1. 当前token过期后默认会跳转401页面
```javascript
// src/setting.js
module.exports = {
// 检测token过去类型 0为跳转401页面 1为弹框提示
checkTokenType: 0,
...
}
```
![会员已过期](../imgs/401.png)
2. 弹框提示
```javascript
// src/setting.js
module.exports = {
// 检测token过去类型 0为跳转401页面 1为弹框提示
checkTokenType: 1,
...
}
```
![会话已过期](..\imgs\token-expired-dialog.png)
......@@ -217,17 +94,17 @@ function checkToken(response) {
参数说明
| 参数名 | 类型 | 说明 |
| --------------------- | --------------- | ------------------------------- |
| `head` | `Array` | 表格列头数组 必填 |
| `rowKeyField` | `String` | 行唯一标志 默认是id |
| `showSelection` | `Boolean` | 显示多选类型表格 |
| `showNumber` | `Boolean` | 显示表格序号 |
| `height` | `String|Number` | 表格高度 默认自动计算全屏 |
| `showOverflowTooltip` | `Boolean` | 内容超出显示tip |
| `noPagination` | `Boolean` | 无分页。 默认表格下面自带分页器 |
| `editable` | `Boolean` | 是否可编辑， 默认不可编辑 |
| `showAdd` | `Boolean` | 显示新增行 |
| 参数名 | 类型 | 说明 |
| --------------------- | ---------------- | ------------------------------- |
| `head` | `Array` | 表格列头数组 必填 |
| `rowKeyField` | `String` | 行唯一标志 默认是id |
| `showSelection` | `Boolean` | 显示多选类型表格 |
| `showNumber` | `Boolean` | 显示表格序号 |
| `height` | `String||Number` | 表格高度 默认自动计算全屏 |
| `showOverflowTooltip` | `Boolean` | 内容超出显示tip |
| `noPagination` | `Boolean` | 无分页。 默认表格下面自带分页器 |
| `editable` | `Boolean` | 是否可编辑， 默认不可编辑 |
| `showAdd` | `Boolean` | 显示新增行 |
- `DynamicForm` 动态表单组件
......@@ -250,27 +127,35 @@ function checkToken(response) {
事件说明
> 下列参数说明
>
> **key**: 控件绑定的属性名
>
> **value**: 控件绑定的值
>
> **data**: 表单的总数据对象
| 事件名 | 参数列表 | 说明 |
| ------------------- | ------------- | ------------------------------------------ |
| ------------------- | ------------- | ------------------------------------------ |
| `controlDataChange` | `{key,value}` | 当表单中控件内容变化时触发 |
| `getContent` | `{key,value}` | 当表单中控件是选择弹框时候值改改变时候触发 |
| `modelItem` | `{key,value}` | 当表格中树形控件改变时候触发 |
| `submit` | `value` | 当点击提交按钮时候触发 |
| `submit` | `data` | 当点击提交按钮时候触发 |
| `cancelForm` | | 点击取消时候触发 |
`formConfig` 表单控件配置说明
| 属性名 | 类型 | 说明 |
| ------------- | -------------- | ------------------------------------------ |
| `label` | `String` | 控件标题 |
| `key` | `String` | 表单绑定的字段名 |
| `type` | `String` | 表单类型 `input|select|databox|textarea`等 |
| `span` | `Number` | 一行按照24列分 每一列占用的比例 |
| `placeholder` | `String` | 控件提示信息 |
| `rules` | `Array|Object` | 详情请查看`element-ui`常规验证用 |
| 属性名 | 类型 | 说明 |
| ------------- | --------------- | ------------------------------------------ |
| `label` | `String` | 控件标题 |
| `key` | `String` | 表单绑定的字段名 |
| `type` | `String` | 表单类型 `input|select|databox|textarea`等 |
| `span` | `Number` | 一行按照24列分 每一列占用的比例 |
| `placeholder` | `String` | 控件提示信息 |
| `rules` | `Array||Object` | 详情请查看`element-ui`常规验证用 |
使用例子
```vue
<template>
<div class="app-container page-overflow-y">
......@@ -318,7 +203,7 @@ function checkToken(response) {
onSubmit() {
...dosomething
}，
// 点击取消事件
// 点击取消事件
onCancelForm() {
this.$router.back()
}
......@@ -326,7 +211,7 @@ function checkToken(response) {
}
</script>
```
### 设计器生成视图运行时组件
......@@ -552,7 +437,9 @@ function checkToken(response) {
> 混入到`vue`组件实例中进入某些默认操作
- `DataTableMixin` 主要配合`EditDataTable`组件
- `DataTableMixin` 主要配合`EditDataTable`表格组件
使用例子如下：
```vue
<template>
......@@ -574,13 +461,32 @@ function checkToken(response) {
</script>
```
默认数据`data`
| 属性名 | 类型 | 说明 |
| --------- | -------- | ------------------------------ |
| **list** | `Array` | 列表显示的数据 |
| `_url` | `String` | 访问地址 |
| `_params` | `Object` | 请求接口参数 |
| `_query` | `Object` | 搜索条件配合搜索组件使用 |
| `page` | `Number` | 当前页码(表格组件中分页器使用) |
| `total` | `Number` | 总条数(表格组件中分页器使用) |
默认方法`methods`
| 方法名 | 参数 | 说明 |
| --------------------- | -------------- | ---------------------- |
| **dataTableInit** | | 请求数据使用 |
| `dataTableSearch` | val(搜索条件) | 搜索组件使用触发的方法 |
| `dataTablePageChange` | page(当前页码) | 点击分页器触发 |
- `AceCommon` 用来判断当前路由页面是否具有视图权限
> 控制是否具有权限访问当前页面，如果没权限则会跳转显示无权限页面`noAccess`。
使用例子
使用例子如下:
```vue
<script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment