【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 沸点评论展示

西瓜watermelon
995 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

前言

大家好，在上一篇文章分享中，我们实现了沸点内容与热评内容的展示与收起功能，还实现来沸点中图片的放大及缩小功能。前面我们花来两篇文章的时间对沸点内容进行优化，虽然一些基本功能都已经实现了，但跟官方的比起来还是有很大差距，还是会有各种各样的瑕疵在里面，关于更多细节问题我们后面有空再进行慢慢优化。今天我们继续来实现沸点相关的新功能 - 沸点评论。

功能分析

关于沸点评论这一块，我对比了一下网页版和移动版的布局，网页版的评论去会直接在当前沸点内容下面弹出一块新的区域，用于展示所有的评论以及评论框；而移动版则是打开一个新页面，加载当前沸点以及当前沸点下的所有评论和评论框。由于我们接口都是从网页版抓来的，因此我们的评论区布局也打算采用网页版的形式来展示，即：在当前沸点下直接展开一块新的区域，用于加载评论内容，如下图：

image.png

功能实现

评论区分为两块内容：

  • 发表评论
    • 发表评论区默认只展示当前用户头像和一个灰色输入框
    • 当用户点击了灰色输入框后则输入框亮起（表示可以输入内容）
    • 同时在输入框的下方出现表情、图片和发表评论按钮
  • 展示评论
    • 展示评论区默认按最新排序，并且最多只展示5条评论
    • 当超过5条时会显示一个查看全部评论链接
    • 点击查看全部评论后跳转的一个新的页面 我们今天的目标是：分析网页端请求沸点评论内容的接口，并将评论内容展示在评论区。
  • 首先用chrome浏览器打开官方网站并找到沸点页面
  • 按F12查看元素，随便找个评论数比较多的沸点
  • 点击评论图标，查看官方请求评论内容的接口 如下图所示，这个list接口就是我们要找的目标（也就是请求沸点评论内容的接口），从图中我们可以看到该接口最多只返回了5条评论内容，并且在这些评论内容中还可能有子评论，因此评论这块实现起来还是稍稍有些复杂的

test3.gif

代码实现

后台接口已经找到，并且也知道我们的评论区要做成什么样子，目标已经确定接下来就开始撸代码了

  • 首先在我们自己的后台node_server中封装一个post请求的comment_list接口用于请求评论内容
  • 然后再在前端juejinlike项目中沸点页面给每条沸点的评论图标绑定click事件，并在该事件方法中调用后端封装好的comment_list接口
  • 将接口中返回的评论数据循环展示在评论区 部分核心代码及效果图如下：
<div class="comment-list-comment">
  <div class="comment-title">
    <div>全部评论（{{ msg.msg_Info.comment_count }}）</div>
    <div class="title-right">
      <span class="active">最新</span>
      <span>|</span>
      <span>最热</span>
    </div>
  </div>
  <div
    class="comment-content"
    v-for="rep in replyList"
    :key="rep.comment_id"
  >
    <div class="author">
      <van-image
        class="photo"
        round
        :src="rep.user_info.avatar_large"
      />
      <div style="display: flex; flex-direction: column">
        <div class="author-title">
          {{ rep.user_info.user_name }}
          <span v-if="rep.is_author">（作者）</span>
        </div>
        <div class="pub-time">
          {{ rep.user_info.job_title }} @
          {{ rep.user_info.company }} ·
          {{ publishTime(rep.comment_info.ctime) }}
        </div>
      </div>
    </div>
    <div class="content">
      <div style="overflow: hidden; line-height: 20px">
        <span style="white-space: pre-line">
          {{ rep.comment_info.comment_content }}</span
        >
      </div>

      <van-image
        :src="pic"
        v-for="(pic, $index) in rep.comment_info
          .comment_pics"
        :key="$index"
        class="image"
        @click="showImage(pic)"
      />
    </div>
    <div class="comment-content-opt">
      <div class="digg">
        <van-icon name="good-job-o" />{{
          rep.comment_info.digg_count === 0
            ? "点赞"
            : rep.comment_info.digg_count
        }}
      </div>
      <div class="comment">
        <van-icon name="chat-o" />{{
          rep.comment_info.reply_count === 0
            ? "回复"
            : rep.comment_info.reply_count
        }}
      </div>
    </div>
    <div
      class="reply-reply"
      v-for="rrp in rep.reply_infos"
      :key="rrp.reply_id"
    >
      <div class="author">

        </div>
      </div>
      <div class="content">

      </div>
      <div class="comment-content-opt">

      </div>
    </div>
  </div>
</div>

const showComment = (msgId, isShow) => {
  state.curMsgId = !isShow ? msgId : "";
  api.commentList("0", msgId, 4, 5, 0).then((res) => {
    res.data.forEach((item) => {
      item.comment_info.sub_content =
        item.comment_info.comment_content.substring(0, 80);
      item.comment_info.comment_content.length >= 80
        ? (item.comment_info.sub_content += "...")
        : null;
      item.comment_info.show_content = item.comment_info.sub_content;
    });
    state.replyList = res.data;
    console.log(res.data);
  });
};

test3.gif

总结

本次分享中，我们实现了沸点评论内容的展示功能，目前仅实现了展示最新的5条评论，以及评论的评论，关于评论这一块内容比较复杂，还有很多细节点需要处理，我们将通过本系列分享来一点一点实现。本次分享就到这里了。

avatar
文章
阅读
粉丝