diff --git a/.babelrc b/.babelrc
index d530c00fd4f2ea795f8aa92053f2fe131e4cbf3a..e5e80efce4bbca3d554b95788152780ad5c23c09 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,14 +1,27 @@
 {
   "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+    [
+      "env",
+      {
+        "modules": false,
+        "targets": {
+          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+        }
       }
-    }],
+    ],
     "stage-2"
   ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "plugins": [
+    "transform-vue-jsx",
+    "transform-runtime",
+    [
+      "component",
+      {
+        "libraryName": "element-ui",
+        "styleLibraryName": "theme-chalk"
+      }
+    ]
+  ],
   "env": {
     "test": {
       "presets": ["env", "stage-2"]
diff --git a/config/index.js b/config/index.js
index 442c644cd17c96399c2da3d2fd35021b436e8813..a0bb03c4af2bac1dcf8f7d101aac622f0b2ae499 100644
--- a/config/index.js
+++ b/config/index.js
@@ -11,7 +11,7 @@ module.exports = {
     assetsPublicPath: "/",
     proxyTable: {
       "/api/": {
-        target: "http://yongma16.xyz/", //后端接口地址
+        target: "https://yongma16.xyz/", //后端接口地址
         ws: true, //接受websocket请求
         changeOrigin: true, //是否允许跨越
         chunkOrigins: true,
@@ -20,7 +20,7 @@ module.exports = {
         },
       },
       "/ws_api/": {
-        target: "ws://yongma16.xyz/ws/webchat/",
+        target: "wss://yongma16.xyz/ws/webchat/",
         ws: true, //接受websocket请求
         changeOrigin: true, //是否允许跨越
         chunkOrigins: true,
@@ -58,7 +58,7 @@ module.exports = {
     // https://vue-loader.vuejs.org/en/options.html#cachebusting
     cacheBusting: true,
 
-    cssSourceMap: true,
+    cssSourceMap: false,
   },
 
   build: {
@@ -74,7 +74,7 @@ module.exports = {
      * Source Maps
      */
 
-    productionSourceMap: true,
+    productionSourceMap: false,
     // https://webpack.js.org/configuration/devtool/#production
     devtool: "#source-map",
 
diff --git a/index.html b/index.html
index 8bb680880497bf15794d68d466c8f3c2a34e776d..af7df620cc6270932cb2ac20a8580a027549e93e 100644
--- a/index.html
+++ b/index.html
@@ -14,8 +14,7 @@
       rel="stylesheet"
       href="myblog_static/utils/fx_background/css/core.css"
     />
-    <!-- 我的阿里图标库 -->
-    <script src="http://at.alicdn.com/t/font_1957918_9kt1mmflyr8.js"></script>
+
     <style>
       body {
         background: url(myblog_static/utils/fx_background/image/background.png);
@@ -43,35 +42,36 @@
       <div id="is"></div>
       <div id="beautiful"></div>
     </div>
-
-    <!-- built files will be auto injected -->
-    <!--    <script src="myblog_static/utils/fx_background/js/jquery-2.1.4.min.js"></script>-->
-    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
-    <script>
-      L2Dwidget.init({
-        model: {
-          jsonPath:
-            "https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",
-          scale: 1,
-          hHeadPos: 0.5,
-          vHeadPos: 0.618,
-        },
-        display: {
-          position: "left",
-          width: 50,
-          height: 60,
-          hOffset: 0,
-          vOffset: 0,
-        },
-        mobile: {
-          show: true,
-          scale: 0.5,
-        },
-        react: {
-          opacityDefault: 0.9,
-          opacityOnHover: 0.5,
-        },
-      });
-    </script>
   </body>
+  <!-- built files will be auto injected -->
+  <!--    <script src="myblog_static/utils/fx_background/js/jquery-2.1.4.min.js"></script>-->
+  <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
+  <!-- 我的阿里图标库 -->
+  <script src="https://yongma16.xyz/static/aliyunIcon/icon.js"></script>
+  <script>
+    L2Dwidget.init({
+      model: {
+        jsonPath:
+          "https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",
+        scale: 1,
+        hHeadPos: 0.5,
+        vHeadPos: 0.618,
+      },
+      display: {
+        position: "left",
+        width: 50,
+        height: 60,
+        hOffset: 0,
+        vOffset: 0,
+      },
+      mobile: {
+        show: true,
+        scale: 0.5,
+      },
+      react: {
+        opacityDefault: 0.9,
+        opacityOnHover: 0.5,
+      },
+    });
+  </script>
 </html>
diff --git a/myblog_static/utils/fx_background/image/background.png b/myblog_static/utils/fx_background/image/background.png
index ae7aadcfb7a7ebb9499db1b2af128ea210af9d16..f5080dd72c807454cb042d1a0e65b54b3739f6c3 100644
Binary files a/myblog_static/utils/fx_background/image/background.png and b/myblog_static/utils/fx_background/image/background.png differ
diff --git a/myblog_static/utils/fx_background/image/gg.jpg b/myblog_static/utils/fx_background/image/gg.jpg
index bece7f1cab23313b8a04bee2bfd18b3668b317cc..732d131f81bc387fd4219440703da42d661201d7 100644
Binary files a/myblog_static/utils/fx_background/image/gg.jpg and b/myblog_static/utils/fx_background/image/gg.jpg differ
diff --git a/package.json b/package.json
index d6578f019031cda69d7be454aa8e00f58bcb6051..01d24df7272d8c08bf1658da8d2514086c2d3873 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
     "highlight.js": "^10.5.0",
     "js-cookie": "^3.0.1",
     "nprogress": "^0.2.0",
-    "three": "^0.128.0",
     "vue": "^2.5.2",
     "vue-cookies": "^1.7.4",
     "vue-markdown": "^2.2.4",
@@ -35,6 +34,7 @@
     "babel-eslint": "^8.2.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
     "babel-loader": "^7.1.1",
+    "babel-plugin-component": "^1.1.1",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
diff --git a/src/App.vue b/src/App.vue
index c847b7c88c9652ad7f146c2b89c4b78904145171..ef79ef87c2530437c1a6ea5db4fe9221a26937b0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -134,161 +134,158 @@
 </template>
 
 <script>
-import store from "@/store";
+import store from '@/store'
 export default {
-  name: "App",
-  data() {
-    return {
-      authSlogan: "yma16",
-      chat_flag: false,
-      msg: "yma16",
-      navigate_flag: true,
-      value: new Date(),
-      baseUrl: "/api/",
-      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
-      url: "/image/logo/logo.jpg",
-      srcList: [
-        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
-        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
-      ],
-      headerData: ["从现在开始，种一棵树", "从现在开始，种一棵树"],
-      readCount: 0,
-    };
-  },
-  computed: {
-    currentUserName: function () {
-      return store.state.user.userInfo && store.state.user.userInfo.name
-        ? store.state.user.userInfo.name
-        : "游客";
+    name: 'App',
+    data () {
+        return {
+            authSlogan: 'yma16',
+            chat_flag: false,
+            msg: 'yma16',
+            navigate_flag: true,
+            value: new Date(),
+            baseUrl: '/api/',
+            src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
+            url: '/image/logo/logo.jpg',
+            srcList: [
+                'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+            ],
+            headerData: ['从现在开始，种一棵树', '从现在开始，种一棵树'],
+            readCount: 0
+        }
     },
-  },
-  mounted() {
-    this.addReadCountFun();
-    this.readCountFun();
-  },
-  methods: {
-    jumpIpDns: function () {
-      try {
-        window.open("https://beian.miit.gov.cn");
-      } catch (r) {
-        window.location.href = "https://beian.miit.gov.cn";
-        throw Error(r);
-      }
+    computed: {
+        currentUserName: function () {
+            return store.state.user.userInfo && store.state.user.userInfo.name
+                ? store.state.user.userInfo.name
+                : '游客'
+        }
     },
-    addReadCountFun: function () {
-      const that = this;
-      let clientIp = "未知";
-      try {
-        console.warn("ip待定");
-      } catch (e) {
-        console.warn(e);
-      }
-      that.$axios
-        .post(this.baseUrl + "count/add/", {
-          ip: clientIp,
-        })
-        .then((res) => {
-          console.log(res);
-        })
-        .catch((e) => {
-          throw Error(e);
-        });
+    mounted () {
+        this.addReadCountFun()
+        this.readCountFun()
     },
-    readCountFun: function () {
-      let that = this;
-      that.$axios
-        .get(that.baseUrl + "count/get/")
-        .then((res) => {
-          this.readCount = res.data.num;
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    changeNavigate: function () {
-      this.navigate_flag = !this.navigate_flag; // 取反
-    },
-
-    handleOpen(key, keyPath) {
-      console.log(key, keyPath);
-      if (key === "3") {
-        console.log("打开3号");
-        this.chat_flag = true;
-        this.onlineWebsocket(); // 调用跳转
-      }
-      if (key === "2-1") {
-        this.chat_flag = false;
-        this.loginAction(); // 调用跳转
-      }
-      if (key === "2-2") {
-        this.chat_flag = false;
-        this.registerAction(); // 调用跳转
-      }
-    },
-    handleClose(key, keyPath) {
-      console.info(key, keyPath);
-      if (key === "3") {
-        this.chat_flag = false;
-      }
-    },
-    jumpRouter: function (params) {
-      this.$router
-        .push({
-          name: `${params}`,
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    onlineWebsocket: function () {
-      // console.log(this.$router);
-      this.$router
-        .push({
-          path: "/onlinewebsocket",
-        })
-        .catch((error) => {
-          throw Error(error);
-        });
-    },
-    jumpToEcharts: function () {
-      // console.log(this.$router);
-      this.$router
-        .push({
-          path: "/bilicom",
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    jumpToAdmin: function () {
-      this.$router
-        .push({
-          path: "/mavoneditor",
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    loginAction: function () {
-      this.$router
-        .push({
-          path: "/login",
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    registerAction: function () {
-      this.$router
-        .push({
-          path: "/register",
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-  },
-};
+    methods: {
+        jumpIpDns: function () {
+            try {
+                window.open('https://beian.miit.gov.cn')
+            } catch (r) {
+                window.location.href = 'https://beian.miit.gov.cn'
+                throw Error(r)
+            }
+        },
+        addReadCountFun: function () {
+            const that = this
+            let clientIp = '未知'
+            try {
+                console.warn('ip待定')
+            } catch (e) {
+                console.warn(e)
+            }
+            that.$axios
+                .post(this.baseUrl + 'count/add/', {
+                    ip: clientIp
+                })
+                .then((res) => {
+                    console.log(res)
+                })
+                .catch((e) => {
+                    throw Error(e)
+                })
+        },
+        readCountFun: function () {
+            let that = this
+            that.$axios
+                .get(that.baseUrl + 'count/get/')
+                .then((res) => {
+                    this.readCount = res.data.num
+                })
+                .catch((error) => {
+                    throw Error(error)
+                })
+        },
+        changeNavigate: function () {
+            this.navigate_flag = !this.navigate_flag // 取反
+        },
+
+        handleOpen (key, keyPath) {
+            console.log(key, keyPath)
+            if (key === '3') {
+                this.chat_flag = true
+                this.onlineWebsocket() // 调用跳转
+            }
+            if (key === '2-1') {
+                this.chat_flag = false
+                this.loginAction() // 调用跳转
+            }
+            if (key === '2-2') {
+                this.chat_flag = false
+                this.registerAction() // 调用跳转
+            }
+        },
+        handleClose (key, keyPath) {
+            console.info(key, keyPath)
+            if (key === '3') {
+                this.chat_flag = false
+            }
+        },
+        jumpRouter: function (params) {
+            this.$router
+                .push({
+                    name: `${params}`
+                })
+                .catch((error) => {
+                    throw Error(error)
+                })
+        },
+        onlineWebsocket: function () {
+            this.$router
+                .push({
+                    path: '/onlinewebsocket'
+                })
+                .catch((error) => {
+                    throw Error(error)
+                })
+        },
+        jumpToEcharts: function () {
+            this.$router
+                .push({
+                    path: '/bilicom'
+                })
+                .catch((error) => {
+                    throw Error(error)
+                })
+        },
+        jumpToAdmin: function () {
+            this.$router
+                .push({
+                    path: '/mavoneditor'
+                })
+                .catch((error) => {
+                    throw Error(error)
+                })
+        },
+        loginAction: function () {
+            this.$router
+                .push({
+                    path: '/login'
+                })
+                .catch((error) => {
+                    throw Error(error)
+                })
+        },
+        registerAction: function () {
+            this.$router
+                .push({
+                    path: '/register'
+                })
+                .catch((error) => {
+                    throw Error(error)
+                })
+        }
+    }
+}
 </script>
 
 <style>
diff --git a/src/components/Article.vue b/src/components/Article.vue
index 5fe467659088da65a1c2c65a187ba6204b4b2dd2..6db30258022e3cd9a7d81ae50373b85381db6b74 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -213,7 +213,7 @@
 </template>
 
 <script>
-  import Email from '@/components/email/Email'
+import Email from '@/components/email/Email'
 import VueMarkdown from "vue-markdown";
 import ArticleComment from "@/comment/ArticleComment";
 import EchartWeather from "@/weather/EchartWeather";
diff --git a/src/components/Bilicom.vue b/src/components/Bilicom.vue
index 3534c9ac54fbd4dc8fe437102ec25d4ac4ce2aa3..dd104179637dc2a199fd63a06fc2786678976f21 100644
--- a/src/components/Bilicom.vue
+++ b/src/components/Bilicom.vue
@@ -6,110 +6,112 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
 export default {
-  name: 'Bilicom',
-  data () {
-    return {
-      msg: '内容',
-      md_data: [],
-      data: ['threejs加载模型']
-    }
-  },
-  methods: {
-    echartfunc: function () {
-      // 基于准备好的dom，初始化echarts实例
-      const myChart = echarts.init(document.getElementById('bilicom'))
-      const option = {
-        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    name: 'Bilicom',
+    data () {
+        return {
+            msg: '内容',
+            md_data: [],
+            data: ['threejs加载模型']
+        }
+    },
+    methods: {
+        echartfunc: function () {
+            // echarts
+            const echarts = this.$echarts
+            if (!echarts) return
+            // 基于准备好的dom，初始化echarts实例
+            const myChart = echarts.init(document.getElementById('bilicom'))
+            const option = {
+                backgroundColor: 'rgba(0, 0, 0, 0.3)',
 
-        title: {
-          text: 'echarts',
-          left: 'center',
-          top: 20,
-          textStyle: {
-            color: '#ccc'
-          }
-        },
+                title: {
+                    text: 'echarts',
+                    left: 'center',
+                    top: 20,
+                    textStyle: {
+                        color: '#ccc'
+                    }
+                },
 
-        tooltip: {
-          trigger: 'item'
-        },
+                tooltip: {
+                    trigger: 'item'
+                },
 
-        visualMap: {
-          show: false,
-          min: 80,
-          max: 600,
-          inRange: {
-            colorLightness: [0, 1]
-          }
-        },
-        series: [
-          {
-            name: '学习动力',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '50%'],
-            data: [
-              { value: 335, name: '反向素材' },
-              { value: 310, name: '励志故事' },
-              { value: 274, name: '心灵鸡汤' },
-              { value: 235, name: '社会压力' },
-              { value: 400, name: '发自内心' }
-            ].sort(function (a, b) {
-              return a.value - b.value
-            }),
-            roseType: 'radius',
-            label: {
-              color: 'rgba(255, 255, 255, 0.3)'
-            },
-            labelLine: {
-              lineStyle: {
-                color: 'rgba(255, 255, 255, 0.3)'
-              },
-              smooth: 0.2,
-              length: 10,
-              length2: 20
-            },
-            itemStyle: {
-              color: '#c23531',
-              shadowBlur: 200,
-              shadowColor: 'rgba(0, 0, 0, 0.5)'
-            },
+                visualMap: {
+                    show: false,
+                    min: 80,
+                    max: 600,
+                    inRange: {
+                        colorLightness: [0, 1]
+                    }
+                },
+                series: [
+                    {
+                        name: '学习动力',
+                        type: 'pie',
+                        radius: '55%',
+                        center: ['50%', '50%'],
+                        data: [
+                            { value: 335, name: '反向素材' },
+                            { value: 310, name: '励志故事' },
+                            { value: 274, name: '心灵鸡汤' },
+                            { value: 235, name: '社会压力' },
+                            { value: 400, name: '发自内心' }
+                        ].sort(function (a, b) {
+                            return a.value - b.value
+                        }),
+                        roseType: 'radius',
+                        label: {
+                            color: 'rgba(255, 255, 255, 0.3)'
+                        },
+                        labelLine: {
+                            lineStyle: {
+                                color: 'rgba(255, 255, 255, 0.3)'
+                            },
+                            smooth: 0.2,
+                            length: 10,
+                            length2: 20
+                        },
+                        itemStyle: {
+                            color: '#c23531',
+                            shadowBlur: 200,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        },
 
-            animationType: 'scale',
-            animationEasing: 'elasticOut',
-            animationDelay: function (idx) {
-              return Math.random() * 200
+                        animationType: 'scale',
+                        animationEasing: 'elasticOut',
+                        animationDelay: function (idx) {
+                            return Math.random() * 200
+                        }
+                    }
+                ]
             }
-          }
-        ]
-      }
-      myChart.setOption(option)
-    }
-  },
-  created: function () {
-    const that = this
-    try {
-      that.echartfunc()
-      window.onload = that.echartfunc
-    } catch (e) {
-      console.log(e)
-    } finally {
-      that.echartfunc()
-    }
-  },
-  mounted () {
-    let that = this
-    try {
-      that.echartfunc()
-      window.onload = that.echartfunc
-    } catch (e) {
-      console.log(e)
-    } finally {
-      that.echartfunc()
+            myChart.setOption(option)
+        }
+    },
+    created: function () {
+        const that = this
+        try {
+            that.echartfunc()
+            window.onload = that.echartfunc
+        } catch (e) {
+            console.log(e)
+        } finally {
+            that.echartfunc()
+        }
+    },
+    mounted () {
+        let that = this
+        try {
+            that.echartfunc()
+            window.onload = that.echartfunc
+        } catch (e) {
+            console.log(e)
+        } finally {
+            that.echartfunc()
+        }
     }
-  }
 }
 </script>
 
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
deleted file mode 100644
index 74609a20c977a681d4cf579a2df816f6a4b378fc..0000000000000000000000000000000000000000
--- a/src/components/Loading.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div id="loading">
-    <canvas id="fbxload" style="width: 100%; height: 100%"> </canvas>
-  </div>
-</template>
-
-<script>
-import * as THREE from 'three'
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
-// import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
-// threejs引入
-export default {
-  name: 'Loading',
-  data () {
-    return {
-      msg: 'fbxloading'
-    }
-  },
-  methods: {
-    loadingFbx: function () {
-      const scene = new THREE.Scene()
-      const width = window.innerWidth
-      const height = window.innerHeight
-      const camera = new THREE.PerspectiveCamera(45, width / height, 1, 100)
-      const canvas = document.querySelector('#fbxload') // 根据canvas的id获取dom节点
-      console.log(canvas)
-      const renderer = new THREE.WebGLRenderer({ canvas, antialias: true }) // 渲染场景
-      const controls = new OrbitControls(camera, renderer.domElement)
-      controls.enableDamping = true
-      controls.update()
-      camera.position.z = 5
-      //   const geometry = new THREE.BoxGeometry();
-      //   const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
-      //   const cube = new THREE.Mesh(geometry, material);
-      const light = new THREE.AmbientLight(0x0000ff) // 蓝色环境环境光
-      scene.add(light)
-      //   scene.add(cube);
-      const gltfLoader = new GLTFLoader()
-      gltfLoader.load(
-        '/myblog_static/utils/fx_background/model/glb/snow.glb',
-        function (gltf) {
-          console.log(gltf)
-          scene.add(gltf.scene)
-        },
-        undefined,
-        function (error) {
-          console.error(error)
-        }
-      )
-
-      function animate () {
-        // 渲染
-        renderer.render(scene, camera)
-        requestAnimationFrame(animate)
-      }
-      animate()
-    }
-  },
-  created () {
-    window.onload = this.loadingFbx // dom加载完再执行
-  }
-}
-</script>
-
-<style scoped>
-#loading {
-  width: 100%;
-  height: 100%;
-  line-height: 1em;
-}
-#fbxload {
-  width: 100%;
-  height: 100%;
-}
-</style>
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 8b9a4f6b207abfe826d8aec1933563eced79311c..10c807123c3f4569b0ed0199523d026f5730dd99 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -61,7 +61,7 @@ export default {
         }
         const validatePass = (rule, value, callback) => {
             if (value === '') {
-                callback(new Error('请输入密码'))
+                callback(new Error('密码不能为空'))
             } else {
                 callback()
             }
diff --git a/src/components/Onlinewebsocket.vue b/src/components/Onlinewebsocket.vue
index 8e4646aaf5c66e949ccc917a1dda2da487a28286..7d15e7c8de25bf08bd7902877ad38b5afeb6819b 100644
--- a/src/components/Onlinewebsocket.vue
+++ b/src/components/Onlinewebsocket.vue
@@ -32,7 +32,7 @@
         >
           <div
             v-bind:class="[
-              { room_active: index == room_loc },
+              { room_active: index === room_loc },
               room_defaultClass,
             ]"
             @click="changeRoom(item, index)"
@@ -75,13 +75,13 @@
             class="text item"
           >
             <!-- {{item}} -->
-            <template v-if="item.room == room_select">
+            <template v-if="item.room === room_select">
               <div
                 v-for="(item2, index2) in item.content"
                 :key="index2"
                 class="msgClass"
                 v-bind:class="[
-                  { info_active: ws_flag == true },
+                  { info_active: ws_flag === true },
                   info_defaultClass,
                 ]"
               >
@@ -125,333 +125,302 @@
 </template>
 
 <script>
-import VueMarkdown from "vue-markdown";
-import axios from "axios";
+import VueMarkdown from 'vue-markdown'
+import axios from 'axios'
 
 export default {
-  components: {
-    VueMarkdown,
-  },
-  name: "Onlinewebsocket",
-  data() {
-    return {
-      ws_flag: false,
-      msg: "连接中",
-      send_info: "hello world!",
-      room_name: ["DjangoVue"],
-      room_select: "",
-      // baseUrl: "http://localhost:8006/webchat/index/",
-      baseUrl: "http://yongma16.xyz/api/",
-      // websocketUrl: "/ws_api/",
-      websocketUrl: "ws://yongma16.xyz/ws-api/",
-      websocket: null,
-      // room 存房间名字，content保存聊天信息的数组
-      chat_info: new Array(),
-      chat_room: null,
-      room_loc: 0,
-      user: "",
-      cookieValue: document.cookie,
-      chatCount: 0,
-      personCount: 0,
-      sendmsg: "",
-      getmsg: "",
-      // 房间索引0
-      chatRoomIndex: 0,
-      // msg='连接成功'
-    };
-  },
-  watch() {
-    // cookieValue:function(newValue,oldValue){
-    //   this.user=newValue
-    //   console.log(newValue,oldValue)
-    //   return newValue
-    // }
-  },
-  beforeDestroy() {
-    // window.removeEventListener("onload",this.initWebsocket());
-  },
-  mounted() {
-    // 判断是否登录
-    this.judeIsLogin();
-    // window.addEventListener("onload",this.initWebsocket());
-  },
-  methods: {
-    judeIsLogin() {
-      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);
-      }
-      // let that = this;
-      // console.log("cookie");
-      // let strcookie = document.cookie; //获取cookie字符串
-      // let arrcookie = strcookie.split(";"); //分割
-      // let length = arrcookie.length;
-      // //遍历匹配
-      // for (let i = 0; i < length; i++) {
-      //   let arr = arrcookie[i].split("=");
-      //   let arrname = arr[0].replace(" ", "");
-      //   // 划分为两个
-      //   if (arrname == "user") {
-      //     that.user = arr[1];
-      //     let selectNameDom = document.getElementById("selectNameId");
-      //     console.log(selectNameDom);
-      //     selectNameDom.style.display = "none";
-      //   }
-      //   console.log(arrname == "user", arrname + "：" + arr[1]);
-      // }
-    },
-    registerUsername() {
-      let selectNameDom = document.getElementById("selectNameId");
-      console.log(selectNameDom);
-      selectNameDom.style.display = "none";
-      //
-      this.initWebsocket();
-      this.getRoom(this.room_loc);
-      this.initRoom();
-      // this.cookiePrint(); //打印cookie
+    components: {
+        VueMarkdown
     },
-    clearChat() {
-      // 清空消息
-      this.chatCount = 0;
-      this.chat_info = new Array();
-      // console.log('this.websocket.chat_info',this.websocket.chat_info)
-      // console.log('this.websocket.chat_info.content',this.websocket.chat_info.content)
-      this.websocket.chat_info[this.chatRoomIndex].content = [];
-      // console.log('this.websocket.chat_info.content',this.websocket.chat_info.content)
-      // this.websocket.chat_info=null;
-      // this.websocket.chat_info=new Array()
-    },
-    cookiePrint() {
-      let that = this;
-      console.log("cookie");
-      let strcookie = document.cookie; //获取cookie字符串
-      let arrcookie = strcookie.split(";"); //分割
-      let length = arrcookie.length;
-      //遍历匹配
-      for (let i = 0; i < length; i++) {
-        let arr = arrcookie[i].split("=");
-        let arrname = arr[0].replace(" ", "");
-        // 划分为两个
-        if (arrname == "user") {
-          that.user = arr[1];
+    name: 'Onlinewebsocket',
+    data () {
+        return {
+            ws_flag: false,
+            msg: '连接中',
+            send_info: 'hello world!',
+            room_name: ['DjangoVue'],
+            room_select: '',
+            // baseUrl: "http://localhost:8006/webchat/index/",
+            baseUrl: 'https://yongma16.xyz/api/',
+            // websocketUrl: "/ws_api/",
+            websocketUrl: 'wss://yongma16.xyz/ws-api/',
+            websocket: null,
+            // room 存房间名字，content保存聊天信息的数组
+            chat_info: new Array(),
+            chat_room: null,
+            room_loc: 0,
+            user: '',
+            cookieValue: document.cookie,
+            chatCount: 0,
+            personCount: 0,
+            sendmsg: '',
+            getmsg: '',
+            // 房间索引0
+            chatRoomIndex: 0
+            // msg='连接成功'
         }
-        console.log(arrname == "user", arrname + "：" + arr[1]);
-      }
-    },
-    info_defaultClass: function () {
-      console.log("发送消息的css");
     },
-    room_defaultClass: function () {
-      console.log("选中房间的css");
-    },
-    getRoom: function (room_loc) {
-      // 更新index
-      this.room_loc = room_loc;
-      console.log("获取房间");
-      axios
-        .get(this.baseUrl + "webchat/index/")
-        .then((res) => {
-          console.log("返回", res);
-        })
-        .catch((error) => {
-          console.log("error", error);
-        });
-    },
-    initRoom: function () {
-      // 用户信息
-      // 日期格式化
-      Date.prototype.Format = function (fmt) {
-        var o = {
-          "M+": this.getMonth() + 1, //月份
-          "d+": this.getDate(), //日
-          "H+": this.getHours(), //小时
-          "m+": this.getMinutes(), //分
-          "s+": this.getSeconds(), //秒
-          "q+": Math.floor((this.getMonth() + 3) / 3), //季度
-          S: this.getMilliseconds(), //毫秒
-        };
-        if (/(y+)/.test(fmt))
-          fmt = fmt.replace(
-            RegExp.$1,
-            (this.getFullYear() + "").substr(4 - RegExp.$1.length)
-          );
-        for (var k in o)
-          if (new RegExp("(" + k + ")").test(fmt))
-            fmt = fmt.replace(
-              RegExp.$1,
-              RegExp.$1.length == 1
-                ? o[k]
-                : ("00" + o[k]).substr(("" + o[k]).length)
-            );
-        return fmt;
-      };
-
-      this.room_select = this.room_name[0];
-    },
-    changeRoom: function (roomName, roomLoc) {
-      this.room_loc = roomLoc;
-      this.room_select = roomName;
-      // 新建连接
-      // this.initWebsocket(roomName)
-      console.log("选择房间", roomName);
-      // console.log(that)
+    mounted () {
+    // 判断是否登录
+        this.judeIsLogin()
     },
-    initWebsocket: function (roomName) {
-      try {
-        if (this.websocket) {
-          this.websocket.close();
+    methods: {
+        judeIsLogin () {
+            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)
+            }
+        },
+        registerUsername () {
+            let selectNameDom = document.getElementById('selectNameId')
+            console.log(selectNameDom)
+            selectNameDom.style.display = 'none'
+            //
+            this.initWebsocket()
+            this.getRoom(this.room_loc)
+            this.initRoom()
+            // this.cookiePrint(); //打印cookie
+        },
+        clearChat () {
+            // 清空消息
+            this.chatCount = 0
+            this.chat_info = new Array()
+            this.websocket.chat_info[this.chatRoomIndex].content = []
+        },
+        cookiePrint () {
+            let that = this
+            console.log('cookie')
+            let strcookie = document.cookie // 获取cookie字符串
+            let arrcookie = strcookie.split(';') // 分割
+            let length = arrcookie.length
+            // 遍历匹配
+            for (let i = 0; i < length; i++) {
+                let arr = arrcookie[i].split('=')
+                let arrname = arr[0].replace(' ', '')
+                // 划分为两个
+                if (arrname === 'user') {
+                    that.user = arr[1]
+                }
+                console.log(arrname === 'user', arrname + '：' + arr[1])
+            }
+        },
+        info_defaultClass: function () {
+            console.log('发送消息的css')
+        },
+        room_defaultClass: function () {
+            console.log('选中房间的css')
+        },
+        getRoom: function (room_loc) {
+            // 更新index
+            this.room_loc = room_loc
+            console.log('获取房间')
+            axios
+                .get(this.baseUrl + 'webchat/index/')
+                .then((res) => {
+                    console.log('返回', res)
+                })
+                .catch((error) => {
+                    console.log('error', error)
+                })
+        },
+        initRoom: function () {
+            // 用户信息
+            // 日期格式化
+            Date.prototype.Format = function (fmt) {
+                var o = {
+                    'M+': this.getMonth() + 1, // 月份
+                    'd+': this.getDate(), // 日
+                    'H+': this.getHours(), // 小时
+                    'm+': this.getMinutes(), // 分
+                    's+': this.getSeconds(), // 秒
+                    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
+                    S: this.getMilliseconds() // 毫秒
+                }
+                if (/(y+)/.test(fmt)) {
+                    fmt = fmt.replace(
+                        RegExp.$1,
+                        (this.getFullYear() + '').substr(4 - RegExp.$1.length)
+                    )
+                }
+                for (var k in o) {
+                    if (new RegExp('(' + k + ')').test(fmt)) {
+                        fmt = fmt.replace(
+                            RegExp.$1,
+                            RegExp.$1.length === 1
+                                ? o[k]
+                                : ('00' + o[k]).substr(('' + o[k]).length)
+                        )
+                    }
+                }
+                return fmt
+            }
+
+            this.room_select = this.room_name[0]
+        },
+        changeRoom: function (roomName, roomLoc) {
+            this.room_loc = roomLoc
+            this.room_select = roomName
+            // 新建连接
+            // this.initWebsocket(roomName)
+            console.log('选择房间', roomName)
+            // console.log(that)
+        },
+        initWebsocket: function (roomName) {
+            try {
+                if (this.websocket) {
+                    this.websocket.close()
+                }
+            } catch (e) {
+                console.log('关闭失败！', e)
+            }
+            // 触发+1
+            this.personCount++
+
+            // 默认第一个房间
+            let room = roomName !== undefined ? roomName : this.room_name[0]
+            // 判断房间是否存在，不存在则创建房间
+            let chatRoomIndex = 0
+            try {
+                // 判断房间是否存在
+                let roomFlag = false
+                this.chat_info.map((item, index) => {
+                    if (item.room === roomName) {
+                        // 房间存在
+                        console.log('房间存在', roomName)
+                        roomFlag = true
+                        chatRoomIndex = index
+                    }
+                })
+                if (!roomFlag) {
+                    // 房间不存在，创建
+
+                    let roomObject = {
+                        room: room,
+                        content: []
+                    }
+                    this.chat_info.push(roomObject)
+                    console.log('创建房间', this.chat_info)
+                }
+            } catch (e) {
+                console.log('创建房间出错', e)
+            }
+            this.chatRoomIndex = chatRoomIndex
+            const wsUrl = this.websocketUrl
+            this.websocket = new WebSocket(wsUrl + room + '/') // 连接
+            console.log(this.websocket, '聊天室')
+            this.websocket.onmessage = this.websocketMessage // 函数指向
+            this.websocket.onopen = this.websocketOpen
+            this.websocket.onerror = this.websocketError
+            this.websocket.onclose = this.websocketClose
+            // 保存数据 临时容器  房间号
+            this.websocket.chat_info = JSON.parse(JSON.stringify(this.chat_info))
+            this.websocket.chatRoomIndex = chatRoomIndex
+            console.log('实例websocket', this.websocket)
+        },
+        websocketMessage: function (e) {
+            console.log('聊天信息', JSON.parse(JSON.stringify(e.data)))
+            let res = JSON.parse(e.data)
+            if (res.message.info.isTrusted) {
+                console.log('accsee right!')
+                // 人数记录,只会后加入的
+            }
+            let flag = true
+            if (flag) {
+                //  房间计数
+                this.personCount = res.message.person_count
+                    ? res.message.person_count
+                    : 0
+                let getUser = res.message.user
+                let getinfo = res.message.info.isTrusted
+                    ? `欢迎${getUser}加入聊天室`
+                    : res.message.info
+                this.getmsg = getinfo
+                this.msg = this.sendmsg === this.getmsg ? '连接聊天室成功' : ''
+                let getTime = res.message.create_time
+                let message = {
+                    user: getUser,
+                    message: getinfo,
+                    create_time: getTime
+                }
+                // 添加信息
+
+                this.websocket.chat_info[this.websocket.chatRoomIndex].content.push(
+                    message
+                )
+                // 交换数据
+                this.chat_info = this.websocket.chat_info
+                this.chatCount++
+                console.log('信息', this.chat_info)
+                setTimeout((o) => {
+                    try {
+                        let dom = document.getElementById('idChat')
+                        console.log('滚动前', dom.scrollTop, dom.scrollHeight)
+                        dom.scrollTop = parseInt(dom.scrollHeight)
+                        console.log('滚动后', dom.scrollTop, dom.scrollHeight)
+                        dom.scrollTop = dom.scrollHeight
+                        // document.getElementById('idChat').scrollTop+=20
+                    } catch (e) {
+                        console.log(e)
+                    }
+                }, 100)
+            }
+        },
+        websocketOpen: function (info) {
+            this.websocketSend(info)
+            // this.send_info=''//清空
+        },
+        websocketSend: function (data) {
+            this.sendmsg = data
+            // 名字，消息，时间
+            let sendData = {
+                person_count: this.personCount,
+                user: this.user,
+                info: data,
+                create_time: new Date().Format('yyyy-MM-dd HH:mm:ss')
+            }
+            // this.msg='消息发送中'
+            console.log('消息发送中')
+            let info = JSON.stringify({
+                message: sendData
+            })
+            try {
+                this.websocket.send(info)
+                // this.msg=''
+            } catch (e) {
+                console.log('消息发送失败', e)
+                this.msg = '连接失败'
+            }
+        },
+        websocketError: function () {
+            this.msg = '连接失败'
+            let selectNameDom = document.getElementById('selectNameId')
+            console.log(selectNameDom)
+            selectNameDom.style.display = 'block'
+            window.alert('websocket连接失败！')
+            // this.initWebsocket()// 重连
+        },
+        websocketClose: function (e) {
+            // 人数减一
+            this.personCount = this.personCount > 0 ? this.personCount-- : 0
+            this.msg = '离开'
+            console.log('离开', e)
+            let selectNameDom = document.getElementById('selectNameId')
+            console.log(selectNameDom)
+            selectNameDom.style.display = 'block'
+            // 触发减一
         }
-      } catch (e) {
-        console.log("关闭失败！", e);
-      }
-      // 触发+1
-      this.personCount++;
-
-      // 默认第一个房间
-      let room = roomName != undefined ? roomName : this.room_name[0];
-      // 判断房间是否存在，不存在则创建房间
-      let chatRoomIndex = 0;
-      try {
-        //判断房间是否存在
-        let roomFlag = false;
-        this.chat_info.map((item, index) => {
-          if (item.room == roomName) {
-            // 房间存在
-            console.log("房间存在", roomName);
-            roomFlag = true;
-            chatRoomIndex = index;
-          }
-        });
-        if (!roomFlag) {
-          // 房间不存在，创建
-
-          let roomObject = {
-            room: room,
-            content: [],
-          };
-          this.chat_info.push(roomObject);
-          console.log("创建房间", this.chat_info);
-        }
-      } catch (e) {
-        console.log("创建房间出错", e);
-      }
-      this.chatRoomIndex = chatRoomIndex;
-      const wsUrl = this.websocketUrl;
-      this.websocket = new WebSocket(wsUrl + room + "/"); // 连接
-      console.log(this.websocket, "聊天室");
-      this.websocket.onmessage = this.websocketMessage; // 函数指向
-      this.websocket.onopen = this.websocketOpen;
-      this.websocket.onerror = this.websocketError;
-      this.websocket.onclose = this.websocketClose;
-      // 保存数据 临时容器  房间号
-      this.websocket.chat_info = JSON.parse(JSON.stringify(this.chat_info));
-      this.websocket.chatRoomIndex = chatRoomIndex;
-      console.log("实例websocket", this.websocket);
-    },
-    websocketMessage: function (e) {
-      console.log("聊天信息", JSON.parse(JSON.stringify(e.data)));
-      let res = JSON.parse(e.data);
-      if (res.message.info.isTrusted) {
-        console.log("accsee right!");
-
-        // 人数记录,只会后加入的
-      }
-      if (true) {
-        //  房间计数
-        this.personCount = res.message.person_count
-          ? res.message.person_count
-          : 0;
-        let getUser = res.message.user;
-        let getinfo = res.message.info.isTrusted
-          ? `欢迎${getUser}加入聊天室`
-          : res.message.info;
-        this.getmsg = getinfo;
-        this.msg = this.sendmsg == this.getmsg ? "连接聊天室成功" : "";
-        let getTime = res.message.create_time;
-        let message = {
-          user: getUser,
-          message: getinfo,
-          create_time: getTime,
-        };
-        // 添加信息
-
-        this.websocket.chat_info[this.websocket.chatRoomIndex].content.push(
-          message
-        );
-        // 交换数据
-        this.chat_info = this.websocket.chat_info;
-        this.chatCount++;
-        console.log("信息", this.chat_info);
-        setTimeout((o) => {
-          try {
-            let dom = document.getElementById("idChat");
-            console.log("滚动前", dom.scrollTop, dom.scrollHeight);
-            dom.scrollTop = parseInt(dom.scrollHeight);
-            console.log("滚动后", dom.scrollTop, dom.scrollHeight);
-            dom.scrollTop = dom.scrollHeight;
-            // document.getElementById('idChat').scrollTop+=20
-          } catch (e) {
-            console.log(e);
-          }
-        }, 100);
-      }
-    },
-    websocketOpen: function (info) {
-      this.websocketSend(info);
-      // this.send_info=''//清空
-    },
-    websocketSend: function (data) {
-      this.sendmsg = data;
-      // 名字，消息，时间
-      let sendData = {
-        person_count: this.personCount,
-        user: this.user,
-        info: data,
-        create_time: new Date().Format("yyyy-MM-dd HH:mm:ss"),
-      };
-      // this.msg='消息发送中'
-      console.log("消息发送中");
-      let info = JSON.stringify({
-        message: sendData,
-      });
-      try {
-        this.websocket.send(info);
-        // this.msg=''
-      } catch (e) {
-        console.log("消息发送失败", e);
-        this.msg = "连接失败";
-      }
     },
-    websocketError: function () {
-      this.msg = "连接失败";
-      let selectNameDom = document.getElementById("selectNameId");
-      console.log(selectNameDom);
-      selectNameDom.style.display = "block";
-      window.alert("websocket连接失败！");
-      // this.initWebsocket()// 重连
-    },
-    websocketClose: function (e) {
-      // 人数减一
-      this.personCount = this.personCount > 0 ? this.personCount-- : 0;
-      this.msg = "离开";
-      console.log("离开", e);
-      let selectNameDom = document.getElementById("selectNameId");
-      console.log(selectNameDom);
-      selectNameDom.style.display = "block";
-      // 触发减一
-    },
-  },
-  destroyed() {
-    this.websocketClose(); // 关闭
-  },
-};
+    destroyed () {
+        this.websocketClose() // 关闭
+    }
+}
 </script>
 
 <style scoped>
diff --git a/src/components/Register.vue b/src/components/Register.vue
index c22968f7a64445a4759ac3e0cbd8fb2b55b0858d..ef39cb620e3babead73cd895b4bf3a8c260eb3e2 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -77,114 +77,114 @@
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios'
 export default {
-  name: "Register",
-  data() {
-    const checkName = (rule, value, callback) => {
-      if (!value) {
-        return callback(new Error("账号不能为空"));
-      }
-      setTimeout(() => {
-        // if (!Number.isInteger(value)) {
-        //   callback(new Error('请输入密码'));
-        // } if {
-        if (value.length < 2) {
-          callback(new Error("名字至少两位"));
-        } else {
-          callback();
+    name: 'Register',
+    data () {
+        const checkName = (rule, value, callback) => {
+            if (!value) {
+                return callback(new Error('账号不能为空'))
+            }
+            setTimeout(() => {
+                // if (!Number.isInteger(value)) {
+                //   callback(new Error('请输入密码'));
+                // } if {
+                if (value.length < 2) {
+                    callback(new Error('名字至少两位'))
+                } else {
+                    callback()
+                }
+            }, 1000)
         }
-      }, 1000);
-    };
-    const validatePass = (rule, value, callback) => {
-      if (value === "") {
-        callback(new Error("请输入密码"));
-      } else {
-        if (this.ruleForm.checkPass !== "") {
-          this.$refs.ruleForm.validateField("checkPass");
+        const validatePass = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('密码不能为空'))
+            } else {
+                if (this.ruleForm.checkPass !== '') {
+                    this.$refs.ruleForm.validateField('checkPass')
+                }
+                callback()
+            }
         }
-        callback();
-      }
-    };
-    const validatePass2 = (rule, value, callback) => {
-      if (value === "") {
-        callback(new Error("请再次输入密码"));
-      } else if (value !== this.ruleForm.pass) {
-        callback(new Error("两次输入密码不一致!"));
-      } else {
-        callback();
-      }
-    };
-    return {
-      loading:false,
-      register_success: false,
-      register_error: false,
-      // baseurl: "http://127.0.0.1/",
-      baseurl: "/api/",
-      // baseurl: 'http://yongma16.xyz/',
-      ruleForm: {
-        pass: "",
-        checkPass: "",
-        name: "",
-      },
-      rules: {
-        pass: [{ validator: validatePass, trigger: "blur" }],
-        checkPass: [{ validator: validatePass2, trigger: "blur" }],
-        name: [{ validator: checkName, trigger: "blur" }],
-      },
-    };
-  },
-  methods: {
-    submitForm(formName) {
-      this.$refs[formName].validate((valid) => {
-        const that = this;
-        if (valid) {
-          that.loading=false
-          // 提交数据
-          // alert("yes submit!");
-          that.register_success = false; // 初始化register的状态
-          that.register_error = false;
-          axios
-            .post(that.baseurl + "user/register/", {
-              // 传递的名字和密码
-              name: that.ruleForm.name,
-              password: that.ruleForm.pass,
-            })
-            .then(function (res) {
-              if (res.data.code === 0) {
-                document.cookie = `user=${that.ruleForm.name}`;
-                that.register_error = true;
-                that.$message({
-                  message: "名称重复" + that.ruleForm.name + "!",
-                  type: "error",
-                });
-              } else {
-                that.register_success = true;
-                that.$message({
-                  message: "注册成功，欢迎您，" + that.ruleForm.name + "!",
-                  type: "success",
-                });
-              }
-              that.loading=false
-            })
-            .catch(function (res) {
-              // 获取res中的name
-              that.loading=false
-              that.$message({
-                message: "注册失败" + that.ruleForm.name + "!",
-                type: "error",
-              });
-            });
-        } else {
-          return false;
+        const validatePass2 = (rule, value, callback) => {
+            if (value === '') {
+                callback(new Error('请确认密码'))
+            } else if (value !== this.ruleForm.pass) {
+                callback(new Error('密码不一致!'))
+            } else {
+                callback()
+            }
+        }
+        return {
+            loading: false,
+            register_success: false,
+            register_error: false,
+            // baseurl: "http://127.0.0.1/",
+            baseurl: '/api/',
+            // baseurl: 'http://yongma16.xyz/',
+            ruleForm: {
+                pass: '',
+                checkPass: '',
+                name: ''
+            },
+            rules: {
+                pass: [{ validator: validatePass, trigger: 'blur' }],
+                checkPass: [{ validator: validatePass2, trigger: 'blur' }],
+                name: [{ validator: checkName, trigger: 'blur' }]
+            }
         }
-      });
-    },
-    resetForm(formName) {
-      this.$refs[formName].resetFields();
     },
-  },
-};
+    methods: {
+        submitForm (formName) {
+            this.$refs[formName].validate((valid) => {
+                const that = this
+                if (valid) {
+                    that.loading = false
+                    // 提交数据
+                    // alert("yes submit!");
+                    that.register_success = false // 初始化register的状态
+                    that.register_error = false
+                    axios
+                        .post(that.baseurl + 'user/register/', {
+                            // 传递的名字和密码
+                            name: that.ruleForm.name,
+                            password: that.ruleForm.pass
+                        })
+                        .then(function (res) {
+                            if (res.data.code === 0) {
+                                document.cookie = `user=${that.ruleForm.name}`
+                                that.register_error = true
+                                that.$message({
+                                    message: '名称重复' + that.ruleForm.name + '!',
+                                    type: 'error'
+                                })
+                            } else {
+                                that.register_success = true
+                                that.$message({
+                                    message: '注册成功，欢迎您，' + that.ruleForm.name + '!',
+                                    type: 'success'
+                                })
+                            }
+                            that.loading = false
+                        })
+                        .catch(function (res) {
+                            // 获取res中的name
+                            that.loading = false
+                            that.$message({
+                                message: '注册失败' + that.ruleForm.name + '!',
+                                type: 'error'
+                            })
+                        })
+                } else {
+                    return false
+                }
+            })
+        },
+        resetForm (formName) {
+            this.$refs[formName].resetFields()
+        }
+    }
+}
 </script>
 
 <style scoped>
diff --git a/src/echarts/Map.vue b/src/echarts/Map.vue
index 148b78c7ee1dc8520a18e96a5f49a097e3f59bc2..e1c3b68cbfd974e33cd92ba6f3e61b1fc030eb60 100644
--- a/src/echarts/Map.vue
+++ b/src/echarts/Map.vue
@@ -27,284 +27,286 @@
 </template>
 
 <script>
-import * as echarts from "echarts";
-import axios from "axios";
+import axios from 'axios'
 export default {
-  name: "Map",
-  data() {
-    return {
-      msg: "map组件内层",
-      option: {},
-      // gisData
-      gisData: null,
-      // 热力层
-      airData: [],
-      mapEchart: null,
-      // 飞线层
-      linesCoord: [],
-      // 中心层坐标,默认贵阳市
-      centerLoction: [106.598978, 26.916134],
-      // 气泡层
-      locationGis: [],
-      // 城市
-      focusCity: "贵阳市",
-      clickCity: "未选择",
-      // 坐标
-      focusGeo: null,
-      // 终点选择
-      aimPointData: [],
-    };
-  },
-  watch: {
-    focusCity: function (oldValue, newValue) {
-      console.log(oldValue, newValue);
-      // this.mapEchart.clear()
-      this.initOptionData();
+    name: 'Map',
+    data () {
+        return {
+            msg: 'map组件内层',
+            option: {},
+            // gisData
+            gisData: null,
+            // 热力层
+            airData: [],
+            mapEchart: null,
+            // 飞线层
+            linesCoord: [],
+            // 中心层坐标,默认贵阳市
+            centerLoction: [106.598978, 26.916134],
+            // 气泡层
+            locationGis: [],
+            // 城市
+            focusCity: '贵阳市',
+            clickCity: '未选择',
+            // 坐标
+            focusGeo: null,
+            // 终点选择
+            aimPointData: []
+        }
     },
-  },
-  mounted() {
-    this.initDomDiv();
-    this.initOptionData();
-  },
-  methods: {
-    initDomDiv: function () {
-      let mapDom = document.getElementById("echartMapid");
-      this.mapEchart = echarts.init(mapDom);
-      // 显示加载
-      this.mapEchart.showLoading({
-        text: "初始化",
-      });
-      console.log("dom", this.mapEchart);
-      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);
-      }
+    watch: {
+        focusCity: function (oldValue, newValue) {
+            console.log(oldValue, newValue)
+            // this.mapEchart.clear()
+            this.initOptionData()
+        }
     },
-    refreshEchart: function () {
-      this.mapEchart.clear();
-      this.mapEchart.showLoading({
-        text: "刷新中",
-        // color: 'blue',
-        // opacity: 0.2
-      });
-      this.initOptionData();
+    mounted () {
+        this.initDomDiv()
+        this.initOptionData()
     },
-    initOptionData: function () {
-      var that = this;
-      // 置空
-      that.linesCoord = [];
+    methods: {
+        initDomDiv: function () {
+            const echarts = this.$echarts
+            if (!echarts) return
+            let mapDom = document.getElementById('echartMapid')
+            this.mapEchart = echarts.init(mapDom)
+            // 显示加载
+            this.mapEchart.showLoading({
+                text: '初始化'
+            })
+            console.log('dom', this.mapEchart)
+            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)
+            }
+        },
+        refreshEchart: function () {
+            this.mapEchart.clear()
+            this.mapEchart.showLoading({
+                text: '刷新中'
+                // color: 'blue',
+                // opacity: 0.2
+            })
+            this.initOptionData()
+        },
+        initOptionData: function () {
+            const echarts = this.$echarts
+            if (!echarts) return
+            let that = this
+            // 置空
+            that.linesCoord = []
+            function task1 () {
+                return new Promise((resolve) => {
+                    setTimeout(() => {
+                        console.log('第1个任务geojson获取')
+                        axios
+                            .get('https://yongma16.xyz/static/json/map/guizhou.json')
+                            .then(function (response) {
+                                let res = response.data
+                                that.gisData = res
+                                console.log('贵州数据', res)
+                                let itemData = res.features
+                                let length = itemData.length
+                                that.aimPointData = []
+                                for (let loc = 0; loc < length; ++loc) {
+                                    let name = itemData[loc].properties.name
+                                    that.aimPointData.push({
+                                        value: name
+                                    })
+                                    let center = itemData[loc].properties.center
+                                    // 中心位置
+                                    if (name === that.focusCity) {
+                                        that.centerLoction = center
+                                    }
+                                }
+                                for (let loc = 0; loc < length; ++loc) {
+                                    let name = itemData[loc].properties.name
+                                    let number = (Math.random() * 100).toFixed(2)
+                                    let center = itemData[loc].properties.center
+                                    that.locationGis.push({
+                                        value: center
+                                    })
+                                    // eslint-disable-next-line eqeqeq
+                                    if (name !== that.focusCity) {
+                                        that.linesCoord.push([center, that.centerLoction])
+                                    }
+                                    // eslint-disable-next-line eqeqeq
+                                    if (name && name !== '') {
+                                        let temp = {
+                                            name: `${name}`,
+                                            value: Number(number)
+                                        }
+                                        that.airData.push(temp)
+                                    }
+                                    continue
+                                }
+                                console.log('测试热力处理', that.airData)
+                                echarts.registerMap('geoJson', res)
+                            })
+                        resolve('第一个任务')
+                    }, 1000)
+                }).catch((error) => {
+                    console.log('error', error)
+                })
+            }
 
-      function task1() {
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            console.log("第1个任务geojson获取");
-            axios
-              .get("http://yongma16.xyz/static/json/map/guizhou.json")
-              .then(function (response) {
-                var res = response.data;
-                that.gisData = res;
-                console.log("贵州数据", res);
-                let itemData = res.features;
-                let length = itemData.length;
-                that.aimPointData = [];
-                for (let loc = 0; loc < length; ++loc) {
-                  let name = itemData[loc].properties.name;
-                  that.aimPointData.push({
-                    value: name,
-                  });
-                  let center = itemData[loc].properties.center;
-                  // 中心位置
-                  if (name == that.focusCity) {
-                    that.centerLoction = center;
-                  }
-                }
-                for (let loc = 0; loc < length; ++loc) {
-                  let name = itemData[loc].properties.name;
-                  let number = (Math.random() * 100).toFixed(2);
-                  let center = itemData[loc].properties.center;
-                  that.locationGis.push({
-                    value: center,
-                  });
-                  // eslint-disable-next-line eqeqeq
-                  if (name != that.focusCity) {
-                    that.linesCoord.push([center, that.centerLoction]);
-                  }
-                  // eslint-disable-next-line eqeqeq
-                  if (name && name != "") {
-                    let temp = {
-                      name: `${name}`,
-                      value: Number(number),
-                    };
-                    that.airData.push(temp);
-                  }
-                  continue;
-                }
-                console.log("测试热力处理", that.airData);
-                echarts.registerMap("geoJson", res);
-              });
-            resolve("第一个任务");
-          }, 1000);
-        }).catch((error) => {
-          console.log("error", error);
-        });
-      }
-
-      function task2() {
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            console.log("第2个任务option配置");
-            that.option = {
-              title: {
-                text: "贵州省地图",
-                subtext: "geoJson",
-              },
-              geo: {
-                // 经纬度中心
-                center: that.centerLoction,
-                type: "map",
-                map: "geoJson", // 这里的值要和上面registerMap的第一个参数一致
-                roam: true, // 拖拽
-                nameProperty: "name",
-                // 悬浮标签
-                label: {
-                  type: "map",
-                  map: "geoJson", // 这里的值要和上面registerMap的第一个参数一致
-                  // roam: false, // 拖拽
-                  nameProperty: "name",
-                  show: true,
-                  color: "#fff",
-                  backgroundColor: "#546de5",
-                  align: "center",
-                  fontSize: 10,
-                  width: (function () {
-                    // let n = parseInt(Math.random() * 10)
-                    return 110;
-                  })(),
-                  height: 50,
-                  shadowColor: "rgba(0,0,0,.7)",
-                  borderRadius: 10,
-                },
-                zoom: 1.2,
-              },
-              series: [
-                // 坐标点的热力数据
-                {
-                  data: that.airData,
-                  geoIndex: 0, // 将热力的数据和第0个geo配置关联在一起
-                  type: "map",
-                },
-                {
-                  type: "effectScatter",
-                  // 渲染显示
-                  zlevel: 2,
-                  showEffectOn: "render",
-                  data: that.locationGis, // 配置散点的坐标数据
-                  coordinateSystem: "geo", // 指明散点使用的坐标系统
-                  rippleEffect: {
-                    // 缩放
-                    scale: 4,
-                    // 涟漪的颜色
-                    color: "#cf6a87",
-                    // 波纹数量
-                    number: 2,
-                    // 扩散方式 stroke(线条) fill（区域覆盖）
-                    brushType: "fill",
-                  },
-                  // 形状
-                  symbol: "circle",
-                },
-                // 飞线层
-                {
-                  // name: '贵阳市飞线',
-                  type: "lines",
-                  coordinateSystem: "geo",
-                  polyline: true,
-                  zlevel: 3,
-                  effect: {
-                    show: true,
-                    period: 5,
-                    trailLength: 0, // 拖尾
-                    symbol: "arrow", // 箭头
-                    color: "red", // 样式颜色
-                    symbolSize: 5,
-                  },
-                  lineStyle: {
-                    color: "#000",
-                    width: 2,
-                    type: "solid",
-                    dashOffset: 0,
-                    // cap: butt,
-                    // join: bevel
-                  },
-                  // 飞线层数据
-                  data: that.linesCoord,
-                },
-              ],
-              visualMap: {
-                min: 0,
-                max: 100,
-                inRange: {
-                  color: ["white", "#0984e3"], // 控制颜色渐变的范围
-                },
-                calculable: false, // 出现滑块
-              },
-            };
-            resolve("2");
-          }, 1000);
-        });
-      }
-      async function allTasks() {
-        await task1(); // 获取数据geojson
-        await task2(); // option
-      }
-      allTasks().then(function () {
-        // console.log('热力值', hotValue)
-        console.log("series", that.option.series);
-        that.initMapGis(that.option);
-      });
-    },
-    initMapGis: function (optionParams) {
-      var that = this;
-      try {
-        // 基于准备好的dom，初始化echarts实例
-        console.log("echarts_map渲染");
-        // console.log("测试data_echart",this.data,that.weather_title,this.weather_low);
+            function task2 () {
+                return new Promise((resolve) => {
+                    setTimeout(() => {
+                        console.log('第2个任务option配置')
+                        that.option = {
+                            title: {
+                                text: '贵州省地图',
+                                subtext: 'geoJson'
+                            },
+                            geo: {
+                                // 经纬度中心
+                                center: that.centerLoction,
+                                type: 'map',
+                                map: 'geoJson', // 这里的值要和上面registerMap的第一个参数一致
+                                roam: true, // 拖拽
+                                nameProperty: 'name',
+                                // 悬浮标签
+                                label: {
+                                    type: 'map',
+                                    map: 'geoJson', // 这里的值要和上面registerMap的第一个参数一致
+                                    // roam: false, // 拖拽
+                                    nameProperty: 'name',
+                                    show: true,
+                                    color: '#fff',
+                                    backgroundColor: '#546de5',
+                                    align: 'center',
+                                    fontSize: 10,
+                                    width: (function () {
+                                        // let n = parseInt(Math.random() * 10)
+                                        return 110
+                                    })(),
+                                    height: 50,
+                                    shadowColor: 'rgba(0,0,0,.7)',
+                                    borderRadius: 10
+                                },
+                                zoom: 1.2
+                            },
+                            series: [
+                                // 坐标点的热力数据
+                                {
+                                    data: that.airData,
+                                    geoIndex: 0, // 将热力的数据和第0个geo配置关联在一起
+                                    type: 'map'
+                                },
+                                {
+                                    type: 'effectScatter',
+                                    // 渲染显示
+                                    zlevel: 2,
+                                    showEffectOn: 'render',
+                                    data: that.locationGis, // 配置散点的坐标数据
+                                    coordinateSystem: 'geo', // 指明散点使用的坐标系统
+                                    rippleEffect: {
+                                        // 缩放
+                                        scale: 4,
+                                        // 涟漪的颜色
+                                        color: '#cf6a87',
+                                        // 波纹数量
+                                        number: 2,
+                                        // 扩散方式 stroke(线条) fill（区域覆盖）
+                                        brushType: 'fill'
+                                    },
+                                    // 形状
+                                    symbol: 'circle'
+                                },
+                                // 飞线层
+                                {
+                                    // name: '贵阳市飞线',
+                                    type: 'lines',
+                                    coordinateSystem: 'geo',
+                                    polyline: true,
+                                    zlevel: 3,
+                                    effect: {
+                                        show: true,
+                                        period: 5,
+                                        trailLength: 0, // 拖尾
+                                        symbol: 'arrow', // 箭头
+                                        color: 'red', // 样式颜色
+                                        symbolSize: 5
+                                    },
+                                    lineStyle: {
+                                        color: '#000',
+                                        width: 2,
+                                        type: 'solid',
+                                        dashOffset: 0
+                                        // cap: butt,
+                                        // join: bevel
+                                    },
+                                    // 飞线层数据
+                                    data: that.linesCoord
+                                }
+                            ],
+                            visualMap: {
+                                min: 0,
+                                max: 100,
+                                inRange: {
+                                    color: ['white', '#0984e3'] // 控制颜色渐变的范围
+                                },
+                                calculable: false // 出现滑块
+                            }
+                        }
+                        resolve('2')
+                    }, 1000)
+                })
+            }
+            async function allTasks () {
+                await task1() // 获取数据geojson
+                await task2() // option
+            }
+            allTasks().then(function () {
+                // console.log('热力值', hotValue)
+                console.log('series', that.option.series)
+                that.initMapGis(that.option)
+            })
+        },
+        initMapGis: function (optionParams) {
+            let that = this
+            try {
+                // 基于准备好的dom，初始化echarts实例
+                console.log('echarts_map渲染')
+                // console.log("测试data_echart",this.data,that.weather_title,this.weather_low);
 
-        let mapEchart = that.mapEchart;
-        // 显示加载
-        // mapEchart.showLoading()
-        console.log("配置之前", optionParams);
-        mapEchart.setOption(optionParams);
-        // 关闭加载
-        mapEchart.hideLoading();
-        // 重绘
-        window.onresize = function () {
-          mapEchart.resize();
-        };
-        // 点击事件传递参数
-        mapEchart.on("click", function (params) {
-          let name = "贵阳市";
-          if (params.name && params.name != "") {
-            name = params.name;
-          }
-          console.log("点击参数", params);
-          console.log("选择行政区", name);
-          // window.alert(name)
-          that.clickCity = name;
-        });
-      } catch (e) {
-        console.log(e);
-      }
-    },
-  },
-};
+                let mapEchart = that.mapEchart
+                // 显示加载
+                // mapEchart.showLoading()
+                console.log('配置之前', optionParams)
+                mapEchart.setOption(optionParams)
+                // 关闭加载
+                mapEchart.hideLoading()
+                // 重绘
+                window.onresize = function () {
+                    mapEchart.resize()
+                }
+                // 点击事件传递参数
+                mapEchart.on('click', function (params) {
+                    let name = '贵阳市'
+                    if (params.name && params.name !== '') {
+                        name = params.name
+                    }
+                    console.log('点击参数', params)
+                    console.log('选择行政区', name)
+                    // window.alert(name)
+                    that.clickCity = name
+                })
+            } catch (e) {
+                console.log(e)
+            }
+        }
+    }
+}
 </script>
 
 <style scoped>
diff --git a/src/importEchartsComponents.js b/src/importEchartsComponents.js
new file mode 100644
index 0000000000000000000000000000000000000000..28840c329569dca5a8e30a247db2a610e738b121
--- /dev/null
+++ b/src/importEchartsComponents.js
@@ -0,0 +1,39 @@
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from 'echarts/core'
+// 引入柱状图图表，图表后缀都为 Chart
+import { BarChart, LineChart, MapChart, GraphChart, PieChart} from 'echarts/charts'
+// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+import {
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    DatasetComponent,
+    TransformComponent
+} from 'echarts/components'
+// 标签自动布局，全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from 'echarts/renderers'
+
+import Vue from 'vue'
+
+// 注册必须的组件
+echarts.use([
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    DatasetComponent,
+    TransformComponent,
+    BarChart,
+    LineChart,
+    MapChart,
+    GraphChart,
+    PieChart,
+    LabelLayout,
+    UniversalTransition,
+    CanvasRenderer
+])
+const importEchartsComponents = () => {
+    Vue.prototype.$echarts = echarts// 绑定echarts
+}
+export default importEchartsComponents
diff --git a/src/importElement.js b/src/importElement.js
new file mode 100644
index 0000000000000000000000000000000000000000..9231bf8e1fc7501b03589f814c39bf77be59f240
--- /dev/null
+++ b/src/importElement.js
@@ -0,0 +1,53 @@
+import Vue from 'vue'
+import {
+    Container,
+    Header,
+    Aside,
+    Main,
+    Footer,
+    Message,
+    Form,
+    Button,
+    Table,
+    TableColumn,
+    Drawer,
+    Input,
+    Card,
+    Menu,
+    Submenu,
+    MenuItem,
+    MenuItemGroup,
+    FormItem,
+    Avatar,
+    Link,
+    Notification,
+    Loading
+} from 'element-ui'
+
+const importElementComponents = () => {
+    Vue.use(Container)
+    Vue.use(Header)
+    Vue.use(Main)
+    Vue.use(Aside)
+    Vue.use(Footer)
+    Vue.use(Form)
+    Vue.use(FormItem)
+    Vue.use(Button)
+    Vue.use(Table)
+    Vue.use(TableColumn)
+    Vue.use(Drawer)
+    Vue.use(Input)
+    Vue.use(Card)
+    Vue.use(MenuItem)
+    Vue.use(Menu)
+    Vue.use(Submenu)
+    Vue.use(MenuItemGroup)
+    Vue.use(Avatar)
+    Vue.use(Link)
+    Vue.use(Notification)
+    Vue.use(Loading)
+    Vue.prototype.$message = Message
+    Vue.prototype.$notify = Notification
+}
+
+export default importElementComponents
diff --git a/src/main.js b/src/main.js
index c4845ba8978281ad8a7bff8785eccf71c73147fe..70b42377d810288fc564e2bebd14013810de1e70 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,18 +3,23 @@
 import Vue from 'vue'
 import './plugins/axios'
 import App from './App'
-import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import cookies from 'vue-cookies'
 import 'github-markdown-css/github-markdown.css'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/github.css'
-import * as echarts from 'echarts'
 import router from './router'
+import importElementComponents from './importElement'
+
+import importEchartsComponents from './importEchartsComponents'
+
+// 按需引入elementui
+importElementComponents()
+
+//按需引入echarts
+importEchartsComponents()
 
 Vue.config.productionTip = false
-Vue.prototype.$echarts = echarts
-Vue.use(ElementUI)
 Vue.use(cookies)
 
 // Vue.use(hljs)
@@ -27,15 +32,12 @@ Vue.directive('highlight', function(el) {
 
 // Vue.prototype.http = axios;
 Vue.prototype.$cookies = cookies
-    // 添加cookies的生命周期
-console.log(Vue.prototype.$cookies)
-Vue.prototype.$cookies.set("user_session", "null")
 
-console.log('测试', Vue.prototype.$cookies)
+Vue.prototype.$cookies.set("user_session", "null")
 
 new Vue({
     el: '#app',
     router,
     components: { App },
     template: '<App/>'
-})
\ No newline at end of file
+})
diff --git a/src/router/index.js b/src/router/index.js
index 9d3bfb79d3e776b3dd296c6d13cdc457afd26f33..11db651bd80f6fd54cbf782ec71a2fc4065091f5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,156 +1,120 @@
-import Vue from "vue";
+import Vue from 'vue'
 
-import Nprogress from "nprogress";
-import "nprogress/nprogress.css";
-import { getToken } from "@/utils/auth";
-import { isEmpty } from "@/utils";
-import VueRouter from "vue-router";
+import Nprogress from 'nprogress'
+import 'nprogress/nprogress.css'
+// import { getToken } from '@/utils/auth'
+import { isEmpty } from '@/utils'
+import VueRouter from 'vue-router'
 // import Router from 'vue-router'
-import store from "@/store";
+import store from '@/store'
 // store
-import Article from "@/components/Article";
-import Login from "@/components/Login";
-import Register from "@/components/Register";
-import Onlinewebsocket from "@/components/Onlinewebsocket";
-import Home from "@/components/Home";
-import Bilicom from "@/components/Bilicom";
-import Mavoneditor from "@/components/Mavoneditor";
-import Loading from "@/components/Loading";
+import Article from '@/components/Article'
+import Login from '@/components/Login'
+import Register from '@/components/Register'
+import Onlinewebsocket from '@/components/Onlinewebsocket'
+import Home from '@/components/Home'
+import Bilicom from '@/components/Bilicom'
+import Mavoneditor from '@/components/Mavoneditor'
 
-import GrilShow from "@/components/GrilShow";
-import Csslearn from "@/components/Csslearn";
+import GrilShow from '@/components/GrilShow'
+import Csslearn from '@/components/Csslearn'
 
-Vue.use(VueRouter);
+Vue.use(VueRouter)
 const defaultRoutes = [
-  {
-    path: "/",
-    name: "Article",
-    component: Article,
-  },
-  {
-    path: "/login",
-    name: "Login",
-    component: Login,
-  },
-  {
-    path: "/register",
-    name: "Register",
-    component: Register,
-  },
-  {
-    path: "/home",
-    name: "Home",
-    component: Home,
-  },
-  {
-    path: "/onlinewebsocket",
-    name: "Onlinewebsocket",
-    component: Onlinewebsocket,
-  },
-  {
-    path: "/bilicom",
-    name: "Bilicom",
-    component: Bilicom,
-  },
-  {
-    path: "/mavoneditor",
-    name: "Mavoneditor",
-    component: Mavoneditor,
-  },
-  {
-    path: "/loading",
-    name: "loading",
-    component: Loading,
-  },
-  {
-    path: "/gril",
-    name: "grilshow",
-    component: GrilShow,
-  },
-  {
-    path: "/css",
-    name: "css",
-    component: Csslearn,
-  },
-  // {
-  //     path: '/register',
-  //     name: 'Register',
-  //     component: () =>
-  //         import ('../components/Register.vue')
-  // },
-  // {
-  //     path: '/home',
-  //     name: 'Home',
-  //     component: () =>
-  //         import ('../components/Home.vue')
-  // },
-  // {
-  //     path: '/onlinewebsocket',
-  //     name: 'Onlinewebsocket',
-  //     component: () =>
-  //         import ('../components/Onlinewebsocket.vue')
-  // },
-  // {
-  //     path: '/mavoneditor',
-  //     name: 'Mavoneditor',
-  //     component: () =>
-  //         import ('../components/Mavoneditor.vue')
-  // },
-  // {
-  //     path: '/bilicom',
-  //     name: 'Bilicom',
-  //     component: () =>
-  //         import ('../components/Bilicom.vue')
-  // }
-];
+    {
+        path: '/',
+        name: 'Article',
+        component: Article
+    },
+    {
+        path: '/login',
+        name: 'Login',
+        component: Login
+    },
+    {
+        path: '/register',
+        name: 'Register',
+        component: Register
+    },
+    {
+        path: '/home',
+        name: 'Home',
+        component: Home
+    },
+    {
+        path: '/onlinewebsocket',
+        name: 'Onlinewebsocket',
+        component: Onlinewebsocket
+    },
+    {
+        path: '/bilicom',
+        name: 'Bilicom',
+        component: Bilicom
+    },
+    {
+        path: '/mavoneditor',
+        name: 'Mavoneditor',
+        component: Mavoneditor
+    },
+    {
+        path: '/gril',
+        name: 'grilshow',
+        component: GrilShow
+    },
+    {
+        path: '/css',
+        name: 'css',
+        component: Csslearn
+    }
+]
 
 let routes = [
-  ...defaultRoutes,
-  // ...modulesRoutes,
-  // ...errorRoutes,
-  // ...dashboardRouters
-];
-const originalPush = VueRouter.prototype.push;
-VueRouter.prototype.push = function push(location) {
-  return originalPush.call(this, location).catch((err) => err);
-};
+    ...defaultRoutes
+    // ...modulesRoutes,
+    // ...errorRoutes,
+    // ...dashboardRouters
+]
+const originalPush = VueRouter.prototype.push
+VueRouter.prototype.push = function push (location) {
+    return originalPush.call(this, location).catch((err) => err)
+}
 const router = new VueRouter({
-  routes,
-});
+    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,
-    pwd = yma16siteUserInfo.password;
+    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();
-    } else {
-      next();
+    let hasToken = {
+        name: name,
+        password: pwd
     }
-  } else {
+    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();
-  }
-});
+        next()
+    }
+})
 
 router.afterEach((to, from) => {
-  Nprogress.done();
-});
+    Nprogress.done()
+})
 
-export default router;
+export default router
diff --git a/src/style/common/compponents/base.css b/src/style/common/compponents/base.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/style/common/theme/blue.css b/src/style/common/theme/blue.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/style/common/theme/default.css b/src/style/common/theme/default.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/style/main.css b/src/style/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/weather/EchartWeather.vue b/src/weather/EchartWeather.vue
index 408746bb1f2c0aa7954b573f25d8bf3408ef9332..a32b773489f786738b1d8c9cb8b2c48296a9f9da 100644
--- a/src/weather/EchartWeather.vue
+++ b/src/weather/EchartWeather.vue
@@ -15,227 +15,227 @@
 </template>
 
 <script>
-import axios from "axios";
-import * as echarts from "echarts";
+import axios from 'axios'
 export default {
-  name: "EchartWeather",
-  data() {
-    return {
-      msg: "贵阳天气",
-      baseurl: "/api/",
-      // baseurl: 'http://yongma16.xyz/',
-      // baseurl: 'api/article/weather/',
-      tabPosition: "left",
-      weather_title: [],
-      weather_high: [],
-      weather_low: [],
-      weather_discribe: [],
-      weather_windem: [],
-      weather_windwl: [],
-      tableData: [],
-    };
-  },
-  mounted() {
-    this.initWeatherLine();
-  },
-  methods: {
-    initWeatherLine() {
-      let that = this;
-      async function waitGetWeatherData() {
-        await that.getWeatherData();
-        await that.weatherInint();
-      }
-      waitGetWeatherData().then((o) => {
-        console.log(o);
-      }); // 同步
+    name: 'EchartWeather',
+    data () {
+        return {
+            msg: '贵阳天气',
+            baseurl: '/api/',
+            // baseurl: 'http://yongma16.xyz/',
+            // baseurl: 'api/article/weather/',
+            tabPosition: 'left',
+            weather_title: [],
+            weather_high: [],
+            weather_low: [],
+            weather_discribe: [],
+            weather_windem: [],
+            weather_windwl: [],
+            tableData: []
+        }
     },
-    getWeatherData() {
-      let that = this;
-      return new Promise((resolve) => {
-        setTimeout(function () {
-          axios
-            .get(that.baseurl + "article/weather/")
-            .then((res) => {
-              console.log("天气接口返回", res);
-              let resdata = res.data;
-              let weather = resdata.weather;
-              let title = weather.title;
-              let high = weather.high;
-              let low = weather.low;
-              let discribe = weather.discribe;
-              let windem = weather.windem;
-              let windwl = weather.windwl;
-              that.tableData = [];
-              title.map((item) => {
-                that.weather_title.push(item);
-              });
-              high.map((o) => {
-                let temp = parseInt(o);
-                that.weather_high.push(temp);
-              });
-              low.map((o) => {
-                let temp = parseInt(o);
-                that.weather_low.push(temp);
-              });
-              that.weather_windem = Array.from(...[windem]);
-              that.weather_windwl = Array.from(...[windwl]);
-              discribe.map((item) => {
-                that.weather_discribe.push(item);
-              });
-              let weatherLength = title.length;
-              for (let loc = 0; loc < weatherLength; ++loc) {
-                let discribeText = {
-                  date: "",
-                  discrible: "",
-                  temperature: "",
-                };
-                discribeText.date = that.weather_title[loc];
-                discribeText.discrible = that.weather_discribe[loc];
-                discribeText.temperature =
-                  that.weather_low[loc] + "/" + that.weather_high[loc] + "°C";
-                discribeText.windem = that.weather_windem[loc];
-                discribeText.windwl = that.weather_windwl[loc];
-                that.tableData.push(discribeText);
-              }
-              console.log(that.tableData, "that.tableData");
-            })
-            .catch((r) => {
-              console.log("r", r);
-            });
-        }, 1000);
-        resolve("获取后端天气成功的promise");
-      });
+    mounted () {
+        this.initWeatherLine()
     },
-    weatherInint() {
-      // 基于准备好的dom，初始化echarts实例
-      console.log("echarts!");
-      var that = this; // 传递
-      return new Promise((resolve) => {
-        setTimeout(function () {
-          let highData = Array.from(...[that.weather_high]);
-          let lowData = Array.from(...[that.weather_low]);
-          let titleData = Array.from(...[that.weather_title]);
-          console.log("绘制折线图数据", titleData, highData, lowData);
-          var dom = document.getElementById("echart_weather");
-          // console.log('dom', dom)
-          var myChart = echarts.init(dom);
-          // 绘制图表
-          var option = {
-            title: {
-              text: that.msg,
-              subtext: "气温°C",
-            },
-            tooltip: {
-              trigger: "axis",
-            },
-            // legend: {
-            //     data: ['最高', '最低']
-            // },
-            toolbox: {
-              show: true,
-              feature: {
-                dataZoom: {
-                  yAxisIndex: "none",
-                },
-                dataView: {
-                  readOnly: false,
-                },
-                magicType: {
-                  type: ["bar", "line"],
-                },
-                restore: {},
-                saveAsImage: {},
-              },
-            },
-            xAxis: {
-              type: "category",
-              boundaryGap: true,
-              data: titleData,
-            },
-            yAxis: {
-              type: "value",
-              axisLabel: {
-                formatter: "{value}",
-              },
-            },
-            series: [
-              {
-                name: "Highest",
-                type: "bar",
-                data: highData,
-                markPoint: {
-                  data: [
-                    {
-                      type: "max",
-                      name: "Max",
-                    },
-                    {
-                      type: "min",
-                      name: "Min",
-                    },
-                  ],
-                },
-                markLine: {
-                  data: [
-                    {
-                      type: "average",
-                      name: "avg",
-                    },
-                  ],
-                },
-              },
-              {
-                name: "Lowest",
-                type: "line",
-                data: lowData,
-                markPoint: {
-                  data: [
-                    {
-                      name: "最低",
-                      value: -2,
-                      xAxis: 1,
-                      yAxis: -1.5,
-                    },
-                  ],
-                },
-                markLine: {
-                  data: [
-                    {
-                      type: "average",
-                      name: "Avg",
-                    },
-                    [
-                      {
-                        symbol: "circle",
-                        x: "75%",
-                        yAxis: "max",
-                      },
-                      {
-                        symbol: "circle",
-                        label: {
-                          position: "start",
-                          formatter: "Max",
+    methods: {
+        initWeatherLine () {
+            let that = this
+            async function waitGetWeatherData () {
+                await that.getWeatherData()
+                await that.weatherInint()
+            }
+            waitGetWeatherData().then((o) => {
+                console.log(o)
+            }) // 同步
+        },
+        getWeatherData () {
+            let that = this
+            return new Promise((resolve) => {
+                setTimeout(function () {
+                    axios
+                        .get(that.baseurl + 'article/weather/')
+                        .then((res) => {
+                            console.log('天气接口返回', res)
+                            let resdata = res.data
+                            let weather = resdata.weather
+                            let title = weather.title
+                            let high = weather.high
+                            let low = weather.low
+                            let discribe = weather.discribe
+                            let windem = weather.windem
+                            let windwl = weather.windwl
+                            that.tableData = []
+                            title.map((item) => {
+                                that.weather_title.push(item)
+                            })
+                            high.map((o) => {
+                                let temp = parseInt(o)
+                                that.weather_high.push(temp)
+                            })
+                            low.map((o) => {
+                                let temp = parseInt(o)
+                                that.weather_low.push(temp)
+                            })
+                            that.weather_windem = Array.from(...[windem])
+                            that.weather_windwl = Array.from(...[windwl])
+                            discribe.map((item) => {
+                                that.weather_discribe.push(item)
+                            })
+                            let weatherLength = title.length
+                            for (let loc = 0; loc < weatherLength; ++loc) {
+                                let discribeText = {
+                                    date: '',
+                                    discrible: '',
+                                    temperature: ''
+                                }
+                                discribeText.date = that.weather_title[loc]
+                                discribeText.discrible = that.weather_discribe[loc]
+                                discribeText.temperature =
+                  that.weather_low[loc] + '/' + that.weather_high[loc] + '°C'
+                                discribeText.windem = that.weather_windem[loc]
+                                discribeText.windwl = that.weather_windwl[loc]
+                                that.tableData.push(discribeText)
+                            }
+                            console.log(that.tableData, 'that.tableData')
+                        })
+                        .catch((r) => {
+                            console.log('r', r)
+                        })
+                }, 1000)
+                resolve('获取后端天气成功的promise')
+            })
+        },
+        weatherInint () {
+            // 基于准备好的dom，初始化echarts实例
+            const echarts = this.$echarts
+            if (!echarts) return
+            const that = this // 传递
+            return new Promise((resolve) => {
+                setTimeout(function () {
+                    let highData = Array.from(...[that.weather_high])
+                    let lowData = Array.from(...[that.weather_low])
+                    let titleData = Array.from(...[that.weather_title])
+                    console.log('绘制折线图数据', titleData, highData, lowData)
+                    let dom = document.getElementById('echart_weather')
+                    // console.log('dom', dom)
+                    let myChart = echarts.init(dom)
+                    // 绘制图表
+                    let option = {
+                        title: {
+                            text: that.msg,
+                            subtext: '气温°C'
                         },
-                        type: "max",
-                        name: "最高点",
-                      },
-                    ],
-                  ],
-                },
-              },
-            ],
-          };
-          myChart.setOption(option); // 画折线图
-          window.onresize = function () {
-            myChart.resize();
-          };
-        }, 3000);
-        resolve("绘制折线图Promise");
-      });
-      // dom = null; //销毁
-    },
-  },
-};
+                        tooltip: {
+                            trigger: 'axis'
+                        },
+                        // legend: {
+                        //     data: ['最高', '最低']
+                        // },
+                        toolbox: {
+                            show: true,
+                            feature: {
+                                dataZoom: {
+                                    yAxisIndex: 'none'
+                                },
+                                dataView: {
+                                    readOnly: false
+                                },
+                                magicType: {
+                                    type: ['bar', 'line']
+                                },
+                                restore: {},
+                                saveAsImage: {}
+                            }
+                        },
+                        xAxis: {
+                            type: 'category',
+                            boundaryGap: true,
+                            data: titleData
+                        },
+                        yAxis: {
+                            type: 'value',
+                            axisLabel: {
+                                formatter: '{value}'
+                            }
+                        },
+                        series: [
+                            {
+                                name: 'Highest',
+                                type: 'bar',
+                                data: highData,
+                                markPoint: {
+                                    data: [
+                                        {
+                                            type: 'max',
+                                            name: 'Max'
+                                        },
+                                        {
+                                            type: 'min',
+                                            name: 'Min'
+                                        }
+                                    ]
+                                },
+                                markLine: {
+                                    data: [
+                                        {
+                                            type: 'average',
+                                            name: 'avg'
+                                        }
+                                    ]
+                                }
+                            },
+                            {
+                                name: 'Lowest',
+                                type: 'line',
+                                data: lowData,
+                                markPoint: {
+                                    data: [
+                                        {
+                                            name: '最低',
+                                            value: -2,
+                                            xAxis: 1,
+                                            yAxis: -1.5
+                                        }
+                                    ]
+                                },
+                                markLine: {
+                                    data: [
+                                        {
+                                            type: 'average',
+                                            name: 'Avg'
+                                        },
+                                        [
+                                            {
+                                                symbol: 'circle',
+                                                x: '75%',
+                                                yAxis: 'max'
+                                            },
+                                            {
+                                                symbol: 'circle',
+                                                label: {
+                                                    position: 'start',
+                                                    formatter: 'Max'
+                                                },
+                                                type: 'max',
+                                                name: '最高点'
+                                            }
+                                        ]
+                                    ]
+                                }
+                            }
+                        ]
+                    }
+                    myChart.setOption(option) // 画折线图
+                    window.onresize = function () {
+                        myChart.resize()
+                    }
+                }, 3000)
+                resolve('绘制折线图Promise')
+            })
+            // dom = null; //销毁
+        }
+    }
+}
 </script>
 
 <style scoped>