Skip to content

M
myblogVue_django

yma16 / myblogVue_django

通知 5
Star 1
Fork 0
M
myblogVue_django
提交 b6fcc3d5 编写于 作者: yma16's avatar yma16
浏览文件
操作

fix:聊天室配置

上级 86b35688
隐藏空白更改
内联 并排
Showing with 166 addition and 158 deletion
config/index.js
浏览文件 @ b6fcc3d5
......@@ -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
浏览文件 @ b6fcc3d5
......@@ -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
浏览文件 @ b6fcc3d5
......@@ -58,6 +58,7 @@ export default {
watch: {
articleId: function (newData) {
this.childArticleId = newData;
return newData
},
},
mounted() {
......
src/components/Article.vue
浏览文件 @ b6fcc3d5
......@@ -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
浏览文件 @ b6fcc3d5
......@@ -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
浏览文件 @ b6fcc3d5
......@@ -5,7 +5,7 @@ export default {
state: {
// 用户账号密码
userInfo: {
name: null,
name: "游客",
password: null,
},
},
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或