调整首页结构图;增加前端接口请求相关文档。

This commit is contained in:
Zhaoyang 2020-03-17 10:23:44 +08:00
parent 7e499c9472
commit 92900c7f01
4 changed files with 130 additions and 2 deletions

View File

@ -42,7 +42,7 @@
</div> </div>
<div class="custom content"> <div class="custom content">
<div class="features"> <div class="features">
<img src="../public/structure.png" alt="" style="display: block; margin: 0 auto; width: 100%; max-width: 800px; height: auto;"> <img src="../public/structure.png" alt="" style="display: block; margin: 0 auto; width: 100%; height: auto;">
</div> </div>
</div> </div>
<div class="footer"> <div class="footer">

View File

@ -61,6 +61,7 @@ module.exports = {
['/guide/diboot-antd-admin/开始使用', '开始使用'], ['/guide/diboot-antd-admin/开始使用', '开始使用'],
['/guide/diboot-antd-admin/添加页面', '添加页面'], ['/guide/diboot-antd-admin/添加页面', '添加页面'],
['/guide/diboot-antd-admin/权限控制', '权限控制'], ['/guide/diboot-antd-admin/权限控制', '权限控制'],
['/guide/diboot-antd-admin/接口请求', '接口请求'],
['/guide/diboot-antd-admin/CRUD快速集成', 'CRUD快速集成'], ['/guide/diboot-antd-admin/CRUD快速集成', 'CRUD快速集成'],
] ]
} }
@ -75,6 +76,7 @@ module.exports = {
['/guide/diboot-element-admin/开始使用', '开始使用'], ['/guide/diboot-element-admin/开始使用', '开始使用'],
['/guide/diboot-element-admin/添加页面', '添加页面'], ['/guide/diboot-element-admin/添加页面', '添加页面'],
['/guide/diboot-element-admin/权限控制', '权限控制'], ['/guide/diboot-element-admin/权限控制', '权限控制'],
['/guide/diboot-antd-admin/接口请求', '接口请求'],
['/guide/diboot-element-admin/CRUD快速集成', 'CRUD快速集成'], ['/guide/diboot-element-admin/CRUD快速集成', 'CRUD快速集成'],
] ]
} }
@ -100,7 +102,7 @@ module.exports = {
items: [ items: [
{ text: 'core基础内核', link: '/guide/diboot-core/安装' }, { text: 'core基础内核', link: '/guide/diboot-core/安装' },
{ text: 'IAM身份认证', link: '/guide/diboot-iam/介绍' }, { text: 'IAM身份认证', link: '/guide/diboot-iam/介绍' },
{ text: '文件处理组件', link: '/guide/diboot-file/介绍' } { text: 'File文件组件', link: '/guide/diboot-file/介绍' }
] ]
}, { }, {
text: '前端项目 指南', text: '前端项目 指南',

View File

@ -0,0 +1,63 @@
# 接口请求
## 相关配置
我们在 [ant-design-pro-vue](https://github.com/sendya/ant-design-pro-vue) 项目对axios配置的基础上添加了一些增强性的更改与扩展这些更改都是在 **src/utils/request.js**中完成的。
* 常量配置:
* **BASE_URL**接口基础路径对应后端的context-path配置
* **JWT_HEADER_KEY**登录成功后请求头中携带token的字段后端默认为**authtoken**
* **TOKEN_REFRESH_EXPIRE**token超时自动刷新的重试间隔时间分钟建议设置为 后端设置的登录过期时间的 1/8
* axios相关配置
* 在请求拦截器与响应拦截器中我们已经对token相关流程以及文件下载和遇到请求异常提示错误消息等做了处理如果您需要对其进行自定义更改这些配置即可
## 接口扩展
我们对axios的默认调用方式进行了一些扩展主要包括了常用的一些接口请求函数。
* 调用方式如下:
```javascript
import { dibootApi } from '@/utils/request'
async getData() {
const params = {name: 'xxx'}
const res = await dibootApi.get(`/test/getData`, params)
if (res.code === 0) {
...
} else {
...
}
}
// 或
getData() {
const params = {name: 'xxx'}
dibootApi.get(`/test/getData`, params).then(res => {
if (res.code === 0) {
...
} else {
...
}
})
}
```
* 已有函数:
* **dibootApi.get**
* GET方式请求接口传入 {} 类型对象
* **dibootApi.post**
* POST方式请求接口传入 {} 类型数据
* 以JSON格式提交
* **dibootApi.put**
* PUT方式请求接口传入 {} 类型数据
* 以JSON格式提交
* **dibootApi.delete**
* DELETE方式请求接口传入 {} 类型数据
* 以JSON格式提交
* **dibootApi.upload**
* POST方式请求接口传入 formData 对象
* **dibootApi.download**
* GET方式请求接口传入 {} 类型对象
* 返回arraybuffer类型数据
* **dibootApi.postDownload**
* POST方式请求接口传入 {} 类型对象
* 返回arraybuffer类型数据
* 常用语复杂参数提交导出

View File

@ -0,0 +1,63 @@
# 接口请求
## 相关配置
我们在 [vue-element-admin](https://panjiachen.github.io/vue-element-admin-site/zh/) 项目对axios配置的基础上添加了一些增强性的更改与扩展这些更改都是在 **src/utils/request.js**中完成的。
* 常量配置:
* **BASE_URL**接口基础路径对应后端的context-path配置
* **JWT_HEADER_KEY**登录成功后请求头中携带token的字段后端默认为**authtoken**
* **TOKEN_REFRESH_EXPIRE**token超时自动刷新的重试间隔时间分钟建议设置为 后端设置的登录过期时间的 1/8
* axios相关配置
* 在请求拦截器与响应拦截器中我们已经对token相关流程以及文件下载和遇到请求异常提示错误消息等做了处理如果您需要对其进行自定义更改这些配置即可
## 接口扩展
我们对axios的默认调用方式进行了一些扩展主要包括了常用的一些接口请求函数。
* 调用方式如下:
```javascript
import { dibootApi } from '@/utils/request'
async getData() {
const params = {name: 'xxx'}
const res = await dibootApi.get(`/test/getData`, params)
if (res.code === 0) {
...
} else {
...
}
}
// 或
getData() {
const params = {name: 'xxx'}
dibootApi.get(`/test/getData`, params).then(res => {
if (res.code === 0) {
...
} else {
...
}
})
}
```
* 已有函数:
* **dibootApi.get**
* GET方式请求接口传入 {} 类型对象
* **dibootApi.post**
* POST方式请求接口传入 {} 类型数据
* 以JSON格式提交
* **dibootApi.put**
* PUT方式请求接口传入 {} 类型数据
* 以JSON格式提交
* **dibootApi.delete**
* DELETE方式请求接口传入 {} 类型数据
* 以JSON格式提交
* **dibootApi.upload**
* POST方式请求接口传入 formData 对象
* **dibootApi.download**
* GET方式请求接口传入 {} 类型对象
* 返回arraybuffer类型数据
* **dibootApi.postDownload**
* POST方式请求接口传入 {} 类型对象
* 返回arraybuffer类型数据
* 常用语复杂参数提交导出