1.0版本
This commit is contained in:
parent
0ff621b43d
commit
91d459b673
File diff suppressed because it is too large
Load Diff
|
|
@ -8,6 +8,7 @@
|
|||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"ant-design-vue": "^1.7.8",
|
||||
"arale-qrcode": "^3.0.5",
|
||||
"axios": "^1.6.0",
|
||||
"core-js": "^3.8.3",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="menu">
|
||||
<div class="brand">
|
||||
<router-link to="/" class="brand">
|
||||
<h3 class="red">BIG</h3>
|
||||
<h3 class="white">DATA</h3>
|
||||
</div>
|
||||
</router-link>
|
||||
<div class="main-nav">
|
||||
<router-link to="/" type="primary" class="button-container">
|
||||
<h2>主页</h2>
|
||||
|
|
@ -15,9 +15,13 @@
|
|||
<router-link to="/add" type="success" class="button-container">
|
||||
<h2>发布博客</h2>
|
||||
</router-link>
|
||||
<router-link to="/chat" type="success" class="button-container">
|
||||
<h2>聊天室</h2>
|
||||
</router-link>
|
||||
|
||||
</div>
|
||||
<div class="right-nav">
|
||||
<el-badge is-dot :hidden=isSignVisible>
|
||||
<el-dropdown @command="handleCommand" class="el-dropdown-link">
|
||||
<span>
|
||||
<el-avatar v-if="imageUrl" :src="imageUrl" style="width: 50px; height: 50px;"
|
||||
|
|
@ -26,7 +30,13 @@
|
|||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<p>{{ this.username }}</p>
|
||||
<el-upload action="http://124.71.135.249:8081/uploadAvatar/" :show-file-list="false"
|
||||
<a @click="friendRequestVisible = true">
|
||||
<el-dropdown-item divided icon="el-icon-user-solid">
|
||||
<el-badge is-dot :hidden=isSignVisible>好友申请</el-badge>
|
||||
</el-dropdown-item>
|
||||
|
||||
</a>
|
||||
<el-upload action="http://62.234.217.137:8088/user/uploadAvatar" :headers="uploadHeaders" :show-file-list="false"
|
||||
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
||||
<el-dropdown-item divided icon="el-icon-picture-outline-round">更换头像</el-dropdown-item>
|
||||
</el-upload>
|
||||
|
|
@ -45,9 +55,11 @@
|
|||
</router-link>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-badge>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog title="修改昵称" :visible="nameChangeVisible" width="400px" @close="nameChangeVisible = false">
|
||||
<el-dialog title="修改昵称" :modal="false" :visible="nameChangeVisible" width="400px"
|
||||
@close="nameChangeVisible = false">
|
||||
<el-form :model="usernameForm" :rules="usernameRules">
|
||||
<el-form-item label="请输入昵称" :label-width="200" prop="usernameChange">
|
||||
<el-input v-model="usernameForm.usernameChange" style="width: 350px;"></el-input>
|
||||
|
|
@ -58,7 +70,7 @@
|
|||
<el-button type="primary" @click="usernameChange()">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog title="修改密码" :destroy-on-close="true" :visible="passwordChangeVisible" width="550px"
|
||||
<el-dialog title="修改密码" :modal="false" :destroy-on-close="true" :visible="passwordChangeVisible" width="550px"
|
||||
@close="passwordChangeVisible = false">
|
||||
<el-form :model="passwordForm" label-width="100px" :rules="passwordRules">
|
||||
<el-form-item label="原密码" prop="oldPassword">
|
||||
|
|
@ -76,6 +88,25 @@
|
|||
<el-button type="primary" @click="passwordChange()">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog title="好友申请" :visible="friendRequestVisible" :modal="false" width="400px"
|
||||
@close="friendRequestVisible = false">
|
||||
<div v-for="friendRequest in friendRequests" :key="friendRequest.id" style="margin-top: 10px;">
|
||||
<el-card>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<el-avatar :src="friendRequest.avatar" style="width: 50px; height: 50px;"></el-avatar>
|
||||
<el-tag style="font-size: 17px; margin: 10px;">{{ friendRequest.initiator }}</el-tag>
|
||||
</div>
|
||||
<div>
|
||||
<el-button size="small" type="success"
|
||||
@click="agreeFriendRequest(friendRequest.username, friendRequest.friend)">同意</el-button>
|
||||
<el-button size="small" type="danger"
|
||||
@click="refuseFriendRequest(friendRequest.username, friendRequest.friend)">拒绝</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -102,10 +133,21 @@ export default {
|
|||
}
|
||||
};
|
||||
return {
|
||||
Url: {
|
||||
getAvatar: '/user/getAvatar',
|
||||
getUsername: '/user/getUsername',
|
||||
usernameChange: '/user/usernameChange',
|
||||
passwordChange: '/user/passwordChange',
|
||||
haveFriendRequest: '/user/checkFriendRequest',
|
||||
acceptRequest: '/relationship/acceptRequest',
|
||||
refuseRequest: '/relationship/refuseRequest',
|
||||
},
|
||||
imageUrl: '',
|
||||
username: '',
|
||||
nameChangeVisible: false,
|
||||
passwordChangeVisible: false,
|
||||
nameChangeVisible: false,//修改昵称
|
||||
passwordChangeVisible: false,//修改密码
|
||||
friendRequestVisible: false,//好友请求
|
||||
friendRequests: [],//好友请求列表
|
||||
usernameForm: {
|
||||
usernameChange: ''
|
||||
},
|
||||
|
|
@ -114,6 +156,7 @@ export default {
|
|||
newPassword: '',
|
||||
configurePassword: ''
|
||||
},
|
||||
isSignVisible: true,//是否隐藏小红点
|
||||
passwordRules: {
|
||||
oldPassword: [
|
||||
{ required: true, message: '请输入原密码', trigger: 'blur' },
|
||||
|
|
@ -129,9 +172,18 @@ export default {
|
|||
usernameChange: [
|
||||
{ validator: validateUsername, trigger: 'blur' }, //trigger: 'blur'失去焦点时触发
|
||||
],
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
uploadHeaders() {
|
||||
// 从localStorage获取token
|
||||
const token = window.localStorage.getItem("token");
|
||||
return {
|
||||
Authorization: token ? token : ''
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleAvatarSuccess(res, file) {
|
||||
this.imageUrl = URL.createObjectURL(file.raw);
|
||||
|
|
@ -152,19 +204,19 @@ export default {
|
|||
return isJPG && isLt2M;
|
||||
},
|
||||
getAvatar() {
|
||||
axios.get("/getAvatar").then((res) => {
|
||||
this.imageUrl = 'http://124.71.135.249:8081' + res.data;
|
||||
axios.get(this.Url.getAvatar).then((res) => {
|
||||
this.imageUrl = 'http://62.234.217.137:8088' + res.data;
|
||||
console.log("接收的url：" + this.imageUrl)
|
||||
})
|
||||
},
|
||||
getUsername() {
|
||||
axios.get("/getUsername").then((res) => {
|
||||
axios.get(this.Url.getUsername).then((res) => {
|
||||
this.username = res.data;
|
||||
console.log(this.username);
|
||||
})
|
||||
},
|
||||
usernameChange() {
|
||||
axios.get("/usernameChange", {
|
||||
axios.get(this.Url.usernameChange, {
|
||||
params: {
|
||||
username: this.usernameForm.usernameChange
|
||||
}
|
||||
|
|
@ -181,7 +233,7 @@ export default {
|
|||
})
|
||||
},
|
||||
passwordChange() {
|
||||
axios.get("/passwordChange", {
|
||||
axios.get(this.Url.passwordChange, {
|
||||
params: {
|
||||
oldPassword: this.passwordForm.oldPassword,
|
||||
newPassword: this.passwordForm.newPassword,
|
||||
|
|
@ -200,10 +252,73 @@ export default {
|
|||
|
||||
})
|
||||
},
|
||||
//是否有好友请求
|
||||
haveFriendRequest() {
|
||||
axios.get(this.Url.haveFriendRequest).then((res) => {
|
||||
this.friendRequests = res.data.friendRequests;
|
||||
for (let i = 0; i < this.friendRequests.length; i++) {
|
||||
if (this.friendRequests[i].avatar == null || this.friendRequests[i].avatar == '') {
|
||||
//如果头像为空，设置默认头像
|
||||
this.friendRequests[i].avatar = 'http://62.234.217.137:8088' + '/images/avatar/default.jpg'
|
||||
} else {
|
||||
this.friendRequests[i].avatar = 'http://62.234.217.137:8088' + this.friendRequests[i].avatar
|
||||
}
|
||||
}
|
||||
if (this.friendRequests.length > 0) {
|
||||
this.isSignVisible = false;//显示小红点
|
||||
} else {
|
||||
this.isSignVisible = true;
|
||||
}
|
||||
})
|
||||
},
|
||||
//同意好友请求
|
||||
agreeFriendRequest(initiator, friend) {
|
||||
axios.post(this.Url.acceptRequest, {
|
||||
username: initiator,
|
||||
friend: friend
|
||||
}).then((res) => {
|
||||
const result = res.data;
|
||||
if (result.code === 200) {
|
||||
this.haveFriendRequest();
|
||||
this.$message({
|
||||
message: result.message,
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: result.message,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
//拒绝好友请求
|
||||
refuseFriendRequest(initiator, friend) {
|
||||
axios.post(this.Url.refuseRequest, {
|
||||
username: initiator,
|
||||
friend: friend
|
||||
}).then((res) => {
|
||||
const result = res.data;
|
||||
if (result.code === 200) {
|
||||
this.haveFriendRequest();
|
||||
this.$message({
|
||||
message: result.message,
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: result.message,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
created() {
|
||||
this.getAvatar();
|
||||
this.getUsername();
|
||||
this.haveFriendRequest();
|
||||
},
|
||||
|
||||
name: "MenuView",
|
||||
|
|
@ -357,7 +472,7 @@ export default {
|
|||
/* position: absolute;
|
||||
background-color: transparent; */
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
/* position: fixed; */
|
||||
height: 70px;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
|
|
|
|||
21
src/main.js
21
src/main.js
|
|
@ -3,6 +3,7 @@ import App from './App.vue'
|
|||
import router from './router'
|
||||
import store from './store'
|
||||
import axios from 'axios'
|
||||
|
||||
import "./css/common.css"
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
|
@ -11,13 +12,31 @@ import ElementUI from 'element-ui';
|
|||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
Vue.use(ElementUI);
|
||||
|
||||
|
||||
|
||||
//导入mavon-editor，用户Markdown编辑器
|
||||
import mavonEditor from 'mavon-editor'
|
||||
//解决Markdown编辑器的图标不出现问题
|
||||
import "mavon-editor/dist/css/index.css"
|
||||
Vue.use(mavonEditor)
|
||||
|
||||
axios.defaults.baseURL="http://localhost:8081"
|
||||
axios.defaults.baseURL = "http://62.234.217.137:8088"
|
||||
|
||||
// 添加请求拦截器
|
||||
axios.interceptors.request.use(function (config) {
|
||||
// 在发送请求之前做些什么
|
||||
// 判断是否存在token,如果存在将每个请求header添加token
|
||||
const excludedPaths = ['/login', '/register'];
|
||||
console.log(config.headers, window.localStorage.getItem("token"));
|
||||
if (!excludedPaths.includes(config.url) && window.localStorage.getItem("token")) {
|
||||
config.headers.Authorization = window.localStorage.getItem("token");
|
||||
console.log(config.headers.Authorization);
|
||||
}
|
||||
return config;
|
||||
}, function (error) {
|
||||
router.push('/login');
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
//修改标题
|
||||
router.beforeEach((to, from, next) => {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import jwt_decode from "jwt-decode";
|
|||
import BlogTime from '../views/BlogTimeView.vue'
|
||||
import ProjectWall from '../views/ProjectWallView.vue'
|
||||
import MobileLogin from '../views/MobileLoginView.vue'
|
||||
import ChatRoom from '../views/ChatRoomView.vue'
|
||||
import store from "../store/index.js"
|
||||
|
||||
|
||||
|
|
@ -64,6 +65,14 @@ const routes = [
|
|||
title: 'Xubx的博客'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/chat',
|
||||
name: 'ChatRoom',
|
||||
component: ChatRoom,
|
||||
meta: {
|
||||
title: 'Xubx的博客'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/test',
|
||||
name: 'ProjectWall',
|
||||
|
|
@ -102,7 +111,6 @@ router.beforeEach((to, from, next) => {
|
|||
}
|
||||
next();
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ export default {
|
|||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
//提交表单
|
||||
axios.post('/addBlog', {
|
||||
axios.post('/blog/addBlog', {
|
||||
// id: this.ruleForm.id,
|
||||
title: this.ruleForm.title,
|
||||
description: this.ruleForm.description,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@
|
|||
<Header></Header>
|
||||
<div style="text-align: left;padding-left: 40px; width: 96%;" class="mblog">
|
||||
<br>
|
||||
<div>
|
||||
<h2>{{ blog.title }}</h2>
|
||||
<span style="font-size: 13px;">发布时间: {{ formatDate(blog.created) }}</span>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<el-link icon="el-icon-edit">
|
||||
|
|
@ -67,6 +70,8 @@
|
|||
v-if="(commentReply.parent_id == comment.comment_id) && isClickId === comment.comment_id">
|
||||
<div class="comment-reply">
|
||||
<div class="comment-top">
|
||||
<el-avatar class="comment-avatar" shape="circle" size="medium"
|
||||
:src="commentReply.avatar" />
|
||||
<el-tag class="comment-username" style="font-size: 17px;">{{
|
||||
commentReply.username }} 回复 @{{
|
||||
commentReply.parent_name }}</el-tag>
|
||||
|
|
@ -136,6 +141,10 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(dateString) {
|
||||
const options = { year: 'numeric', month: 'long', day: 'numeric' };
|
||||
return new Date(dateString).toLocaleString('zh-CN', options);
|
||||
},
|
||||
viewReplys(comment) {
|
||||
this.isClickId = comment.comment_id
|
||||
const commentReplyAdd = []
|
||||
|
|
@ -219,7 +228,7 @@ export default {
|
|||
commentGet() {
|
||||
this.commentVisible = true
|
||||
//获取评论区
|
||||
axios.get('/getComment', {
|
||||
axios.get('/comment/getComment', {
|
||||
params: {
|
||||
blogId: this.blog.id
|
||||
}
|
||||
|
|
@ -227,11 +236,11 @@ export default {
|
|||
console.log(res.data)
|
||||
this.comments = res.data
|
||||
for (let i = 0; i < this.comments.length; i++) {
|
||||
if (this.comments[i].avatar == null) {
|
||||
if (this.comments[i].avatar == null || this.comments[i].avatar == '') {
|
||||
//如果头像为空，设置默认头像
|
||||
this.comments[i].avatar = 'http://124.71.135.249:8081' + '/images/avatar/default.jpg'
|
||||
this.comments[i].avatar = 'http://62.234.217.137:8088' + '/images/avatar/default.jpg'
|
||||
} else {
|
||||
this.comments[i].avatar = 'http://124.71.135.249:8081' + this.comments[i].avatar
|
||||
this.comments[i].avatar = 'http://62.234.217.137:8088' + this.comments[i].avatar
|
||||
}
|
||||
console.log("this.comments[i].parent_id" + this.comments[i].parent_id + "this.comments[i].username" + this.comments[i].username)
|
||||
}
|
||||
|
|
@ -250,7 +259,7 @@ export default {
|
|||
this.commentForm.created = created
|
||||
console.log(this.commentForm)
|
||||
//提交评论
|
||||
axios.post('/addComment', {
|
||||
axios.post('/comment/addComment', {
|
||||
article_id: this.commentForm.id,
|
||||
parent_id: this.replyComent.comment_id,
|
||||
parent_name: this.replyComent.replyName,
|
||||
|
|
@ -275,7 +284,7 @@ export default {
|
|||
created() {
|
||||
const blogId = this.$route.params.blogId
|
||||
const that = this
|
||||
axios.get('/getBlogDetail', {
|
||||
axios.get('/blog/getBlogDetail', {
|
||||
params: {
|
||||
blogId: blogId
|
||||
}
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ export default {
|
|||
const that = this
|
||||
if (blogId !== undefined && blogId !== null && blogId !== '') {
|
||||
console.log(blogId)
|
||||
axios.get('/getBlogDetail', {
|
||||
axios.get('/blog/getBlogDetail', {
|
||||
params: {
|
||||
blogId: blogId
|
||||
}
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ export default {
|
|||
methods: {
|
||||
getBlogs() {
|
||||
const that = this;
|
||||
axios.get("/getBlogs").then((response) => {
|
||||
axios.get("/blog/getBlogs").then((response) => {
|
||||
that.blogs = response.data;
|
||||
for (let index in that.blogs) {
|
||||
that.blogs[index].imageUrl = this.imageUrls[index % 8];
|
||||
|
|
@ -227,7 +227,7 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
/*base code*/
|
||||
.animated {
|
||||
-webkit-animation-duration: 1s;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</el-card>
|
||||
</eltimeline-item>
|
||||
<br>
|
||||
<el-timeline-item :timestamp="new Date(blog.created)" placement="top" v-for="blog in pagedBlogs"
|
||||
<el-timeline-item :timestamp="formatDate(blog.created)" placement="top" v-for="blog in pagedBlogs"
|
||||
:key="blog.title">
|
||||
<el-card>
|
||||
<!-- 路由跳转 -->
|
||||
|
|
@ -80,9 +80,13 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
formatDate(dateString) {
|
||||
const options = { year: 'numeric', month: 'long', day: 'numeric' };
|
||||
return new Date(dateString).toLocaleString('zh-CN', options);
|
||||
},
|
||||
getBlogs() {
|
||||
const that = this;
|
||||
axios.get("/getBlogs").then((response) => {
|
||||
axios.get("/blog/getBlogs").then((response) => {
|
||||
that.blogs = response.data;
|
||||
that.total = that.blogs.length; //总博客数
|
||||
that.handleCurrentChange(that.currentPage); //初始化当前页
|
||||
|
|
|
|||
|
|
@ -0,0 +1,357 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<Menu></Menu>
|
||||
<br>
|
||||
<div class="room">
|
||||
<el-row gutter="24">
|
||||
<el-col :span="6">
|
||||
<el-card class="left">
|
||||
<div slot="header">
|
||||
<span style="font-weight: bold; font-size: 20px; padding-left: 30px;">好友列表</span>
|
||||
<el-button @click="addFriends()" style="float: right;" type="text">添加好友</el-button>
|
||||
</div>
|
||||
<div style="margin-top: 10px;">
|
||||
<!-- 好友列表 -->
|
||||
<div v-for="friend in friends" :key="friend.id" class="friends"
|
||||
@click="chat(friend.username)"
|
||||
:class="{ 'selected-friend': friend.username === currentUsername }">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<el-badge v-if="friend.unreadCount != 0" :value=friend.unreadCount>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<el-avatar :src="friend.avatar"
|
||||
style="width: 50px; height: 50px;"></el-avatar>
|
||||
<el-tag style="font-size: 17px; margin: 10px;">{{ friend.username
|
||||
}}</el-tag>
|
||||
</div>
|
||||
</el-badge>
|
||||
<div v-else>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<el-avatar :src="friend.avatar"
|
||||
style="width: 50px; height: 50px;"></el-avatar>
|
||||
<el-tag style="font-size: 17px; margin: 10px;">{{ friend.username
|
||||
}}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-card class="right">
|
||||
<!-- 好友名称 -->
|
||||
<div slot="header" style="display: flex;">
|
||||
<span style="font-size: 20px;">{{ currentUsername }}</span>
|
||||
</div>
|
||||
<!-- 聊天内容 -->
|
||||
<div class="chat-box" ref="ChatBox">
|
||||
<br>
|
||||
<div v-for="message in messages" :key="message.id">
|
||||
<div v-if="message.sender === currentUsername"
|
||||
style="display:flex; text-align: left; margin: 4px;">
|
||||
<el-avatar shape="square" :src="message.avatar"
|
||||
style="width: 40px; height: 40px;"></el-avatar>
|
||||
<div style="margin-left: 10px; display: flex; flex-direction: column;">
|
||||
<span style="font-size: 14px; margin-top: -10px;">{{ message.sender }}</span>
|
||||
<el-tag
|
||||
style="background-color: white; color: black; height: 40px; line-height: 40px; font-size: 14px; margin-top: 5px; margin-bottom: 5px;">
|
||||
{{ message.content }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else
|
||||
style="display: flex; justify-content: flex-end; flex-direction: row; margin: 4px;">
|
||||
<div style="margin-right: 10px; display: flex; flex-direction: column;">
|
||||
<span style="font-size: 14px; margin-top: -10px; text-align: right;">{{
|
||||
message.sender }}</span>
|
||||
<el-tag
|
||||
style="background-color: #95ec69; color: black; height: 40px; line-height: 40px; font-size: 14px; margin-top: 5px; margin-bottom: 5px;">
|
||||
{{ message.content }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-avatar shape="square" :src="message.avatar"
|
||||
style="width: 40px; height: 40px;"></el-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<!-- 输入框 -->
|
||||
<div v-if="currentUsername != ''" class="InputBox">
|
||||
<el-input type="textarea" :rows="5" resize="none" placeholder="请输入内容"
|
||||
@keyup.enter.native="sendMessages" v-model="inputArea">
|
||||
</el-input>
|
||||
<el-button style="margin-top: 10px; float: right; color: #07c160;"
|
||||
@click="sendMessages()">发送</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog title="添加好友" :visible.sync="addFriendsVisible" width="30%" :before-close="handleClose">
|
||||
<div style="display: flex; ">
|
||||
<el-input v-model="username" placeholder="请输入用户名"></el-input>
|
||||
<el-button style="margin-left:10px; " type="primary" @click="queryUser()">查 找</el-button>
|
||||
</div>
|
||||
<div style="margin-top: 10px; max-height: 400px; overflow-y: auto;">
|
||||
<div v-for="user in users" :key="user.id" style="margin-top: 10px;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<el-avatar :src="user.avatar" style="width: 50px; height: 50px;"></el-avatar>
|
||||
<el-tag style="font-size: 17px; margin: 10px;">{{ user.username }}</el-tag>
|
||||
</div>
|
||||
<el-button type="success" @click="requestFriend(user.username)">添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<br>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Footer from "../components/Footer";
|
||||
import Menu from "../components/Menu";
|
||||
import axios from "axios";
|
||||
|
||||
let ws;
|
||||
|
||||
export default {
|
||||
components: { Menu, Footer },
|
||||
beforeRouteEnter(to, from, next) {
|
||||
// 在组件进入之前，将页面滚动到顶部
|
||||
window.scrollTo(0, 0);
|
||||
next();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
Url: {
|
||||
queryUser: '/relationship/queryUser',
|
||||
addRequest: '/relationship/addRequest',
|
||||
getFriends: '/relationship/getFriends',
|
||||
sendMessages: '/messages/sendMessages',
|
||||
getMessages: '/messages/getMessages',
|
||||
getUsername: '/user/getUsername'
|
||||
},
|
||||
addFriendsVisible: false,
|
||||
users: [],
|
||||
username: '',
|
||||
friends: [],
|
||||
currentUsername: '',//当前聊天的好友
|
||||
loginUsername: '',
|
||||
inputArea: '',
|
||||
messages: [],//聊天记录
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//添加好友的对话框
|
||||
addFriends() {
|
||||
this.users = [];//清空
|
||||
this.username = '';//清空
|
||||
this.addFriendsVisible = true;
|
||||
},
|
||||
//查找用户
|
||||
queryUser() {
|
||||
this.users = [];//清空
|
||||
axios.get(this.Url.queryUser, {
|
||||
params: {
|
||||
username: this.username
|
||||
}
|
||||
}).then((res) => {
|
||||
this.users = res.data;
|
||||
for (let i = 0; i < this.users.length; i++) {
|
||||
if (this.users[i].avatar == null || this.users[i].avatar == '') {
|
||||
//如果头像为空，设置默认头像
|
||||
this.users[i].avatar = 'http://62.234.217.137:8088' + '/images/avatar/default.jpg'
|
||||
} else {
|
||||
this.users[i].avatar = 'http://62.234.217.137:8088' + this.users[i].avatar
|
||||
}
|
||||
}
|
||||
if (res.data.length == 0) {
|
||||
this.$message({
|
||||
message: '未找到该用户',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//发送添加好友请求
|
||||
requestFriend(friendId) {
|
||||
axios.get(this.Url.addRequest, {
|
||||
params: {
|
||||
username: friendId
|
||||
}
|
||||
}).then((res) => {
|
||||
const result = res.data;
|
||||
if (result.code === 200) {
|
||||
this.$message({
|
||||
message: result.message,
|
||||
type: 'success'
|
||||
});
|
||||
} else {
|
||||
this.$message({
|
||||
message: result.message,
|
||||
type: 'error'
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
this.$message({
|
||||
message: '请求发送失败: ' + error.message,
|
||||
type: 'error'
|
||||
});
|
||||
});
|
||||
this.addFriendsVisible = false;
|
||||
},
|
||||
//查询好友列表
|
||||
getFriends() {
|
||||
axios.get(this.Url.getFriends).then((res) => {
|
||||
console.log(res.data, '好友列表')
|
||||
this.friends = res.data;
|
||||
for (let i = 0; i < this.friends.length; i++) {
|
||||
if (this.friends[i].avatar == null || this.friends[i].avatar == '') {
|
||||
//如果头像为空，设置默认头像
|
||||
this.friends[i].avatar = 'http://62.234.217.137:8088' + '/images/avatar/default.jpg'
|
||||
} else {
|
||||
this.friends[i].avatar = 'http://62.234.217.137:8088' + this.friends[i].avatar
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//聊天
|
||||
chat(currentUsername) {
|
||||
this.currentUsername = currentUsername;//设置当前聊天的好友
|
||||
axios.get(this.Url.getMessages, {
|
||||
params: {
|
||||
recipient: currentUsername
|
||||
}
|
||||
}).then((res) => {
|
||||
let result = res.data.result;
|
||||
this.messages = result.data;
|
||||
for (let i = 0; i < this.messages.length; i++) {
|
||||
if (this.messages[i].avatar == null || this.messages[i].avatar == '') {
|
||||
//如果头像为空，设置默认头像
|
||||
this.messages[i].avatar = 'http://62.234.217.137:8088' + '/images/avatar/default.jpg'
|
||||
} else {
|
||||
this.messages[i].avatar = 'http://62.234.217.137:8088' + this.messages[i].avatar
|
||||
}
|
||||
}
|
||||
this.getFriends();//刷新好友列表
|
||||
this.$nextTick(() => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
sendMessages() {
|
||||
if (this.inputArea == '') {
|
||||
this.$message({
|
||||
message: '发送内容不能为空',
|
||||
type: 'warning'
|
||||
});
|
||||
return;
|
||||
}
|
||||
let message = {
|
||||
sender: this.loginUsername,
|
||||
recipient: this.currentUsername,
|
||||
content: this.inputArea
|
||||
};
|
||||
ws.send(JSON.stringify(message));
|
||||
this.inputArea = '';//清空输入框
|
||||
this.chat(this.currentUsername);//刷新聊天记录
|
||||
this.$nextTick(() => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
},
|
||||
scrollToBottom() {
|
||||
this.$nextTick(() => {
|
||||
const chatBox = this.$refs.ChatBox;
|
||||
chatBox.scrollTop = chatBox.scrollHeight;
|
||||
});
|
||||
},
|
||||
getUsername() {
|
||||
axios.get(this.Url.getUsername).then((res) => {
|
||||
this.loginUsername = res.data;
|
||||
}).then(() => {
|
||||
this.WebSocket();
|
||||
});
|
||||
},
|
||||
WebSocket() {
|
||||
console.log('WebSocket',)
|
||||
// 建立WebSocket连接
|
||||
ws = new WebSocket('ws://62.234.217.137:8088/ws/' + this.loginUsername);
|
||||
ws.onopen = () => {
|
||||
console.log('WebSocket连接成功');
|
||||
};
|
||||
ws.onmessage = (e) => {
|
||||
this.chat(this.currentUsername);//刷新聊天记录
|
||||
this.$nextTick(() => {
|
||||
this.scrollToBottom();
|
||||
});
|
||||
console.log('收到消息：', e.data);
|
||||
};
|
||||
// 监听页面即将卸载事件
|
||||
window.addEventListener('beforeunload', () => {
|
||||
// 如果WebSocket连接还开着，就关闭它
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
ws.send("closeWebsocket");
|
||||
console.log("关闭WebSocket连接")
|
||||
}
|
||||
});
|
||||
// ws.onclose = () => {
|
||||
// console.log('WebSocket连接关闭');
|
||||
// };
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getFriends();
|
||||
this.getUsername();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
/* 居中显示 */
|
||||
margin: 0 auto;
|
||||
z-index: 10;
|
||||
background: #c7d1d5;
|
||||
}
|
||||
|
||||
.room {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.left {
|
||||
height: 620px;
|
||||
/* background: #e5e4e4; */
|
||||
}
|
||||
|
||||
.right {
|
||||
height: 620px;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
height: 320px;
|
||||
overflow-y: auto
|
||||
}
|
||||
|
||||
.InputBox {
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
.friends {
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #e5e4e4;
|
||||
}
|
||||
|
||||
/* 仅当 .friends 没有被选中时，鼠标悬停样式才生效 */
|
||||
.friends:not(.selected-friend):hover {
|
||||
background: #ebeae8;
|
||||
}
|
||||
|
||||
.selected-friend {
|
||||
background: #d6d3d2;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -137,15 +137,18 @@ export default {
|
|||
|
||||
submitLoginForm() {
|
||||
const that = this
|
||||
axios.post("/login", {
|
||||
axios.post("/user/login", {
|
||||
username: this.loginForm.username,
|
||||
password: this.loginForm.password
|
||||
}).then(res => {
|
||||
var jsonObject = res.data;
|
||||
var jsonString = JSON.stringify(jsonObject)
|
||||
if (jsonString !== "false") {
|
||||
window.localStorage.removeItem("token");
|
||||
window.localStorage.setItem("token", jsonString);
|
||||
that.setToken({ token: jsonString })
|
||||
//将token放入请求头
|
||||
axios.defaults.headers.common['Authorization'] = jsonString;
|
||||
this.$router.push({ path: "/" })
|
||||
this.$message.success("登陆成功！")
|
||||
} else {
|
||||
|
|
@ -154,23 +157,23 @@ export default {
|
|||
})
|
||||
},
|
||||
submitRegisterForm() {
|
||||
axios.post("/register", {
|
||||
axios.post("/user/register", {
|
||||
username: this.registerForm.username,
|
||||
password: this.registerForm.password,
|
||||
}).then(res => {
|
||||
if (res.data === "注册成功") {
|
||||
this.$message.success(res.data)
|
||||
if (res.status === 201) {
|
||||
this.$message.success('注册成功')
|
||||
} else if (res.status === 409) {
|
||||
this.$message.error('用户已经存在')
|
||||
} else {
|
||||
this.$message.error(res.data)
|
||||
this.$message.error('注册失败，服务器内部错误')
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$message.error(err.response.data)
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
},
|
||||
//删除token
|
||||
created() {
|
||||
const that = this
|
||||
that.delToken({ token: "123" })
|
||||
},
|
||||
|
||||
name: "LoginView",
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue