我用nodejs和vue简单实现了一个局域网聊天平台(二)

制作聊天室

上一篇文章我们已经初始化好了vue,接下来我们先将整个项目所需要的依赖进行安装

安装完依赖以后,就可以开始我们的页面搭建了,首先为了简化我们的开发,我们想要使用ui库element-ui,有了ui库能极大减少我们在样式上的时间,安装完element-ui后我们还需要在main.js中添加相关配置

添加完后,目前我们就一个页面并且没有可跳转的页面,所以我们想要将原来的HelloWorld.vue进行删除

布局划分

页面比较简单,我们主要划分成三部分,header主要组成为logo图标即可,聊天框这个是比较核心的东西,因为我们所有数据都要呈现到这里,所以这里的逻辑可能要做的比较多,而且还要实现一个功能就是到最底部像聊天软件那样,每出现一条新的聊天就会自动定位到那个位置,输入框莫过于就是发送聊天信息,这里本来想用textarea,这样就可以换行什么的,但是感觉用户体验不怎么样,所以就取消了,当用户按回车就直接发送消息

启航

配置背景

我们先搭建一个背景,这里就随便搞了一个背景,主要依自己来决定,你可以搞一个图片做背景也可以搞一个其他的

我们开始制作头部

header部分比较简单,目前就一个logo即可,然后简单设置一下样式即可实现这里就不多说什么了

聊天框(核心)

我们可以看到,其组成主要是左边和右边,左边 是另一个用户，右边是自己，所以我们先简单看看自己，左边和右边基本一致

首先我们可以看到他的组成为头像 ip 发送时间 发送的消息 这个通过css就能基本实现，所以这里就不细说了直接参考代码即可

<div class="content">

      <el-card class="box-card">

        <div style="height: 80vh; width: 100%">

          <div

            style="

              display: flex;

              flex-direction: column;

              margin-bottom: 20px;

              overflow: auto;

              height: 80%;

            "

            class="story"

            ref="record"

          >

            <div

              v-for="item in chatList"

              :key="item.id"

              :style="

                item.Sender == self ? 'align-self: end;' : 'align-self: start;'

              "

              class="item"

            >

              <div

                :class="item.Sender == self ? 'sender-info' : 'receiver-info'"

              >

                <div>

                  <el-avatar

                    :src="item.Sender == self ? avatar : item.avatar"

                  ></el-avatar>

                </div>

                <div style="margin: 0 5px">

                  {{ item.Sender }}

                </div>

                <div>{{ item.SendTime }}</div>

              </div>

              <div

                :class="

                  item.Sender == self ? 'sender-content' : 'receiver-content'

                "

                :style="

                  item.fileType == 'images' || item.fileType == 'video'

                    ? 'background-color: transparent;'

                    : ''

                "

              >

                <div

                  v-if="item.type == 'text'"

                  @click="copyText(item.SendContent)"

                >

                  {{ item.SendContent }}

                </div>

                <div v-else>

                  <div v-if="item.fileType == 'images'">

                    <el-image

                      :src="item.SendContent"

                      :alt="item.SendContent"

                      style="width: 20vw; object-fit: contain"

                      :preview-src-list="[item.SendContent]"

                    />

                  </div>

                  <div v-else-if="item.fileType == 'video'">

                    <video

                      :src="item.SendContent"

                      muted

                      controls

                      style="width: 20vw; object-fit: contain"

                      @click="fullScreen($event)"

                    ></video>

                  </div>

                  <div

                    v-else

                    style="

                      display: flex;

                      justify-content: space-around;

                      align-items: center;

                    "

                    @click="downloadFile(item.SendContent)"

                  >

                    <img

                      :src="getFileIcons(item.fileType)"

                      alt=""

                      style="width: 40px; object-fit: contain"

                    />

                    <div>

                      {{ getFileName(item.SendContent) }}

                    </div>

                  </div>

                </div>

              </div>

            </div>

          </div>

          <div style="height: 10vh; width: 100%">


            

       

          </div>

        </div>

      </el-card>

    </div>

自己发送的消息已经做好了，接下来我们可以看看如何做另一边，其实这里比较简单直接修改一下flex的方向即可

聊天框就很容易实现了

输入框

输入框比较简单，主要是左边输入框也可以为textarea 右边为发送按钮，后期可能想做微信那种输入框但是感觉css样式有点难度所以后期再看看，有兴趣的可以试试