Browse Source

整理代码风格

master
xie.bx 3 years ago
parent
commit
3e58cfdd85
  1. 5
      im-platform/src/main/java/com/lx/implatform/controller/FriendController.java
  2. 6
      im-platform/src/main/java/com/lx/implatform/service/impl/FriendServiceImpl.java
  3. 6
      im-platform/src/main/java/com/lx/implatform/vo/FriendVO.java
  4. 30
      im-ui/src/components/friend/AddFriend.vue
  5. 42
      im-ui/src/components/friend/FriendItem.vue
  6. 8
      im-ui/src/components/group/CreateGroup.vue
  7. 9
      im-ui/src/store/chatStore.js
  8. 16
      im-ui/src/store/friendStore.js
  9. 13
      im-ui/src/store/groupStore.js
  10. 5
      im-ui/src/store/index.js
  11. 24
      im-ui/src/view/Chat.vue
  12. 60
      im-ui/src/view/Friend.vue
  13. 55
      im-ui/src/view/Group.vue
  14. 8
      im-ui/src/view/Home.vue

5
im-platform/src/main/java/com/lx/implatform/controller/FriendController.java

@ -31,7 +31,10 @@ public class FriendController {
public Result< List<FriendVO>> findFriends(){ public Result< List<FriendVO>> findFriends(){
List<Friend> friends = friendService.findFriendByUserId(SessionContext.getSession().getId()); List<Friend> friends = friendService.findFriendByUserId(SessionContext.getSession().getId());
List<FriendVO> vos = friends.stream().map(f->{ List<FriendVO> vos = friends.stream().map(f->{
FriendVO vo = BeanUtils.copyProperties(f, FriendVO.class); FriendVO vo = new FriendVO();
vo.setId(f.getFriendId());
vo.setHeadImage(f.getFriendHeadImage());
vo.setNickName(f.getFriendNickName());
return vo; return vo;
}).collect(Collectors.toList()); }).collect(Collectors.toList());
return ResultUtils.success(vos); return ResultUtils.success(vos);

6
im-platform/src/main/java/com/lx/implatform/service/impl/FriendServiceImpl.java

@ -80,15 +80,15 @@ public class FriendServiceImpl extends ServiceImpl<FriendMapper, Friend> impleme
QueryWrapper<Friend> queryWrapper = new QueryWrapper<>(); QueryWrapper<Friend> queryWrapper = new QueryWrapper<>();
queryWrapper.lambda() queryWrapper.lambda()
.eq(Friend::getUserId,userId) .eq(Friend::getUserId,userId)
.eq(Friend::getFriendId,vo.getFriendId()); .eq(Friend::getFriendId,vo.getId());
Friend f = this.getOne(queryWrapper); Friend f = this.getOne(queryWrapper);
if(f == null){ if(f == null){
throw new GlobalException(ResultCode.PROGRAM_ERROR,"对方不是您的好友"); throw new GlobalException(ResultCode.PROGRAM_ERROR,"对方不是您的好友");
} }
f.setFriendHeadImage(vo.getFriendHeadImage()); f.setFriendHeadImage(vo.getHeadImage());
f.setFriendNickName(vo.getFriendNickName()); f.setFriendNickName(vo.getNickName());
this.updateById(f); this.updateById(f);
} }

6
im-platform/src/main/java/com/lx/implatform/vo/FriendVO.java

@ -13,13 +13,13 @@ public class FriendVO {
@NotNull(message = "好友id不可为空") @NotNull(message = "好友id不可为空")
@ApiModelProperty(value = "好友id") @ApiModelProperty(value = "好友id")
private Long friendId; private Long id;
@NotNull(message = "好友昵称不可为空") @NotNull(message = "好友昵称不可为空")
@ApiModelProperty(value = "好友昵称") @ApiModelProperty(value = "好友昵称")
private String friendNickName; private String nickName;
@ApiModelProperty(value = "好友头像") @ApiModelProperty(value = "好友头像")
private String friendHeadImage; private String headImage;
} }

30
im-ui/src/components/friend/AddFriend.vue

@ -4,17 +4,17 @@
<el-button slot="append" icon="el-icon-search" @click="handleSearch()"></el-button> <el-button slot="append" icon="el-icon-search" @click="handleSearch()"></el-button>
</el-input> </el-input>
<el-scrollbar style="height:400px"> <el-scrollbar style="height:400px">
<div v-for="(userInfo) in users" :key="userInfo.id"> <div v-for="(user) in users" :key="user.id">
<div class="item"> <div class="item">
<div class="avatar"> <div class="avatar">
<head-image :url="userInfo.headImage"></head-image> <head-image :url="user.headImage"></head-image>
</div> </div>
<div class="add-friend-text"> <div class="add-friend-text">
<div>{{userInfo.nickName}}</div> <div>{{user.nickName}}</div>
<div :class="userInfo.online ? 'online-status online':'online-status'">{{ userInfo.online?"[在线]":"[离线]"}}</div> <div :class="user.online ? 'online-status online':'online-status'">{{ user.online?"[在线]":"[离线]"}}</div>
</div> </div>
<el-button type="success" v-show="!isFriend(userInfo.id)" plain @click="onAddFriend(userInfo)">添加</el-button> <el-button type="success" v-show="!isFriend(user.id)" plain @click="handleAddFriend(user)">添加</el-button>
<el-button type="info" v-show="isFriend(userInfo.id)" plain disabled>已添加</el-button> <el-button type="info" v-show="isFriend(user.id)" plain disabled>已添加</el-button>
</div> </div>
</div> </div>
</el-scrollbar> </el-scrollbar>
@ -54,27 +54,27 @@
this.users = data; this.users = data;
}) })
}, },
handleAddFriend(userInfo){ handleAddFriend(user){
this.$http({ this.$http({
url: "/api/friend/add", url: "/api/friend/add",
method: "post", method: "post",
params: { params: {
friendId: userInfo.id friendId: user.id
} }
}).then((data) => { }).then((data) => {
this.$message.success("添加成功,对方已成为您的好友"); this.$message.success("添加成功,对方已成为您的好友");
let friendInfo = { let friend = {
friendId:userInfo.id, id:user.id,
friendNickName: userInfo.nickName, nickName: user.nickName,
friendHeadImage: userInfo.headImage, headImage: user.headImage,
online: userInfo.online online: user.online
} }
this.$store.commit("addFriend",friendInfo); this.$store.commit("addFriend",friend);
}) })
}, },
isFriend(userId){ isFriend(userId){
let friends = this.$store.state.friendStore.friends; let friends = this.$store.state.friendStore.friends;
let friend = friends.find((f)=> f.friendId==userId); let friend = friends.find((f)=> f.id==userId);
return friend != undefined; return friend != undefined;
} }
}, },

42
im-ui/src/components/friend/FriendItem.vue

@ -1,13 +1,13 @@
<template> <template>
<div class="item" :class="active ? 'active' : ''"> <div class="item" :class="active ? 'active' : ''">
<div class="avatar"> <div class="avatar">
<head-image :url="friendInfo.friendHeadImage" > </head-image> <head-image :url="friend.headImage"> </head-image>
</div> </div>
<div class="text"> <div class="text">
<div>{{ friendInfo.friendNickName}}</div> <div>{{ friend.nickName}}</div>
<div :class="online ? 'online-status online':'online-status'">{{ online?"[在线]":"[离线]"}}</div> <div :class="online ? 'online-status online':'online-status'">{{ online?"[在线]":"[离线]"}}</div>
</div> </div>
<div class="close" @click.stop="$emit('del',friendInfo,index)"> <div class="close" @click.stop="$emit('del',friend,index)">
<i class="el-icon-close" style="border: none; font-size: 20px;color: black;" title="添加好友"></i> <i class="el-icon-close" style="border: none; font-size: 20px;color: black;" title="添加好友"></i>
</div> </div>
</div> </div>
@ -15,27 +15,28 @@
<script> <script>
import HeadImage from '../common/HeadImage.vue'; import HeadImage from '../common/HeadImage.vue';
export default { export default {
name: "frinedItem", name: "frinedItem",
components: {HeadImage}, components: {
HeadImage
},
data() { data() {
return { return {}
}
}, },
props: { props: {
friendInfo: { friend: {
type: Object type: Object
}, },
active:{ active: {
type: Boolean type: Boolean
}, },
index:{ index: {
type: Number type: Number
} }
}, },
computed:{ computed: {
online(){ online() {
return this.$store.state.friendStore.friends[this.index].online; return this.$store.state.friendStore.friends[this.index].online;
} }
} }
@ -52,15 +53,16 @@
align-items: center; align-items: center;
padding-right: 5px; padding-right: 5px;
background-color: #eeeeee; background-color: #eeeeee;
&:hover { &:hover {
background-color: #dddddd; background-color: #dddddd;
} }
&.active{ &.active {
background-color: #cccccc; background-color: #cccccc;
} }
.close { .close {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
@ -93,15 +95,17 @@
height: 100%; height: 100%;
flex-shrink: 0; flex-shrink: 0;
overflow: hidden; overflow: hidden;
&>div { &>div {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
} }
.online-status{ .online-status {
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
&.online{
&.online {
color: #5fb878; color: #5fb878;
} }
} }

8
im-ui/src/components/group/CreateGroup.vue

@ -1,8 +0,0 @@
<template>
</template>
<script>
</script>
<style>
</style>

9
im-ui/src/store/chatStore.js

@ -10,7 +10,6 @@ export default {
let chat = null; let chat = null;
for(let i in state.chats){ for(let i in state.chats){
if(state.chats[i].targetId === chatInfo.targetId){ if(state.chats[i].targetId === chatInfo.targetId){
chat = state.chats[i]; chat = state.chats[i];
// 放置头部 // 放置头部
state.chats.splice(i,1); state.chats.splice(i,1);
@ -68,11 +67,11 @@ export default {
} }
} }
}, },
setChatUserInfo(state, userInfo){ updateChatFromUser(state, user){
for(let i in state.chats){ for(let i in state.chats){
if(state.chats[i].targetId == userInfo.id){ if(state.chats[i].targetId == user.id){
state.chats[i].headImage = userInfo.headImageThumb; state.chats[i].headImage = user.headImageThumb;
state.chats[i].showName = userInfo.nickName; state.chats[i].showName = user.nickName;
break; break;
} }
} }

16
im-ui/src/store/friendStore.js

@ -21,10 +21,10 @@ export default {
setFriends(state, friends) { setFriends(state, friends) {
state.friends = friends; state.friends = friends;
}, },
updateFriend(state,friendInfo){ updateFriend(state,friend){
state.friends.forEach((f,index)=>{ state.friends.forEach((f,index)=>{
if(f.friendId==friendInfo.friendId){ if(f.id==friend.id){
state.friends[index] = friendInfo; state.friends[index] = friend;
} }
}) })
}, },
@ -34,15 +34,15 @@ export default {
removeFriend(state, index) { removeFriend(state, index) {
state.friends.splice(index, 1); state.friends.splice(index, 1);
}, },
addFriend(state, friendInfo) { addFriend(state, friend) {
state.friends.push(friendInfo); state.friends.push(friend);
}, },
refreshOnlineStatus(state){ refreshOnlineStatus(state){
let userIds = []; let userIds = [];
if(state.friends.length ==0){ if(state.friends.length ==0){
return; return;
} }
state.friends.forEach((f)=>{userIds.push(f.friendId)}); state.friends.forEach((f)=>{userIds.push(f.id)});
httpRequest({ httpRequest({
url: '/api/user/online', url: '/api/user/online',
method: 'get', method: 'get',
@ -59,7 +59,7 @@ export default {
}, },
setOnlineStatus(state,onlineIds){ setOnlineStatus(state,onlineIds){
state.friends.forEach((f)=>{ state.friends.forEach((f)=>{
let onlineFriend = onlineIds.find((id)=> f.friendId==id); let onlineFriend = onlineIds.find((id)=> f.id==id);
f.online = onlineFriend != undefined; f.online = onlineFriend != undefined;
}); });
@ -77,7 +77,7 @@ export default {
// 重新排序后,activeIndex指向的好友可能会变化,需要重新指定 // 重新排序后,activeIndex指向的好友可能会变化,需要重新指定
if(state.activeIndex >=0){ if(state.activeIndex >=0){
state.friends.forEach((f,i)=>{ state.friends.forEach((f,i)=>{
if(f.friendId == activeFriend.friendId){ if(f.id == activeFriend.id){
state.activeIndex = i; state.activeIndex = i;
} }
}) })

13
im-ui/src/store/groupStore.js

@ -7,13 +7,16 @@ export default {
activeIndex: -1, activeIndex: -1,
}, },
mutations: { mutations: {
initGroupStore(state, userInfo) { initGroupStore(state) {
httpRequest({ httpRequest({
url: '/api/friends/list', url: '/api/group/list',
method: 'get' method: 'get'
}).then((friendsList) => { }).then((groups) => {
this.commit("setFriendsList",friendsList); this.commit("setGroups",groups);
this.commit("refreshOnlineStatus");
}) })
}, },
setGroups(state,groups){
state.groups = groups;
}
}
} }

5
im-ui/src/store/index.js

@ -3,6 +3,7 @@ import Vuex from 'vuex';
import chatStore from './chatStore.js'; import chatStore from './chatStore.js';
import friendStore from './friendStore.js'; import friendStore from './friendStore.js';
import userStore from './userStore.js'; import userStore from './userStore.js';
import groupStore from './groupStore.js';
import VuexPersistence from 'vuex-persist' import VuexPersistence from 'vuex-persist'
@ -14,15 +15,15 @@ const vuexLocal = new VuexPersistence({
Vue.use(Vuex) Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
modules: {chatStore,friendStore,userStore}, modules: {chatStore,friendStore,userStore,groupStore},
state: { state: {
userInfo: {} userInfo: {}
}, },
plugins: [vuexLocal.plugin], plugins: [vuexLocal.plugin],
mutations: { mutations: {
initStore(state){ initStore(state){
this.commit("initFriendStore"); this.commit("initFriendStore");
this.commit("initGroupStore");
} }
}, },

24
im-ui/src/view/Chat.vue

@ -94,12 +94,12 @@
this.$http({ this.$http({
url: `/api/user/find/${userId}`, url: `/api/user/find/${userId}`,
method: 'get' method: 'get'
}).then((userInfo) => { }).then((user) => {
// //
let chat = this.chatStore.chats[index]; let chat = this.chatStore.chats[index];
if (userInfo.headImageThumb != chat.headImage || if (user.headImageThumb != chat.headImage ||
userInfo.nickName != chat.showName) { user.nickName != chat.showName) {
this.updateFriendInfo(userInfo, index) this.updateFriendInfo(user, index)
} }
}) })
}, },
@ -245,19 +245,19 @@
this.scrollToBottom(); this.scrollToBottom();
}) })
}, },
updateFriendInfo(userInfo, index) { updateFriendInfo(user, index) {
let friendsInfo = { let friendInfo = {
friendId: userInfo.id, id: user.id,
friendNickName: userInfo.nickName, nickName: user.nickName,
friendHeadImage: userInfo.headImageThumb headImage: user.headImageThumb
}; };
this.$http({ this.$http({
url: "/api/friends/update", url: "/api/friends/update",
method: "put", method: "put",
data: friendsInfo data: friendInfo
}).then(() => { }).then(() => {
this.$store.commit("updateFriends", friendsInfo); this.$store.commit("updateFriend", friendInfo);
this.$store.commit("setChatUserInfo", userInfo); this.$store.commit("updateChatFromUser", user);
}) })
}, },
showName(msg) { showName(msg) {

60
im-ui/src/view/Friend.vue

@ -13,9 +13,9 @@
</add-friend> </add-friend>
</el-header> </el-header>
<el-main> <el-main>
<div v-for="(friendInfo,index) in $store.state.friendStore.friends" :key="friendInfo.id"> <div v-for="(friend,index) in $store.state.friendStore.friends" :key="friend.id">
<friend-item v-show="friendInfo.friendNickName.startsWith(searchText)" :friendInfo="friendInfo" :index="index" <friend-item v-show="friend.nickName.startsWith(searchText)" :friend="friend" :index="index"
:active="index === $store.state.friendStore.activeIndex" @del="handleDelItem(friendInfo,index)" @click.native="handleActiveItem(friendInfo,index)"> :active="index === $store.state.friendStore.activeIndex" @del="handleDelItem(friend,index)" @click.native="handleActiveItem(friend,index)">
</friend-item> </friend-item>
</div> </div>
</el-main> </el-main>
@ -23,15 +23,15 @@
<el-container class="r-friend-box"> <el-container class="r-friend-box">
<div v-show="$store.state.friendStore.activeIndex>=0"> <div v-show="$store.state.friendStore.activeIndex>=0">
<div class="user-detail"> <div class="user-detail">
<head-image class="detail-head-image" :url="activeUserInfo.headImage"></head-image> <head-image class="detail-head-image" :url="activeUser.headImage"></head-image>
<div class="info-item"> <div class="info-item">
<el-descriptions title="好友信息" class="description" :column="1"> <el-descriptions title="好友信息" class="description" :column="1">
<el-descriptions-item label="用户名">{{ activeUserInfo.userName }} <el-descriptions-item label="用户名">{{ activeUser.userName }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="昵称">{{ activeUserInfo.nickName }} <el-descriptions-item label="昵称">{{ activeUser.nickName }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="性别">{{ activeUserInfo.sex==0?"男":"女" }}</el-descriptions-item> <el-descriptions-item label="性别">{{ activeUser.sex==0?"男":"女" }}</el-descriptions-item>
<el-descriptions-item label="签名">{{ activeUserInfo.signature }}</el-descriptions-item> <el-descriptions-item label="签名">{{ activeUser.signature }}</el-descriptions-item>
</el-descriptions> </el-descriptions>
</div> </div>
</div> </div>
@ -59,7 +59,7 @@
return { return {
searchText: "", searchText: "",
showAddFriend: false, showAddFriend: false,
activeUserInfo: {} activeUser: {}
} }
}, },
methods: { methods: {
@ -69,26 +69,26 @@
handleCloseAddFriend() { handleCloseAddFriend() {
this.showAddFriend = false; this.showAddFriend = false;
}, },
handleActiveItem(friendInfo, index) { handleActiveItem(friend, index) {
this.$store.commit("activeFriend", index); this.$store.commit("activeFriend", index);
this.$http({ this.$http({
url: `/api/user/find/${friendInfo.friendId}`, url: `/api/user/find/${friend.id}`,
method: 'get' method: 'get'
}).then((userInfo) => { }).then((user) => {
this.activeUserInfo = userInfo; this.activeUser = user;
// //
if (userInfo.headImageThumb != friendInfo.friendHeadImage || if (user.headImageThumb != friend.headImage ||
userInfo.nickName != friendInfo.friendNickName) { user.nickName != friend.nickName) {
this.updateFriendInfo(friendInfo, userInfo, index) this.updateFriendInfo(friend, user, index)
} }
}) })
}, },
handleDelItem(friendInfo, index) { handleDelItem(friend, index) {
this.$http({ this.$http({
url: '/api/friend/delete', url: '/api/friend/delete',
method: 'delete', method: 'delete',
params: { params: {
friendId: friendInfo.friendId friendId: friend.id
} }
}).then((data) => { }).then((data) => {
this.$message.success("删除好友成功"); this.$message.success("删除好友成功");
@ -96,27 +96,27 @@
}) })
}, },
handleSendMessage() { handleSendMessage() {
let userInfo = this.activeUserInfo; let user = this.activeUser;
let chatInfo = { let chat = {
type: 'single', type: 'single',
targetId: userInfo.id, targetId: user.id,
showName: userInfo.nickName, showName: user.nickName,
headImage: userInfo.headImage, headImage: user.headImage,
}; };
this.$store.commit("openChat", chatInfo); this.$store.commit("openChat", chat);
this.$store.commit("activeChat", 0); this.$store.commit("activeChat", 0);
this.$router.push("/home/chat"); this.$router.push("/home/chat");
}, },
updateFriendInfo(friendInfo, userInfo, index) { updateFriendInfo(friend, user, index) {
friendInfo.friendHeadImage = userInfo.headImageThumb; friend.headImage = user.headImageThumb;
friendInfo.friendNickName = userInfo.nickName; friend.nickName = user.nickName;
this.$http({ this.$http({
url: "/api/friend/update", url: "/api/friend/update",
method: "put", method: "put",
data: friendInfo data: friend
}).then(() => { }).then(() => {
this.$store.commit("updateFriend", friendInfo); this.$store.commit("updateFriend", friend);
this.$store.commit("setChatUserInfo", userInfo); this.$store.commit("updateChatFromUser", user);
}) })
} }
} }

55
im-ui/src/view/Group.vue

@ -7,12 +7,17 @@
<el-button slot="append" icon="el-icon-search"></el-button> <el-button slot="append" icon="el-icon-search"></el-button>
</el-input> </el-input>
</div> </div>
<el-button plain icon="el-icon-plus" <el-button plain icon="el-icon-plus" style="border: none; padding: 12px; font-size: 20px;color: black;" title="创建群聊"
style="border: none; padding: 12px; font-size: 20px;color: black;" @click="handleCreateGroup()"></el-button>
title="添加好友" @click="handleCreateGroup()"></el-button>
</el-header> </el-header>
<el-main> <el-main>
<el-main>
<div v-for="(group,index) in groupStore.groups" :key="group.id">
<group-item v-show="group.name.startsWith(searchText)" :group="group" :index="index" :active="index === groupStore.activeIndex"
@click.native="handleActiveItem(group,index)">
</group-item>
</div>
</el-main>
</el-main> </el-main>
</el-aside> </el-aside>
<el-container class="r-chat-box"> <el-container class="r-chat-box">
@ -21,9 +26,15 @@
</el-container> </el-container>
</template> </template>
<script> <script>
import GroupItem from '../components/group/GroupItem';
export default { export default {
name: "group", name: "group",
components: {
GroupItem
},
data() { data() {
return { return {
searchText: "" searchText: ""
@ -32,18 +43,26 @@
methods: { methods: {
handleCreateGroup() { handleCreateGroup() {
this.$prompt('请输入群聊名称', '创建群聊', { this.$prompt('请输入群聊名称', '创建群聊', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
inputPattern: /\S/, inputPattern: /\S/,
inputErrorMessage: '请输入群聊名称' inputErrorMessage: '请输入群聊名称'
}).then((o) => { }).then((o) => {
this.$http({ this.$http({
url: `/api/group/create?groupName=${o.value}`, url: `/api/group/create?groupName=${o.value}`,
method: 'post' method: 'post'
}).then((groupInfo)=>{ }).then((groupInfo) => {
console.log(groupInfo); console.log(groupInfo);
})
}) })
})
},
handleActiveItem(group, index) {
this.$store.commit("activeGroup", index);
}
},
computed: {
groupStore() {
return this.$store.state.groupStore;
} }
} }
} }
@ -60,11 +79,11 @@
align-items: center; align-items: center;
padding: 5px; padding: 5px;
background-color: white; background-color: white;
.l-group-search{ .l-group-search {
flex: 1; flex: 1;
} }
} }
} }
} }
</style> </style>

8
im-ui/src/view/Home.vue

@ -73,12 +73,12 @@
}, },
handleSingleMessage(msg){ handleSingleMessage(msg){
// //
let f = this.$store.state.friendStore.friends.find((f)=>f.friendId==msg.sendUserId); let f = this.$store.state.friendStore.friends.find((f)=>f.id==msg.sendUserId);
let chatInfo = { let chatInfo = {
type: 'single', type: 'single',
targetId: f.friendId, targetId: f.id,
showName: f.friendNickName, showName: f.nickName,
headImage: f.friendHeadImage headImage: f.headImage
}; };
// //
this.$store.commit("openChat",chatInfo); this.$store.commit("openChat",chatInfo);

Loading…
Cancel
Save