点睛之笔：打造一个功能完备、交互流畅的网页版类掘金项目

前端

2023-12-09 09:05:23

前言

大家好，在上一篇文章中，我们对回复评论组件进行了封装，并实现了回复评论功能。关于沸点页面，还有最后三个功能点待实现：

点赞沸点内容和评论内容
评论内容超出五条后显示查看更多按钮，点击后跳转到新页面
优化项目性能和用户体验

在本文中，我们将一一实现这些功能点，并最终完成整个网页版类掘金项目的开发。

点赞功能

首先，我们来实现点赞功能。点赞功能可以分为两个部分：点赞沸点内容和点赞评论内容。

点赞沸点内容

要实现点赞沸点内容，我们需要在沸点详情页添加一个点赞按钮。当用户点击点赞按钮时，我们需要向后端发送一个请求，告诉后端该用户对该沸点内容进行了点赞。后端收到请求后，将该用户的点赞记录存储到数据库中，并返回一个新的沸点内容对象，其中包含了点赞数。

<template>
  <div class="boiling-detail">
    <div class="boiling-content">
      <h1>{{ boiling.title }}</h1>
      <p>{{ boiling.content }}</p>
      <div class="boiling-meta">
        <span>{{ boiling.author.name }}</span>
        <span>{{ boiling.created_at }}</span>
        <span>
          <button @click="likeBoiling">点赞</button>
          <span>{{ boiling.likes }}</span>
        </span>
      </div>
    </div>
    <div class="boiling-comments">
      <comment-list :comments="boiling.comments"></comment-list>
    </div>
  </div>
</template>

<script>
import { likeBoiling } from '@/api/boiling'

export default {
  methods: {
    likeBoiling() {
      likeBoiling(this.boiling.id).then(() => {
        this.boiling.likes++
      })
    }
  }
}
</script>

点赞评论内容

要实现点赞评论内容，我们需要在评论列表中添加一个点赞按钮。当用户点击点赞按钮时，我们需要向后端发送一个请求，告诉后端该用户对该评论内容进行了点赞。后端收到请求后，将该用户的点赞记录存储到数据库中，并返回一个新的评论内容对象，其中包含了点赞数。

<template>
<li class="comment-item">
  <div class="comment-header">
    <span>{{ comment.author.name }}</span>
    <span>{{ comment.created_at }}</span>
    <span>
      <button @click="likeComment">点赞</button>
      <span>{{ comment.likes }}</span>
    </span>
  </div>
  <div class="comment-content">
    {{ comment.content }}
  </div>
</li>
</template>

<script>
import { likeComment } from '@/api/comment'

export default {
  methods: {
    likeComment() {
      likeComment(this.comment.id).then(() => {
        this.comment.likes++
      })
    }
  }
}
</script>

查看更多评论

当评论内容超出五条时，我们需要在评论列表中显示一个查看更多按钮。当用户点击查看更多按钮时，我们需要将用户跳转到一个新的页面，该页面显示所有评论内容。

<template>
  <div class="comment-list">
    <ul>
      <comment-item v-for="comment in comments" :key="comment.id" :comment="comment"></comment-item>
    </ul>
    <div class="load-more" v-if="comments.length > 5">
      <button @click="loadMoreComments">查看更多</button>
    </div>
  </div>
</template>

<script>
import { loadMoreComments } from '@/api/comment'

export default {
  data() {
    return {
      comments: []
    }
  },
  methods: {
    loadMoreComments() {
      loadMoreComments(this.boilingId, this.comments.length).then(res => {
        this.comments = this.comments.concat(res.data)
      })
    }
  }
}
</script>