axios封装

axios封装


Former-commit-id: 4dc0646a8509fe9cb6c5218e9dfc864b0af59143 [formerly eaee9b788f359a10ad0b8b199dcdd8c82765855f] [formerly 4dc0646a8509fe9cb6c5218e9dfc864b0af59143 [formerly eaee9b788f359a10ad0b8b199dcdd8c82765855f] [formerly 4dc0646a8509fe9cb6c5218e9dfc864b0af59143 [formerly eaee9b788f359a10ad0b8b199dcdd8c82765855f] [formerly eaee9b788f359a10ad0b8b199dcdd8c82765855f [formerly 0dad01580037e9ada6f7f9201eab7e28bafbadd4 [formerly 97a660059b807afdf8c0c518d4f40be4ce7eceec]]]]]
Former-commit-id: 95e753d1626ce41c1465bac635687ce5989877a5
Former-commit-id: 2e567e9e2bb7d07e9cf52dbfe29b140c24c76b48
Former-commit-id: 37e5cef6e554af37fc7d55785552160ff086c03d [formerly 14edcd31bc67642337f8eddf2ec7cbdec23ecc2c]
Former-commit-id: 08a71cba6653878d9accae5a7ecfcf1122d3515a
Former-commit-id: a1731726720512ae8a5a7fd5973f4c90a62ac448
Former-commit-id: 3838dfd576136f0ac217d9a97d631f9a88191d31
Former-commit-id: fa2416a4c270dce89a33e0486569374c5c7b6a63
Former-commit-id: b03e226c26ea5495e1d7d6a2206b89c8f4e17815

.env

@@ -1,4 +1,5 @@
 # 所有环境
 
 # 页面 title 前缀
-VUE_APP_TITLE=D2Admin
+VUE_APP_TITLE=D2Admin
+VUE_APP_API=/api/

src/api/components/markdown/index.js

@@ -0,0 +1,16 @@
+import request from '@/plugin/axios'
+
+export function ComponentsMarkdownBase (url) {
+  return request({
+    baseURL: process.env.BASE_URL,
+    url,
+    method: 'get'
+  })
+}
+
+export function ComponentsMarkdownApi (url) {
+  return request({
+    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/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.REMOVED.git-id

@@ -1 +1 @@
-87fff7214e7b64123842f1f52b649a8af614eb46
+bfee5e91a3b150e04d9f24695061f6f3e7c59342

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/sys/login/index.js

@@ -21,7 +21,7 @@ const userDB = [
   }
 ]
 
-Mock.mock('/login', 'post', ({url, type, body}) => {
+Mock.mock('/api/login', 'post', ({url, type, body}) => {
   const bodyObj = JSON.parse(body)
   const user = userDB.find(e => e.username === bodyObj.username && e.password === bodyObj.password)
   if (user) {

src/pages/demo/business/table/1/index.vue

@@ -17,6 +17,7 @@
 </template>
 
 <script>
+import { BusinessTable1List } from '@/api/demo/business/table/1'
 export default {
   // name 值和本页的 $route.name 一致才可以缓存页面
   name: 'demo-business-table-1',
@@ -53,7 +54,7 @@ export default {
       this.$notify({
         title: '开始请求模拟表格数据'
       })
-      this.$axios.post('/api/demo/business/table/1', {
+      BusinessTable1List({
         ...form,
         page: this.page
       })

src/pages/demo/components/markdown/url.vue

@@ -1,6 +1,6 @@
 <template>
   <d2-container>
     <template slot="header">异步加载文件</template>
-    <d2-markdown :url="`${$baseUrl}markdown/demo.md`"/>
+    <d2-markdown url="markdown/demo.md"/>
   </d2-container>
 </template>

src/pages/demo/plugins/mock/ajax.vue

@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import { PluginMocksAjax } from '@/api/demo/plugins/mocks/ajax'
 export default {
   data () {
     return {
@@ -37,7 +38,7 @@ export default {
   },
   methods: {
     ajax () {
-      this.$axios.get('/api/demo/plugins/mock/ajax')
+      PluginMocksAjax
         .then(res => {
           this.table.columns = Object.keys(res.list[0]).map(e => ({
             label: e,

src/plugin/axios/index.js

@@ -1,13 +1,45 @@
 import axios from 'axios'
+import { Message } from 'element-ui'
+import util from '@/libs/util'
 
-axios.interceptors.response.use(res => {
-  return res.data
-}, err => {
-  return Promise.reject(err)
+// create an axios instance
+const service = axios.create({
+  baseURL: process.env.VUE_APP_API,
+  timeout: 5000 // 请求超时时间
 })
 
-export default {
-  install (Vue, options) {
-    Vue.prototype.$axios = axios
+// request interceptor
+service.interceptors.request.use(
+  config => {
+    // Do something before request is sent
+    const token = util.cookies.get('token')
+    if (token && token !== 'undefined') {
+      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
+      config.headers['X-Token'] = token
+    }
+    return config
+  },
+  error => {
+    // Do something with request error
+    console.log(error) // for debug
+    Promise.reject(error)
   }
-}
+)
+
+// respone interceptor
+service.interceptors.response.use(
+  response => {
+    return response.data
+  },
+  error => {
+    console.log('err' + error) // for debug
+    Message({
+      message: error.message,
+      type: 'error',
+      duration: 5 * 1000
+    })
+    return Promise.reject(error)
+  }
+)
+
+export default service

src/plugin/d2admin/index.js

@@ -8,7 +8,6 @@ import '@/components'
 // svg 图标
 import '@/assets/svg-icons'
 // 功能插件
-import pluginAxios from '@/plugin/axios'
 import pluginError from '@/plugin/error'
 import pluginExport from '@/plugin/export'
 import pluginImport from '@/plugin/import'
@@ -20,7 +19,6 @@ export default {
     // Element
     Vue.use(ElementUI)
     // 插件
-    Vue.use(pluginAxios)
     Vue.use(pluginError)
     Vue.use(pluginExport)
     Vue.use(pluginImport)

src/store/modules/d2admin/modules/account.js

@@ -1,4 +1,5 @@
 import util from '@/libs/util.js'
+import { AccountLogin } from '@/api/sys/login'
 
 export default {
   namespaced: true,
@@ -12,13 +13,9 @@ export default {
      */
     login ({ commit }, { vm, username, password }) {
       // 开始请求登录接口
-      vm.$axios({
-        method: 'post',
-        url: '/login',
-        data: {
-          username,
-          password
-        }
+      AccountLogin({
+        username,
+        password
       })
         .then(res => {
           // 设置 cookie 一定要存 uuid 和 token 两个 cookie