【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 点赞及查看更多评论

西瓜watermelon
592 阅读3分钟

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

前言

大家好，昨天的分享中我们对回复评论组件进行了封装以及回复评论功能的实现。关于沸点页面还有最后三个功能点待实现：

  • 点赞沸点内容和评论内容
  • 评论内容超出5条后显示查看更多按钮，点击后跳转到新页面
  • 发布评论中的表情和图片实现 今天我们主要来完成前两个功能：点赞和展示更多评论功能。

点赞沸点及评论内容

通过对官方点赞接口的分析发现：不管是给沸点内容点赞还是给评论内容点赞用的都是同一套接口，并且跟我们前面文章的点赞接口也是一样，只是传递的参数不同，因此我们可以直接使用以前封装好的点赞接口。 点赞功能主要有2个核心点：

  • 如果当前用户已经给沸点内容或评论内容点过赞了，可以将点赞图标变为蓝色，点击后可取消点赞，字体颜色变为原来颜色
  • 如果当前用户还没有点过赞，那么点击图标后实现点赞，同时点赞数加1，字体颜色变为蓝色 大概实现思路如下：
  • 根据数据对象中的user_interact中的is_digg值来判断当前用户是否点过赞
  • 在setup方法中添加digg方法，并接收2个参数：
    • item_id 当前点赞内容点id（沸点内容id或评论内容id）
    • is_digg 判断当前用户是否点过赞
  • 在digg方法中根据item_id对沸点内容数据pinList和评论内容数据replyList进行过滤
  • 再根据is_digg判断是否已经点赞
    • 如果已经点赞调用对应的cancel接口，取消点赞，同时让点赞数减1，is_digg值变为false
    • 如果还没点赞则调用对应的save接口，实现点赞，同时让点赞数加1，is_digg值变为true 核心代码及效果图如下：
 <div
  class="digg"
  :class="{ active: msg.user_interact.is_digg }"
  @click="digg(msg.msg_id, msg.user_interact.is_digg)"
>
  <van-icon name="good-job-o" />{{
    msg.msg_Info.digg_count
  }}
</div>

 <div
class="digg"
:class="{ active: rep.user_interact.is_digg }"
@click="
  digg(rep.comment_id, rep.user_interact.is_digg)
"
>
<van-icon name="good-job-o" />{{
  rep.comment_info.digg_count === 0
    ? "点赞"
    : rep.comment_info.digg_count
}}
</div>

const digg = (itemid, is_digg) => {
      const cur_pin = state.pinList.filter((item) => item.msg_id === itemid);
      const cur_com = state.replyList.filter(
        (item) => item.comment_id === itemid
      );
      if (is_digg) {
        api.cancelDigg(itemid, 4).then((res) => {
          if (cur_pin.length) {
            cur_pin[0].msg_Info.digg_count--;
            cur_pin[0].user_interact.is_digg = false;
          }
          if (cur_com.length) {
            cur_com[0].comment_info.digg_count--;
            cur_com[0].user_interact.is_digg = false;
          }
        });
      } else {
        api.saveDigg(itemid, 4).then((res) => {
          if (cur_pin.length) {
            cur_pin[0].msg_Info.digg_count++;
            cur_pin[0].user_interact.is_digg = true;
          }
          if (cur_com.length) {
            cur_com[0].comment_info.digg_count++;
            cur_com[0].user_interact.is_digg = true;
          }
        });
      }
    };

test.gif

展示更多评论

默认情况下不管是按最新排序还是按最热排序都只显示5条评论内容，但是有些热门沸点不仅仅只有5条数据，那么这时就会在最后一条评论的下面出现一个“查看全部xx条回复”，在点击后跳转到一个新的页面并展示该沸点下的全部评论，这个功能实现起来相对简单，大概思路如下：

  • 新建AllReply.vue组件，用于展示全部评论信息，目前先空着
  • 为AllReply.vue配置路由，配置路由需要注意的是我们应该将该路由配置成路径传参的形式，因为在加载全部评论前肯定要先知道应该加载那个沸点内容的评论，因此在页面跳转同时将对应的沸点内容id作为参数传过去。

核心代码及效果图：

<div
class="reply-more"
v-if="msg.msg_Info.comment_count > 5"
@click="moreReply(msg.msg_id)"
>
查看全部{{ msg.msg_Info.comment_count }}条回复
</div>

 const moreReply = (msg_id) => {
      console.log(msg_id);
      router.push(`/morereply/${msg_id}`);
    };

test.gif

总结

今天的分享我们实现了给沸点内容和评论内容点赞功能，内容相对比较简单，功能实现起来也比较容易，只要稍微注意一下实现细节就可以了。好了今天的分享就到在这里了，喜欢的朋友欢迎点赞评论加关注哦！

avatar
文章
阅读
粉丝