# 《分布式IM系统》大前端UI-消息模块-第01节-发送文字消息流程的设计与实现
作者：冰河
星球：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/f5u4h (opens new window)
沉淀，成长，突破，帮助他人，成就自我。
- 本节难度：★★☆☆☆
- 本节重点：对大前端UI页面中发送文字消息的流程进行设计和实现，设计和开发用户登录系统后发送文字消息的流程和逻辑，掌握VUE开发前端的方式方法和技巧，并能够结合自身实际项目进行思考，将其灵活应用到自身实际项目中。
大家好，我是冰河~~
用户登录分布式IM即时通讯系统后，既可以向好友发送单聊消息，也可以向群组中发送群聊消息，并且我们设计和研发的分布式IM即时通讯系统，支持发送文字、图片、文件、语言和视频。
# 一、前言
在前面的章节中，我们已经实现了大前端UI的用户模块、好友模块和群组模块，可以这么说，我们已经基本完成了整个分布式IM即时通讯系统对用户管理方面的需求。接下来，就要设计和实现大前端UI的消息模块，以满足整个分布式IM即时通讯系统对聊天（消息通讯）的需求。
# 二、本节诉求
对大前端UI页面中发送文字消息的流程进行设计和实现，设计和开发用户登录系统后发送文字消息的流程和逻辑，掌握VUE开发前端的方式方法和技巧，并能够结合自身实际项目进行思考，将其灵活应用到自身实际项目中。
# 三、前端UI设计
在分布式IM即时通讯系统中，无论是用户向好友发送单聊消息，还是用户向群组发送群聊消息，都会存在发送消息的入口。对于前端UI设计来说，我们可以从单聊入口、群聊入口、消息发送者和消息接收者几个方面进行设计。
# 3.1 单聊入口
先来看下发送文字消息的效果。
用户登录分布式IM即时通讯系统后，可以在好友列表，选择某个好友，在好友详情页面可以通过发送消息按钮，进入单聊页面，也可以通过右键好友列表某个好友，弹出快捷菜单快速进入单聊页面。
通过好友详情进入单聊页面，如图1-1所示。
# 查看完整文章
加入冰河技术 (opens new window)知识星球，解锁完整技术文章与完整代码
