fix:聊天室配置

config/index.js

@@ -16,11 +16,11 @@ module.exports = {
         changeOrigin: true, //是否允许跨越
         chunkOrigins: true,
         pathRewrite: {
-          "^/api": "", //重写,
+          "^/api": "api", //重写,
         },
       },
       "/ws_api/": {
-        target: "http://yongma16.xyz/",
+        target: "ws://yongma16.xyz/ws/webchat/",
         ws: true, //接受websocket请求
         changeOrigin: true, //是否允许跨越
         chunkOrigins: true,

src/App.vue

@@ -152,12 +152,14 @@ export default {
         "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
       ],
       headerData: ["从现在开始，种一棵树", "从现在开始，种一棵树"],
-      readCount: 0
+      readCount: 0,
     };
   },
   computed: {
     currentUserName: function () {
-      return store.state.user.userInfo.name;
+      return store.state.user.userInfo && store.state.user.userInfo.name
+        ? store.state.user.userInfo.name
+        : "游客";
     },
   },
   mounted() {

src/comment/ArticleComment.vue

@@ -58,6 +58,7 @@ export default {
   watch: {
     articleId: function (newData) {
       this.childArticleId = newData;
+      return newData
     },
   },
   mounted() {

src/components/Article.vue

@@ -210,40 +210,40 @@
 </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, //天气
+    VueMarkdown, // 显示markdown的组件
+    ArticleComment, // 子组件评论
+    EchartWeather // 天气
   },
-  name: "Article",
-  data() {
+  name: 'Article',
+  data () {
     return {
       // baseurl: '/api/',
-      baseurl: "/api/",
+      baseurl: '/api/',
       // baseurl: "http://yongma16.xyz/",
-      msg: "内容",
-      commmentSlogan: "评论区",
-      day_challenge: "训练营",
+      msg: '内容',
+      commmentSlogan: '评论区',
+      day_challenge: '训练营',
       challenge_data: [
-        "css挑战",
-        "websocket聊天",
-        "echarts地图配置",
-        "vue3测试平台",
-        "更新中",
+        'css挑战',
+        'websocket聊天',
+        'echarts地图配置',
+        'vue3测试平台',
+        '更新中'
       ],
       md_data: [],
       md_title: [],
-      the_title: "",
+      the_title: '',
       sear_page: 0,
       index_page: 0,
-      data: ["threejs加载模型"],
-      slogan: "记忆碎片",
-      tabPosition: "left",
+      data: ['threejs加载模型'],
+      slogan: '记忆碎片',
+      tabPosition: 'left',
       weather_title: [],
       weather_high: [],
       weather_low: [],
@@ -251,231 +251,237 @@ export default {
       article_loc: 0,
       challenge_loc: -1,
       topshow: false,
-      userImg: "",
-      username: "匿名",
-      articleCommit: "评论区",
+      userImg: '',
+      username: '匿名',
+      articleCommit: '评论区',
       // 分页实现 page1 page2 指向数组
       pageAnalys: {},
       currentPage: 1,
-      splitLength: 6, //划分条数
+      splitLength: 6, // 划分条数
       total: 0,
       pageSize: 4,
       pageArray: [6, 8, 10],
       postcomment: {
         articleId: undefined,
-        articleCommit: null,
+        articleCommit: null
       },
-      articleId: [], //文章的id
-    };
+      articleId: [] // 文章的id
+    }
   },
   watch: {
     topshow: function (newvalue, oldvalue) {
       if (newvalue === true) {
-        document.getElementById("topiconid").style.display = "none";
+        document.getElementById('topiconid').style.display = 'none'
       } else {
-        document.getElementById("topiconid").style.display = "block";
+        document.getElementById('topiconid').style.display = 'block'
       }
-    },
+    }
   },
-  beforeDestroy() {
-    window.removeEventListener("onload", this.topvisible());
+  beforeDestroy () {
+    window.removeEventListener('onload', this.topvisible())
   },
-  mounted() {
-    this.initPageSpliteFun();
-    window.addEventListener("onload", this.topvisible());
+  mounted () {
+    this.initPageSpliteFun()
+    window.addEventListener('onload', this.topvisible())
   },
   methods: {
-    initPageSpliteFun() {
-      this.splitLength = this.pageArray[0];
+    initPageSpliteFun () {
+      this.splitLength = this.pageArray[0]
     },
-    handleSizeChange(val) {
+    handleSizeChange (val) {
       // 转到第一页md_title
-      let that = this;
-      that.pageAnalysFun(that.pageAnalys.allTitle, val); //触发修改
+      let that = this
+      that.pageAnalysFun(that.pageAnalys.allTitle, val) // 触发修改
     },
-    handleCurrentChange(val) {
-      let that = this;
-      //触发md_title的修改
-      that.currentPage = val;
-      that.pageAnalysFun(that.pageAnalys.allTitle); //触发修改
+    handleCurrentChange (val) {
+      let that = this
+      // 触发md_title的修改
+      that.currentPage = val
+      that.pageAnalysFun(that.pageAnalys.allTitle) // 触发修改
     },
-    pageAnalysFun(allTitleArray, selectListLength) {
-      let that = this;
-      that.total = allTitleArray.length; //总数
-      let splitLength = that.splitLength;
+    pageAnalysFun (allTitleArray, selectListLength) {
+      let that = this
+      that.total = allTitleArray.length // 总数
+      let splitLength = that.splitLength
       if (!selectListLength) {
-        that.splitLength = that.splitLength;
+        that.splitLength = that.splitLength
       } else {
-        this.currentPage = 1;
-        that.splitLength = selectListLength; //划分长度
+        this.currentPage = 1
+        that.splitLength = selectListLength // 划分长度
       }
-      splitLength = that.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; //每一页的条数
+      splitLength = that.splitLength
+      let splitNum = Math.ceil(that.total / splitLength) // 向上取整
+      that.pageAnalys.childNum = splitNum // 子数组个数
+      that.pageAnalys.allTitle = allTitleArray // 所有标题
+      that.pageAnalys.titleArray = new Array() // 子数组个数
+      let locSplit = 0
+      let locLength = splitLength // 每一页的条数
       while (splitNum--) {
         // 循环获取子数组
         if (splitNum >= 1) {
-          let childArray = [];
+          let childArray = []
           for (
             let temp = locSplit;
             temp < locLength && temp < that.total;
             ++temp, ++locSplit
           ) {
-            childArray.push(that.pageAnalys.allTitle[temp]);
+            childArray.push(that.pageAnalys.allTitle[temp])
           }
-          that.pageAnalys.titleArray.push(childArray);
-          locLength += splitLength; //分割数组长度后移
+          that.pageAnalys.titleArray.push(childArray)
+          locLength += splitLength // 分割数组长度后移
         } else {
           // 最后一个数组
-          let childArray = [];
+          let childArray = []
           for (let temp = locSplit; temp < that.total; ++temp) {
-            childArray.push(that.pageAnalys.allTitle[temp]);
+            childArray.push(that.pageAnalys.allTitle[temp])
           }
-          that.pageAnalys.titleArray.push(childArray);
-          break;
+          that.pageAnalys.titleArray.push(childArray)
+          break
         }
       }
       try {
-        that.md_title = that.pageAnalys.titleArray[this.currentPage - 1];
+        that.md_title = that.pageAnalys.titleArray[this.currentPage - 1]
       } catch (e) {
-        throw Error(e);
+        throw Error(e)
       }
     },
     increment: function () {
-      this.$store.commit("increment");
+      this.$store.commit('increment')
     },
     topvisible: function () {
-      let dom = document.getElementById("hometitle");
-      this.topshow = this.elementIsVisibleInViewport(dom);
-      setTimeout(this.topvisible);
+      let dom = document.getElementById('hometitle')
+      this.topshow = this.elementIsVisibleInViewport(dom)
+      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;
+      try {
+        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
+      } catch (r) {
+        throw Error(r)
+      }
     },
     li_errorClass: function () {},
     cssPage: function (index) {
-      this.challenge_loc = index;
-      let name = this.challenge_data[index];
+      this.challenge_loc = index
+      let name = this.challenge_data[index]
       switch (name) {
-        case "css挑战":
+        case 'css挑战':
           this.$router
             .push({
-              path: "/css",
+              path: '/css'
             })
             .catch((error) => {
-              throw Error(error);
-            });
-          break;
-        case "echarts地图配置":
+              throw Error(error)
+            })
+          break
+        case 'echarts地图配置':
           this.$router
             .push({
-              path: "/home",
+              path: '/home'
             })
             .catch((error) => {
-              throw Error(error);
-            });
-          break;
-        case "websocket聊天":
+              throw Error(error)
+            })
+          break
+        case 'websocket聊天':
           this.$router
             .push({
-              path: "/onlinewebsocket",
+              path: '/onlinewebsocket'
             })
             .catch((error) => {
-              throw Error(error);
-            });
-          break;
-        case "vue3测试平台":
-          window.open("http://yongma16.xyz/emoji_api/");
-          break;
+              throw Error(error)
+            })
+          break
+        case 'vue3测试平台':
+          window.open('http://yongma16.xyz/emoji_api/')
+          break
         default:
-          break;
+          break
       }
     },
     open_message: function () {
       this.$notify({
-        title: "欢迎合作",
-        message: "邮箱：1432448610@qq.com",
-        position: "bottom-right",
-      });
+        title: '欢迎合作',
+        message: '邮箱：1432448610@qq.com',
+        position: 'bottom-right'
+      })
     },
     toTop: function () {
-      location.href = "#home"; // 定位
-      document.getElementById("mainappid").scrollTop = 0;
+      location.href = '#home' // 定位
+      document.getElementById('mainappid').scrollTop = 0
     }, // 返回天气相当于返回顶部
-    getCommentsFromArticle(id) {
-      this.$refs.commentRef.getComments(id); //触发子组件的方法
+    getCommentsFromArticle (id) {
+      this.$refs.commentRef.getComments(id) // 触发子组件的方法
     },
     getArticles: function (page) {
-      let that = this; // this指向转化
-      that.article_loc = 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,
+        .post(that.baseurl + 'article/index/', {
+          value: page + (that.currentPage - 1) * that.splitLength
           // 传入索引
         })
         .then((res) => {
           if (res.data.code === 1) {
-            let respdata = res.data;
-            let content = respdata.article;
-            that.md_data = []; // 清空
+            let respdata = res.data
+            let content = respdata.article
+            that.md_data = [] // 清空
             content.map((o) => {
-              that.md_data.push(o); // 传入一个文章
-            });
-            that.the_title = respdata.the_title;
+              that.md_data.push(o) // 传入一个文章
+            })
+            that.the_title = respdata.the_title
           } else if (res.data.code === 0) {
             // alter("失败！")
-            that.$message.error("失败");
+            that.$message.error('失败')
           }
         })
         .catch((error) => {
-          throw Error(error);
-        });
-      that.getCommentsFromArticle(that.postcomment.articleId);
-    },
+          throw Error(error)
+        })
+      that.getCommentsFromArticle(that.postcomment.articleId)
+    }
   },
   created: function () {
     // 初始化
-    let that = this;
+    let that = this
     axios
-      .get(that.baseurl + "article/index/")
+      .get(that.baseurl + 'article/index/')
       .then((res) => {
-        let resdata = res.data;
-        let content = resdata.article; // 传递过来的文章 进行处理
-        let title = resdata.title;
-        that.articleId = resdata.articleObjectId;
-        that.postcomment.articleId = resdata.articleId;
-        this.$refs.commentRef.getComments(that.postcomment.articleId); //触发子组件的方法
+        let resdata = res.data
+        let content = resdata.article // 传递过来的文章 进行处理
+        let title = resdata.title
+        that.articleId = resdata.articleObjectId
+        that.postcomment.articleId = resdata.articleId
+        this.$refs.commentRef.getComments(that.postcomment.articleId) // 触发子组件的方法
         content.map((o) => {
-          that.md_data.push(o);
-        });
+          that.md_data.push(o)
+        })
         let titleAllArray = title.map((o) => {
-          return o;
-        });
-        that.the_title = resdata.the_title;
-        this.pageAnalysFun(titleAllArray); //分页
+          return o
+        })
+        that.the_title = resdata.the_title
+        this.pageAnalysFun(titleAllArray) // 分页
       })
       .catch((r) => {
-        throw Error(r);
-      }); // get log
-  },
-};
+        throw Error(r)
+      }) // get log
+  }
+}
 </script>
 
 <style scoped>

src/components/Onlinewebsocket.vue

@@ -141,10 +141,9 @@ export default {
       room_name: ["DjangoVue"],
       room_select: "",
       // baseUrl: "http://localhost:8006/webchat/index/",
-      baseurl: "/ws_api/",
-      // baseUrl: "http://yongma16.xyz/",
-      websocketUrl: "/api/",
-      // websocketUrl: "yongma16.xyz/ws/webchat/",
+      baseUrl: "http://yongma16.xyz/api/",
+      // websocketUrl: "/ws_api/",
+      websocketUrl: "ws://yongma16.xyz/ws-api/",
       websocket: null,
       // room 存房间名字，content保存聊天信息的数组
       chat_info: new Array(),
@@ -322,8 +321,8 @@ export default {
       try {
         //判断房间是否存在
         let roomFlag = false;
-        this.chat_info.map((o, index) => {
-          if (o.room == roomName) {
+        this.chat_info.map((item, index) => {
+          if (item.room == roomName) {
             // 房间存在
             console.log("房间存在", roomName);
             roomFlag = true;
@@ -344,7 +343,7 @@ export default {
         console.log("创建房间出错", e);
       }
       this.chatRoomIndex = chatRoomIndex;
-      const wsUrl = this.websocketUrl + "webchat/room/";
+      const wsUrl = this.websocketUrl;
       this.websocket = new WebSocket(wsUrl + room + "/"); // 连接
       console.log(this.websocket, "聊天室");
       this.websocket.onmessage = this.websocketMessage; // 函数指向

src/store/modules/user.js

@@ -5,7 +5,7 @@ export default {
   state: {
     // 用户账号密码
     userInfo: {
-      name: null,
+      name: "游客",
       password: null,
     },
   },