《分布式IM系统》大前端UI-群组模块-第04节-邀请好友进群流程的设计与实现

作者：冰河
星球：http://m6z.cn/6aeFbs (opens new window)
博客：https://binghe.gitcode.host (opens new window)
文章汇总：https://binghe.gitcode.host/md/all/all.html (opens new window)
源码获取地址：https://t.zsxq.com/0dhvFs5oR (opens new window)
课程视频：https://t.zsxq.com/qwTHg (opens new window)

沉淀，成长，突破，帮助他人，成就自我。

• 本节难度：★★☆☆☆
• 本节重点：对大前端UI页面中邀请好友进群的流程进行设计和实现，设计和开发用户登录系统后邀请好友进群的流程和逻辑，掌握VUE开发前端的方式方法和技巧，并能够结合自身实际项目进行思考，将其灵活应用到自身实际项目中。

大家好，我是冰河~~

用户登录分布式IM即时通讯系统后，可以在分布式IM即时通讯系统中创建群组，自己成为群主后，可以修改群信息，拉人进群，踢人出群，发布群公告，解散群等等。并且可以查看自己加入的群组列表，不管自己是不是群主，都可以邀请自己的好友加入群组。

一、前言

在前面的文章中，我们对用户登录分布式IM即时通讯系统后的主体页面进行了设计和实现，并且对好友主体页面进行了设计和实现，同时，实现了前端好友模块与聊天模块的互通功能和逻辑。在设计和研发群组模块的功能时，对群组主体页面进行了设计和实现，设计和开发了创建群组的流程和功能，以及对修改群组基本信息的流程进行了设计和实现，接下来，就对邀请好友进群的流程进行设计和实现。

二、本节诉求

对大前端UI页面中邀请好友进群的流程进行设计和实现，设计和开发用户登录系统后邀请好友进群的流程和逻辑，掌握VUE开发前端的方式方法和技巧，并能够结合自身实际项目进行思考，将其灵活应用到自身实际项目中。

三、前端UI设计

在设计邀请好友进群的UI界面时，主要通过查看群成员、邀请好友进群、添加群成员为好友几个方面进行设计。

3.1 查看群成员

查看群成员的设计比较简单，用户登录分布式IM即时通讯系统后，在一级菜单区域点击群组，在二级菜单区域点击某个具体的群组，在主面板区域除了可以展示并修改群组的基本信息，在底部可以查看当前群组的成员，如图4-1所示。

可以看到，在主面板区域中，除了可以查看群成员外，还有一个邀请入口，这里的邀请就是邀请好友进群的入口。

3.2 邀请好友进群

点击邀请入口，就可以弹出邀请好友的界面，如图4-2所示。

查看完整文章

加入冰河技术 (opens new window)知识星球，解锁完整技术文章与完整代码