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(){
List<Friend> friends = friendService.findFriendByUserId(SessionContext.getSession().getId());
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;
}).collect(Collectors.toList());
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.lambda()
.eq(Friend::getUserId,userId)
.eq(Friend::getFriendId,vo.getFriendId());
.eq(Friend::getFriendId,vo.getId());
Friend f = this.getOne(queryWrapper);
if(f == null){
throw new GlobalException(ResultCode.PROGRAM_ERROR,"对方不是您的好友");
}
f.setFriendHeadImage(vo.getFriendHeadImage());
f.setFriendNickName(vo.getFriendNickName());
f.setFriendHeadImage(vo.getHeadImage());
f.setFriendNickName(vo.getNickName());
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不可为空")
@ApiModelProperty(value = "好友id")
private Long friendId;
private Long id;
@NotNull(message = "好友昵称不可为空")
@ApiModelProperty(value = "好友昵称")
private String friendNickName;
private String nickName;
@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-input>
<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="avatar">
<head-image :url="userInfo.headImage"></head-image>
<head-image :url="user.headImage"></head-image>
</div>
<div class="add-friend-text">
<div>{{userInfo.nickName}}</div>
<div :class="userInfo.online ? 'online-status online':'online-status'">{{ userInfo.online?"[在线]":"[离线]"}}</div>
<div>{{user.nickName}}</div>
<div :class="user.online ? 'online-status online':'online-status'">{{ user.online?"[在线]":"[离线]"}}</div>
</div>
<el-button type="success" v-show="!isFriend(userInfo.id)" plain @click="onAddFriend(userInfo)">添加</el-button>
<el-button type="info" v-show="isFriend(userInfo.id)" plain disabled>已添加</el-button>
<el-button type="success" v-show="!isFriend(user.id)" plain @click="handleAddFriend(user)">添加</el-button>
<el-button type="info" v-show="isFriend(user.id)" plain disabled>已添加</el-button>
</div>
</div>
</el-scrollbar>
@ -54,27 +54,27 @@
this.users = data;
})
},
handleAddFriend(userInfo){
handleAddFriend(user){
this.$http({
url: "/api/friend/add",
method: "post",
params: {
friendId: userInfo.id
friendId: user.id
}
}).then((data) => {
this.$message.success("添加成功,对方已成为您的好友");
let friendInfo = {
friendId:userInfo.id,
friendNickName: userInfo.nickName,
friendHeadImage: userInfo.headImage,
online: userInfo.online
let friend = {
id:user.id,
nickName: user.nickName,
headImage: user.headImage,
online: user.online
}
this.$store.commit("addFriend",friendInfo);
this.$store.commit("addFriend",friend);
})
},
isFriend(userId){
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;
}
},

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

@ -1,13 +1,13 @@
<template>
<div class="item" :class="active ? 'active' : ''">
<div class="avatar">
<head-image :url="friendInfo.friendHeadImage" > </head-image>
<head-image :url="friend.headImage"> </head-image>
</div>
<div class="text">
<div>{{ friendInfo.friendNickName}}</div>
<div>{{ friend.nickName}}</div>
<div :class="online ? 'online-status online':'online-status'">{{ online?"[在线]":"[离线]"}}</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>
</div>
</div>
@ -15,27 +15,28 @@
<script>
import HeadImage from '../common/HeadImage.vue';
export default {
name: "frinedItem",
components: {HeadImage},
components: {
HeadImage
},
data() {
return {
}
return {}
},
props: {
friendInfo: {
friend: {
type: Object
},
active:{
active: {
type: Boolean
},
index:{
index: {
type: Number
}
},
computed:{
online(){
computed: {
online() {
return this.$store.state.friendStore.friends[this.index].online;
}
}
@ -52,15 +53,16 @@
align-items: center;
padding-right: 5px;
background-color: #eeeeee;
&:hover {
background-color: #dddddd;
}
&.active{
&.active {
background-color: #cccccc;
}
.close {
width: 1.5rem;
height: 1.5rem;
@ -93,15 +95,17 @@
height: 100%;
flex-shrink: 0;
overflow: hidden;
&>div {
display: flex;
justify-content: flex-start;
}
.online-status{
.online-status {
font-size: 12px;
font-weight: 600;
&.online{
&.online {
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;
for(let i in state.chats){
if(state.chats[i].targetId === chatInfo.targetId){
chat = state.chats[i];
// 放置头部
state.chats.splice(i,1);
@ -68,11 +67,11 @@ export default {
}
}
},
setChatUserInfo(state, userInfo){
updateChatFromUser(state, user){
for(let i in state.chats){
if(state.chats[i].targetId == userInfo.id){
state.chats[i].headImage = userInfo.headImageThumb;
state.chats[i].showName = userInfo.nickName;
if(state.chats[i].targetId == user.id){
state.chats[i].headImage = user.headImageThumb;
state.chats[i].showName = user.nickName;
break;
}
}

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

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

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

@ -7,13 +7,16 @@ export default {
activeIndex: -1,
},
mutations: {
initGroupStore(state, userInfo) {
initGroupStore(state) {
httpRequest({
url: '/api/friends/list',
url: '/api/group/list',
method: 'get'
}).then((friendsList) => {
this.commit("setFriendsList",friendsList);
this.commit("refreshOnlineStatus");
}).then((groups) => {
this.commit("setGroups",groups);
})
},
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 friendStore from './friendStore.js';
import userStore from './userStore.js';
import groupStore from './groupStore.js';
import VuexPersistence from 'vuex-persist'
@ -14,15 +15,15 @@ const vuexLocal = new VuexPersistence({
Vue.use(Vuex)
export default new Vuex.Store({
modules: {chatStore,friendStore,userStore},
modules: {chatStore,friendStore,userStore,groupStore},
state: {
userInfo: {}
},
plugins: [vuexLocal.plugin],
mutations: {
initStore(state){
this.commit("initFriendStore");
this.commit("initGroupStore");
}
},

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

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

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

@ -13,9 +13,9 @@
</add-friend>
</el-header>
<el-main>
<div v-for="(friendInfo,index) in $store.state.friendStore.friends" :key="friendInfo.id">
<friend-item v-show="friendInfo.friendNickName.startsWith(searchText)" :friendInfo="friendInfo" :index="index"
:active="index === $store.state.friendStore.activeIndex" @del="handleDelItem(friendInfo,index)" @click.native="handleActiveItem(friendInfo,index)">
<div v-for="(friend,index) in $store.state.friendStore.friends" :key="friend.id">
<friend-item v-show="friend.nickName.startsWith(searchText)" :friend="friend" :index="index"
:active="index === $store.state.friendStore.activeIndex" @del="handleDelItem(friend,index)" @click.native="handleActiveItem(friend,index)">
</friend-item>
</div>
</el-main>
@ -23,15 +23,15 @@
<el-container class="r-friend-box">
<div v-show="$store.state.friendStore.activeIndex>=0">
<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">
<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 label="昵称">{{ activeUserInfo.nickName }}
<el-descriptions-item label="昵称">{{ activeUser.nickName }}
</el-descriptions-item>
<el-descriptions-item label="性别">{{ activeUserInfo.sex==0?"男":"女" }}</el-descriptions-item>
<el-descriptions-item label="签名">{{ activeUserInfo.signature }}</el-descriptions-item>
<el-descriptions-item label="性别">{{ activeUser.sex==0?"男":"女" }}</el-descriptions-item>
<el-descriptions-item label="签名">{{ activeUser.signature }}</el-descriptions-item>
</el-descriptions>
</div>
</div>
@ -59,7 +59,7 @@
return {
searchText: "",
showAddFriend: false,
activeUserInfo: {}
activeUser: {}
}
},
methods: {
@ -69,26 +69,26 @@
handleCloseAddFriend() {
this.showAddFriend = false;
},
handleActiveItem(friendInfo, index) {
handleActiveItem(friend, index) {
this.$store.commit("activeFriend", index);
this.$http({
url: `/api/user/find/${friendInfo.friendId}`,
url: `/api/user/find/${friend.id}`,
method: 'get'
}).then((userInfo) => {
this.activeUserInfo = userInfo;
}).then((user) => {
this.activeUser = user;
//
if (userInfo.headImageThumb != friendInfo.friendHeadImage ||
userInfo.nickName != friendInfo.friendNickName) {
this.updateFriendInfo(friendInfo, userInfo, index)
if (user.headImageThumb != friend.headImage ||
user.nickName != friend.nickName) {
this.updateFriendInfo(friend, user, index)
}
})
},
handleDelItem(friendInfo, index) {
handleDelItem(friend, index) {
this.$http({
url: '/api/friend/delete',
method: 'delete',
params: {
friendId: friendInfo.friendId
friendId: friend.id
}
}).then((data) => {
this.$message.success("删除好友成功");
@ -96,27 +96,27 @@
})
},
handleSendMessage() {
let userInfo = this.activeUserInfo;
let chatInfo = {
let user = this.activeUser;
let chat = {
type: 'single',
targetId: userInfo.id,
showName: userInfo.nickName,
headImage: userInfo.headImage,
targetId: user.id,
showName: user.nickName,
headImage: user.headImage,
};
this.$store.commit("openChat", chatInfo);
this.$store.commit("openChat", chat);
this.$store.commit("activeChat", 0);
this.$router.push("/home/chat");
},
updateFriendInfo(friendInfo, userInfo, index) {
friendInfo.friendHeadImage = userInfo.headImageThumb;
friendInfo.friendNickName = userInfo.nickName;
updateFriendInfo(friend, user, index) {
friend.headImage = user.headImageThumb;
friend.nickName = user.nickName;
this.$http({
url: "/api/friend/update",
method: "put",
data: friendInfo
data: friend
}).then(() => {
this.$store.commit("updateFriend", friendInfo);
this.$store.commit("setChatUserInfo", userInfo);
this.$store.commit("updateFriend", friend);
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-input>
</div>
<el-button plain icon="el-icon-plus"
style="border: none; padding: 12px; font-size: 20px;color: black;"
title="添加好友" @click="handleCreateGroup()"></el-button>
<el-button plain icon="el-icon-plus" style="border: none; padding: 12px; font-size: 20px;color: black;" title="创建群聊"
@click="handleCreateGroup()"></el-button>
</el-header>
<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-aside>
<el-container class="r-chat-box">
@ -21,9 +26,15 @@
</el-container>
</template>
<script>
import GroupItem from '../components/group/GroupItem';
export default {
name: "group",
components: {
GroupItem
},
data() {
return {
searchText: ""
@ -32,18 +43,26 @@
methods: {
handleCreateGroup() {
this.$prompt('请输入群聊名称', '创建群聊', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /\S/,
inputErrorMessage: '请输入群聊名称'
}).then((o) => {
this.$http({
url: `/api/group/create?groupName=${o.value}`,
method: 'post'
}).then((groupInfo)=>{
console.log(groupInfo);
})
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /\S/,
inputErrorMessage: '请输入群聊名称'
}).then((o) => {
this.$http({
url: `/api/group/create?groupName=${o.value}`,
method: 'post'
}).then((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;
padding: 5px;
background-color: white;
.l-group-search{
.l-group-search {
flex: 1;
}
}
}
}
}
</style>

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

@ -73,12 +73,12 @@
},
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 = {
type: 'single',
targetId: f.friendId,
showName: f.friendNickName,
headImage: f.friendHeadImage
targetId: f.id,
showName: f.nickName,
headImage: f.headImage
};
//
this.$store.commit("openChat",chatInfo);

Loading…
Cancel
Save