From 92900c7f01de47e3c471f10d59f569f46e763013 Mon Sep 17 00:00:00 2001 From: Zhaoyang Date: Tue, 17 Mar 2020 10:23:44 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=A6=96=E9=A1=B5=E7=BB=93?= =?UTF-8?q?=E6=9E=84=E5=9B=BE=EF=BC=9B=E5=A2=9E=E5=8A=A0=E5=89=8D=E7=AB=AF?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=AF=B7=E6=B1=82=E7=9B=B8=E5=85=B3=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../.vuepress/components/HomeLayout.vue | 2 +- diboot-docs/.vuepress/config.js | 4 +- .../guide/diboot-antd-admin/接口请求.md | 63 +++++++++++++++++++ .../guide/diboot-element-admin/接口请求.md | 63 +++++++++++++++++++ 4 files changed, 130 insertions(+), 2 deletions(-) create mode 100644 diboot-docs/guide/diboot-antd-admin/接口请求.md create mode 100644 diboot-docs/guide/diboot-element-admin/接口请求.md diff --git a/diboot-docs/.vuepress/components/HomeLayout.vue b/diboot-docs/.vuepress/components/HomeLayout.vue index 0048da2..80e017a 100644 --- a/diboot-docs/.vuepress/components/HomeLayout.vue +++ b/diboot-docs/.vuepress/components/HomeLayout.vue @@ -42,7 +42,7 @@
- +
diff --git a/diboot-docs/.vuepress/config.js b/diboot-docs/.vuepress/config.js index 7b2441f..f6e4a48 100644 --- a/diboot-docs/.vuepress/config.js +++ b/diboot-docs/.vuepress/config.js @@ -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: '前端项目 指南', diff --git a/diboot-docs/guide/diboot-antd-admin/接口请求.md b/diboot-docs/guide/diboot-antd-admin/接口请求.md new file mode 100644 index 0000000..8b8e757 --- /dev/null +++ b/diboot-docs/guide/diboot-antd-admin/接口请求.md @@ -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类型数据 + * 常用语复杂参数提交导出 \ No newline at end of file diff --git a/diboot-docs/guide/diboot-element-admin/接口请求.md b/diboot-docs/guide/diboot-element-admin/接口请求.md new file mode 100644 index 0000000..7f6338d --- /dev/null +++ b/diboot-docs/guide/diboot-element-admin/接口请求.md @@ -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类型数据 + * 常用语复杂参数提交导出 \ No newline at end of file