From 04470e69abc534a28429bedf2133065aa4fbf3ac Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Mon, 27 Aug 2018 13:37:02 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=96=87=E6=A1=A3=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: 1285570867011f86a3991c3ae598192951cc3f2f [formerly 1285570867011f86a3991c3ae598192951cc3f2f [formerly 1285570867011f86a3991c3ae598192951cc3f2f [formerly 1285570867011f86a3991c3ae598192951cc3f2f [formerly 293f784fe509a79f276015d3647f954340343066 [formerly 9f69c12174116db35ca32bad96ef5ba11de35397]]]]] Former-commit-id: 704d15270edf4feeff893ad9b5cc25ae201a093d Former-commit-id: 81ee93da041be7b177ecd7b327de9cfadb2969f8 Former-commit-id: bd5fe14e21a1385f2c5b309d248442eac481c989 [formerly 727cb0124ab4db83b0c485ba717c49ee2d7dfaf9] Former-commit-id: 44bb97adb6f9a5ee0f0b298752e8c74a45301c10 Former-commit-id: 64239434f1ef1dd8812ff166ae5d5306ee3e601e Former-commit-id: 01618dcab298c103dc57748e6ad72ad81af7bb4b Former-commit-id: 7e4babf533d723455d8b8bca87cc4b2c6c79cbe3 Former-commit-id: 54cf9b9949027aa08465c85960fe1853cc209c50 --- .env | 2 + docs/.vuepress/config.js | 3 +- docs/zh/sys-ajax/README.md | 153 +++++++++++++++++++++++++++++++++++++ 3 files changed, 157 insertions(+), 1 deletion(-) create mode 100644 docs/zh/sys-ajax/README.md diff --git a/.env b/.env index 27c38a1b..701568fd 100644 --- a/.env +++ b/.env @@ -2,4 +2,6 @@ # 页面 title 前缀 VUE_APP_TITLE=D2Admin + +# 网络请求公用地址 VUE_APP_API=/api/ diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 3a087c60..983e8b5d 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -51,8 +51,9 @@ module.exports = { { text: '组件', link: '/zh/sys-components/' }, { text: '插件', link: '/zh/sys-plugins/' }, { text: 'vuex', link: '/zh/sys-vuex/' }, - { text: '菜单', link: '/zh/sys-menu/' }, { text: '路由', link: '/zh/sys-route/' }, + { text: '菜单', link: '/zh/sys-menu/' }, + { text: '异步请求', link: '/zh/sys-ajax/' }, { text: '多页面', link: '/zh/sys-multi-page/' }, { text: '数据持久化', link: '/zh/sys-db/' }, { text: 'CSS 实用类', link: '/zh/sys-css/' }, diff --git a/docs/zh/sys-ajax/README.md b/docs/zh/sys-ajax/README.md new file mode 100644 index 00000000..1a04317e --- /dev/null +++ b/docs/zh/sys-ajax/README.md @@ -0,0 +1,153 @@ +--- +sidebar: auto +--- + +# 异步请求 + +D2Admin 使用 [axios](https://github.com/axios/axios) 作为异步请求工具，并做了一些封装。 + +| axios | 地址 | +| --- | --- | +| Github | [https://github.com/axios/axios](https://github.com/axios/axios) | +| npm | [https://www.npmjs.com/package/axios](https://www.npmjs.com/package/axios) | +| 中文文档 | [https://www.kancloud.cn/yunye/axios/234845](https://www.kancloud.cn/yunye/axios/234845) | + +## 介绍 + +Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 + +* 支持浏览器和node.js +* 支持promise +* 能拦截请求和响应 +* 能转换请求和响应数据 +* 能取消请求 +* 自动转换JSON数据 +* 浏览器端支持防止CSRF(跨站请求伪造) + +## 浏览器支持 + +![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | +--- | --- | --- | --- | --- | --- | +Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ | + +[![Browser Matrix](https://saucelabs.com/open_sauce/build_matrix/axios.svg)](https://saucelabs.com/u/axios) + +## 使用方式 + +axios 默认的使用方式在这里不做介绍，D2Admin 推荐在您的项目中使用下面的方式获取数据： + +### 修改 baseURL + +默认的请求地址在 `d2-admin/.env` + +``` +VUE_APP_API=/api/ +``` + +上述设置将在您访问 `/demo/a` 时实际去访问 `/api/demo/a` + +如果您希望不同的环境使用不同的请求地址，可以在 `d2-admin/.env.development` 中添加设置（示例）： + +``` +VUE_APP_API=/api-dev/ +``` + +这样您在开发环境和正式环境就有了不同的公共请求地址，在开发环境访问 `/demo/a` 时实际去访问 `/api-dev/demo/a` + +### 通用配置 + +您在开始使用 D2Admin 开发您的项目之前，应该首先修改 `d2-admin/src/plugin/axios/index.js` 下的设置。 + +默认的设置需要遵循下面的数据返回格式约定： + +``` js +{ + // 和后台约定的状态码 + code: 0, + // 后台返回请求状态信息 + msg: '返回信息', + // data 内才是真正的返回数据 + data: { + list: [ + ... + ] + } +} +``` + +当发生错误（注：这里指的错误不是 http 错误，而是和后台约定好的错误类型）时返回的数据示例： + +``` js +{ + // 和后台约定的状态码 + code: 'unlogin', + // 后台返回请求状态信息 + msg: '用户没有登录' +} +``` + +如果针对某个错误（注：这里指的错误不是 http 错误，而是和后台约定好的错误类型）指定处理方法，应该在响应拦截器中加入对应的代码： + +``` js +service.interceptors.response.use( + response => { + // 成功返回数据，在这里判断和后台约定的状态标识 + }, + error => { + // 发生 http 错误，在这里判断状态码 + } +) +``` + +如果需要针对某个 http 错误指定处理方法，应该在响应拦截器中第二个参数中添加对应的代码。 + +::: tip +在默认的设置中，如果您的接口没有返回 code 字段，将不会进行状态（非 http 状态，而是和后台约定好的状态类型）判断，直接返回 axios 请求返回的数据。 +::: + +### 设计 API + +假设您有一个返回数据的 API 接口，想访问它，您首先应该在 `d2-admin/src/api` 文件夹内创建合适的文件目录，例如：`d2-admin/src/api/demo/business/table/1/index.js`，这个文件中应该导出一个或者多个请求： + +``` js +import request from '@/plugin/axios' + +export function BusinessTable1List (data) { + return request({ + url: '/demo/business/table/1', + method: 'post', + data + }) +} +``` + +### 使用 API 获取数据 + +在上面的步骤中创建了 API 文件，您应该在页面中这样使用： + +``` vue + +``` + +而不是在页面中直接调用 axios。 + +::: tip +虽然没有强制规定，请注意您的 API 文件夹结构规律性 +::: \ No newline at end of file From 217c238cd33decf09f2c75e5c40faf528486bc53 Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Mon, 27 Aug 2018 13:46:16 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=B8=8D=E8=BF=94?= =?UTF-8?q?=E5=9B=9E=20code=20=E7=9A=84=E6=83=85=E5=86=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: 872d13d03b5e13a8e438ed20ed6cb83abe8c4c3f [formerly aca9e06a67948e7c8792bbda92dcc21e87110ef4] [formerly 872d13d03b5e13a8e438ed20ed6cb83abe8c4c3f [formerly aca9e06a67948e7c8792bbda92dcc21e87110ef4] [formerly 872d13d03b5e13a8e438ed20ed6cb83abe8c4c3f [formerly aca9e06a67948e7c8792bbda92dcc21e87110ef4] [formerly aca9e06a67948e7c8792bbda92dcc21e87110ef4 [formerly 7420261bea715d752f50756c92fe4a4adf59a2da [formerly 288a72c9e033755159a06174fee92b3c81700ccb]]]]] Former-commit-id: bbf82797ddd7d5b2ac8887f038b9c91ce76ea0ab Former-commit-id: 33f5cc5aac9fdc46f8932845f6c48aa3343c9d91 Former-commit-id: c3e92e229a2562f19fc37fb99b135745d28f8731 [formerly e9b0f9f1f45491b21ef1ad2cce5d50d964562144] Former-commit-id: 27d3c0fb61f3f53c6a4f3964d4df5bea3447d07a Former-commit-id: 76f5e2b8496d8b40aa74331318ee6b6ba8dbfad0 Former-commit-id: b512030c96c9cda686b02df5b199cc00619f8436 Former-commit-id: 8dcdf3eb14f0f17c36f13cea12d6fb693370b5b0 Former-commit-id: be7b74360f0391ea64cd3fa5375a7671b0bc272b --- docs/zh/sys-ajax/README.md | 46 +++++++++++++++++++++++++++++++++----- 1 file changed, 41 insertions(+), 5 deletions(-) diff --git a/docs/zh/sys-ajax/README.md b/docs/zh/sys-ajax/README.md index 1a04317e..cda14051 100644 --- a/docs/zh/sys-ajax/README.md +++ b/docs/zh/sys-ajax/README.md @@ -36,7 +36,7 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ | axios 默认的使用方式在这里不做介绍，D2Admin 推荐在您的项目中使用下面的方式获取数据： -### 修改 baseURL +### 设置接口地址 默认的请求地址在 `d2-admin/.env` @@ -46,6 +46,8 @@ VUE_APP_API=/api/ 上述设置将在您访问 `/demo/a` 时实际去访问 `/api/demo/a` +### 区分不同环境设置接口地址 + 如果您希望不同的环境使用不同的请求地址，可以在 `d2-admin/.env.development` 中添加设置（示例）： ``` @@ -75,7 +77,19 @@ VUE_APP_API=/api-dev/ } ``` -当发生错误（注：这里指的错误不是 http 错误，而是和后台约定好的错误类型）时返回的数据示例： +在响应拦截器中处理完数据后将会返回： + +``` js +{ + list: [ + ... + ] +} +``` + +### 业务错误 + +当发生错误时返回的数据示例： ``` js { @@ -86,7 +100,7 @@ VUE_APP_API=/api-dev/ } ``` -如果针对某个错误（注：这里指的错误不是 http 错误，而是和后台约定好的错误类型）指定处理方法，应该在响应拦截器中加入对应的代码： +如果针对某个错误指定处理方法，应该在响应拦截器中加入对应的代码： ``` js service.interceptors.response.use( @@ -99,11 +113,33 @@ service.interceptors.response.use( ) ``` +### http 错误 + 如果需要针对某个 http 错误指定处理方法，应该在响应拦截器中第二个参数中添加对应的代码。 -::: tip +### 不返回 code + 在默认的设置中，如果您的接口没有返回 code 字段，将不会进行状态（非 http 状态，而是和后台约定好的状态类型）判断，直接返回 axios 请求返回的数据。 -::: + +例如接口返回如下数据： + +``` js +{ + list: [ + ... + ] +} +``` + +在响应拦截器中判断该接口没有返回 code 字段，将会直接将返回： + +``` js +{ + list: [ + ... + ] +} +``` ### 设计 API From c0d0527f302757caf62b98bc53be0819b0e93c53 Mon Sep 17 00:00:00 2001 From: liyang <1711467488@qq.com> Date: Mon, 27 Aug 2018 13:47:11 +0800 Subject: [PATCH 3/3] =?UTF-8?q?http=20=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: 2dd211d2d907008d183137f70427aa9e09911d3a [formerly 2dd211d2d907008d183137f70427aa9e09911d3a [formerly 2dd211d2d907008d183137f70427aa9e09911d3a [formerly 2dd211d2d907008d183137f70427aa9e09911d3a [formerly 3513cac69ee4f88639864b6948d2cc92fa905d12 [formerly 9d47a62c0bf21043a3a033ca2986dd7e0e498fde]]]]] Former-commit-id: 19f33fa3135a4dee8c26877c4c2f0806d3bb12f9 Former-commit-id: 8817aeb5ff39ee8e0f1c0c6bc4e99e15be719d14 Former-commit-id: 4a03ffc59182705c1e32cc39a3b58bd4f99cab3f [formerly c3df7a16c661750c70f9d958b77e41859741cef2] Former-commit-id: 507e7b5131fd2c7ebb015e2da0c0ed38699b7aaa Former-commit-id: a3d6f974fee73c06f92f4bc834f21f4b844cc370 Former-commit-id: 10afc53093bf44b398b5f8f7560b9b9cd231d05e Former-commit-id: 4707b2df138c81c69c09dae73ab0f16c429336de Former-commit-id: 8fdd5a268b3fb3150b8ac9b50e9c507c2bc2c07e --- docs/zh/sys-ajax/README.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/zh/sys-ajax/README.md b/docs/zh/sys-ajax/README.md index cda14051..6ea7e769 100644 --- a/docs/zh/sys-ajax/README.md +++ b/docs/zh/sys-ajax/README.md @@ -106,9 +106,6 @@ VUE_APP_API=/api-dev/ service.interceptors.response.use( response => { // 成功返回数据，在这里判断和后台约定的状态标识 - }, - error => { - // 发生 http 错误，在这里判断状态码 } ) ``` @@ -117,6 +114,15 @@ service.interceptors.response.use( 如果需要针对某个 http 错误指定处理方法，应该在响应拦截器中第二个参数中添加对应的代码。 +``` js +service.interceptors.response.use( + response => {}, + error => { + // 发生 http 错误，在这里判断状态码 + } +) +``` + ### 不返回 code 在默认的设置中，如果您的接口没有返回 code 字段，将不会进行状态（非 http 状态，而是和后台约定好的状态类型）判断，直接返回 axios 请求返回的数据。