perf:改进axios和路由

src/components/Article.vue

@@ -217,7 +217,6 @@ import Email from '@/components/email/Email'
 import VueMarkdown from 'vue-markdown'
 import ArticleComment from '@/comment/ArticleComment'
 import EchartWeather from '@/weather/EchartWeather'
-import axios from 'axios'
 export default {
     components: {
         VueMarkdown, // 显示markdown的组件
@@ -447,7 +446,7 @@ export default {
             parseInt(page + (that.currentPage - 1) * that.splitLength)
         ]
             // 提交数据 page从0开始
-            axios
+            that.$axios
                 .post(that.baseurl + 'article/index/', {
                     value: page + (that.currentPage - 1) * that.splitLength
                     // 传入索引
@@ -475,7 +474,7 @@ export default {
     created: function () {
     // 初始化
         let that = this
-        axios
+        that.$axios
             .get(that.baseurl + 'article/index/')
             .then((res) => {
                 let resdata = res.data

src/components/Csslearn.vue

@@ -28,7 +28,6 @@
 </template>
 
 <script>
-import axios from "axios";
 export default {
   name: "Csslearn",
   data() {
@@ -83,7 +82,7 @@ export default {
       }
 
       let that = this;
-      axios
+      that.$axios
         .get(that.baseurl + "css/")
         .then((res) => {
           let getdata = res.data;

src/components/Mavoneditor.vue

@@ -13,65 +13,51 @@
 </template>
 
 <script>
-import VueMarkdown from "vue-markdown";
-import axios from "axios";
+import VueMarkdown from 'vue-markdown'
 export default {
-  components: {
-    VueMarkdown,
-  },
-  name: "Mavoneditor",
-  data() {
-    return {
-      baseurl: "/api/",
-      basePath: "admin/",
-      md_data: [],
-    };
-  },
-  methods: {
-    getArticles: function () {
-      let that = this;
-      axios
-        .get(that.baseurl + "admin/")
-        .then((res) => {
-          console.log("获取Article=>");
-          // console.log(res.data.article);
-          // let run_array=res.data.article.map(o=>{return that.data.md_data.push(o);}); //获取参数article
-          // console.log(that.data.md_data);
-          that.md_data = res.data.article;
-        })
-        .catch((res) => {
-          console.log(res);
-        }); // get log
+    components: {
+        VueMarkdown
     },
-  },
-  created() {
-    try {
-      console.log(
-        "domMain",
-        document.getElementById("mainappid"),
-        document.getElementById("mainappid").style
-      );
-      document.getElementById("mainappid").style.padding = "0";
-      document.getElementById("mainappid").style.margin = "0";
-    } catch (e) {
-      console.log("e", e);
-      throw Error(e);
+    name: 'Mavoneditor',
+    data () {
+        return {
+            baseurl: '/api/',
+            basePath: 'admin/',
+            md_data: []
+        }
+    },
+    methods: {
+        getArticles: function () {
+            let that = this
+            that.$axios
+                .get(that.baseurl + 'admin/')
+                .then((res) => {
+                    console.log('获取Article=>')
+                    // console.log(res.data.article);
+                    // let run_array=res.data.article.map(o=>{return that.data.md_data.push(o);}); //获取参数article
+                    // console.log(that.data.md_data);
+                    that.md_data = res.data.article
+                })
+                .catch((res) => {
+                    console.log(res)
+                }) // get log
+        }
+    },
+    created () {
+        try {
+            console.log(
+                'domMain',
+                document.getElementById('mainappid'),
+                document.getElementById('mainappid').style
+            )
+            document.getElementById('mainappid').style.padding = '0'
+            document.getElementById('mainappid').style.margin = '0'
+        } catch (e) {
+            console.log('e', e)
+            throw Error(e)
+        }
     }
-    // let that = this;
-    // console.log("测试created！");
-    // axios
-    //   .get(that.baseurl + "admin/")
-    //   .then((res) => {
-    //     console.log("获取Article");
-    //     //   console.log(res,res.data,res.data.msg);
-    //
-    //     that.md_data.push(res.data.article); // markdown值传递
-    //   })
-    //   .catch((res) => {
-    //     console.log(res);
-    //   }); // get log
-  },
-};
+}
 </script>
 
 <style scoped>

src/components/Onlinewebsocket.vue

@@ -126,7 +126,6 @@
 
 <script>
 import VueMarkdown from 'vue-markdown'
-import axios from 'axios'
 
 export default {
     components: {
@@ -219,15 +218,13 @@ export default {
         },
         getRoom: function (room_loc) {
             // 更新index
-            this.room_loc = room_loc
+            const that = this
+            that.room_loc = room_loc
             console.log('获取房间')
-            axios
-                .get(this.baseUrl + 'webchat/index/')
-                .then((res) => {
-                    console.log('返回', res)
-                })
+            that.$axios
+                .get(that.baseUrl + 'webchat/index/')
                 .catch((error) => {
-                    console.log('error', error)
+                    throw Error(error)
                 })
         },
         initRoom: function () {

src/components/Register.vue

@@ -77,7 +77,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 export default {
     name: 'Register',
     data () {
@@ -144,7 +143,7 @@ export default {
                     // alert("yes submit!");
                     that.register_success = false // 初始化register的状态
                     that.register_error = false
-                    axios
+                    that.$axios
                         .post(that.baseurl + 'user/register/', {
                             // 传递的名字和密码
                             name: that.ruleForm.name,

src/cookieoption/index.js

-function cookieGet(name) {
-    var strcookie = document.cookie; //获取cookie字符串
-    var arrcookie = strcookie.split("; "); //分割
-    //遍历匹配
-    for (var i = 0; i < arrcookie.length; i++) {
-        var arr = arrcookie[i].split("=");
-        if (arr[0] == name) {
-            return arr[1];
+function cookieGet (name) {
+    let strcookie = document.cookie // 获取cookie字符串
+    let arrcookie = strcookie.split('; ') // 分割
+    // 遍历匹配
+    for (let i = 0; i < arrcookie.length; i++) {
+        let arr = arrcookie[i].split('=')
+        if (arr[0] === name) {
+            return arr[1]
         }
     }
-    return "";
+    return ''
 }
 
 // 打印所有cookie
-function cookiePrint() {
-    var strcookie = document.cookie; //获取cookie字符串
-    var arrcookie = strcookie.split(";"); //分割
+function cookiePrint () {
+    let strcookie = document.cookie // 获取cookie字符串
+    let arrcookie = strcookie.split(';') // 分割
 
-    //遍历匹配
-    for (var i = 0; i < arrcookie.length; i++) {
-        var arr = arrcookie[i].split("=");
-        console.log(arr[0] + "：" + arr[1]);
+    // 遍历匹配
+    for (let i = 0; i < arrcookie.length; i++) {
+        let arr = arrcookie[i].split('=')
+        console.log(arr[0] + '：' + arr[1])
     }
 }
-export default { cookieGet, cookiePrint }
\ No newline at end of file
+export default { cookieGet, cookiePrint }

src/echarts/Map.vue

@@ -4,7 +4,7 @@
     <div class="mapClass" id="echartMapid"></div>
     <div class="boxRight">
       <div class="refreshBtn">
-        <button @click="refreshEchart()" class="rBtn">刷新</button>
+        <el-button @click="refreshEchart">刷新</el-button>
       </div>
       <div class="selectPoint">
         <p>终点选择</p>
@@ -27,7 +27,6 @@
 </template>
 
 <script>
-import axios from 'axios'
 export default {
     name: 'Map',
     data () {
@@ -104,10 +103,11 @@ export default {
             // 置空
             that.linesCoord = []
             function task1 () {
+                const that = this
                 return new Promise((resolve) => {
                     setTimeout(() => {
                         console.log('第1个任务geojson获取')
-                        axios
+                        that.$axios
                             .get('https://yongma16.xyz/static/json/map/guizhou.json')
                             .then(function (response) {
                                 let res = response.data
@@ -154,7 +154,7 @@ export default {
                         resolve('第一个任务')
                     }, 1000)
                 }).catch((error) => {
-                    console.log('error', error)
+                    throw Error(error)
                 })
             }
 
@@ -302,7 +302,7 @@ export default {
                     that.clickCity = name
                 })
             } catch (e) {
-                console.log(e)
+                throw Error(e)
             }
         }
     }
@@ -346,6 +346,7 @@ export default {
   position: relative;
   left: 50%;
   transform: translateX(-50%);
+  text-align: center;
   margin-top: 5px;
 }
 

src/importElement.js

@@ -22,7 +22,8 @@ import {
     Loading,
     Pagination,
     Alert,
-    Notification
+    Notification,
+    Select
 } from 'element-ui'
 
 const importElementComponents = (Vue) => {
@@ -48,6 +49,7 @@ const importElementComponents = (Vue) => {
     Vue.use(Loading)
     Vue.use(Pagination)
     Vue.use(Alert)
+    Vue.use(Select)
     Vue.prototype.$message = Message
     Vue.prototype.$notify = Notification
 }

src/main.js

@@ -2,14 +2,21 @@
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
+import VueRouter from 'vue-router'
 import cookies from 'vue-cookies'
 import hljs from 'highlight.js'
-import {router, useRouter} from './router'
+import useRouter from './router'
+import axios from 'axios'
 import importElementComponents from './importElement'
 import importEchartsComponents from './importEchartsComponents'
 
+// 样式
+import 'github-markdown-css/github-markdown.css'
+import 'highlight.js/styles/github.css'
+import 'nprogress/nprogress.css'
+
 // 路由
-useRouter(Vue)
+const router = useRouter(Vue, VueRouter)
 
 // 按需引入elementui
 importElementComponents(Vue)
@@ -20,15 +27,17 @@ importEchartsComponents(Vue)
 Vue.config.productionTip = false
 Vue.use(cookies)
 
-// Vue.use(hljs)
+Vue.use(hljs)
 Vue.directive('highlight', function (el) {
     const blocks = el.querySelectorAll('pre code')
     blocks.forEach(block => {
         hljs.highlightBlock(block)
     })
 })
-
+// cookie
 Vue.prototype.$cookies = cookies
+// axios
+Vue.prototype.$axios = axios
 
 Vue.prototype.$cookies.set('user_session', 'null')
 

src/plugins/axios.js

@@ -9,51 +9,51 @@ import axios from 'axios'
 // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
 let config = {
-  // baseURL: process.env.baseURL || process.env.apiUrl || ""
-  // timeout: 60 * 1000, // Timeout
-  // withCredentials: true, // Check cross-site Access-Control
+    // baseURL: process.env.baseURL || process.env.apiUrl || ""
+    // timeout: 60 * 1000, // Timeout
+    // withCredentials: true, // Check cross-site Access-Control
 }
 
 const _axios = axios.create(config)
 
 _axios.interceptors.request.use(
-  function (config) {
+    function (config) {
     // Do something before request is sent
-    return config
-  },
-  function (error) {
+        return config
+    },
+    function (error) {
     // Do something with request error
-    return Promise.reject(error)
-  }
+        return Promise.reject(error)
+    }
 )
 
 // Add a response interceptor
 _axios.interceptors.response.use(
-  function (response) {
+    function (response) {
     // Do something with response data
-    return response
-  },
-  function (error) {
+        return response
+    },
+    function (error) {
     // Do something with response error
-    return Promise.reject(error)
-  }
+        return Promise.reject(error)
+    }
 )
 
 Plugin.install = function (Vue, options) {
-  Vue.axios = _axios
-  window.axios = _axios
-  Object.defineProperties(Vue.prototype, {
-    axios: {
-      get () {
-        return _axios
-      }
-    },
-    $axios: {
-      get () {
-        return _axios
-      }
-    }
-  })
+    Vue.axios = _axios
+    window.axios = _axios
+    Object.defineProperties(Vue.prototype, {
+        axios: {
+            get () {
+                return _axios
+            }
+        },
+        $axios: {
+            get () {
+                return _axios
+            }
+        }
+    })
 }
 
 Vue.use(Plugin)

src/router/index.js

-// import Nprogress from 'nprogress'
-import 'nprogress/nprogress.css'
-// import { getToken } from '@/utils/auth'
 import { isEmpty } from '@/utils'
-import VueRouter from 'vue-router'
 import store from '@/store'
 const Article = () => import('@/components/Article')
 const Login = () => import('@/components/Login')
@@ -71,55 +67,52 @@ const defaultRoutes = [
     }
 ]
 
-let routes = [
-    ...defaultRoutes
-]
-const originalPush = VueRouter.prototype.push
-VueRouter.prototype.push = function push (location) {
-    return originalPush.call(this, location).catch((err) => err)
-}
-// 路由
-const router = new VueRouter({
-    routes
-})
+const useRouter = (Vue, VueRouter) => {
+    let routes = [
+        ...defaultRoutes
+    ]
+    const originalPush = VueRouter.prototype.push
+    VueRouter.prototype.push = function push (location) {
+        return originalPush.call(this, location).catch((err) => err)
+    }
+    // 路由
+    const router = new VueRouter({
+        routes
+    })
 
-// const whiteList = ['/login', '/register']
+    // const whiteList = ['/login', '/register']
 
-router.beforeEach(async (to, from, next) => {
-    next()
-    let yma16siteUserInfo = localStorage.getItem('yma16siteUserInfo')
-        ? JSON.parse(localStorage.getItem('yma16siteUserInfo'))
-        : ''
-    let name = yma16siteUserInfo.username
-    let pwd = yma16siteUserInfo.password
+    router.beforeEach(async (to, from, next) => {
+        next()
+        let yma16siteUserInfo = localStorage.getItem('yma16siteUserInfo')
+            ? JSON.parse(localStorage.getItem('yma16siteUserInfo'))
+            : ''
+        let name = yma16siteUserInfo.username
+        let pwd = yma16siteUserInfo.password
 
-    let hasToken = {
-        name: name,
-        password: pwd
-    }
-    console.log('localStorage', hasToken)
-    if (hasToken.name && hasToken.password) {
-        if (isEmpty(store.state.user.userInfo)) {
-            // 空的 modules下的user
-            console.log('路由的登录认证')
-            // 用户自主登录
-            await store.dispatch('user/loginUserInfo', hasToken)
-            next()
+        let hasToken = {
+            name: name,
+            password: pwd
+        }
+        console.log('localStorage', hasToken)
+        if (hasToken.name && hasToken.password) {
+            if (isEmpty(store.state.user.userInfo)) {
+                // 空的 modules下的user
+                console.log('路由的登录认证')
+                // 用户自主登录
+                await store.dispatch('user/loginUserInfo', hasToken)
+                next()
+            } else {
+                next()
+            }
         } else {
+            // next({ path: "/login" }); //去登录
             next()
         }
-    } else {
-    // next({ path: "/login" }); //去登录
-        next()
-    }
-})
-
-// router.afterEach((to, from) => {
-//     Nprogress.done()
-// })
+    })
 
-const useRouter = (Vue) => {
     Vue.use(VueRouter)
+    return router
 }
 
-export {router, useRouter}
+export default useRouter

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
-import user from './modules/user'
-import persistedstate from "vuex-persistedstate";
+import persistedstate from 'vuex-persistedstate'
 
-// import createLogger from '../../../src/plugins/logger' 
 
+// import createLogger from '../../../src/plugins/logger'
+
+// vue-x
 Vue.use(Vuex)
 const debug = process.env.NODE_ENV !== 'production'
-let files = require.context("./modules", false, /\.js$/);
-let modules = {};
+let files = require.context('./modules', false, /\.js$/)
+let modules = {}
 files.keys().map((key) => {
-    modules[key.replace(/(\.\/|\.js)/g, "")] = files(key).default;
-});
+    modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
+})
 
 export default new Vuex.Store({
     plugins: [
         persistedstate({
-            key: "VBI",
-        }),
+            key: 'VBI'
+        })
     ],
     modules,
     strict: debug
-        // plugins: debug ? [createLogger()] : []
-});
\ No newline at end of file
+    // plugins: debug ? [createLogger()] : []
+})

src/store/modules/user.js

-import { loginUser } from "@/service/user.service";
+import { loginUser } from '@/service/user.service'
 export default {
-  // 自带命名空间
-  namespaced: true,
-  state: {
+    // 自带命名空间
+    namespaced: true,
+    state: {
     // 用户账号密码
-    userInfo: {
-      name: "游客",
-      password: null,
+        userInfo: {
+            name: '游客',
+            password: null
+        }
     },
-  },
-  getters: {
-    userInfo: (state) => {
-      return state.userInfo;
+    getters: {
+        userInfo: (state) => {
+            return state.userInfo
+        }
     },
-  },
-  mutations: {
+    mutations: {
     //   配置用户登录信息 userInfo
-    setUserInfo(state, userInfo) {
-      state.userInfo = userInfo;
+        setUserInfo (state, userInfo) {
+            state.userInfo = userInfo
+        }
     },
-  },
-  actions: {
+    actions: {
     // Promise
-    loginUserInfo({ commit }, info) {
-      console.log("登录认证 store里面", "info", info);
-      return new Promise(async (resolve, reject) => {
-        try {
-          let data = await loginUser(info);
-          // 等待登录信息
-          console.log("返回的post", data);
-          // 调用 mutation
-          commit("setUserInfo", info);
-          resolve(data);
-        } catch (error) {
-          reject(error);
+        loginUserInfo ({ commit }, info) {
+            console.log('登录认证 store里面', 'info', info)
+            return new Promise(async (resolve, reject) => {
+                try {
+                    let data = await loginUser(info)
+                    // 等待登录信息
+                    console.log('返回的post', data)
+                    // 调用 mutation
+                    commit('setUserInfo', info)
+                    resolve(data)
+                } catch (error) {
+                    reject(error)
+                }
+            })
         }
-      });
-    },
-  },
-};
+    }
+}