diff --git a/.env b/.env index c6889c1a7..701568fd0 100644 --- a/.env +++ b/.env @@ -1,4 +1,7 @@ # 所有环境 # 页面 title 前缀 -VUE_APP_TITLE=D2Admin \ No newline at end of file +VUE_APP_TITLE=D2Admin + +# 网络请求公用地址 +VUE_APP_API=/api/ diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 3a087c608..983e8b5d5 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/collaborator/README.md b/docs/zh/collaborator/README.md index ea56aef74..0f8a0d1fd 100644 --- a/docs/zh/collaborator/README.md +++ b/docs/zh/collaborator/README.md @@ -10,4 +10,5 @@ sidebar: auto | | sunhaoxiang | [https://github.com/sunhaoxiang](https://github.com/sunhaoxiang) | | | namklaw | [https://github.com/namklaw](https://github.com/namklaw) | | | mokeyjay | [https://github.com/mokeyjay](https://github.com/mokeyjay) | -| | Aysnine | [https://github.com/Aysnine](https://github.com/Aysnine) | \ No newline at end of file +| | Aysnine | [https://github.com/Aysnine](https://github.com/Aysnine) | +| | rongxingsun | [https://github.com/rongxingsun](https://github.com/rongxingsun) | \ No newline at end of file diff --git a/docs/zh/sys-ajax/README.md b/docs/zh/sys-ajax/README.md new file mode 100644 index 000000000..6ea7e7698 --- /dev/null +++ b/docs/zh/sys-ajax/README.md @@ -0,0 +1,195 @@ +--- +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 推荐在您的项目中使用下面的方式获取数据: + +### 设置接口地址 + +默认的请求地址在 `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: [ + ... + ] + } +} +``` + +在响应拦截器中处理完数据后将会返回: + +``` js +{ + list: [ + ... + ] +} +``` + +### 业务错误 + +当发生错误时返回的数据示例: + +``` js +{ + // 和后台约定的状态码 + code: 'unlogin', + // 后台返回请求状态信息 + msg: '用户没有登录' +} +``` + +如果针对某个错误指定处理方法,应该在响应拦截器中加入对应的代码: + +``` js +service.interceptors.response.use( + response => { + // 成功返回数据,在这里判断和后台约定的状态标识 + } +) +``` + +### http 错误 + +如果需要针对某个 http 错误指定处理方法,应该在响应拦截器中第二个参数中添加对应的代码。 + +``` js +service.interceptors.response.use( + response => {}, + error => { + // 发生 http 错误,在这里判断状态码 + } +) +``` + +### 不返回 code + +在默认的设置中,如果您的接口没有返回 code 字段,将不会进行状态(非 http 状态,而是和后台约定好的状态类型)判断,直接返回 axios 请求返回的数据。 + +例如接口返回如下数据: + +``` js +{ + list: [ + ... + ] +} +``` + +在响应拦截器中判断该接口没有返回 code 字段,将会直接将返回: + +``` js +{ + list: [ + ... + ] +} +``` + +### 设计 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 diff --git a/package-lock.json.REMOVED.git-id b/package-lock.json.REMOVED.git-id index 8e30f099c..e44ada5f1 100644 --- a/package-lock.json.REMOVED.git-id +++ b/package-lock.json.REMOVED.git-id @@ -1 +1 @@ -208665c165b32daf4021f61c3ad430a972cb9735 \ No newline at end of file +937f5369a5d9b43eeb3c7fa2991f76724481721c \ No newline at end of file diff --git a/src/api/components/markdown/index.js b/src/api/components/markdown/index.js new file mode 100644 index 000000000..8769a0b04 --- /dev/null +++ b/src/api/components/markdown/index.js @@ -0,0 +1,9 @@ +import request from '@/plugin/axios' + +export function ComponentsMarkdownBase (url) { + return request({ + baseURL: process.env.BASE_URL, + url, + method: 'get' + }) +} diff --git a/src/api/demo/business/table/1/index.js b/src/api/demo/business/table/1/index.js new file mode 100644 index 000000000..4e09ecb97 --- /dev/null +++ b/src/api/demo/business/table/1/index.js @@ -0,0 +1,9 @@ +import request from '@/plugin/axios' + +export function BusinessTable1List (data) { + return request({ + url: '/demo/business/table/1', + method: 'post', + data + }) +} diff --git a/src/api/demo/plugins/mocks/ajax/index.js b/src/api/demo/plugins/mocks/ajax/index.js new file mode 100644 index 000000000..a7ec00cc2 --- /dev/null +++ b/src/api/demo/plugins/mocks/ajax/index.js @@ -0,0 +1,8 @@ +import request from '@/plugin/axios' + +export function PluginMocksAjax () { + return request({ + url: '/demo/plugins/mock/ajax', + method: 'get' + }) +} diff --git a/src/api/sys/http/index.js b/src/api/sys/http/index.js new file mode 100644 index 000000000..c2f7eeb47 --- /dev/null +++ b/src/api/sys/http/index.js @@ -0,0 +1,17 @@ +import request from '@/plugin/axios' + +export function httpGet (url, params = {}) { + return request({ + url, + method: 'get', + params + }) +} + +export function httpPost (url, data = {}) { + return request({ + url, + method: 'post', + data + }) +} diff --git a/src/api/sys/login/index.js b/src/api/sys/login/index.js new file mode 100644 index 000000000..882292e3c --- /dev/null +++ b/src/api/sys/login/index.js @@ -0,0 +1,9 @@ +import request from '@/plugin/axios' + +export function AccountLogin (data) { + return request({ + url: '/login', + method: 'post', + data + }) +} diff --git a/src/assets/style/theme/theme.scss.REMOVED.git-id b/src/assets/style/theme/theme.scss.REMOVED.git-id index 8b5ae2102..9ba9d43fd 100644 --- a/src/assets/style/theme/theme.scss.REMOVED.git-id +++ b/src/assets/style/theme/theme.scss.REMOVED.git-id @@ -1 +1 @@ -87fff7214e7b64123842f1f52b649a8af614eb46 \ No newline at end of file +bfee5e91a3b150e04d9f24695061f6f3e7c59342 \ No newline at end of file diff --git a/src/components/d2-markdown/index.vue b/src/components/d2-markdown/index.vue index f6d733e2e..aaf60f504 100644 --- a/src/components/d2-markdown/index.vue +++ b/src/components/d2-markdown/index.vue @@ -12,6 +12,7 @@ import marked from 'marked' import highlight from 'highlight.js' import bandupan from './plugin/baidupan' import 'github-markdown-css' +import { ComponentsMarkdownBase } from '@/api/components/markdown' export default { name: 'd2-markdown', props: { @@ -63,7 +64,7 @@ export default { }, // 从 url 加载原始数据 async getReadme (url) { - const data = await this.$axios.get(url) + const data = await ComponentsMarkdownBase(url) return this.marked(data) }, marked (data) { diff --git a/src/layout/header-aside/components/menu-header/index.vue b/src/layout/header-aside/components/menu-header/index.vue index acea80cfc..940aaf63f 100644 --- a/src/layout/header-aside/components/menu-header/index.vue +++ b/src/layout/header-aside/components/menu-header/index.vue @@ -1,5 +1,5 @@