ytj

package.json

@@ -14,6 +14,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "vant": "^1.1.15",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"

src/App.vue

@@ -11,7 +11,7 @@ export default {
 </script>
 
 <style>
-@import 'style/main.sass';
+@import 'style/main.scss';
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

src/main.js

@@ -5,10 +5,13 @@ import App from './App'
 import router from './router'
 import Vant from 'vant'
 import 'vant/lib/vant-css/index.css'
+import Ajax from './util/ajax'
+import api from './util/api'
 
 Vue.use(Vant)
 Vue.config.productionTip = false
-
+Vue.prototype.$api = api
+Vue.prototype.$ajax = Ajax
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/page/test.vue → src/page/test/test.vue

@@ -8,12 +8,26 @@
 </template>
 
 <script>
-// import { Button } from 'vant'
 export default {
   data () {
     return {
       a: '1'
     }
+  },
+  mounted () {
+    console.log(this)
+    this.$ajax(this.$api.test.area.url, {
+      method: this.$api.test.area.method,
+      data: {
+        caseid: 1,
+        id: 2
+      }
+    })
+      .then(res => {
+        console.log(res)
+      }).catch(msg => {
+        return false
+      })
   }
 }
 </script>

src/router/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 const test = () =>
   import(/* webpackChunkName: "test" */
-    '../page/test')
+    '../page/test/test')
 Vue.use(Router)
 
 export default new Router({

src/style/main.sass → src/style/main.scss

@@ -31,7 +31,6 @@ html,body {
 * {
     margin: 0;
     padding: 0;
-    color: #000;
     font-family: "微软雅黑";
     -webkit-tap-highlight-color: rgba(255,0,0,0);
     -webkit-font-smoothing: antialiased;

src/util/ajax.js

@@ -0,0 +1,60 @@
+import axios from 'axios'
+import { Toast } from 'vant'
+import qs from 'qs'
+
+const Axios = axios.create({
+  timeout: 60000,
+  responseType: 'json',
+  withCredentials: true,
+  headers: {}
+})
+
+Axios.interceptors.request.use((config) => {
+  Toast.loading({
+    duration: 0, // 持续展示 toast
+    forbidClick: true, // 禁用背景点击
+    loadingType: 'spinner',
+    color: 'white',
+    message: '请求中'
+  })
+  // 处理请求data,若为get请求，拼到url后面，若为post请求，直接添加到body中
+  let data = qs.stringify(config.data)
+  if (config.method === 'get' || config.method === 'GET') {
+    // 判断是通过斜杠传参还是通过query传参
+    if (config.url.indexOf(':') > -1) {
+      if (typeof config.data === 'object') {
+        config.url = Object.keys(config.data).reduce((url, k) => { // 此方法对每个元素进行处理
+          const re = new RegExp(`:${k}(?!w)`, 'i')
+          return url.replace(re, config.data[k])
+        }, config.url)
+      } else {
+        config.url = config.url.slice(0, config.url.indexOf(':')) + data
+      }
+    } else {
+      config.url += '?' + data
+    }
+  }
+  return config
+}, (error) => {
+  console.log(error)
+})
+
+Axios.interceptors.response.use((res) => {
+  setTimeout(() => {
+    Toast.clear()
+  }, 500)
+  if (res.status === 200) {
+    return res.data
+  } else {
+    Toast.fail('请求失败，状态码为' + res.status)
+    return res.data
+  }
+}, (error) => {
+  Toast.fail('请求失败，服务器异常')
+  setTimeout(() => {
+    Toast.clear()
+  }, 500)
+  console.log(error)
+})
+
+export default Axios

src/util/api.js

@@ -0,0 +1,11 @@
+const baseUrl = process.env.NODE_ENV === 'development' ? '/api' : 'http://192.168.0.62:8080/api'
+// const baseUrl = '/check-api'
+const $api = {
+  test: { // 测试接口
+    area: {
+      method: 'post',
+      url: `${baseUrl}/machine/area`
+    }
+  }
+}
+export default $api