# 《分布式IM系统》大前端UI-群组模块-第06节-成员退出群组流程的设计与实现
作者：冰河
星球：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/WsClX (opens new window)
沉淀，成长，突破，帮助他人，成就自我。
- 本节难度：★★☆☆☆
- 本节重点：对大前端UI页面中成员退出群组的流程进行设计和实现，设计和开发用户登录系统后退出群组的流程和逻辑，掌握VUE开发前端的方式方法和技巧，并能够结合自身实际项目进行思考，将其灵活应用到自身实际项目中。
大家好，我是冰河~~
用户登录分布式IM即时通讯系统后，可以在分布式IM即时通讯系统中创建群组，自己成为群主后，可以修改群信息，拉人进群，踢人出群，发布群公告，解散群等等。如果是普通群成员，可以退出自己加入的群组。
# 一、前言
对于大前端UI的群组模块来说，我们已经设计和实现了群组的主体页面、创建群和修改群的流程，对邀请好友进群的流程和功能进行了设计和实现，并且对群主踢人出群的流程进行了设计和实现。接下来，就对群主踢人出群的流程进行设计和实现。
# 二、本节诉求
对大前端UI页面中成员退出群组的流程进行设计和实现，设计和开发用户登录系统后退出群组的流程和逻辑，掌握VUE开发前端的方式方法和技巧，并能够结合自身实际项目进行思考，将其灵活应用到自身实际项目中。
# 三、前端UI设计
普通群成员登录分布式IM即时通讯系统后，选择自己加入的某个群组，会显示退出群聊的按钮，如图6-1所示。
点击退出群聊按钮，会弹出是否退出群聊的确认框，如图6-2所示。
# 查看完整文章
加入冰河技术 (opens new window)知识星球，解锁完整技术文章与完整代码
