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,
+        VueMarkdown
     },
-  name: "Mavoneditor",
-  data() {
+    name: 'Mavoneditor',
+    data () {
         return {
-      baseurl: "/api/",
-      basePath: "admin/",
-      md_data: [],
-    };
+            baseurl: '/api/',
+            basePath: 'admin/',
+            md_data: []
+        }
     },
     methods: {
         getArticles: function () {
-      let that = this;
-      axios
-        .get(that.baseurl + "admin/")
+            let that = this
+            that.$axios
+                .get(that.baseurl + 'admin/')
                 .then((res) => {
-          console.log("获取Article=>");
+                    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;
+                    that.md_data = res.data.article
                 })
                 .catch((res) => {
-          console.log(res);
-        }); // get log
-    },
+                    console.log(res)
+                }) // get log
+        }
     },
-  created() {
+    created () {
         try {
             console.log(
-        "domMain",
-        document.getElementById("mainappid"),
-        document.getElementById("mainappid").style
-      );
-      document.getElementById("mainappid").style.padding = "0";
-      document.getElementById("mainappid").style.margin = "0";
+                '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);
+            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 }

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/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,21 +67,22 @@ const defaultRoutes = [
     }
 ]
 
-let routes = [
+const useRouter = (Vue, VueRouter) => {
+    let routes = [
         ...defaultRoutes
-]
-const originalPush = VueRouter.prototype.push
-VueRouter.prototype.push = function push (location) {
+    ]
+    const originalPush = VueRouter.prototype.push
+    VueRouter.prototype.push = function push (location) {
         return originalPush.call(this, location).catch((err) => err)
-}
-// 路由
-const router = new VueRouter({
+    }
+    // 路由
+    const router = new VueRouter({
         routes
-})
+    })
 
-// const whiteList = ['/login', '/register']
+    // const whiteList = ['/login', '/register']
 
-router.beforeEach(async (to, from, next) => {
+    router.beforeEach(async (to, from, next) => {
         next()
         let yma16siteUserInfo = localStorage.getItem('yma16siteUserInfo')
             ? JSON.parse(localStorage.getItem('yma16siteUserInfo'))
@@ -112,14 +109,10 @@ router.beforeEach(async (to, from, next) => {
             // 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'
 
+// 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
+})

src/store/modules/user.js

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