调整首页结构图；增加前端接口请求相关文档。
This commit is contained in:
Zhaoyang
parent
7e499c9472
commit
92900c7f01
|
|
@ -42,7 +42,7 @@
|
|||
</div>
|
||||
<div class="custom content">
|
||||
<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 class="footer">
|
||||
|
|
|
|||
|
|
@ -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/CRUD快速集成', 'CRUD快速集成'],
|
||||
]
|
||||
}
|
||||
|
|
@ -75,6 +76,7 @@ module.exports = {
|
|||
['/guide/diboot-element-admin/开始使用', '开始使用'],
|
||||
['/guide/diboot-element-admin/添加页面', '添加页面'],
|
||||
['/guide/diboot-element-admin/权限控制', '权限控制'],
|
||||
['/guide/diboot-antd-admin/接口请求', '接口请求'],
|
||||
['/guide/diboot-element-admin/CRUD快速集成', 'CRUD快速集成'],
|
||||
]
|
||||
}
|
||||
|
|
@ -100,7 +102,7 @@ module.exports = {
|
|||
items: [
|
||||
{ text: 'core基础内核', link: '/guide/diboot-core/安装' },
|
||||
{ text: 'IAM身份认证', link: '/guide/diboot-iam/介绍' },
|
||||
{ text: '文件处理组件', link: '/guide/diboot-file/介绍' }
|
||||
{ text: 'File文件组件', link: '/guide/diboot-file/介绍' }
|
||||
]
|
||||
}, {
|
||||
text: '前端项目 指南',
|
||||
|
|
|
|||
|
|
@ -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类型数据
|
||||
* 常用语复杂参数提交导出
|
||||
|
|
@ -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类型数据
|
||||
* 常用语复杂参数提交导出
|
||||
Loading…
Reference in New Issue