init

.eslintrc.js

@@ -12,6 +12,8 @@ module.exports = {
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-unused-vars': "off",
+    'no-undef': 'off',
   }
 }

package-lock.json

@@ -7145,6 +7145,11 @@
       "integrity": "sha1-9OaGxd4eofhn28rT1G2WlCjfmMQ=",
       "dev": true
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz",
+      "integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npm.taobao.org/js-message/download/js-message-1.0.7.tgz?cache=0&sync_timestamp=1605129209185&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjs-message%2Fdownload%2Fjs-message-1.0.7.tgz",
@@ -8254,8 +8259,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",

package.json

@@ -12,6 +12,8 @@
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.1",
+    "js-cookie": "^2.2.1",
+    "object-assign": "^4.1.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

src/components/HelloWorld.vue

@@ -36,7 +36,7 @@
 export default {
   name: 'HelloWorld',
   props: {
-    msg: String
+    msg: Number
   }
 }
 </script>

src/config/index.js

+const IS_MOCK = window.location.href.indexOf('localhost') !== -1 || window.location.href.indexOf('me.mock') !== -1;
+export default {
+  uploadUrl: IS_MOCK ? 'http://mockjs.docway.net/mock/1aPBaEsG0xN/api/upload' : 'http://lishui.zhuzhux.com/api/upload',
+  exportUrl: IS_MOCK ? 'http://lishui.zhuzhux.com' : 'http://lishui.zhuzhux.com',
+  httpUrl: IS_MOCK ? '' : 'http://lishui.zhuzhux.com',
+};

src/main.js

 import Vue from 'vue'
+import http from "./services";
 import App from './App.vue'
 import router from './router'
 import store from './store'
 import './plugins/element.js'
 
+Vue.prototype.$http = http;
 Vue.config.productionTip = false
 
 new Vue({

src/services/api.js

+import config from '@/config/';
+
+const { httpUrl } = config;
+const globalServices = {
+  login: {
+    method: 'post',
+    url: `${httpUrl}/admin/login`,
+    mockMethod: 'post',
+    mockUrl: 'http://mockjs.docway.net/mock/1aPBaEsG0xN/admin/login',
+  },
+  fetchUserInfo: {
+    method: 'get',
+    url: `${httpUrl}/admin/queryResource`,
+    mockMethod: 'get',
+    mockUrl: 'http://mockjs.docway.net/mock/1aPBaEsG0xN/admin/queryResource',
+  },
+  fetchPermission: {
+    method: 'get',
+    url: `${httpUrl}/role/getAllPermission`,
+    mockMethod: 'get',
+    mockUrl: 'http://mockjs.docway.net/mock/1aPBaEsG0xN/role/getAllPermission',
+  },
+  fetchPermissionByRoleId: {
+    method: 'get',
+    url: `${httpUrl}/role/queryPermissionByRoleId`,
+    mockMethod: 'get',
+    mockUrl: 'http://mockjs.docway.net/mock/1aPBaEsG0xN/role/queryPermissionByRoleId',
+  },
+};
+
+export default globalServices;

src/services/index.js

+import assign from 'object-assign';
+import axios from './request';
+import globalServices from './api';
+
+const api = {};
+const IS_MOCK = window.location.href.indexOf('localhost') !== -1 || window.location.href.indexOf('me.mock') !== -1;
+const urlsAllThere = {};
+api.getUrl = (key) => urlsAllThere[key].url;
+export const generator = (urls) => {
+  const mergedUrls = {
+    ...globalServices,
+    ...urls,
+  };
+  const generalUrl = (key) => {
+    const {
+      method, url, mockUrl, isJSon,
+    } = mergedUrls[key];
+
+    if (IS_MOCK) {
+      return {
+        method: method || 'get',
+        url: mockUrl || url,
+        isJSon,
+      };
+    }
+    return {
+      method,
+      url,
+      isJSon,
+    };
+  };
+
+  Object.keys(mergedUrls).forEach((item) => {
+    urlsAllThere[item] = mergedUrls[item];
+    const localItem = generalUrl(item);
+    const { method } = localItem;
+    switch (String(method).toUpperCase()) {
+      case 'POST':
+      case 'PUT':
+      case 'PATCH':
+        api[item] = (params) => axios(assign({}, localItem, {
+          data: params,
+        }));
+        break;
+      default:
+        api[item] = (params) => axios(assign({}, localItem, {
+          params,
+        }));
+    }
+  });
+
+  return api;
+};
+
+generator(globalServices);
+
+export default api;

src/services/request.js

+import axios from 'axios';
+import assign from 'object-assign';
+import cookies from 'js-cookie';
+import qs from 'qs';
+
+const request = axios.create({
+  withCredentials: false,
+  timeout: 3000,
+  headers: {
+    'content-type': 'application/x-www-form-urlencoded',
+  },
+});
+
+request.interceptors.request.use((config) => {
+  const reDefineConfig = assign({}, config);
+  const {
+    method, isJSon,
+  } = reDefineConfig;
+  const Authentication = cookies.get('Authentication') || '';
+  if (isJSon) {
+    reDefineConfig.headers['content-type'] = 'application/json';
+  }
+  reDefineConfig.headers.Authentication = Authentication;
+  
+  reDefineConfig.data = reDefineConfig.data || {};
+  reDefineConfig.params = reDefineConfig.params || {};
+
+  if (String(method).toUpperCase() === 'GET') {
+    const obj = {};
+    for (const i in reDefineConfig.params) {
+      const str = reDefineConfig.params[i];
+      obj[i] = (typeof str === 'string') ? str.trim() : str;
+    }
+
+    reDefineConfig.params = assign(obj, {
+      // schoolId,
+      timestamp: new Date().getTime(), // hack get 请求被缓存的问题
+    });
+  } else {
+    const obj = {};
+    for (const i in reDefineConfig.data) {
+      const str = reDefineConfig.data[i];
+      obj[i] = (typeof str === 'string') ? str.trim() : str;
+    }
+
+    if (isJSon) {
+      reDefineConfig.data = assign(obj, {
+        // schoolId,
+        timestamp: new Date().getTime(),
+      });
+    } else {
+      reDefineConfig.data = qs.stringify(assign(obj, {
+        // schoolId,
+        timestamp: new Date().getTime(),
+      }));
+    }
+  }
+
+  return reDefineConfig;
+}, (error) => Promise.reject(error));
+
+function checkResponse(response) {
+  const {
+    data: {
+      success,
+      message,
+    },
+    status,
+    config: {
+      url,
+    },
+  } = response;
+  const errorCb = () => {
+    if (status === 401) { // 登陆失效
+      // history.push('/login');
+      // window.location.href = `${location.origin + location.pathname}/#/login`;
+      return;
+    }
+    console.error(`
+        XHR request error, the request url is ${url},
+        message is ${message}`);
+    // eslint-disable-next-line
+    return Promise.reject({ ...response.data, message: response.data.message });
+  };
+  if (status === 200) {
+    if (success) {
+      return response.data;
+    }
+    return errorCb();
+  }
+  return errorCb();
+}
+
+// 拦截器,response之后
+request.interceptors.response.use((response) => {
+  return checkResponse(response);
+}, (error) => {
+  if (error.response) {
+    const { status, data, config } = error.response;
+    if (status === 401) {
+      // history.push('/login');
+      // window.location.href = `${window.location.origin}/#/login`;
+    }
+    console.error(`
+    XHR request error, the request url is ${config.url},
+    status is ${status},
+    message is ${data.message}`);
+    return Promise.reject(error.response.data);
+  }
+  return Promise.reject({ message: '服务器错误' });
+});
+
+export default request;

src/store/index.js

@@ -5,10 +5,20 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    // 初始化状态demo
+    count: 0
   },
   mutations: {
+    // 处理状态demo
+    increment(state, payload) {
+      state.count += payload.step || 1;
+    }
   },
   actions: {
+    increment(context, step) {
+      context.state.count += step;
+      context.commit('increment', context.state.count)//提交改变后的state.count值
+    },
   },
   modules: {
   }

src/views/About.vue

@@ -8,6 +8,6 @@
       <el-button type="info">信息按钮</el-button>
       <el-button type="warning">警告按钮</el-button>
       <el-button type="danger">危险按钮</el-button>
-</el-row>
+    </el-row>
   </div>
 </template>

src/views/Home.vue

 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <img alt="Vue logo" @click="increment(1)" src="../assets/logo.png" />
+    <HelloWorld :msg="count" />
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
+import HelloWorld from "@/components/HelloWorld.vue";
+import { mapActions, mapState } from "vuex"; //注册 action 和 state
 export default {
-  name: 'Home',
+  name: "Home",
+  data: function () {
+    return {
+      message: "Hello Vue.js!",
+    };
+  },
+  computed: {
+    //在这里映射 store.state.count，使用方法和 computed 里的其他属性一样
+    ...mapState(["count"]),
+  },
   components: {
-    HelloWorld
-  }
-}
+    HelloWorld,
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    async init() {
+      const res = await this.$http.fetchUserInfo({
+        id: 1,
+      });
+      console.log(res);
+    },
+    //在这里引入 action 里的方法，使用方法和 methods 里的其他方法一样
+    ...mapActions(["increment"]),
+  },
+};
 </script>

vue.config.js

@@ -29,14 +29,21 @@ module.exports = {
     chainWebpack: () => { },
     // 配置 webpack-dev-server 行为。
     devServer: {
-        host: '0.0.0.0',
+        // host: '127.0.0.1',
+        allowedHosts: [
+            '0.0.0.0',
+            'localhost',
+            'me.mock.com',
+            'me.mistong.com',
+            'me.ewt360.com',
+        ],
         port: 8080,
         https: false,
         hotOnly: false,
         // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
         proxy: {
             '/api': {
-                target: "http://app.rmsdmedia.com",
+                target: "http://127.0.0.1:3000",
                 changeOrigin: true,
                 secure: false,
                 pathRewrite: {