From b607b0350b5f772250f38e83d0f6f2791a1b0b33 Mon Sep 17 00:00:00 2001
From: yma16 <1432448610@qq.com>
Date: Sun, 17 Apr 2022 17:20:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=89=88=E6=9C=AC=E8=BF=AD=E4=BB=A3ip->?=
 =?UTF-8?q?=E6=94=B9=E5=8F=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/index.js                    |    2 +-
 src/App.vue                        |  653 +++++++------
 src/comment/ArticleComment.vue     |    3 +-
 src/components/Article.vue         | 1251 +++++++++++++------------
 src/components/Bilicom.vue         |   10 +-
 src/components/Csslearn.vue        |    7 +-
 src/components/Login.vue           |  186 ++--
 src/components/Mavoneditor.vue     |   98 +-
 src/components/Onlinewebsocket.vue | 1384 ++++++++++++++--------------
 src/components/Register.vue        |  235 +++--
 src/weather/EchartWeather.vue      |  485 +++++-----
 11 files changed, 2280 insertions(+), 2034 deletions(-)

diff --git a/config/index.js b/config/index.js
index 7c58c0f..324e89c 100644
--- a/config/index.js
+++ b/config/index.js
@@ -82,4 +82,4 @@ module.exports = {
         // Set to `true` or `false` to always turn it on or off
         bundleAnalyzerReport: process.env.npm_config_report
     }
-}
\ No newline at end of file
+}
diff --git a/src/App.vue b/src/App.vue
index b0a584b..ae349c2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,212 +1,261 @@
 <template>
-<div id="app">
+  <div id="app">
     <el-container>
-        <el-aside v-if="navigate_flag ? false : true">
-            <router-link to="/">
-                <svg class="icon" aria-hidden="true" style="width: auto; height: auto; padding-top: 5%">
-                    <use xlink:href="#iconshejitouxiangai"></use>
-                </svg>
-            </router-link>
-            <el-menu default-active="" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
-                <el-submenu index="1">
-                    <template slot="title">
-                        <i class="el-icon-user-solid"></i>
-                        <span slot="title">开发人员</span>
-                    </template>
-                    <el-menu-item-group>
-                        <el-submenu index="1-1">
-                            <template slot="title">yma16</template>
-                            <el-menu-item index="1-1-1">stay hungry</el-menu-item>
-                            <a @click="toecharts">
-                                <el-menu-item index="1-1-2">echarts</el-menu-item>
-                            </a>
-                            <a @click="toadmin">
-                                <el-menu-item index="1-1-3">superuser</el-menu-item>
-                            </a>
-                        </el-submenu>
-                        <el-submenu index="1-2">
-                            <template slot="title">location</template>
-                            <el-menu-item index="1-2-1" @click="jumpRouter('Home')">guiyang</el-menu-item>
-                        </el-submenu>
-                    </el-menu-item-group>
-                </el-submenu>
-
-                <el-submenu index="2">
-                    <template slot="title">
-                        <i class="el-icon-setting"></i>管理后台</template>
-                    <el-menu-item-group>
-                        <el-submenu index="2-1">
-                            <template slot="title">登录</template>
-                        </el-submenu>
-                        <el-submenu index="2-2">
-                            <template slot="title">注册</template>
-                        </el-submenu>
-                    </el-menu-item-group>
-                </el-submenu>
-
-                <el-submenu index="3">
-                    <template slot="title">
-                        <i class="el-icon-chat-line-round" :click="onlinewebsocket"></i>线上聊天</template>
-                </el-submenu>
-            </el-menu>
-        </el-aside>
-
-        <el-container>
-            <el-header>
-                <a v-on:click="changeNavigate" style="cursor: pointer;"><i class="el-icon-s-promotion"></i>管理员</a>
-                <i style="font-weight: bold; font-style: normal;" v-if="chat_flag">&nbsp;&nbsp;在线聊天室</i>
-                <div style="float:right;overflow:hidden;align-height:60px;">
-
-                    <a href="https://codechina.csdn.net/qq_38870145/myblogvue"><img src="@/assets/img/code-china.png" style="cursor: pointer;height:24px;"></a>
-                    <a href="https://github.com/yongma16"><img src="@/assets/img/github-fill.png" style="cursor: pointer;height:24px;"></a>
-
-                </div>
-
-                <!-- <a v-on:click="changeNavigate"><i class="el-icon-menu"></i></a> -->
-            </el-header>
-
-            <el-main id="mainappid" class="mainappclass">
-                <!-- 路由 -->
-                <router-view />
-            </el-main>
-
-            <el-footer>
-                <div class="footer_font">
-                    <div style="float:left;">
-                    </div>
-                    Copyright &copy;2021 yongma16.xyz&nbsp;&nbsp;&nbsp;浏览量:{{readCount}}
-                </div>
-            </el-footer>
-        </el-container>
+      <el-aside v-if="navigate_flag ? false : true">
+        <router-link to="/">
+          <svg
+            class="icon"
+            aria-hidden="true"
+            style="width: auto; height: auto; padding-top: 5%"
+          >
+            <use xlink:href="#iconshejitouxiangai"></use>
+          </svg>
+        </router-link>
+        <el-menu
+          default-active=""
+          class="el-menu-vertical-demo"
+          @open="handleOpen"
+          @close="handleClose"
+        >
+          <el-submenu index="1">
+            <template slot="title">
+              <i class="el-icon-user-solid"></i>
+              <span slot="title">开发人员</span>
+            </template>
+            <el-menu-item-group>
+              <el-submenu index="1-1">
+                <template slot="title">yma16</template>
+                <el-menu-item index="1-1-1">stay hungry</el-menu-item>
+                <a @click="toecharts">
+                  <el-menu-item index="1-1-2">echarts</el-menu-item>
+                </a>
+                <a @click="toadmin">
+                  <el-menu-item index="1-1-3">superuser</el-menu-item>
+                </a>
+              </el-submenu>
+              <el-submenu index="1-2">
+                <template slot="title">location</template>
+                <el-menu-item index="1-2-1" @click="jumpRouter('Home')"
+                  >guiyang</el-menu-item
+                >
+              </el-submenu>
+            </el-menu-item-group>
+          </el-submenu>
+
+          <el-submenu index="2">
+            <template slot="title">
+              <i class="el-icon-setting"></i>管理后台</template
+            >
+            <el-menu-item-group>
+              <el-submenu index="2-1">
+                <template slot="title">登录</template>
+              </el-submenu>
+              <el-submenu index="2-2">
+                <template slot="title">注册</template>
+              </el-submenu>
+            </el-menu-item-group>
+          </el-submenu>
+
+          <el-submenu index="3">
+            <template slot="title">
+              <i class="el-icon-chat-line-round" :click="onlinewebsocket"></i
+              >线上聊天</template
+            >
+          </el-submenu>
+        </el-menu>
+      </el-aside>
+
+      <el-container>
+        <el-header>
+          <a v-on:click="changeNavigate" style="cursor: pointer"
+            ><i class="el-icon-s-promotion"></i>&nbsp;&nbsp;<span
+              style="font-weight: bold"
+              >{{ authSlogan }}</span
+            ></a
+          >
+          <i style="font-weight: bold; font-style: normal" v-if="chat_flag"
+            >&nbsp;&nbsp;在线聊天室</i
+          >
+          <div style="float: right; overflow: hidden; align-height: 60px">
+            <a href="https://codechina.csdn.net/qq_38870145/myblogvue"
+              ><img
+                src="@/assets/img/code-china.png"
+                style="cursor: pointer; height: 24px"
+            /></a>
+            <a href="https://github.com/yongma16"
+              ><img
+                src="@/assets/img/github-fill.png"
+                style="cursor: pointer; height: 24px"
+            /></a>
+          </div>
+
+          <!-- <a v-on:click="changeNavigate"><i class="el-icon-menu"></i></a> -->
+        </el-header>
+
+        <el-main id="mainappid" class="mainappclass">
+          <!-- 路由 -->
+          <router-view />
+        </el-main>
+
+        <el-footer>
+          <div class="footer_font">
+            <div style="float: left"></div>
+            Copyright &copy;2022 yongma16.xyz&nbsp;&nbsp;&nbsp;浏览量:{{
+              readCount
+            }}
+          </div>
+        </el-footer>
+      </el-container>
     </el-container>
     <!-- <img src="./assets/logo.png"> -->
-</div>
+  </div>
 </template>
 
 <script>
-import axios from 'axios'
+import axios from "axios";
 export default {
-    name: 'App',
-    data() {
-        return {
-            chat_flag: false,
-            msg: 'yma16',
-            navigate_flag: true,
-            value: new Date(),
-            // baseurl: 'http://localhost:8006/',
-            baseurl: 'http://yongma16.xyz/',
-            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
-        }
+  name: "App",
+  data() {
+    return {
+      authSlogan: "Yma16",
+      chat_flag: false,
+      msg: "yma16",
+      navigate_flag: true,
+      value: new Date(),
+      baseurl: "http://114.116.52.53/",
+      // baseurl: 'http://yongma16.xyz/',
+      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: {
+    addReadCountFun: function () {
+      console.log("addfun");
+      let clientip = "未知";
+      try {
+        console.log("ip待定");
+      } catch (e) {
+        console.log(e);
+      }
+      console.log("最终ip", clientip);
+      axios
+        .post(this.baseurl + "count/add/", {
+          ip: clientip,
+        })
+        .then((res) => {
+          console.log(res);
+        })
+        .catch((e) => {
+          console.log(e);
+        });
     },
-    mounted() {
-        this.addReadCountFun()
-        this.readCountFun()
+    readCountFun: function () {
+      let that = this;
+      axios
+        .get(that.baseurl + "count/get/")
+        .then((res) => {
+          console.log(res, "count");
+          this.readCount = res.data.num;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
     },
-    methods: {
-        addReadCountFun: function () {
-            console.log('addfun')
-            let clientip = '未知'
-            try {
-                console.log('ip待定')
-            } catch (e) {
-                console.log(e)
-            }
-            console.log('最终ip', clientip)
-            axios.post(this.baseurl + 'count/add/', {
-                'ip': clientip
-            }).then((res) => {
-                console.log(res)
-            }).catch((e) => {
-                console.log(e)
-            })
-        },
-        readCountFun: function () {
-            let that = this
-            axios.get(that.baseurl + 'count/get/').then((res) => {
-                console.log(res, 'count')
-                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.loginAction() // 调用跳转
-            }
-            if (key === '2-2') {
-                this.registerAction() // 调用跳转
-            }
-        },
-        handleClose(key, keyPath) {
-            console.log(key, keyPath)
-            console.log('关闭')
-            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) => {
-                console.log(error)
-            })
-        },
-        toecharts: function () {
-            // console.log(this.$router);
-            this.$router.push({
-                path: '/bilicom'
-            }).catch((error) => {
-                console.log(error)
-            })
-        },
-        toadmin: 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)
-            })
-        }
-    }
-}
+    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.log(key, keyPath);
+      console.log("关闭");
+      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) => {
+          console.log(error);
+        });
+    },
+    toecharts: function () {
+      // console.log(this.$router);
+      this.$router
+        .push({
+          path: "/bilicom",
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    toadmin: 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);
+        });
+    },
+  },
+};
 </script>
 
 <style>
@@ -214,180 +263,178 @@ html,
 body,
 #app,
 .el-container {
-    margin: 0px;
-    padding: 0%;
-    border: 0px;
-    height: 100%;
-    /* background: url(../static/utils/fx_background/image/gg.jpg) center top no-repeat; */
-    /* background: url(/image/snow/gg.jpg) center top no-repeat; */
+  margin: 0px;
+  padding: 0%;
+  border: 0px;
+  height: 100%;
+  /* background: url(../static/utils/fx_background/image/gg.jpg) center top no-repeat; */
+  /* background: url(/image/snow/gg.jpg) center top no-repeat; */
 }
 
 body {
-    background-color: #2f214b;
-    /* background: url(/image/snow/gg.jpg) center top no-repeat; */
+  background-color: #2f214b;
+  /* background: url(/image/snow/gg.jpg) center top no-repeat; */
 }
 
 .el-header {
-    background-color: #d4beb4;
-    /* color: rgb(48, 76, 77); */
-    text-align: left;
-    line-height: 60px;
-    /* background: url(/image/snow/gg.jpg) center top no-repeat; */
+  background-color: #d4beb4;
+  /* color: rgb(48, 76, 77); */
+  text-align: left;
+  line-height: 60px;
+  /* background: url(/image/snow/gg.jpg) center top no-repeat; */
 }
 
 .footer_font {
-    position: relative;
-    top: 25%;
-    /* height: 100%; */
-    margin: 0;
-    padding: 0;
+  position: relative;
+  top: 25%;
+  /* height: 100%; */
+  margin: 0;
+  padding: 0;
 }
 
 .el-footer {
-
-    height: 100%;
-    background-color: #bba8a4;
-    color: #333;
-    text-align: center;
-    /* line-height: 60px; */
-    box-sizing: border-box;
+  height: 100%;
+  background-color: #bba8a4;
+  color: #333;
+  text-align: center;
+  /* line-height: 60px; */
+  box-sizing: border-box;
 }
 
 .el-aside {
-    background-color: #be9a90;
-    color: #333;
-    text-align: center;
-    line-height: 80px;
-    width: 80px;
-    min-height: 60px;
+  background-color: #be9a90;
+  color: #333;
+  text-align: center;
+  line-height: 80px;
+  width: 80px;
+  min-height: 60px;
 }
 
 .activeleft {
-    transform: translateX(-100vw);
-    /* 左移100 */
+  transform: translateX(-100vw);
+  /* 左移100 */
 }
 
 .activeright {
-    transform: translateX(100vw);
-    /* 右移100 */
+  transform: translateX(100vw);
+  /* 右移100 */
 }
 
 .el-main {
-    /* background-color: #e9eef3; */
-    text-align: left;
-    opacity: 1;
-    /* background: url(../static/utils/fx_background/image/gg.jpg) center top no-repeat; */
-    margin: 0;
-    padding: 0;
+  /* background-color: #e9eef3; */
+  text-align: left;
+  opacity: 1;
+  /* background: url(../static/utils/fx_background/image/gg.jpg) center top no-repeat; */
+  margin: 0;
+  padding: 0;
 }
 
 .mainappclass {
-    margin: 0;
-    padding: 0;
-    overflow: auto;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
 }
 
 .mainappclass::-webkit-scrollbar {
-    display: none;
-    ;
+  display: none;
 }
 
-body>.el-container {
-    color: #475669;
-    opacity: 0.5;
-    padding: 0%;
-    margin-bottom: 40px;
+body > .el-container {
+  color: #475669;
+  opacity: 0.5;
+  padding: 0%;
+  margin-bottom: 40px;
 }
 
 .el-container:nth-child(5) .el-aside,
 .el-container:nth-child(6) .el-aside {
-    line-height: 260px;
+  line-height: 260px;
 }
 
 .el-container:nth-child(7) .el-aside {
-    line-height: 320px;
+  line-height: 320px;
 }
 
 .el-carousel__item h3 {
-    color: #475669;
-    font-size: 14px;
-    opacity: 0.5;
-    line-height: 150px;
-    margin: 0;
+  color: #475669;
+  font-size: 14px;
+  opacity: 0.5;
+  line-height: 150px;
+  margin: 0;
 }
 
 .el-carousel__item:nth-child(2n) {
-    /* background-image: url("/image/navigation/previewFix.jpg"); */
-    transition-duration: 2s;
+  /* background-image: url("/image/navigation/previewFix.jpg"); */
+  transition-duration: 2s;
 }
 
 .el-carousel__item:nth-child(2n + 1) {
-    /* background-image: url("/image/navigation/original.jpg"); */
-    transition-duration: 2s;
+  /* background-image: url("/image/navigation/original.jpg"); */
+  transition-duration: 2s;
 }
 
 .footerclass {
-    position: relative;
-    display: flex;
+  position: relative;
+  display: flex;
 }
 
 .midfooter {
-    position: relative;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%, -50%);
+  position: relative;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%, -50%);
 }
 
 .heart {
-    width: 30px;
-    height: 30px;
-    position: relative;
-    background: pink;
-    transform: rotate(45deg);
-    animation-name: change;
-    animation-duration: 2s;
-    animation-iteration-count: infinite;
+  width: 30px;
+  height: 30px;
+  position: relative;
+  background: pink;
+  transform: rotate(45deg);
+  animation-name: change;
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
 }
 
 .heart::before {
-    content: '';
-    width: 30px;
-    height: 30px;
-    background: pink;
-    border-radius: 50%;
-    position: absolute;
-    transform: translateX(-15px);
+  content: "";
+  width: 30px;
+  height: 30px;
+  background: pink;
+  border-radius: 50%;
+  position: absolute;
+  transform: translateX(-15px);
 }
 
 .heart::after {
-    content: '';
-    width: 30px;
-    height: 30px;
-    background: pink;
-    border-radius: 50%;
-    position: absolute;
-    /* 定位 */
-    transform: translate(0px, -15px);
-    /* transform: translateX(-100px); */
+  content: "";
+  width: 30px;
+  height: 30px;
+  background: pink;
+  border-radius: 50%;
+  position: absolute;
+  /* 定位 */
+  transform: translate(0px, -15px);
+  /* transform: translateX(-100px); */
 }
 
 @keyframes change {
-    0% {
-        transform: rotate(45deg) scale(0.25);
-    }
+  0% {
+    transform: rotate(45deg) scale(0.25);
+  }
 
-    50% {
-        transform: rotate(45deg) scale(0.5);
-    }
+  50% {
+    transform: rotate(45deg) scale(0.5);
+  }
 
-    100% {
-        transform: rotate(45deg) scale(0.25);
-    }
+  100% {
+    transform: rotate(45deg) scale(0.25);
+  }
 }
 
 @keyframes backdiv {
-    50% {
-        background: #ffe6f2;
-    }
+  50% {
+    background: #ffe6f2;
+  }
 }
 </style>
diff --git a/src/comment/ArticleComment.vue b/src/comment/ArticleComment.vue
index 080798d..08c2840 100644
--- a/src/comment/ArticleComment.vue
+++ b/src/comment/ArticleComment.vue
@@ -45,7 +45,8 @@ export default {
     return {
       noneMsg: "还没人评论>_<",
       msg: "评论区",
-      baseurl: "http://yongma16.xyz/comment/",
+      baseurl: "http://114.116.52.53/comment/",
+      // baseurl: "http://yongma16.xyz/comment/",
       userImg: "",
       username: "匿名",
       contentRes: [],
diff --git a/src/components/Article.vue b/src/components/Article.vue
index 0ca028a..2dfeb00 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -1,726 +1,821 @@
 /* eslint-disable vue/no-duplicate-attributes */
 <template>
-<div class="article" style="text-align: left; with: 100%; height: 100%">
+  <div class="article" style="text-align: left; with: 100%; height: 100%">
     <!-- 左侧 -->
     <div class="leftclass">
-
-        <el-card shadow="always" cellpadding="1px" style="position: static; line-height: 20px">
-            <div class="article_box">
-                <h1>{{ slogan }}</h1>
-                <ul v-for="(item, index) in md_title" :key="item" class="ul_style">
-                    <div v-bind:class="[{ li_active:index==article_loc },li_errorClass]">
-                        <li @click="getArticles(index)">{{ item }}</li>
-                    </div>
-                </ul>
-            </div>
-            <!-- 分页 -->
-            <div class="block">
-                <!-- <span class="demonstration">完整功能</span> -->
-                <el-pagination :current-page="currentPage" :page-sizes="pageArray" :page-size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
-                </el-pagination>
+      <el-card
+        shadow="always"
+        cellpadding="1px"
+        style="position: static; line-height: 20px"
+      >
+        <div class="article_box">
+          <h1>{{ slogan }}</h1>
+          <ul v-for="(item, index) in md_title" :key="item" class="ul_style">
+            <div
+              v-bind:class="[
+                { li_active: index == article_loc },
+                li_errorClass,
+              ]"
+            >
+              <li @click="getArticles(index)">{{ item }}</li>
             </div>
-        </el-card>
-
-        <!-- 评论 -->
-        <el-card cellpadding="1px" shadow="always" style="position: static; margin-top: 2%">
-            <h1>{{ commmentSlogan }}</h1>
-            <ArticleComment v-bind:articleId="postcomment.articleId" ref="commentRef">
-
-            </ArticleComment>
-
-        </el-card>
-
-        <!-- 挑战榜 -->
-        <el-card class="challenge_title1" cellpadding="1px" shadow="always" style="position: static; margin-top: 2%">
-            <h1>{{ day_challenge }}</h1>
-            <ul v-for="(item, index) in challenge_data" :key="item" class="ul_style">
-                <div v-bind:class="[{ li_active:index==challenge_loc },li_errorClass]">
-                    <li @click="cssPage(index)">{{item}}</li>
-                </div>
-            </ul>
-        </el-card>
-
-        <!-- 爬虫天气接口 -->
-        <el-card class="weather_class1" cellpadding="1px" shadow="always" style="position: static; margin-top: 2%">
-            <div style="positon:relative;width:100%;height:100%;">
-                <EchartWeather>
-                </EchartWeather>
-            </div>
-        </el-card>
-
-        <!-- csdn头像 -->
-        <el-card class="user_img1" style="
-            position: static;
-            margin: 2% auto auto auto;
-            line-height: 10px;
-            text-align: center;
-          "><a href="https://blog.csdn.net/qq_38870145">
-                <img class="image" src="@/assets/img/csdn.jpg" /></a>
-        </el-card>
+          </ul>
+        </div>
+        <!-- 分页 -->
+        <div class="block">
+          <!-- <span class="demonstration">完整功能</span> -->
+          <el-pagination
+            :current-page="currentPage"
+            :page-sizes="pageArray"
+            :page-size="pageSize"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+      </el-card>
+
+      <!-- 评论 -->
+      <el-card
+        cellpadding="1px"
+        shadow="always"
+        style="position: static; margin-top: 2%"
+      >
+        <h1>{{ commmentSlogan }}</h1>
+        <ArticleComment
+          v-bind:articleId="postcomment.articleId"
+          ref="commentRef"
+        >
+        </ArticleComment>
+      </el-card>
+
+      <!-- 挑战榜 -->
+      <el-card
+        class="challenge_title1"
+        cellpadding="1px"
+        shadow="always"
+        style="position: static; margin-top: 2%"
+      >
+        <h1>{{ day_challenge }}</h1>
+        <ul
+          v-for="(item, index) in challenge_data"
+          :key="item"
+          class="ul_style"
+        >
+          <div
+            v-bind:class="[
+              { li_active: index == challenge_loc },
+              li_errorClass,
+            ]"
+          >
+            <li @click="cssPage(index)">{{ item }}</li>
+          </div>
+        </ul>
+      </el-card>
+
+      <!-- 爬虫天气接口 -->
+      <el-card
+        class="weather_class1"
+        cellpadding="1px"
+        shadow="always"
+        style="position: static; margin-top: 2%"
+      >
+        <div style="positon: relative; width: 100%; height: 100%">
+          <EchartWeather> </EchartWeather>
+        </div>
+      </el-card>
+
+      <!-- csdn头像 -->
+      <el-card
+        class="user_img1"
+        style="
+          position: static;
+          margin: 2% auto auto auto;
+          line-height: 10px;
+          text-align: center;
+        "
+        ><a href="https://blog.csdn.net/qq_38870145">
+          <img class="image" src="@/assets/img/csdn.jpg"
+        /></a>
+      </el-card>
     </div>
     <!-- 中间 markdown-->
     <div class="midclass">
-        <a name="home" id="hometitle" style="transition: 1s;"></a>
-        <el-card shadow="hover" style="line-height: 10px">
-            <div class="block" style="line-height: 20px">
-                <h1>{{ the_title }}</h1>
-                <div class="markdown-body" style="text-align: left">
-                    <VueMarkdown :source="md_data[index_page]" v-highlight style="width: 100%; text-align: left"></VueMarkdown>
-                </div>
-            </div>
-        </el-card>
-
-        <div class="commitCard">
-            <!--  -->
+      <a name="home" id="hometitle" style="transition: 1s"></a>
+      <el-card shadow="hover" style="line-height: 10px">
+        <div class="block" style="line-height: 20px">
+          <h1>{{ the_title }}</h1>
+          <div class="markdown-body" style="text-align: left">
+            <VueMarkdown
+              :source="md_data[index_page]"
+              v-highlight
+              style="width: 100%; text-align: left"
+            ></VueMarkdown>
+          </div>
         </div>
-        <!-- 挑战榜 -->
-        <el-card class="challenge_title2" cellpadding="1px" shadow="always" style="position: static; margin-top: 2%">
-            <h1>{{ day_challenge }}</h1>
-            <ul v-for="(item, index) in challenge_data" :key="item" class="ul_style">
-                <div v-bind:class="[{ li_active:index==challenge_loc },li_errorClass]">
-                    <li @click="cssPage(index)">{{item}}</li>
-                </div>
-            </ul>
-        </el-card>
-
-        <!-- 爬虫天气接口 -->
-        <!-- <el-card class="weather_class2"
+      </el-card>
+
+      <div class="commitCard">
+        <!--  -->
+      </div>
+      <!-- 挑战榜 -->
+      <el-card
+        class="challenge_title2"
+        cellpadding="1px"
+        shadow="always"
+        style="position: static; margin-top: 2%"
+      >
+        <h1>{{ day_challenge }}</h1>
+        <ul
+          v-for="(item, index) in challenge_data"
+          :key="item"
+          class="ul_style"
+        >
+          <div
+            v-bind:class="[
+              { li_active: index == challenge_loc },
+              li_errorClass,
+            ]"
+          >
+            <li @click="cssPage(index)">{{ item }}</li>
+          </div>
+        </ul>
+      </el-card>
+
+      <!-- 爬虫天气接口 -->
+      <!-- <el-card class="weather_class2"
           cellpadding="1px"
           shadow="always"
           style="position: static; margin-top: 2%"
         >
 
         </el-card> -->
-        <!-- csdn头像 -->
-        <el-card class="user_img2" style="
-            position: static;
-            margin: 2% auto auto auto;
-            line-height: 10px;
-            text-align: center;
-          "><a href="https://blog.csdn.net/qq_38870145">
-                <img class="image" src="@/assets/img/csdn.jpg" /></a>
-        </el-card>
+      <!-- csdn头像 -->
+      <el-card
+        class="user_img2"
+        style="
+          position: static;
+          margin: 2% auto auto auto;
+          line-height: 10px;
+          text-align: center;
+        "
+        ><a href="https://blog.csdn.net/qq_38870145">
+          <img class="image" src="@/assets/img/csdn.jpg"
+        /></a>
+      </el-card>
     </div>
     <!-- 上滑滚动图标 -->
     <div class="rightclass">
-        <div class="righticon">
-            <el-card shadow="never" style="
+      <div class="righticon">
+        <el-card
+          shadow="never"
+          style="
             align-content: center;
             background-color: rgba(0, 0, 0, 0);
             border: rgba(0, 0, 0, 0);
-          ">
-                <div id="topiconid">
-                    <el-button @click="toTop" type="info" icon="el-icon-top" style="transition: 1s;background:rgb(255, 94, 0);border:none;color:#fff;" circle></el-button>
-                </div>
-                <br /><br />
-                <div>
-                    <el-button type="info" icon="el-icon-message" circle @click="open_message" style="background:rgb(255, 94, 0);border:none;">
-                    </el-button>
-                </div>
-                <br /><br />
-            </el-card>
-        </div>
+          "
+        >
+          <div id="topiconid">
+            <el-button
+              @click="toTop"
+              type="info"
+              icon="el-icon-top"
+              style="
+                transition: 1s;
+                background: rgb(255, 94, 0);
+                border: none;
+                color: #fff;
+              "
+              circle
+            ></el-button>
+          </div>
+          <br /><br />
+          <div>
+            <el-button
+              type="info"
+              icon="el-icon-message"
+              circle
+              @click="open_message"
+              style="background: rgb(255, 94, 0); border: none"
+            >
+            </el-button>
+          </div>
+          <br /><br />
+        </el-card>
+      </div>
     </div>
-
-</div>
+  </div>
 </template>
 
 <script>
-import VueMarkdown from 'vue-markdown'
-import ArticleComment from '@/comment/ArticleComment'
-import EchartWeather from '@/weather/EchartWeather'
-import axios from 'axios'
+import VueMarkdown from "vue-markdown";
+import ArticleComment from "@/comment/ArticleComment";
+import EchartWeather from "@/weather/EchartWeather";
+import axios from "axios";
 export default {
-    components: {
-        VueMarkdown, //显示markdown的组件
-        ArticleComment, //子组件评论
-        EchartWeather //天气
+  components: {
+    VueMarkdown, //显示markdown的组件
+    ArticleComment, //子组件评论
+    EchartWeather, //天气
+  },
+  name: "Article",
+  data() {
+    return {
+      // baseurl: '/api/',
+      baseurl: "http://114.116.52.53/",
+      // baseurl: "http://yongma16.xyz/",
+      msg: "内容",
+      commmentSlogan: "评论区",
+      day_challenge: "训练营",
+      challenge_data: [
+        "css挑战",
+        "websocket聊天",
+        "echarts地图配置",
+        "vue3测试平台",
+        "更新中",
+      ],
+      md_data: [],
+      md_title: [],
+      the_title: "",
+      sear_page: 0,
+      index_page: 0,
+      data: ["threejs加载模型"],
+      slogan: "记忆碎片",
+      tabPosition: "left",
+      weather_title: [],
+      weather_high: [],
+      weather_low: [],
+      toTopIsShow: false,
+      article_loc: 0,
+      challenge_loc: -1,
+      topshow: false,
+      userImg: "",
+      username: "匿名",
+      articleCommit: "评论区",
+      // 分页实现 page1 page2 指向数组
+      pageAnalys: {},
+      currentPage: 1,
+      splitLength: 6, //划分条数
+      total: 0,
+      pageSize: 4,
+      pageArray: [6, 8, 10],
+      postcomment: {
+        articleId: 1,
+        articleCommit: null,
+      },
+      articleId: [], //文章的id
+    };
+  },
+  watch: {
+    topshow: function (newvalue, oldvalue) {
+      console.log("侦听");
+      console.log("new", newvalue, "old", oldvalue);
+      if (newvalue === true) {
+        document.getElementById("topiconid").style.display = "none";
+      } else {
+        document.getElementById("topiconid").style.display = "block";
+      }
     },
-    name: 'Article',
-    data() {
-        return {
-
-            // baseurl: '/api/',
-            baseurl: 'http://yongma16.xyz/',
-            msg: '内容',
-            commmentSlogan: '评论区',
-            day_challenge: '每日一练',
-            challenge_data: ['css挑战', 'websocket聊天', 'echarts地图配置', '表情包搜索', '更新中'],
-            md_data: [],
-            md_title: [],
-            the_title: '',
-            sear_page: 0,
-            index_page: 0,
-            data: ['threejs加载模型'],
-            slogan: 'markdown笔记',
-            tabPosition: 'left',
-            weather_title: [],
-            weather_high: [],
-            weather_low: [],
-            toTopIsShow: false,
-            article_loc: 0,
-            challenge_loc: -1,
-            topshow: false,
-            userImg: '',
-            username: '匿名',
-            articleCommit: '评论区',
-            // 分页实现 page1 page2 指向数组
-            pageAnalys: {},
-            currentPage: 1,
-            splitLength: 6, //划分条数
-            total: 0,
-            pageSize: 4,
-            pageArray: [6, 8, 10],
-            postcomment: {
-                articleId: 1,
-                articleCommit: null,
-            },
-            articleId: [] //文章的id
-        }
+  },
+  beforeDestroy() {
+    window.removeEventListener("onload", this.topvisible());
+  },
+  mounted() {
+    this.initPageSpliteFun();
+    window.addEventListener("onload", this.topvisible());
+  },
+  methods: {
+    initPageSpliteFun() {
+      this.splitLength = this.pageArray[0];
+    },
+    handleSizeChange(val) {
+      // 转到第一页md_title
+      let that = this;
+      console.log(`每页 ${val} 条`);
+      that.pageAnalysFun(that.pageAnalys.allTitle, val); //触发修改
     },
-    watch: {
-        topshow: function (newvalue, oldvalue) {
-            console.log('侦听')
-            console.log('new', newvalue, 'old', oldvalue)
-            if (newvalue === true) {
-                document.getElementById('topiconid').style.display = 'none'
-            } else {
-                document.getElementById('topiconid').style.display = 'block'
-            }
+    handleCurrentChange(val) {
+      let that = this;
+      console.log(that.currentPage, "currentPage", that.pageAnalys.allTitle);
+      //触发md_title的修改
+      that.currentPage = val;
+      that.pageAnalysFun(that.pageAnalys.allTitle); //触发修改
+      console.log(`当前页: ${val}`);
+    },
+    pageAnalysFun(allTitleArray, selectListLength) {
+      let that = this;
+      that.total = allTitleArray.length; //总数
+      let splitLength = that.splitLength;
+      if (!selectListLength) {
+        that.splitLength = that.splitLength;
+      } else {
+        this.currentPage = 1;
+        that.splitLength = selectListLength; //划分长度
+      }
+      splitLength = that.splitLength;
+      console.log("一页几条", splitLength);
+      let splitNum = Math.ceil(that.total / splitLength); //向上取整
+      that.pageAnalys.childNum = splitNum; //子数组个数
+      that.pageAnalys.allTitle = allTitleArray; //所有标题
+      that.pageAnalys.titleArray = new Array(); //子数组个数
+      var locSplit = 0;
+      var locLength = splitLength; //每一页的条数
+      while (splitNum--) {
+        // 循环获取子数组
+        if (splitNum >= 1) {
+          let childArray = [];
+          for (
+            let temp = locSplit;
+            temp < locLength && temp < that.total;
+            ++temp, ++locSplit
+          ) {
+            childArray.push(that.pageAnalys.allTitle[temp]);
+          }
+          that.pageAnalys.titleArray.push(childArray);
+          locLength += splitLength; //分割数组长度后移
+        } else {
+          // 最后一个数组
+          let childArray = [];
+          for (let temp = locSplit; temp < that.total; ++temp) {
+            childArray.push(that.pageAnalys.allTitle[temp]);
+          }
+          that.pageAnalys.titleArray.push(childArray);
+          break;
         }
+      }
+      try {
+        that.md_title = that.pageAnalys.titleArray[this.currentPage - 1];
+      } catch (e) {
+        console.log(e);
+      }
+      console.log("总数", that.pageAnalys.titleArray);
+      console.log("分页数据", that.pageAnalys.titleArray[this.currentPage - 1]);
+      console.log("当前页", that.md_title);
     },
-    beforeDestroy() {
-        window.removeEventListener('onload', this.topvisible())
+    increment: function () {
+      this.$store.commit("increment");
+      console.log(this.$store.state.count);
     },
-    mounted() {
-        this.initPageSpliteFun();
-        window.addEventListener('onload', this.topvisible());
+    topvisible: function () {
+      let dom = document.getElementById("hometitle");
+      this.topshow = this.elementIsVisibleInViewport(dom);
+      // console.log('this.topshow', this.topshow)
+      setTimeout(this.topvisible);
     },
-    methods: {
-        initPageSpliteFun() {
-            this.splitLength = this.pageArray[0]
-        },
-        handleSizeChange(val) {
-            // 转到第一页md_title
-            let that = this
-            console.log(`每页 ${val} 条`)
-            that.pageAnalysFun(that.pageAnalys.allTitle, val) //触发修改
-        },
-        handleCurrentChange(val) {
-            let that = this
-            console.log(that.currentPage, 'currentPage', that.pageAnalys.allTitle)
-            //触发md_title的修改
-            that.currentPage = val
-            that.pageAnalysFun(that.pageAnalys.allTitle) //触发修改
-            console.log(`当前页: ${val}`)
-        },
-        pageAnalysFun(allTitleArray, selectListLength) {
-            let that = this
-            that.total = allTitleArray.length; //总数
-            let splitLength = that.splitLength
-            if (!selectListLength) {
-                that.splitLength = that.splitLength
-            } else {
-                this.currentPage = 1
-                that.splitLength = selectListLength //划分长度
-            }
-            splitLength = that.splitLength
-            console.log('一页几条', splitLength)
-            let splitNum = Math.ceil(that.total / splitLength) //向上取整
-            that.pageAnalys.childNum = splitNum; //子数组个数
-            that.pageAnalys.allTitle = allTitleArray; //所有标题
-            that.pageAnalys.titleArray = new Array(); //子数组个数
-            var locSplit = 0
-            var locLength = splitLength; //每一页的条数
-            while (splitNum--) {
-                // 循环获取子数组
-                if (splitNum >= 1) {
-                    let childArray = []
-                    for (let temp = locSplit; temp < locLength && temp < that.total; ++temp, ++locSplit) {
-                        childArray.push(that.pageAnalys.allTitle[temp])
-                    }
-                    that.pageAnalys.titleArray.push(childArray)
-                    locLength += splitLength; //分割数组长度后移
-                } else {
-                    // 最后一个数组
-                    let childArray = []
-                    for (let temp = locSplit; temp < that.total; ++temp) {
-                        childArray.push(that.pageAnalys.allTitle[temp])
-                    }
-                    that.pageAnalys.titleArray.push(childArray)
-                    break;
-                }
-            }
-            try {
-                that.md_title = that.pageAnalys.titleArray[this.currentPage - 1]
-            } catch (e) {
-                console.log(e)
-            }
-            console.log('总数', that.pageAnalys.titleArray)
-            console.log('分页数据', that.pageAnalys.titleArray[this.currentPage - 1])
-            console.log('当前页', that.md_title)
-        },
-        increment: function () {
-            this.$store.commit('increment')
-            console.log(this.$store.state.count)
-        },
-        topvisible: function () {
-            let dom = document.getElementById('hometitle')
-            this.topshow = this.elementIsVisibleInViewport(dom)
-            // console.log('this.topshow', this.topshow)
-            setTimeout(this.topvisible)
-        },
-        elementIsVisibleInViewport: function (el, partiallyVisible = false) {
-            const {
-                top,
-                left,
-                bottom,
-                right
-            } = el.getBoundingClientRect()
-
-            return partiallyVisible ?
-                ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
-                ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) :
-                top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth
-        },
-        li_errorClass: function () {
-            console.log('选择文章')
-        },
-        cssPage: function (index) {
-            this.challenge_loc = index
-            let name = this.challenge_data[index]
-            switch (name) {
-                case 'css挑战':
-                    this.$router.push({
-                        path: '/css'
-                    }).catch((error) => {
-                        console.log(error)
-                    })
-                    break;
-                case 'echarts地图配置':
-                    this.$router.push({
-                        path: '/home'
-                    }).catch((error) => {
-                        console.log(error)
-                    })
-                    break;
-                case 'websocket聊天':
-                    this.$router.push({
-                        path: '/onlinewebsocket'
-                    }).catch((error) => {
-                        console.log(error)
-                    })
-                    break;
-                case '表情包搜索':
-                    window.open('http://yongma16.xyz/emoji/index/')
-                    break;
-                default:
-                    console.log('case name没找到')
-                    break;
-            }
-        },
-        open_message: function () {
-            this.$notify({
-                title: '欢迎合作',
-                message: '邮箱：1432448610@qq.com',
-                position: 'bottom-right'
-            })
-        },
-        toTop: function () {
-            location.href = '#home' // 定位
-            document.getElementById('mainappid').scrollTop = 0
-        }, // 返回天气相当于返回顶部
-        getCommentsFromArticle(id) {
-            this.$refs.commentRef.getComments(id); //触发子组件的方法
-        },
-        getArticles: function (page) {
-            let that = this // this指向转化
-            that.article_loc = page
-            // 查找文章id 从1开始
-            that.postcomment.articleId = that.articleId[parseInt(page + ((that.currentPage - 1) * that.splitLength))]
-            // 提交数据 page从0开始
-            axios
-                .post(that.baseurl + 'article/index/', {
-                    value: page + ((that.currentPage - 1) * that.splitLength)
-                    // 传入索引
-                })
-                .then((res) => {
-                    // alter('提交中');
-                    // console.log(res.data)
-                    if (res.data.code === 1) {
-                        console.log('success return home!')
-                        // that.$router.push({path:'/home'})
-                        // 无需跳转
-                        // document.cookie= `user=${that.ruleForm.name}`
-                        // 添加cookie
-                        console.log('获取Article')
-                        let respdata = res.data
-                        let content = respdata.article
-                        that.md_data = [] // 清空
-                        // console.log(that.md_data)
-                        content.map((o) => {
-                            that.md_data.push(o) // 传入一个文章
-                        })
-                        that.the_title = respdata.the_title
-                    } else if (res.data.code === 0) {
-                        // alter("失败！")
-                        console.log('post 失败')
-                    }
-                })
-                .catch((res) => {
-                    console.log(res)
-                })
-            console.log('that.postcomment.articleId', that.postcomment.articleId)
-            that.getCommentsFromArticle(that.postcomment.articleId)
-        },
-
+    elementIsVisibleInViewport: function (el, partiallyVisible = false) {
+      const { top, left, bottom, right } = el.getBoundingClientRect();
+
+      return partiallyVisible
+        ? ((top > 0 && top < innerHeight) ||
+            (bottom > 0 && bottom < innerHeight)) &&
+            ((left > 0 && left < innerWidth) ||
+              (right > 0 && right < innerWidth))
+        : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
+    },
+    li_errorClass: function () {
+      console.log("选择文章");
     },
-    // mounted() {
-    //   console.log('document滚动',document.documentElement.scrollTop);
-
-    // window.addEventListener("scroll", this.handleScroll);
-    // window.addEventListener("echarts", this.datasetfunc);
-    // },
-    // watch(){
-    //   console.log('watch事件！');
-    //   console.log('document滚动',document.documentElement.scrollTop);
-    // },
-    // destroyed() {
-    //    console.log('document滚动',document.documentElement.scrollTop);
-    //   // window.removeEventListener("echarts", this.datasetfunc);
-    // },
-    created: function () {
-        // 初始化
-        console.log('初始化')
-        let that = this
-        // window.οnscrοll = function () {
-        //   //鼠标滚轮滚动距离超过10像素时，回到顶部按钮才显示
-        //   if (document.documentElement.scrollTop > 10) {
-        //     that.toTopIsShow = true;
-        //   } else {
-        //     that.toTopIsShow = false;
-        //   }
-        // };
-        console.log('测试created！')
-        axios
-            .get(that.baseurl + 'article/index/')
-            .then((res) => {
-                console.log('获取Article', res)
-                let resdata = res.data
-                let content = resdata.article // 传递过来的文章 进行处理
-                let title = resdata.title
-                that.articleId = resdata.articleObjectId
-                console.log('获取ArticleId', that.articleId)
-                // console.log('content', content, 'title', title)
-                content.map((o) => {
-                    that.md_data.push(o)
-                })
-                let titleAllArray = title.map((o) => {
-                    return o
-                })
-                that.the_title = resdata.the_title
-                console.log('分页实现')
-                this.pageAnalysFun(titleAllArray) //分页
-                // that.md_data.push(res.data.article); //markdown值传递
-                // let weather = resdata.weather
-                // let high = weather.high
-                // let low = weather.low
-                // console.log('weather', weather)
-                // weather.title.map((o) => {
-                //     that.weather_title.push(o)
-                // })
-                // high.map((o) => {
-                //     that.weather_high.push(o)
-                // })
-                // low.map((o) => {
-                //     that.weather_low.push(o)
-                // })
-                // try {
-                //     this.datasetfunc() // 等待dom和文件加载完之后执行dataserfunc,加载天气
-                // } catch (e) {
-                //     console.log(e)
-                //     window.onload = this.datasetfunc // 等待dom
-                // }
+    cssPage: function (index) {
+      this.challenge_loc = index;
+      let name = this.challenge_data[index];
+      switch (name) {
+        case "css挑战":
+          this.$router
+            .push({
+              path: "/css",
             })
-            .catch((res) => {
-                console.log(res)
-            }) // get log
-    }
-}
+            .catch((error) => {
+              console.log(error);
+            });
+          break;
+        case "echarts地图配置":
+          this.$router
+            .push({
+              path: "/home",
+            })
+            .catch((error) => {
+              console.log(error);
+            });
+          break;
+        case "websocket聊天":
+          this.$router
+            .push({
+              path: "/onlinewebsocket",
+            })
+            .catch((error) => {
+              console.log(error);
+            });
+          break;
+        case "vue3测试平台":
+          window.open(this.baseurl + "emoji/index/");
+          break;
+        default:
+          console.log("case name没找到");
+          break;
+      }
+    },
+    open_message: function () {
+      this.$notify({
+        title: "欢迎合作",
+        message: "邮箱：1432448610@qq.com",
+        position: "bottom-right",
+      });
+    },
+    toTop: function () {
+      location.href = "#home"; // 定位
+      document.getElementById("mainappid").scrollTop = 0;
+    }, // 返回天气相当于返回顶部
+    getCommentsFromArticle(id) {
+      this.$refs.commentRef.getComments(id); //触发子组件的方法
+    },
+    getArticles: function (page) {
+      let that = this; // this指向转化
+      that.article_loc = page;
+      // 查找文章id 从1开始
+      that.postcomment.articleId =
+        that.articleId[
+          parseInt(page + (that.currentPage - 1) * that.splitLength)
+        ];
+      // 提交数据 page从0开始
+      axios
+        .post(that.baseurl + "article/index/", {
+          value: page + (that.currentPage - 1) * that.splitLength,
+          // 传入索引
+        })
+        .then((res) => {
+          // alter('提交中');
+          // console.log(res.data)
+          if (res.data.code === 1) {
+            console.log("success return home!");
+            // that.$router.push({path:'/home'})
+            // 无需跳转
+            // document.cookie= `user=${that.ruleForm.name}`
+            // 添加cookie
+            console.log("获取Article");
+            let respdata = res.data;
+            let content = respdata.article;
+            that.md_data = []; // 清空
+            // console.log(that.md_data)
+            content.map((o) => {
+              that.md_data.push(o); // 传入一个文章
+            });
+            that.the_title = respdata.the_title;
+          } else if (res.data.code === 0) {
+            // alter("失败！")
+            console.log("post 失败");
+          }
+        })
+        .catch((res) => {
+          console.log(res);
+        });
+      console.log("that.postcomment.articleId", that.postcomment.articleId);
+      that.getCommentsFromArticle(that.postcomment.articleId);
+    },
+  },
+  // mounted() {
+  //   console.log('document滚动',document.documentElement.scrollTop);
+
+  // window.addEventListener("scroll", this.handleScroll);
+  // window.addEventListener("echarts", this.datasetfunc);
+  // },
+  // watch(){
+  //   console.log('watch事件！');
+  //   console.log('document滚动',document.documentElement.scrollTop);
+  // },
+  // destroyed() {
+  //    console.log('document滚动',document.documentElement.scrollTop);
+  //   // window.removeEventListener("echarts", this.datasetfunc);
+  // },
+  created: function () {
+    // 初始化
+    console.log("初始化");
+    let that = this;
+    // window.οnscrοll = function () {
+    //   //鼠标滚轮滚动距离超过10像素时，回到顶部按钮才显示
+    //   if (document.documentElement.scrollTop > 10) {
+    //     that.toTopIsShow = true;
+    //   } else {
+    //     that.toTopIsShow = false;
+    //   }
+    // };
+    console.log("测试created！");
+    axios
+      .get(that.baseurl + "article/index/")
+      .then((res) => {
+        console.log("获取Article", res);
+        let resdata = res.data;
+        let content = resdata.article; // 传递过来的文章 进行处理
+        let title = resdata.title;
+        that.articleId = resdata.articleObjectId;
+        console.log("获取ArticleId", that.articleId);
+        // console.log('content', content, 'title', title)
+        content.map((o) => {
+          that.md_data.push(o);
+        });
+        let titleAllArray = title.map((o) => {
+          return o;
+        });
+        that.the_title = resdata.the_title;
+        console.log("分页实现");
+        this.pageAnalysFun(titleAllArray); //分页
+        // that.md_data.push(res.data.article); //markdown值传递
+        // let weather = resdata.weather
+        // let high = weather.high
+        // let low = weather.low
+        // console.log('weather', weather)
+        // weather.title.map((o) => {
+        //     that.weather_title.push(o)
+        // })
+        // high.map((o) => {
+        //     that.weather_high.push(o)
+        // })
+        // low.map((o) => {
+        //     that.weather_low.push(o)
+        // })
+        // try {
+        //     this.datasetfunc() // 等待dom和文件加载完之后执行dataserfunc,加载天气
+        // } catch (e) {
+        //     console.log(e)
+        //     window.onload = this.datasetfunc // 等待dom
+        // }
+      })
+      .catch((res) => {
+        console.log(res);
+      }); // get log
+  },
+};
 </script>
 
 <style scoped>
 .el-carousel__item h3 {
-    color: #475669;
-    font-size: 14px;
-    opacity: 0.75;
-    line-height: 150px;
-    margin: 0;
+  color: #475669;
+  font-size: 14px;
+  opacity: 0.75;
+  line-height: 150px;
+  margin: 0;
 }
 
 .el-carousel__item:nth-child(2n) {
-    background-color: #99a9bf;
-    background-image: linear-gradient(90deg, #f0ddd2, #aa8c79);
+  background-color: #99a9bf;
+  background-image: linear-gradient(90deg, #f0ddd2, #aa8c79);
 }
 
 .el-carousel__item:nth-child(2n + 1) {
-    background-color: #b0b3b6;
-    background-image: linear-gradient(90deg, #f0ddd2, #aa8c79);
+  background-color: #b0b3b6;
+  background-image: linear-gradient(90deg, #f0ddd2, #aa8c79);
 }
 
 .text {
-    /* align-content: center; */
-    display: flex;
-    margin: 0 auto;
-    font-size: 14px;
+  /* align-content: center; */
+  display: flex;
+  margin: 0 auto;
+  font-size: 14px;
 }
 
 .item {
-    display: inline-block;
-    /* margin: 0 auto; */
-    width: 900px;
+  display: inline-block;
+  /* margin: 0 auto; */
+  width: 900px;
 }
 
 .box-card {
-    align-self: center;
-    align-content: center;
-    display: inline-block;
-    width: 80%;
-    /* padding-left:25%; */
-    margin: 0 auto;
-    /* opacity: 0.95; */
-    margin-top: 0px;
-    background-color: #ffffff;
+  align-self: center;
+  align-content: center;
+  display: inline-block;
+  width: 80%;
+  /* padding-left:25%; */
+  margin: 0 auto;
+  /* opacity: 0.95; */
+  margin-top: 0px;
+  background-color: #ffffff;
 }
 
 .box-cardtext {
-    align-self: center;
-    align-content: center;
-    display: inline-block;
-    width: 20%;
-    /* padding-left:25%; */
-    margin: 0 auto;
-    opacity: 0.9;
-    margin-top: 80px;
-    background-color: #ffffff;
+  align-self: center;
+  align-content: center;
+  display: inline-block;
+  width: 20%;
+  /* padding-left:25%; */
+  margin: 0 auto;
+  opacity: 0.9;
+  margin-top: 80px;
+  background-color: #ffffff;
 }
 
 .article {
-    opacity: 1;
-    /* background-color: aliceblue; */
-    align-content: inherit;
-    display: flex;
-    margin: 5px;
-    padding: 5px;
+  opacity: 1;
+  /* background-color: aliceblue; */
+  align-content: inherit;
+  display: flex;
+  margin: 5px;
+  padding: 5px;
 }
 
 /* 取消滚动并且隐藏 */
 el-col::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 .leftclass {
-    position: relative;
-    width: 30%;
-    height: 100%;
-    overflow: auto;
-    margin: 5px;
+  position: relative;
+  width: 30%;
+  height: 100%;
+  overflow: auto;
+  margin: 5px;
 }
 
 .leftclass::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 .midclass {
-    position: relative;
-    width: 65%;
-    height: 100%;
-    overflow: auto;
-    margin: 5px;
-    /* scrollbar-face-color: coral; */
-    
-    /* scrollbar-track-color: darkslategrey; */
+  position: relative;
+  width: 65%;
+  height: 100%;
+  overflow: auto;
+  margin: 5px;
+  /* scrollbar-face-color: coral; */
 
+  /* scrollbar-track-color: darkslategrey; */
 }
 
 .midclass::-webkit-scrollbar {
-    width:10px;
-    /* height:5px; */
-    /* display: none; */
-}
-.midclass::-webkit-scrollbar-track{
-    background: rgba(226, 247, 255,.5);
-    border-radius: 2px;
-    /* display: none; */
-}
-.midclass::-webkit-scrollbar-track-piece{
-    background: rgba(255, 255, 255,.1);
-    border-radius: 2px;
-    /* display: none; */
-}
-.midclass::-webkit-scrollbar-thumb{
-    background: #ff995e;
-    height:2px;
-    border-radius: 2px;
-    /* display: none; */
+  width: 10px;
+  /* height:5px; */
+  /* display: none; */
+}
+.midclass::-webkit-scrollbar-track {
+  background: rgba(226, 247, 255, 0.5);
+  border-radius: 2px;
+  /* display: none; */
+}
+.midclass::-webkit-scrollbar-track-piece {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  /* display: none; */
+}
+.midclass::-webkit-scrollbar-thumb {
+  background: #ff995e;
+  height: 2px;
+  border-radius: 2px;
+  /* display: none; */
 }
 /* 评论区 */
 .commitCard {
-    position: relative;
-    width: 100%;
-    height: 80px;
-    margin-top: 10px;
-    justify-content: center;
-    align-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    flex-direction: row;
-    margin-left: 0;
-    margin-right: 0;
+  position: relative;
+  width: 100%;
+  height: 80px;
+  margin-top: 10px;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  flex-direction: row;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 .rightclass {
-    position: relative;
-    width: 5%;
-    height: 100%;
-    overflow: hidden;
+  position: relative;
+  width: 5%;
+  height: 100%;
+  overflow: hidden;
 }
 
 .rightclass::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 .righticon {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    top: 70%;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  top: 70%;
 }
 
 .image {
-    width: 100%;
-    display: block;
+  width: 100%;
+  display: block;
 }
 
 .li_active li {
-    color: rgb(255, 94, 0);
+  color: rgb(255, 94, 0);
 }
 
 li:active {
-    color: rgb(245, 182, 10);
+  color: rgb(245, 182, 10);
 }
 
 li:link {
-    color: rgb(255, 94, 0);
+  color: rgb(255, 94, 0);
 }
 
 li:visited {
-    color: gold;
+  color: gold;
 }
 
 li:hover {
-    color: rgb(255, 72, 0);
-    cursor: pointer;
+  color: rgb(255, 72, 0);
+  cursor: pointer;
 }
 
 h1 {
-    color: rgb(255, 102, 0);
-    text-align: center;
+  color: rgb(255, 102, 0);
+  text-align: center;
 }
 
 h1:hover {
-    font-weight: bolder;
-    color: rgb(255, 72, 0);
-    /* color: gold; */
-    cursor: pointer;
+  font-weight: bolder;
+  color: rgb(255, 72, 0);
+  /* color: gold; */
+  cursor: pointer;
 }
 
 .article_box {
-    position: relative;
-    width: 100%;
-    height: 100%;
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 .ul_style {
-    position: relative;
-    width: 100%;
-    height: 100%;
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 .weather_class2 {
-    display: none;
+  display: none;
 }
 
 .user_img2 {
-    display: none;
+  display: none;
 }
 
 .challenge_title2 {
-    display: none;
+  display: none;
 }
 
 .weather_class1 {
-    display: block;
+  display: block;
 }
 
 .user_img1 {
-    display: block;
+  display: block;
 }
 
 .challenge_title1 {
-    display: block;
+  display: block;
 }
 
 @media screen and (max-width: 450px) {
-    .article {
-        display: inline-block;
-        max-width: 350px;
-    }
-
-    .leftclass {
-        width: 100%;
-        height: 50%;
-        max-width: 350px;
-    }
-
-    .midclass {
-
-        width: 100%;
-        max-width: 350px;
-
-    }
-
-    .rightclass {
-        width: 80px;
-        position: fixed;
-        float: right;
-        bottom: 20px;
-        right: -10px;
-    }
+  .article {
+    display: inline-block;
+    max-width: 350px;
+  }
 
-    .weather_class2 {
-        display: block;
-    }
+  .leftclass {
+    width: 100%;
+    height: 50%;
+    max-width: 350px;
+  }
 
-    .user_img2 {
-        display: block;
-    }
+  .midclass {
+    width: 100%;
+    max-width: 350px;
+  }
+
+  .rightclass {
+    width: 80px;
+    position: fixed;
+    float: right;
+    bottom: 20px;
+    right: -10px;
+  }
+
+  .weather_class2 {
+    display: block;
+  }
 
-    .challenge_title2 {
-        display: block;
-    }
+  .user_img2 {
+    display: block;
+  }
 
-    .weather_class1 {
-        display: none;
-    }
+  .challenge_title2 {
+    display: block;
+  }
 
-    .user_img1 {
-        display: none;
-    }
+  .weather_class1 {
+    display: none;
+  }
 
-    .challenge_title1 {
-        display: none;
-    }
+  .user_img1 {
+    display: none;
+  }
 
+  .challenge_title1 {
+    display: none;
+  }
 }
 </style>
diff --git a/src/components/Bilicom.vue b/src/components/Bilicom.vue
index 0fd7c80..3534c9a 100644
--- a/src/components/Bilicom.vue
+++ b/src/components/Bilicom.vue
@@ -11,18 +11,16 @@ export default {
   name: 'Bilicom',
   data () {
     return {
-      baseurl: 'http://yongma16.xyz/article/index/',
       msg: '内容',
       md_data: [],
-      data: ['threejs加载模型'],
-      mychart: echarts.init(document.getElementById('bilicom'))
+      data: ['threejs加载模型']
     }
   },
   methods: {
-    echartfunc: function (o) {
+    echartfunc: function () {
       // 基于准备好的dom，初始化echarts实例
-      var myChart = echarts.init(document.getElementById('bilicom'))
-      var option = {
+      const myChart = echarts.init(document.getElementById('bilicom'))
+      const option = {
         backgroundColor: 'rgba(0, 0, 0, 0.3)',
 
         title: {
diff --git a/src/components/Csslearn.vue b/src/components/Csslearn.vue
index 51919e2..e0fb5c5 100644
--- a/src/components/Csslearn.vue
+++ b/src/components/Csslearn.vue
@@ -37,7 +37,8 @@ export default {
       msg: "css练习：",
       css_length: "",
       // baseurl: 'http://127.0.0.1:1998',
-      baseurl: "http://yongma16.xyz",
+      baseurl: "http://114.116.52.53/",
+      // baseurl: "http://yongma16.xyz/",
       css_title: [],
       css_path: [],
       css_loc: 0,
@@ -89,7 +90,7 @@ export default {
 
       let that = this;
       axios
-        .get(that.baseurl + "/css/")
+        .get(that.baseurl + "css/")
         .then((res) => {
           console.log("get返回", res);
           let getdata = res.data;
@@ -126,7 +127,7 @@ export default {
 };
 </script>
 
-<style  scoped>
+<style scoped>
 .container {
   position: relative;
   display: flex;
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 3a3adea..5ac9c15 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,28 +1,44 @@
 <template>
- <div class="login" style="text-align: center;">
-  <el-card class="box-card" style="text-align: center;">
-  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="text-align: center;margin:0 auto;">
-    <el-form-item><p style="font-size:30px">登录</p></el-form-item>
+  <div class="login" style="text-align: center">
+    <el-card class="box-card" style="text-align: center">
+      <el-form
+        :model="ruleForm"
+        status-icon
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+        style="text-align: center; margin: 0 auto"
+      >
+        <el-form-item><p style="font-size: 30px">登录</p></el-form-item>
 
-  <el-form-item label="账号" prop="name">
-    <el-input v-model="ruleForm.name"></el-input>
-  </el-form-item>
-
-  <el-form-item label="密码" prop="pass">
-    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
-  </el-form-item>
-  <el-form-item>
-    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
-    <el-button @click="resetForm('ruleForm')">清空</el-button>
-  </el-form-item>
-   <el-form-item>
-    <el-link target="_blank" @click="$router.push({path: '/register'})">没有账号？</el-link>
-  <el-link type="primary" @click="$router.push({path: '/register'})">去注册</el-link>
-  </el-form-item>
-</el-form>
-
-</el-card>
+        <el-form-item label="账号" prop="name">
+          <el-input v-model="ruleForm.name"></el-input>
+        </el-form-item>
 
+        <el-form-item label="密码" prop="pass">
+          <el-input
+            type="password"
+            v-model="ruleForm.pass"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm('ruleForm')"
+            >登录</el-button
+          >
+          <el-button @click="resetForm('ruleForm')">清空</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-link target="_blank" @click="$router.push({ path: '/register' })"
+            >没有账号？</el-link
+          >
+          <el-link type="primary" @click="$router.push({ path: '/register' })"
+            >去注册</el-link
+          >
+        </el-form-item>
+      </el-form>
+    </el-card>
   </div>
 </template>
 
@@ -68,59 +84,56 @@ export default {
     // };
     return {
       // baseurl:"http://127.0.0.1/user/login/",
-      baseurl: 'http://yongma16.xyz/user/login/',
+      baseurl: 'http://114.116.52.53/',
+      // baseurl: 'http://yongma16.xyz/user/login/',
       ruleForm: {
         pass: '',
         // checkPass: '',
         name: ''
-
       },
       rules: {
-        pass: [
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        checkPass: [
-          { validator: validatePass, trigger: 'blur' }
-        ],
-        name: [
-          { validator: checkName, trigger: 'blur' }
-        ]
+        pass: [{ validator: validatePass, trigger: 'blur' }],
+        checkPass: [{ validator: validatePass, trigger: 'blur' }],
+        name: [{ validator: checkName, trigger: 'blur' }]
       }
     }
   },
   methods: {
     submitForm (formName) {
+      const that = this // this指向
       this.$refs[formName].validate((valid) => {
         if (valid) {
           // 提交数据
-          let that = this// this指向
-          console.log(this.ruleForm.name, this.ruleForm.pass)
+          console.log(that.ruleForm.name, that.ruleForm.pass)
           // axios提交数据 post
-          const loginUrl = that.baseurl
-          const userInfo={
+          const loginUrl = that.baseurl + 'user/login/'
+          const userInfo = {
             name: that.ruleForm.name,
             password: that.ruleForm.pass
           }
-          axios.post(loginUrl, userInfo).then(res => {
-            // alter('提交中');
-            console.log(res.data)
-            if (res.data.code == 1) {
-              localStorage.setItem("yma16siteUserInfoName", userInfo.name)
-              localStorage.setItem("yma16siteUserInfoPwd", userInfo.password)
-              store.commit('setUserInfo',userInfo)//store信息
-              console.log('return login success!')
-              document.cookie = `user=${that.ruleForm.name}`
-              that.$router.push({path: '/'})
-              // 添加cookie
-            } else if (res.data.code == 0) {
-              // alter("失败！")
-              console.log('失败', res)
-            }
-            // that.$cookies.set('')
-          }).catch(res => {
-            console.log('post失败')
-            console.log(res)
-          })
+          axios
+            .post(loginUrl, userInfo)
+            .then((res) => {
+              // alter('提交中');
+              console.log(res.data)
+              if (res.data.code == 1) {
+                localStorage.setItem('yma16siteUserInfoName', userInfo.name)
+                localStorage.setItem('yma16siteUserInfoPwd', userInfo.password)
+                store.commit('setUserInfo', userInfo) // store信息
+                console.log('return login success!')
+                document.cookie = `user=${that.ruleForm.name}`
+                that.$router.push({ path: '/' })
+                // 添加cookie
+              } else if (res.data.code == 0) {
+                // alter("失败！")
+                console.log('失败', res)
+              }
+              // that.$cookies.set('')
+            })
+            .catch((res) => {
+              console.log('post失败')
+              console.log(res)
+            })
         } else {
           alert('请输入账号密码')
           console.log('请输入账号密码')
@@ -136,41 +149,40 @@ export default {
 </script>
 
 <style scoped>
-
-.login{
+.login {
   position: relative;
-  width:100%;
+  width: 100%;
   height: auto;
 }
-.left{
+.left {
   position: relative;
-  margin-top:50px;
-  left:50%;
-  top:50%;
-  transform: translate(-50%,-50%);
+  margin-top: 50px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.text {
+  align-content: center;
+  display: flex;
+  margin: 0 auto;
+  font-size: 14px;
 }
-  .text {
-    align-content: center;
-    display:flex;
-    margin: 0 auto;
-    font-size: 14px;
-  }
 
-  .item {
-    display:flex;
-    margin: 0 auto;
-    /* width: 50%; */
-  }
+.item {
+  display: flex;
+  margin: 0 auto;
+  /* width: 50%; */
+}
 
-  .box-card {
-    align-self: center;
-    align-content: center;
-    display:flex;
-    width: 450px;
-    /* padding-left:25%; */
-    margin:0 auto;
-    opacity: 1;
-    margin-top:80px;
-    background-color: #ffffff;
-  }
+.box-card {
+  align-self: center;
+  align-content: center;
+  display: flex;
+  width: 450px;
+  /* padding-left:25%; */
+  margin: 0 auto;
+  opacity: 1;
+  margin-top: 80px;
+  background-color: #ffffff;
+}
 </style>
diff --git a/src/components/Mavoneditor.vue b/src/components/Mavoneditor.vue
index 2f05820..e488d06 100644
--- a/src/components/Mavoneditor.vue
+++ b/src/components/Mavoneditor.vue
@@ -1,71 +1,83 @@
 <template>
   <div class="mavoneditor">
-    <div class="markdown-body" style="width:100%;height:100%;overflow:hidden;">
-      <iframe src='http://yongma16.xyz/admin/' style="width:100%;height:100%;border:none;"></iframe>
+    <div
+      class="markdown-body"
+      style="width: 100%; height: 100%; overflow: hidden"
+    >
+      <iframe
+        :src="baseurl + basePath"
+        style="width: 100%; height: 100%; border: none"
+      ></iframe>
     </div>
   </div>
 </template>
 
 <script>
-import VueMarkdown from 'vue-markdown'
-import axios from 'axios'
+import VueMarkdown from "vue-markdown";
+import axios from "axios";
 export default {
   components: {
-    VueMarkdown
+    VueMarkdown,
   },
-  name: 'Mavoneditor',
-  data () {
+  name: "Mavoneditor",
+  data() {
     return {
-      baseurl: 'http://yongma16.xyz/admin/',
-      md_data: []
-    }
+      baseurl: "http://114.116.52.53/",
+      basePath: "admin/",
+      // baseurl: 'http://yongma16.xyz/',
+      md_data: [],
+    };
   },
   methods: {
     getArticles: function () {
-      let that = this
+      let that = this;
       axios
-        .get(that.baseurl)
+        .get(that.baseurl + "admin/")
         .then((res) => {
-          console.log('获取Article=>')
+          console.log("获取Article=>");
           // console.log(res.data.article);
           // let run_array=res.data.article.map(o=>{return that.data.md_data.push(o);}); //获取参数article
           // console.log(that.data.md_data);
-          that.md_data = res.data.article
+          that.md_data = res.data.article;
         })
         .catch((res) => {
-          console.log(res)
-        }) // get log
-    }
-
+          console.log(res);
+        }); // get log
+    },
   },
-  created () {
-    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)
+  created() {
+    try {
+      console.log(
+        "domMain",
+        document.getElementById("mainappid"),
+        document.getElementById("mainappid").style
+      );
+      document.getElementById("mainappid").style.padding = "0";
+      document.getElementById("mainappid").style.margin = "0";
+    } catch (e) {
+      console.log("e", e);
+      throw Error(e);
     }
-    let that = this
-    console.log('测试created！')
-    axios
-      .get(that.baseurl)
-      .then((res) => {
-        console.log('获取Article')
-        //   console.log(res,res.data,res.data.msg);
-
-        that.md_data.push(res.data.article) // markdown值传递
-      })
-      .catch((res) => {
-        console.log(res)
-      }) // get log
-  }
-}
+    // let that = this;
+    // console.log("测试created！");
+    // axios
+    //   .get(that.baseurl + "admin/")
+    //   .then((res) => {
+    //     console.log("获取Article");
+    //     //   console.log(res,res.data,res.data.msg);
+    //
+    //     that.md_data.push(res.data.article); // markdown值传递
+    //   })
+    //   .catch((res) => {
+    //     console.log(res);
+    //   }); // get log
+  },
+};
 </script>
 
 <style scoped>
-.mavoneditor{
-  width:100%;
-  height:100%;
+.mavoneditor {
+  width: 100%;
+  height: 100%;
 }
 </style>
diff --git a/src/components/Onlinewebsocket.vue b/src/components/Onlinewebsocket.vue
index 32fa2ea..a25e4c7 100644
--- a/src/components/Onlinewebsocket.vue
+++ b/src/components/Onlinewebsocket.vue
@@ -1,87 +1,127 @@
 <template>
-<div class="container">
+  <div class="container">
     <div class="selectName" id="selectNameId">
-        <div class="selectInput">
-            <h1>欢迎进入聊天室</h1>
-            <div style="display: flex; height: 20%">
-                <el-input placeholder="请输入昵称进入聊天室" v-model="user" clearable>
-                </el-input>
-                <!-- &nbsp; -->
-                <!-- <el-button type="success" icon="el-icon-check" circle></el-button> -->
-            </div>
-            <div class="btn_fx"> <a @click="registerUsername()">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <p>进入聊天室</p>
-                </a></div>
+      <div class="selectInput">
+        <h1>欢迎进入聊天室</h1>
+        <div style="display: flex; height: 20%">
+          <el-input placeholder="请输入昵称进入聊天室" v-model="user" clearable>
+          </el-input>
+          <!-- &nbsp; -->
+          <!-- <el-button type="success" icon="el-icon-check" circle></el-button> -->
         </div>
+        <div class="btn_fx">
+          <a @click="registerUsername()">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <p>进入聊天室</p>
+          </a>
+        </div>
+      </div>
     </div>
     <div class="left">
-        <el-card class="left_top">
-            <p>聊天室</p>
-            <!-- <p>人数:{{personCount}}</p> -->
-            <p>消息:{{ chatCount }}</p>
-            <div v-for="(item, index) in room_name" :key="index" class="roomNameClass">
-                <div v-bind:class="[
+      <el-card class="left_top">
+        <p>聊天室</p>
+        <!-- <p>人数:{{personCount}}</p> -->
+        <p>消息:{{ chatCount }}</p>
+        <div
+          v-for="(item, index) in room_name"
+          :key="index"
+          class="roomNameClass"
+        >
+          <div
+            v-bind:class="[
               { room_active: index == room_loc },
               room_defaultClass,
-            ]" @click="changeRoom(item, index)">
-                    {{ item }}
-                </div>
-            </div>
-            <p>{{ msg }}</p>
-        </el-card>
-
-        <el-card class="input_chat1" shadow="always" cellpadding="1px">
-            <div class="right_header" style="display: flex; width: 100%">
-                <h1 class="roomName">{{ room_select }}</h1>
-                <h1 class="clearFont" style="width: 100%; right: 0; text-align: right; cursor: pointer" @click="clearChat()">
-                    清屏
-                </h1>
-            </div>
+            ]"
+            @click="changeRoom(item, index)"
+          >
+            {{ item }}
+          </div>
+        </div>
+        <p>{{ msg }}</p>
+      </el-card>
+
+      <el-card class="input_chat1" shadow="always" cellpadding="1px">
+        <div class="right_header" style="display: flex; width: 100%">
+          <h1 class="roomName">{{ room_select }}</h1>
+          <h1
+            class="clearFont"
+            style="width: 100%; right: 0; text-align: right; cursor: pointer"
+            @click="clearChat()"
+          >
+            清屏
+          </h1>
+        </div>
 
-            <el-input type="textarea" v-model="send_info"> </el-input>
-            <el-button type="success" round style="margin-top: 2%" @click="websocketOpen(send_info)">发送</el-button>
-        </el-card>
+        <el-input type="textarea" v-model="send_info"> </el-input>
+        <el-button
+          type="success"
+          round
+          style="margin-top: 2%"
+          @click="websocketOpen(send_info)"
+          >发送</el-button
+        >
+      </el-card>
     </div>
     <!-- 聊天信息 -->
     <div class="right" id="idChat" style="opacity: 0.8">
-        <el-card shadow="hover" style="line-height: 10px">
-            <div class="blockChat">
-                <div v-for="(item, index) in chat_info" :key="index" class="text item">
-                    <!-- {{item}} -->
-                    <template v-if="item.room == room_select">
-                        <div v-for="(item2, index2) in item.content" :key="index2" class="msgClass" v-bind:class="[
+      <el-card shadow="hover" style="line-height: 10px">
+        <div class="blockChat">
+          <div
+            v-for="(item, index) in chat_info"
+            :key="index"
+            class="text item"
+          >
+            <!-- {{item}} -->
+            <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_defaultClass,
-                ]">
-                            <div class="msgUser">
-                                <i class="el-icon-user">{{ item2.user }} &nbsp;{{ item2.create_time }}</i>
-                            </div>
-                            <div class="msgMessage">
-                                <p>{{ item2.message }}</p>
-                            </div>
-                        </div>
-                    </template>
+                ]"
+              >
+                <div class="msgUser">
+                  <i class="el-icon-user"
+                    >{{ item2.user }} &nbsp;{{ item2.create_time }}</i
+                  >
                 </div>
-            </div>
-
-            <el-card class="input_chat2" shadow="always" cellpadding="1px">
-                <div class="right_header" style="display: flex; width: 100%">
-                    <h1 class="roomName">{{ room_select }}</h1>
-                    <h1 class="clearFont" style="width: 100%; right: 0; text-align: right; cursor: pointer" @click="clearChat()">
-                        清屏
-                    </h1>
+                <div class="msgMessage">
+                  <p>{{ item2.message }}</p>
                 </div>
+              </div>
+            </template>
+          </div>
+        </div>
 
-                <el-input type="textarea" v-model="send_info"> </el-input>
-                <el-button type="success" round style="margin-top: 2%" @click="websocketOpen(send_info)">发送</el-button>
-            </el-card>
+        <el-card class="input_chat2" shadow="always" cellpadding="1px">
+          <div class="right_header" style="display: flex; width: 100%">
+            <h1 class="roomName">{{ room_select }}</h1>
+            <h1
+              class="clearFont"
+              style="width: 100%; right: 0; text-align: right; cursor: pointer"
+              @click="clearChat()"
+            >
+              清屏
+            </h1>
+          </div>
+
+          <el-input type="textarea" v-model="send_info"> </el-input>
+          <el-button
+            type="success"
+            round
+            style="margin-top: 2%"
+            @click="websocketOpen(send_info)"
+            >发送</el-button
+          >
         </el-card>
+      </el-card>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
@@ -89,751 +129,743 @@ import VueMarkdown from "vue-markdown";
 import axios from "axios";
 
 export default {
-    components: {
-        VueMarkdown,
+  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://114.116.52.53/",
+      // baseUrl: "http://yongma16.xyz/",
+      websocketUrl: "ws://114.116.52.53/",
+      // websocketUrl: "yongma16.xyz/ws/webchat/",
+      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]);
+      // }
     },
-    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/webchat/index/',
-            // websocketUrl: "127.0.0.1:8006/ws/webchat/",
-            websocketUrl: 'yongma16.xyz/ws/webchat/',
-            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='连接成功'
+    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();
+      // 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];
+        }
+        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((o, index) => {
+          if (o.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 + "ws/webchat/";
+      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);
     },
-    watch() {
-        // cookieValue:function(newValue,oldValue){
-        //   this.user=newValue
-        //   console.log(newValue,oldValue)
-        //   return newValue
-        // }
+    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);
+      }
     },
-    beforeDestroy() {
-        // window.removeEventListener("onload",this.initWebsocket());
+    websocketOpen: function (info) {
+      this.websocketSend(info);
+      // this.send_info=''//清空
     },
-    mounted() {
-        // 判断是否登录
-        this.judeIsLogin();
-        // window.addEventListener("onload",this.initWebsocket());
+    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 = "连接失败";
+      }
     },
-    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
-        },
-        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];
-                }
-                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)
-                .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((o, index) => {
-                    if (o.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;
-            let wsurl = this.websocketUrl;
-            this.websocket = new WebSocket("ws://" + 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";
-            // 触发减一
-        },
+    websocketError: function () {
+      this.msg = "连接失败";
+      let selectNameDom = document.getElementById("selectNameId");
+      console.log(selectNameDom);
+      selectNameDom.style.display = "block";
+      window.alert("websocket连接失败！");
+      // this.initWebsocket()// 重连
     },
-    destroyed() {
-        this.websocketClose(); // 关闭
+    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(); // 关闭
+  },
 };
 </script>
 
 <style scoped>
 .selectName {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    overflow: hidden;
-    /* display: fixed; */
-    top: 50%;
-    left: 50%;
-    z-index: 3;
-    /* border-radius: 10px; */
-    transform: translate(-50%, -50%);
-    background: #005aa7;
-    /* fallback for old browsers */
-    background: -webkit-linear-gradient(to right,
-            #fffde4,
-            #005aa7);
-    /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(to right,
-            #fffde4,
-            #005aa7);
-    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-    background-size: 400%;
-    animation: sendInfo 20s linear infinite;
-    opacity: 0.9;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  overflow: hidden;
+  /* display: fixed; */
+  top: 50%;
+  left: 50%;
+  z-index: 3;
+  /* border-radius: 10px; */
+  transform: translate(-50%, -50%);
+  background: #005aa7;
+  /* fallback for old browsers */
+  background: -webkit-linear-gradient(to right, #fffde4, #005aa7);
+  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to right, #fffde4, #005aa7);
+  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  background-size: 400%;
+  animation: sendInfo 20s linear infinite;
+  opacity: 0.9;
 }
 
 .selectInput {
-    position: relative;
-    width: 50%;
-    height: 50%;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    text-align: center;
+  position: relative;
+  width: 50%;
+  height: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
 }
 
 .selectInput h1 {
-    font-size: 3em;
-    color: #fb7248;
+  font-size: 3em;
+  color: #fb7248;
 }
 
 .btn_fx {
-    position: relative;
-    padding: 20px;
-    /* margin:20px; */
+  position: relative;
+  padding: 20px;
+  /* margin:20px; */
 }
 
 .blockChat {
-    position: relative;
-    width: 100%;
-    display: block;
+  position: relative;
+  width: 100%;
+  display: block;
 }
 
 .blockChat h1 {
-    color: rgb(135, 187, 222);
-    font-size: 20px;
-    font-weight: bold;
+  color: rgb(135, 187, 222);
+  font-size: 20px;
+  font-weight: bold;
 }
 
 .msgClass {
-    position: relative;
-    width: 100%;
-    text-align: left;
-    margin-bottom: 30px;
-    padding-bottom: 30px;
-    /* background: rgba(135, 187, 222,.6); */
-    background: #4ca1af;
-    /* fallback for old browsers */
-    background: -webkit-linear-gradient(to left,
-            #c4e0e5,
-            #4ca1af);
-    /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(to left,
-            #c4e0e5,
-            #4ca1af);
-    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-
-    background-size: 400%;
-    animation: sendInfo 20s linear infinite;
-    /* -webkit-background-clip: text;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  margin-bottom: 30px;
+  padding-bottom: 30px;
+  /* background: rgba(135, 187, 222,.6); */
+  background: #4ca1af;
+  /* fallback for old browsers */
+  background: -webkit-linear-gradient(to left, #c4e0e5, #4ca1af);
+  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to left, #c4e0e5, #4ca1af);
+  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+  background-size: 400%;
+  animation: sendInfo 20s linear infinite;
+  /* -webkit-background-clip: text;
   -webkit-text-fill-color: transparent; */
 }
 
 .msgUser {
-    position: relative;
-    margin: 5px;
-    padding: 5px;
-    top: 50%;
-    width: 100%;
-    height: 30px;
-    color: rgb(0, 0, 0);
-    /* background: rgb(135, 187, 222); */
+  position: relative;
+  margin: 5px;
+  padding: 5px;
+  top: 50%;
+  width: 100%;
+  height: 30px;
+  color: rgb(0, 0, 0);
+  /* background: rgb(135, 187, 222); */
 }
 
 .msgMessage {
-    position: relative;
+  position: relative;
 
-    width: 100%;
-    height: 50px;
-    font-size: 20px;
-    color: rgb(0, 0, 0);
-    /* background: rgb(135, 187, 222); */
+  width: 100%;
+  height: 50px;
+  font-size: 20px;
+  color: rgb(0, 0, 0);
+  /* background: rgb(135, 187, 222); */
 }
 
 .msgMessage p {
-    position: relative;
-    /* left:50%; */
-    margin: 5px;
-    padding: 5px;
-    top: 50%;
+  position: relative;
+  /* left:50%; */
+  margin: 5px;
+  padding: 5px;
+  top: 50%;
 }
 
 .left_top {
-    position: relative;
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 .left_top p {
-    font-size: 20px;
-    margin-bottom: 5px;
-    padding-bottom: 5px;
+  font-size: 20px;
+  margin-bottom: 5px;
+  padding-bottom: 5px;
 }
 
 .roomNameClass {
-    position: relative;
-    cursor: pointer;
+  position: relative;
+  cursor: pointer;
 }
 
 .room_active {
-    appearance: none;
-    position: relative;
-    text-align: left;
-    width: 100%;
-    height: 100%;
-    font-weight: bold;
-    color: rgb(135, 187, 222);
-    text-shadow: 0 5px 20px #fff;
-    background: transparent;
-    cursor: pointer;
-    line-height: 20px;
-    /* padding-top:10px; */
-    /* transition: 0.5s; */
+  appearance: none;
+  position: relative;
+  text-align: left;
+  width: 100%;
+  height: 100%;
+  font-weight: bold;
+  color: rgb(135, 187, 222);
+  text-shadow: 0 5px 20px #fff;
+  background: transparent;
+  cursor: pointer;
+  line-height: 20px;
+  /* padding-top:10px; */
+  /* transition: 0.5s; */
 }
 
 .room_defaultClass {
-    appearance: none;
-    position: relative;
-    text-align: left;
-    width: 100%;
-    height: 100%;
-    font-weight: bold;
-    color: rgb(0, 140, 255);
-    background: transparent;
-    cursor: pointer;
-    line-height: 20px;
-    /* padding-top:10px; */
-    /* transition: 0.5s; */
+  appearance: none;
+  position: relative;
+  text-align: left;
+  width: 100%;
+  height: 100%;
+  font-weight: bold;
+  color: rgb(0, 140, 255);
+  background: transparent;
+  cursor: pointer;
+  line-height: 20px;
+  /* padding-top:10px; */
+  /* transition: 0.5s; */
 }
 
 .info_active {
-    position: relative;
-    width: 100%;
-    text-align: left;
-    margin-bottom: 30px;
-    padding-bottom: 30px;
-    background: #5d4157;
-    /* fallback for old browsers */
-    background: -webkit-linear-gradient(to right, #a8caba, #5d4157);
-    /* Chrome 10-25, Safari 5.1-6 */
-    background: linear-gradient(to right, #a8caba, #5d4157);
-    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-    background-size: 400%;
-    animation: sendInfo 2s linear infinite;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  margin-bottom: 30px;
+  padding-bottom: 30px;
+  background: #5d4157;
+  /* fallback for old browsers */
+  background: -webkit-linear-gradient(to right, #a8caba, #5d4157);
+  /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(to right, #a8caba, #5d4157);
+  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+  background-size: 400%;
+  animation: sendInfo 2s linear infinite;
 }
 
 .info_defaultClass {
-    position: relative;
-    width: 100%;
-    text-align: left;
-    margin-bottom: 30px;
-    padding-bottom: 30px;
-    background: rgba(135, 187, 222, 0.6);
-    background-image: linear-gradient(to right, #9b63ff, #462188);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  margin-bottom: 30px;
+  padding-bottom: 30px;
+  background: rgba(135, 187, 222, 0.6);
+  background-image: linear-gradient(to right, #9b63ff, #462188);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 @keyframes sendInfo {
-    0% {
-        background-position: 0% 50%;
-    }
+  0% {
+    background-position: 0% 50%;
+  }
 
-    50% {
-        background-position: 100% 50%;
-    }
+  50% {
+    background-position: 100% 50%;
+  }
 
-    100% {
-        background-position: 0% 50%;
-    }
+  100% {
+    background-position: 0% 50%;
+  }
 }
 
 .container {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    opacity: 1;
-    /* overflow: hidden; */
-    /* background-color: aliceblue; */
-    align-content: inherit;
-    display: flex;
-    margin: 0;
-    padding: 0;
-    background: url(https://w.wallhaven.cc/full/72/wallhaven-72wzq9.png);
-    /* background-size: cover; */
-    background-repeat: repeat-y;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  opacity: 1;
+  /* overflow: hidden; */
+  /* background-color: aliceblue; */
+  align-content: inherit;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  background: url(https://w.wallhaven.cc/full/72/wallhaven-72wzq9.png);
+  /* background-size: cover; */
+  background-repeat: repeat-y;
 }
 
 /* 取消滚动并且隐藏 */
 .container::-webkit-scrollbar,
 .left::-webkit-scrollbar .right::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 
 .left {
-    position: relative;
-    width: 30%;
-    height: 100%;
-    overflow: auto;
-    margin: 5px;
-    padding: 5px;
+  position: relative;
+  width: 30%;
+  height: 100%;
+  overflow: auto;
+  margin: 5px;
+  padding: 5px;
 }
 
 .right {
-    position: relative;
-    width: 70%;
-    height: 100%;
-    overflow: auto;
-    margin: 5px;
-    padding: 5px;
+  position: relative;
+  width: 70%;
+  height: 100%;
+  overflow: auto;
+  margin: 5px;
+  padding: 5px;
 }
 
 .text {
-    font-size: 14px;
+  font-size: 14px;
 }
 
 .item {
-    padding: 18px 0;
+  padding: 18px 0;
 }
 
 .box-card {
-    width: 100%;
+  width: 100%;
 }
 
 .input_chat1 {
-    /* position: static; */
-    margin-top: 5%;
-    text-align: letf;
-    line-height: 50px;
-    /* background: cadetblue; */
+  /* position: static; */
+  margin-top: 5%;
+  text-align: letf;
+  line-height: 50px;
+  /* background: cadetblue; */
 }
 
 .input_chat2 {
-    /* position: static; */
-    margin-top: 5%;
-    text-align: letf;
-    line-height: 50px;
-    background: cadetblue;
-    display: none;
+  /* position: static; */
+  margin-top: 5%;
+  text-align: letf;
+  line-height: 50px;
+  background: cadetblue;
+  display: none;
 }
 
 .selectName a {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 200px;
-    height: 80px;
-    overflow: hidden;
-    margin: 0;
-    padding: 0;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 200px;
+  height: 80px;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
 }
 
 .selectName a p {
-    position: absolute;
-    text-align: center;
-    width: 100%;
-    height: 100%;
-    line-height: 80px;
-    appearance: none;
-    font-size: 2em;
-    text-transform: uppercase;
-    color: #fb7248;
-    border: 1px solid #fb7248;
-    box-sizing: border-box;
-    z-index: 1;
-    transition: 0.5s;
-    margin: 0;
-    padding: 0;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  line-height: 80px;
+  appearance: none;
+  font-size: 2em;
+  text-transform: uppercase;
+  color: #fb7248;
+  border: 1px solid #fb7248;
+  box-sizing: border-box;
+  z-index: 1;
+  transition: 0.5s;
+  margin: 0;
+  padding: 0;
 }
 
 .selectName a:hover p {
-    color: #fff;
+  color: #fff;
 }
 
 .selectName a span {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: #fb7248;
-    opacity: 0.5;
-    z-index: -1;
-    transition: 0.5s;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #fb7248;
+  opacity: 0.5;
+  z-index: -1;
+  transition: 0.5s;
 }
 
 .selectName a span:nth-child(1) {
-    top: -100%;
-    left: -100%;
+  top: -100%;
+  left: -100%;
 }
 
 .selectName a span:nth-child(2) {
-    bottom: -100%;
-    left: -100%;
+  bottom: -100%;
+  left: -100%;
 }
 
 .selectName a span:nth-child(3) {
-    top: -100%;
-    right: -100%;
+  top: -100%;
+  right: -100%;
 }
 
 .selectName a span:nth-child(4) {
-    bottom: -100%;
-    right: -100%;
+  bottom: -100%;
+  right: -100%;
 }
 
 .selectName a:hover span:nth-child(1) {
-    top: 0px;
-    left: 0px;
+  top: 0px;
+  left: 0px;
 }
 
 .selectName a:hover span:nth-child(2) {
-    bottom: 0px;
-    left: 0px;
+  bottom: 0px;
+  left: 0px;
 }
 
 .selectName a:hover span:nth-child(3) {
-    top: 0px;
-    right: 0px;
+  top: 0px;
+  right: 0px;
 }
 
 .selectName a:hover span:nth-child(4) {
-    bottom: 0px;
-    right: 0px;
+  bottom: 0px;
+  right: 0px;
 }
 
 @media screen and (max-width: 450px) {
-    .selectName a {
-        width: 100px;
-        height: 50px;
-    }
-
-    .selectName a p {
-        position: absolute;
-        text-align: center;
-        width: 100%;
-        height: 100%;
-        line-height: 50px;
-        font-size: 1em;
-
-    }
-
-    .selectInput h1 {
-        font-size: 2em;
-        color: #fb7248;
-    }
-
-    .container {
-        background-color: lightblue;
-        display: inline-block;
-        box-sizing: border-box;
-        background: url(https://w.wallhaven.cc/full/72/wallhaven-72wzq9.png);
-        background-repeat: repeat-y;
-        /* overflow: hidden; */
-    }
-
-    .left {
-        /* top:60%; */
-        position: relative;
-        width: 100%;
-        height: auto;
-        overflow: auto;
-        margin: 5px;
-        padding: 5px;
-    }
-
-    .right {
-        /* top:5%; */
-        position: relative;
-        width: 100%;
-        height: auto;
-        overflow: auto;
-        margin: 5px;
-        padding: 5px;
-    }
-
-    .input_chat1 {
-        display: none;
-    }
-
-    .input_chat2 {
-        /* position: static; */
-        margin-top: 5%;
-        width: 100%;
-        text-align: letf;
-        line-height: 50px;
-        background: cadetblue;
-        display: inline-block;
-    }
+  .selectName a {
+    width: 100px;
+    height: 50px;
+  }
+
+  .selectName a p {
+    position: absolute;
+    text-align: center;
+    width: 100%;
+    height: 100%;
+    line-height: 50px;
+    font-size: 1em;
+  }
+
+  .selectInput h1 {
+    font-size: 2em;
+    color: #fb7248;
+  }
+
+  .container {
+    background-color: lightblue;
+    display: inline-block;
+    box-sizing: border-box;
+    background: url(https://w.wallhaven.cc/full/72/wallhaven-72wzq9.png);
+    background-repeat: repeat-y;
+    /* overflow: hidden; */
+  }
+
+  .left {
+    /* top:60%; */
+    position: relative;
+    width: 100%;
+    height: auto;
+    overflow: auto;
+    margin: 5px;
+    padding: 5px;
+  }
+
+  .right {
+    /* top:5%; */
+    position: relative;
+    width: 100%;
+    height: auto;
+    overflow: auto;
+    margin: 5px;
+    padding: 5px;
+  }
+
+  .input_chat1 {
+    display: none;
+  }
+
+  .input_chat2 {
+    /* position: static; */
+    margin-top: 5%;
+    width: 100%;
+    text-align: letf;
+    line-height: 50px;
+    background: cadetblue;
+    display: inline-block;
+  }
 }
 </style>
diff --git a/src/components/Register.vue b/src/components/Register.vue
index 9de376c..c0d3a11 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -1,139 +1,172 @@
 <template>
-<div class="register" style="text-align: center; margin: 0 auto">
+  <div class="register" style="text-align: center; margin: 0 auto">
     <el-card class="box-card" style="text-align: center; margin: 60px auto">
-        <!-- 弹出一个警告框 -->
+      <!-- 弹出一个警告框 -->
 
-        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="text-align: center; margin: 0 auto">
-            <el-form-item>
+      <el-form
+        :model="ruleForm"
+        status-icon
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+        style="text-align: center; margin: 0 auto"
+      >
+        <el-form-item>
+          <!-- 弹出一个警告框 -->
+          <el-alert
+            title="这个用户名已经被使用！"
+            type="warning"
+            v-if="register_error"
+          >
+          </el-alert>
+          <!-- 成功注册！ -->
 
-                <!-- 弹出一个警告框 -->
-                <el-alert title="这个用户名已经被使用！" type="warning" v-if='register_error'>
-                </el-alert>
-                <!-- 成功注册！ -->
-
-                <el-alert title="欢迎！！！" type="success" v-if='register_success'>
-                </el-alert>
-                <p style="font-size: 30px">注册</p>
-                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
-                <!-- <svg
+          <el-alert title="欢迎！！！" type="success" v-if="register_success">
+          </el-alert>
+          <p style="font-size: 30px">注册</p>
+          <el-avatar
+            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+          ></el-avatar>
+          <!-- <svg
           class="icon"
           aria-hidden="true"
         >
           <use xlink:href="#iconshejitouxiangai"></use>
         </svg> -->
-            </el-form-item>
+        </el-form-item>
 
-            <el-form-item label="账号" prop="name">
-                <el-input v-model="ruleForm.name"></el-input>
-            </el-form-item>
+        <el-form-item label="账号" prop="name">
+          <el-input v-model="ruleForm.name"></el-input>
+        </el-form-item>
 
-            <el-form-item label="密码" prop="pass">
-                <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
-            </el-form-item>
-            <el-form-item label="确认" prop="checkPass">
-                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
-                <el-button @click="resetForm('ruleForm')">清空</el-button>
-            </el-form-item>
-            <el-form-item>
-                <el-link target="_blank" @click="$router.push({path: '/login'})">已有账号？</el-link>
-                <el-link type="primary" @click="$router.push({path: '/login'})">去登录</el-link>
-            </el-form-item>
-        </el-form>
+        <el-form-item label="密码" prop="pass">
+          <el-input
+            type="password"
+            v-model="ruleForm.pass"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="确认" prop="checkPass">
+          <el-input
+            type="password"
+            v-model="ruleForm.checkPass"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="submitForm('ruleForm')"
+            >注册</el-button
+          >
+          <el-button @click="resetForm('ruleForm')">清空</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-link target="_blank" @click="$router.push({ path: '/login' })"
+            >已有账号？</el-link
+          >
+          <el-link type="primary" @click="$router.push({ path: '/login' })"
+            >去登录</el-link
+          >
+        </el-form-item>
+      </el-form>
     </el-card>
-</div>
+  </div>
 </template>
 
 <script>
-import axios from 'axios'
+import axios from "axios";
 export default {
-  name: 'Register',
-  data () {
-    var checkName = (rule, value, callback) => {
+  name: "Register",
+  data() {
+    const checkName = (rule, value, callback) => {
       if (!value) {
-        return callback(new Error('账号不能为空'))
+        return callback(new Error("账号不能为空"));
       }
       setTimeout(() => {
         // if (!Number.isInteger(value)) {
         //   callback(new Error('请输入密码'));
         // } if {
         if (value.length < 2) {
-          callback(new Error('名字至少两位'))
+          callback(new Error("名字至少两位"));
         } else {
-          callback()
+          callback();
         }
-      }, 1000)
-    }
-    var validatePass = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请输入密码'))
+      }, 1000);
+    };
+    const validatePass = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请输入密码"));
       } else {
-        if (this.ruleForm.checkPass !== '') {
-          this.$refs.ruleForm.validateField('checkPass')
+        if (this.ruleForm.checkPass !== "") {
+          this.$refs.ruleForm.validateField("checkPass");
         }
-        callback()
+        callback();
       }
-    }
-    var validatePass2 = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('请再次输入密码'))
+    };
+    const validatePass2 = (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error("请再次输入密码"));
       } else if (value !== this.ruleForm.pass) {
-        callback(new Error('两次输入密码不一致!'))
+        callback(new Error("两次输入密码不一致!"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
       register_success: false,
       register_error: false,
       // baseurl: "http://127.0.0.1/",
-      baseurl: 'http://yongma16.xyz/',
+      baseurl: "http://114.116.52.53/",
+      // baseurl: 'http://yongma16.xyz/',
       ruleForm: {
-        pass: '',
-        checkPass: '',
-        name: ''
+        pass: "",
+        checkPass: "",
+        name: "",
       },
       rules: {
-        pass: [{ validator: validatePass, trigger: 'blur' }],
-        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
-        name: [{ validator: checkName, trigger: 'blur' }]
-      }
-    }
+        pass: [{ validator: validatePass, trigger: "blur" }],
+        checkPass: [{ validator: validatePass2, trigger: "blur" }],
+        name: [{ validator: checkName, trigger: "blur" }],
+      },
+    };
   },
   methods: {
-    submitForm (formName) {
+    submitForm(formName) {
       this.$refs[formName].validate((valid) => {
+        const that = this;
         if (valid) {
           // 提交数据
-          console.log(this.ruleForm.name, this.ruleForm.pass)
+          console.log(this.ruleForm.name, this.ruleForm.pass);
           // alert("yes submit!");
-          let that = this
-          that.register_success = false// 初始化register的状态
-          that.register_error = false
+          that.register_success = false; // 初始化register的状态
+          that.register_error = false;
           axios
-            .post(that.baseurl + 'user/register/',
-              {
+            .post(that.baseurl + "user/register/", {
               // 传递的名字和密码
-                name: that.ruleForm.name,
-                password: that.ruleForm.pass
-              }
-            )
+              name: that.ruleForm.name,
+              password: that.ruleForm.pass,
+            })
             .then(function (res) {
-              console.log('成功post', res)
-              console.log(res.data.code)
+              console.log("成功post", res);
+              console.log(res.data.code);
               if (res.data.code === 0) {
-                console.log('重名')
-                console.log(that.$cookies.get('user_session'))// 取出cookies的user_session
-                console.log(that.$cookies)// 存在
-                document.cookie = `user=${that.ruleForm.name}`
-                that.register_error = true
+                console.log("重名");
+                console.log(that.$cookies.get("user_session")); // 取出cookies的user_session
+                console.log(that.$cookies); // 存在
+                document.cookie = `user=${that.ruleForm.name}`;
+                that.register_error = true;
+                that.$message({
+                  message: "名称重复" + that.ruleForm.name + "!",
+                  type: "error",
+                });
                 // console.log(this.$cookies)
               } else {
-                that.register_success = true
-                console.log('时间节点')
-
+                that.register_success = true;
+                console.log("时间节点");
+                that.$message({
+                  message: "注册成功，欢迎您，" + that.ruleForm.name + "!",
+                  type: "success",
+                });
                 // let token={'user':res.data.name};//传递主码用户名即可
                 // this.$cookie.set('token',token,1);//设置token
 
@@ -146,22 +179,30 @@ export default {
             })
             .catch(function (res) {
               // 获取res中的name
-              alert('后端的问题！')
-              console.log('失败post', res)
-            })
+              that.$message({
+                message: "注册失败" + that.ruleForm.name + "!",
+                type: "error",
+              });
+              alert("后端的问题！");
+              console.log("失败post", res);
+            });
         } else {
           // alert("no submit!");
-          console.log('前端的问题！')
+          console.log("前端的问题！");
+          that.$message({
+            message: "注册失败" + that.ruleForm.name + "!",
+            type: "error",
+          });
           // console.log(this.$cookies);
-          return false
+          return false;
         }
-      })
+      });
     },
-    resetForm (formName) {
-      this.$refs[formName].resetFields()
-    }
-  }
-}
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
 </script>
 
 <style scoped>
diff --git a/src/weather/EchartWeather.vue b/src/weather/EchartWeather.vue
index 5813f7a..99fa86d 100644
--- a/src/weather/EchartWeather.vue
+++ b/src/weather/EchartWeather.vue
@@ -1,265 +1,272 @@
 <template>
-<div class="weather">
-    <div id="echart_weather">
-    </div>
+  <div class="weather">
+    <div id="echart_weather"></div>
     <div class="weatherDiscribe">
-        <!-- 表格 -->
-        <el-table :data="tableData" border style="width: 100%">
-            <el-table-column prop="date" label="日期">
-            </el-table-column>
-            <el-table-column prop="discrible" label="天气">
-            </el-table-column>
-            <el-table-column prop="temperature" label="温度">
-            </el-table-column>
-            <el-table-column prop="windem" label="风向">
-            </el-table-column>
-            <el-table-column prop="windwl" label="风级">
-            </el-table-column>
-        </el-table>
+      <!-- 表格 -->
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column prop="date" label="日期"> </el-table-column>
+        <el-table-column prop="discrible" label="天气"> </el-table-column>
+        <el-table-column prop="temperature" label="温度"> </el-table-column>
+        <el-table-column prop="windem" label="风向"> </el-table-column>
+        <el-table-column prop="windwl" label="风级"> </el-table-column>
+      </el-table>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-import axios from 'axios'
-import * as echarts from 'echarts'
+import axios from "axios";
+import * as echarts from "echarts";
 export default {
-    name: 'EchartWeather',
-    data() {
-        return {
-            msg: '贵阳天气',
-            baseurl: 'http://yongma16.xyz/article/weather/',
-            // baseurl: 'api/article/weather/',
-            tabPosition: 'left',
-            weather_title: [],
-            weather_high: [],
-            weather_low: [],
-            weather_discribe: [],
-            weather_windem:[],
-            weather_windwl:[],
-            tableData: []
-        }
-    },
-    mounted() {
-        this.initWeatherLine()
+  name: "EchartWeather",
+  data() {
+    return {
+      msg: "贵阳天气",
+      baseurl: "http://114.116.52.53/",
+      // 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);
+      }); // 同步
     },
-    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).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')
+    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");
             })
-        },
-        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}'
-                            }
+            .catch((r) => {
+              console.log("r", r);
+            });
+        }, 1000);
+        resolve("获取后端天气成功的promise");
+      });
+    },
+    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",
                         },
-                        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; //销毁
-        }
+                        type: "max",
+                        name: "最高点",
+                      },
+                    ],
+                  ],
+                },
+              },
+            ],
+          };
+          myChart.setOption(option); // 画折线图
+          window.onresize = function () {
+            myChart.resize();
+          };
+        }, 3000);
+        resolve("绘制折线图Promise");
+      });
+      // dom = null; //销毁
     },
-}
+  },
+};
 </script>
 
 <style scoped>
 .weather {
-    position: relative;
-    width: 100%;
-    height: 100%;
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 #echart_weather {
-    position: relative;
-    width: 100%;
-    height: 300px;
+  position: relative;
+  width: 100%;
+  height: 300px;
 }
 
 .weatherDiscribe {
-    position: relative;
-    margin-top: 5px;
-    width: 100%;
-    height: auto;
-    left: 50%;
-    transform: translateX(-50%);
+  position: relative;
+  margin-top: 5px;
+  width: 100%;
+  height: auto;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 #customers {
-    position: relative;
-    font-family: Arial, Helvetica, sans-serif;
-    border-collapse: collapse;
-    width: 100%;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%, -50%);
+  position: relative;
+  font-family: Arial, Helvetica, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%, -50%);
 }
 </style>
-- 
GitLab