Merge branch 'release/v1.2.1'

Former-commit-id: e44b4ecfb8419393eb8bb5f38cef046a68f5c7db [formerly ff344c2]
Former-commit-id: 2876fa4

.env

@@ -1,4 +1,7 @@
 # 所有环境
 
 # 页面 title 前缀
-VUE_APP_TITLE=D2Admin
+VUE_APP_TITLE=D2Admin
+
+# 网络请求公用地址
+VUE_APP_API=/api/

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/' },

docs/zh/collaborator/README.md

@@ -10,4 +10,5 @@ sidebar: auto
 | <img src="https://avatars1.githubusercontent.com/u/24645480?s=460&v=4" style="width: 30px;"/> | sunhaoxiang | [https://github.com/sunhaoxiang](https://github.com/sunhaoxiang) |
 | <img src="https://avatars2.githubusercontent.com/u/11420885?s=460&v=4" style="width: 30px;"/> | namklaw | [https://github.com/namklaw](https://github.com/namklaw) |
 | <img src="https://avatars2.githubusercontent.com/u/6757507?s=460&v=4" style="width: 30px;"/> | mokeyjay | [https://github.com/mokeyjay](https://github.com/mokeyjay) |
-| <img src="https://avatars2.githubusercontent.com/u/10137653?s=460&v=4" style="width: 30px;"/> | Aysnine | [https://github.com/Aysnine](https://github.com/Aysnine) |
+| <img src="https://avatars2.githubusercontent.com/u/10137653?s=460&v=4" style="width: 30px;"/> | Aysnine | [https://github.com/Aysnine](https://github.com/Aysnine) |
+| <img src="https://avatars2.githubusercontent.com/u/12825624?s=460&v=4" style="width: 30px;"/> | rongxingsun | [https://github.com/rongxingsun](https://github.com/rongxingsun) |

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
+<script>
+import { BusinessTable1List } from '@/api/demo/business/table/1'
+export default {
+  methods: {
+    handleSubmit (form) {
+      BusinessTable1List({
+        name: ''
+      })
+        .then(res => {
+          // 返回数据
+        })
+        .catch(err => {
+          // 异常情况
+        })
+    }
+  }
+}
+</script>
+```
+
+而不是在页面中直接调用 axios。
+
+::: tip
+虽然没有强制规定，请注意您的 API 文件夹结构规律性
+:::

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'
+  })
+}

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
+  })
+}

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'
+  })
+}

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
+  })
+}

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
+  })
+}

src/assets/style/theme/theme.scss

@@ -95,6 +95,13 @@
         }
       }
       .el-submenu {
+        &.is-active {
+          .el-submenu__title {
+            color: $theme-header-item-color-active;
+            background: $theme-header-item-background-color-active;
+            i.fa { color: inherit; }
+          }
+        }
         .el-submenu__title {
           transition: border-top-color 0s;
           color: $theme-header-item-color;

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) {

src/layout/header-aside/components/menu-header/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-menu mode="horizontal" @select="handleMenuSelect">
+  <el-menu mode="horizontal" :default-active="active" @select="handleMenuSelect">
     <template v-for="(menu, menuIndex) in header">
       <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
       <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
@@ -25,6 +25,19 @@ export default {
     ...mapState('d2admin/menu', [
       'header'
     ])
+  },
+  data () {
+    return {
+      active: ''
+    }
+  },
+  watch: {
+    '$route.matched': {
+      handler (val) {
+        this.active = val[val.length - 1].path
+      },
+      immediate: true
+    }
   }
 }
 </script>

src/mock/api/demo/business/table/1/index.js

@@ -7,17 +7,23 @@ Mock.mock('/api/demo/business/table/1', ({ body }) => {
   page.total = 1000
   return Mock.mock(
     {
-      page,
-      'list|20': [{
-        'key': '@guid',
-        'value|1': [10, 100, 200, 500],
-        'type': '@boolean',
-        'admin': '@cname',
-        'adminNote': '@cparagraph(0.5)',
-        'dateTimeCreat': '@datetime',
-        'used': '@boolean',
-        'dateTimeUse': '@datetime'
-      }]
+      code: 0,
+      msg: '获取数据成功',
+      data: {
+        page,
+        'list|20': [
+          {
+            'key': '@guid',
+            'value|1': [10, 100, 200, 500],
+            'type': '@boolean',
+            'admin': '@cname',
+            'adminNote': '@cparagraph(0.5)',
+            'dateTimeCreat': '@datetime',
+            'used': '@boolean',
+            'dateTimeUse': '@datetime'
+          }
+        ]
+      }
     }
   )
 })