axios封装和config设置

QMPlusVuePage/src/api/user.js

@@ -0,0 +1,13 @@
+import service from '@/utils/request'
+
+// @Summary 用户登录
+// @Produce  application/json
+// @Param data body {userName:"string",passWord:"string"}
+// @Router /base/login [post]
+export const login = (data) => {
+    service({
+        url: "/base/login",
+        method: 'post',
+        data: data
+    })
+}

QMPlusVuePage/src/store/index.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import VuexPersistence from 'vuex-persist'
 
-import { User } from "@/store/module/user"
+import { user } from "@/store/module/user"
 Vue.use(Vuex)
 
 
@@ -12,7 +12,7 @@ const vuexLocal = new VuexPersistence({
 })
 export const store = new Vuex.Store({
     modules: {
-        User
+        user
     },
     plugins: [vuexLocal.plugin]
 })

QMPlusVuePage/src/store/module/user.js

@@ -18,9 +18,9 @@ export const user = {
         }
     },
     actions: {
-        AsyncSetUserInfo({ commit }, loginInfo) {
+        // AsyncSetUserInfo({ commit }, loginInfo) {
 
-        }
+        // }
     },
     getters: {
         userName(state) {

QMPlusVuePage/src/utils/request.js

@@ -0,0 +1,56 @@
+import axios from 'axios'; // 引入axios
+import { Message } from 'element-ui';
+import { store } from '@/store/index'
+
+const service = axios.create({
+    baseURL: process.env.VUE_APP_BASE_API,
+    timeout: 5000
+})
+
+//http request 拦截器
+service.interceptors.request.use(
+    config => {
+        const token = store.getters['user/token']
+        config.data = JSON.stringify(config.data);
+        config.headers = {
+            'Content-Type': 'application/json',
+            'x-token': token
+        }
+        return config;
+    },
+    error => {
+        Message({
+            showClose: true,
+            message: error,
+            type: 'error'
+        })
+        return Promise.reject(error);
+    }
+);
+
+
+//http response 拦截器
+service.interceptors.response.use(
+    response => {
+        if (response.data.success) {
+            return response.data
+        } else {
+            Message({
+                showClose: true,
+                message: response.data.msg,
+                type: 'error'
+            })
+            return Promise.reject(response.data.msg)
+        }
+    },
+    error => {
+        Message({
+            showClose: true,
+            message: error,
+            type: 'error'
+        })
+        return Promise.reject(error)
+    }
+)
+
+export default service

QMPlusVuePage/src/view/login/login.vue

@@ -2,7 +2,7 @@
         <el-container class="login-box">
             <el-header>登录</el-header>
                 <el-main>输入框在这里
-                    <el-button>
+                    <el-button @click="login">
                         登录
                     </el-button>
                 </el-main>
@@ -11,15 +11,19 @@
 
 <script>
 import {mapState, mapGetters, mapActions , mapMutations} from 'vuex'
+import {login} from '@/api/user'
 export default {
     name:"Login",
     computed:{
-    ...mapGetters("User",["userName"]),
-    ...mapState("User",["userName"])
+    ...mapGetters("user",["userInfo"]),
+    ...mapState("user",["token"])
     },
     methods: {
-        ...mapActions("User",["AsyncSetUserName"]),
-        ...mapMutations("User",["setUserName"])
+        ...mapActions("user",["AsyncSetUserInfo"]),
+        ...mapMutations("user",["setUserInfo"]),
+        login(){
+            login({userName:"string1",passWord:"string"})
+        }
     },
 }
 </script>