Node+WebSocket+Vue聊天室: 界面美化，代码优化

最新推荐文章于 2025-05-29 09:42:37 发布

前端胡歌歌

最新推荐文章于 2025-05-29 09:42:37 发布

阅读量5.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML 工程师互联网编程程序员前端 JavaScript css 框架 IT 文章标签：程序员编程 web前端科技资讯

本文链接：https://blog.csdn.net/qianduanshuo/article/details/90245873

本文介绍了如何使用Flex布局和Stylus优化客户端HTML代码，通过WebSocket客户端JS的计算属性调整提升效率，并在WebSocket服务端增加了用户注销功能。文章还提供了快速预览效果及前端学习资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

客户端HTML代码优化

页面先分为左右布局，然后左/右里面再分为上中下布局。

很自然，我们想到了flex布局，Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

...
<div class="web-im">
  <div class="left">
    <div class="aside content">
      <div class="header">
       ...
      </div>
      <div class="body user-list">
        ...
      </div>
      <div class="footer">
        ...
      </div>
    </div>
  </div>
  <div class="right content">
    <div class="header">...</div>
    <div class="body im-record" id="im-record">
      ...
    </div>
    <div class="footer im-input">
      ...
    </div>
  </div>
</div>
...

css样式是用stylus书写的，有些初学的小伙伴应该有点点不是很明白，但是大致能懂，就是把嵌套的书写，使其看起来更容易阅读、维护。

如果对flex、和