封装axios

assets/a.scss

@@ -21,7 +21,7 @@ body {
         margin          : 0;
         background-color: #fff;
         padding-top     : 15px;
-        z-index: 10000;
+        z-index         : 10000;
 
         ul {
             width : 100%;
@@ -62,9 +62,7 @@ body {
 
     }
 
-    div {
+
-        height: auto;
-    }
 
     .search {
         width  : 100%;
@@ -111,11 +109,11 @@ body {
             }
 
             .p1 {
-                margin     : 20px*$a 0;
+                margin               : 20px*$a 0;
-                font-size  : 26px*$a;
+                font-size            : 26px*$a;
-                font-family: PingFang-SC-Medium;
+                font-family          : PingFang-SC-Medium;
-                font-weight: 500;
+                font-weight          : 500;
-                color      : rgba(122, 122, 122, 1);
+                color                : rgba(122, 122, 122, 1);
             }
         }
 

layouts/default.vue

@@ -7,16 +7,16 @@
 <script>
 import Logo from '~/components/table.vue'
 export default {
-   components: {
+  components: {
     Logo
   },
-   data () {
+  data() {
     return {
-      author: "微信公众号 jinkey-love"
+      author: '微信公众号 jinkey-love'
     }
   },
   methods: {
-    addTodo (e) {
+    addTodo(e) {
       this.$store.commit('todos/add', e.target.value)
       e.target.value = ''
     }
@@ -25,8 +25,9 @@ export default {
 </script>
 
 <style>
-html{
+html {
   font-size: 10px;
   height: 100%;
 }
+
 </style>

pages/index.vue

@@ -94,4 +94,16 @@ export default {
 .bid {
   height: 100%;
 }
+body div {
+  height: 100%;
+}
+.p1 {
+  display: -webkit-box;
+  /* -webkit-box-orient: vertical; */
+  /*! autoprefixer: off */
+  -webkit-box-orient: vertical;
+  /* autoprefixer: on */
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
 </style>

plugins/axios.js

@@ -0,0 +1,83 @@
+import axios from 'axios'
+import qs from 'qs'
+// 在config.js文件中统一存放一些公共常量，方便之后维护
+import { baseURL } from './config.js'
+
+// 添加请求拦截器，在发送请求之前做些什么(**具体查看axios文档**)--------------------------------------------
+axios.interceptors.request.use(function (config) {
+  // 显示loading
+  return config
+}, function (error) {
+  // 请求错误时弹框提示，或做些其他事
+  return Promise.reject(error)
+})
+
+// 添加响应拦截器(**具体查看axios文档**)----------------------------------------------------------------
+axios.interceptors.response.use(function (response) {
+  // 对响应数据做点什么，允许在数据返回客户端前，修改响应的数据
+  // 如果只需要返回体中数据，则如下，如果需要全部，则 return response 即可
+  return response.data
+}, function (error) {
+  // 对响应错误做点什么
+  return Promise.reject(error)
+})
+
+// 封装数据返回失败提示函数---------------------------------------------------------------------------
+function errorState (response) {
+  // 隐藏loading
+  // 如果http状态码正常，则直接返回数据
+  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
+    // 如果不需要除了data之外的数据，可以直接 return response.data
+    return response
+  } else {
+    alert('数据获取错误')
+  }
+}
+
+// 封装数据返回成功提示函数---------------------------------------------------------------------------
+function successState (res) {
+  // 隐藏loading
+  // 统一判断后端返回的错误码(错误码与后台协商而定)
+  if (res.data.code === '000000') {
+    alert('success')
+    return res
+  }
+}
+
+// 封装axios--------------------------------------------------------------------------------------
+function apiAxios (method, url, params) {
+  let httpDefault = {
+    method: method,
+    baseURL: baseURL,
+    url: url,
+    // `params` 是即将与请求一起发送的 URL 参数
+    // `data` 是作为请求主体被发送的数据
+    params: method === 'GET' || method === 'DELETE' ? params : null,
+    data: method === 'POST' || method === 'PUT' ? qs.stringify(params) : null,
+    timeout: 10000
+  }
+
+  // 注意**Promise**使用(Promise首字母大写)
+  return new Promise((resolve, reject) => {
+    axios(httpDefault)
+      // 此处的.then属于axios
+      .then((res) => {
+        successState(res)
+        resolve(res)
+      }).catch((response) => {
+        errorState(response)
+        reject(response)
+      })
+  })
+}
+
+// 输出函数getAxios、postAxios、putAxios、delectAxios，供其他文件调用-----------------------------
+// Vue.js的插件应当有一个公开方法 install。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
+export default {
+  install: function (Vue) {
+    Vue.prototype.getAxios = (url, params) => apiAxios('GET', url, params)
+    Vue.prototype.postAxios = (url, params) => apiAxios('POST', url, params)
+    Vue.prototype.putAxios = (url, params) => apiAxios('PUT', url, params)
+    Vue.prototype.delectAxios = (url, params) => apiAxios('DELECT', url, params)
+  }
+}

plugins/config.js

@@ -0,0 +1 @@
+export const baseURL = 'http://XXXXXXXX.com/'