代码修复

Author: dawpf

README.md

@@ -1,4 +1,4 @@
-# temp
+# demo
 
 ## Project setup
 ```

package-lock.json

@@ -1,14 +1,19 @@
 {
-  "name": "temp",
+  "name": "demo",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "dev": "vue-cli-service build --mode development"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.6.4",
+    "js-cookie": "^2.2.1",
+    "qs": "^6.9.3",
+    "serve": "^11.3.0",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
     "vuex": "^3.1.3"

package.json

@@ -1,13 +1,27 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Home</router-link> |
+      <router-link to="/">Home</router-link>|
       <router-link to="/about">About</router-link>
+      <div>计算属性:{{appData}}</div>
+      <div>调用方法:{{this.$store.state.app_data}}</div>
     </div>
     <router-view />
   </div>
 </template>
 
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  computed: {
+    ...mapState({
+      appData: state => state.app_data
+    })
+  }
+}
+</script>
+
 <style lang="less">
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

src/App.vue

@@ -0,0 +1,6 @@
+import $HTTP from "@/utils/HTTP.js"
+import Service from "@/utils/service.js"
+
+export function getMockData_home() {
+  return $HTTP.get(Service.mock)
+}

src/api/home.js

@@ -5,6 +5,8 @@ import store from "./store";
 
 Vue.config.productionTip = false;
 
+console.log('当前环境数据地址：', process.env);
+
 new Vue({
   router,
   store,

src/main.js

@@ -4,8 +4,18 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
-  mutations: {},
-  actions: {},
+  state: {
+    app_data: 100
+  },
+  mutations: {
+    add_app_data(state, num) {
+      state.app_data += num
+    }
+  },
+  actions: {
+    add_app_data_action(content, num) {
+      content.commit('add_app_data', num)
+    }
+  },
   modules: {}
 });

src/store/index.js

@@ -0,0 +1,96 @@
+import axios from 'axios'
+import { getToken } from '@/utils/auth'
+
+// create an axios instance
+const request = axios.create({
+  // baseURL: process.env.VUE_APP_URL,
+  baseURL: 'https://easy-mock.bookset.io/mock/5e90379d00bfc566e5bb1acb/example',
+  // withCredentials: true,  // 跨域请求时发送cookie
+  timeout: 60000
+})
+
+const TOKEN = getToken()  // 获取token
+
+// 请求拦截器
+request.interceptors.request.use(
+  config => {
+    if (TOKEN) {
+      // let each request carry token
+      // ['X-Token'] is a custom headers key
+      // please modify it according to the actual situation
+      config.headers['Authorization'] = TOKEN
+    }
+
+    // 扩展管理--expands:[]
+    if (config.params && config.params.expandList) {
+      const expandList = config.params.expandList
+      const expands = {}
+      if (expandList && expandList.length) {
+        expandList.map((item, index) => {
+          expands[`expands[${index}]`] = item
+        })
+        config.params = {
+          ...config.params,
+          ...expands
+        }
+      }
+      delete config.params.expandList
+    }
+
+    return config
+  },
+  error => {
+    // do something with request error
+    console.log(error)
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+request.interceptors.response.use(
+  response => {
+    // const res = response.data
+
+    // // if the custom code is not 20000, it is judged as an error.
+    // if (res.code !== 20000) {
+    //   Message({
+    //     message: res.message || 'Error',
+    //     type: 'error',
+    //     duration: 5 * 1000
+    //   })
+
+    //   // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
+    //   if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
+    //     // to re-login
+    //     MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+    //       confirmButtonText: 'Re-Login',
+    //       cancelButtonText: 'Cancel',
+    //       type: 'warning'
+    //     }).then(() => {
+    //       store.dispatch('user/resetToken').then(() => {
+    //         location.reload()
+    //       })
+    //     })
+    //   }
+    //   return Promise.reject(new Error(res.message || 'Error'))
+    // } else {
+    //   return res
+    // }
+    return response.data
+  },
+  error => {
+    const data = error.response.data
+    const status = error.response.status
+
+    // 对不同状态码进行管理
+    if (status === 401) {
+      console.log('登录已过期');
+    } else if (status === 500) {
+      console.log('服务器错误');
+    }
+    return Promise.reject(data.error)
+  }
+)
+
+export default request
+

src/utils/HTTP.js

@@ -0,0 +1,16 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'beiwo_pc_token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}
+

src/utils/auth.js

@@ -0,0 +1,3 @@
+export default {
+  mock: '/mock',
+}