打造前沿热点聚集地：基于 Vue3 + Vant3 构建类掘金网页 App【项目实战】

2023-09-25 10:28:51

前言

随着互联网的飞速发展，信息获取渠道愈发多样，使得用户对信息质量和时效性的要求不断提高。而作为前端开发工程师，如何构建一个满足用户需求的热点聚集平台，成为了一项艰巨的任务。本文将以一个基于 Vue3 + Vant3 的类掘金网页 App 项目为实战案例，深入剖析热门评论区的交互与功能实现，为读者提供一个打造前沿热点聚集地的解决方案。

项目背景

掘金作为国内知名技术社区，其评论区汇聚了大量技术爱好者和业内大牛。为了方便用户快速获取高质量评论，掘金将热门评论置顶展示，并对评论回复进行折叠处理，只展示部分回复内容。

技术选型

本项目采用 Vue3 作为前端框架，Vant3 作为 UI 组件库。Vue3 以其强大的响应式系统和组合式 API 而著称，而 Vant3 提供了一套丰富的、高质量的移动端组件，可以快速构建出美观、易用的界面。

实现过程

1. 获取热门评论

首先，我们需要从服务器端获取热门评论数据。使用 Axios 或 Fetch API 向后端发送请求，获取按点赞数降序排列的热门评论列表。

2. 渲染热门评论

获取到热门评论数据后，使用 Vue3 的 v-for 指令渲染评论列表。对于每条评论，根据评论点赞数降序渲染两条回复。

3. 折叠回复

为了避免热门评论区过长，需要对评论回复进行折叠处理。使用 v-if 指令判断回复条数是否超过两条，如果超过则显示「查看更多回复」按钮。

4. 加载更多回复

当用户点击「查看更多回复」按钮时，触发一个自定义事件，向后端发送请求加载更多回复数据。更新评论回复列表以显示更多回复。

5. 点赞功能

热门评论区还支持点赞功能。使用 v-on 指令监听评论或回复的点击事件，向后端发送点赞请求。更新评论或回复的点赞数。

实例代码

以下是一个展示热门评论区的示例代码：

<template>
  <div class="hot-comments">
    <div class="comment-item" v-for="comment in hotComments" :key="comment.id">
      <div class="comment-content">
        {{ comment.content }}
      </div>
      <div class="comment-actions">
        <button @click="likeComment(comment)">点赞</button>
        <button @click="showMoreReplies(comment)">查看更多回复</button>
      </div>
      <div class="replies" v-if="comment.replies.length > 2">
        <div class="reply-item" v-for="reply in comment.replies.slice(0, 2)" :key="reply.id">
          {{ reply.content }}
        </div>
        <div class="more-replies" @click="showMoreReplies(comment)">查看更多回复</div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { getHotComments } from '@/api/comment'

export default {
  setup() {
    const hotComments = ref([])

    const getHotCommentsData = async () => {
      const res = await getHotComments()
      hotComments.value = res.data
    }

    const likeComment = (comment) => {
      // 发送点赞请求
    }

    const showMoreReplies = (comment) => {
      // 发送加载更多回复请求
    }

    getHotCommentsData()

    return {
      hotComments,
      likeComment,
      showMoreReplies
    }
  }
}
</script>