黑马头条项目：Vue文章详情模块与交互功能实现

文章详情模块配置

在本项目中，我们首先需要配置文章详情模块的路由，以确保用户能够正确访问文章详情页面。

import Detail from '@/views/detail/index.vue'
{
  path: '/detail',
  component: Detail
}

为了控制路由跳转，我们使用了 Vant 组件库中的 van-cell 组件：

获取文章详情数据

接下来，我们需要封装接口调用方法来获取文章详情数据，并将其动态渲染到页面上。

export const getDetailById = (articleId) => {
  return request({
    method: 'get',
    url: `v1_0/articles/${articleId}`
  })
}

在组件中调用该接口并处理返回的数据：

data() {
  return {
    article: {}
  }
},
methods: {
  async getDetailById() {
    try {
      const ret = await getDetailById(this.$route.query.id)
      this.article = ret.data
    } catch (error) {
      console.error('获取文章详情失败', error)
    }
  }
},
created() {
  this.getDetailById()
}

关注与取消关注功能

为了实现关注与取消关注功能，我们封装了两个接口：

export const followArticle = (userId) => {
  return request({
    method: 'post',
    url: 'v1_0/user/followings',
    data: { target: userId }
  })
}

export const unFollowArticle = (userId) => {
  return request({
    method: 'delete',
    url: `v1_0/user/followings/${userId}`
  })
}

在组件中实现点击事件绑定和逻辑处理：

  {{article.is_followed ? '已关注' : '+ 关注'}}

async toggleFocus() {
  if (this.article.is_followed) {
    try {
      await unFollowArticle(this.article.aut_id)
      this.article.is_followed = !this.article.is_followed
    } catch (error) {
      this.$toast('取消关注失败')
    }
  } else {
    try {
      await followArticle(this.article.aut_id)
      this.article.is_followed = !this.article.is_followed
    } catch (error) {
      this.$toast('关注失败')
    }
  }
}

点赞与不喜欢功能

点赞与不喜欢功能的实现也需要封装相应的接口：

export const likes = (articleId) => {
  return request({
    method: 'post',
    url: 'v1_0/article/likings',
    data: { target: articleId }
  })
}

export const unlikes = (articleId) => {
  return request({
    method: 'delete',
    url: `v1_0/article/likings/${articleId}`
  })
}

export const dislikes = (articleId) => {
  return request({
    method: 'post',
    url: 'v1_0/article/dislikes',
    data: { target: articleId }
  })
}

export const undislikes = (articleId) => {
  return request({
    method: 'delete',
    url: `v1_0/article/dislikes/${articleId}`
  })
}

在组件中实现点击事件绑定和逻辑处理：

  点赞
      
  不喜欢

async toggleStatus(type) {
  if (type === 1) {
    if (this.article.attitude === 1) {
      try {
        await unlikes(this.article.art_id.toString())
        this.article.attitude = -1
      } catch (error) {
        this.$toast('取消点赞失败')
      }
    } else {
      try {
        await likes(this.article.art_id.toString())
        this.article.attitude = 1
      } catch (error) {
        this.$toast('点赞失败')
      }
    }
  } else {
    if (this.article.attitude === 0) {
      try {
        await undislikes(this.article.art_id.toString())
        this.article.attitude = -1
      } catch (error) {
        this.$toast('取消不喜欢失败')
      }
    } else {
      try {
        await dislikes(this.article.art_id.toString())
        this.article.attitude = 0
      } catch (error) {
        this.$toast('不喜欢失败')
      }
    }
  }
}

评论模块

评论组件拆分

为了实现评论功能，我们首先需要拆分评论组件并进行布局设计：

  
  
    

      
      

        

          一阵清风
          
            
            10
          
        

        
评论的内容...

        

          两天内 
          4 回复
        

      

    

  
  
  

    
      提交
    
  

评论列表渲染

为了动态加载评论列表数据，我们封装了一个接口来获取评论数据：

export const getComments = (articleId, offset) => {
  return request({
    method: 'get',
    url: 'v1_0/comments',
    params: {
      type: 'a', // a表示文章的评论;c表示回复评论的数据
      source: articleId, // 评论的文章的id或者，回复的评论的id
      offset: offset, // 分页参数（评论的id）
      limit: 10 // 每页的条数
    }
  })
}

在组件中调用该接口并处理返回的数据：

async onLoad() {
  try {
    const ret = await getComments(this.articleId, this.offset)
    this.list.push(...ret.data.results)
    this.loading = false
    if (ret.data.last_id === ret.data.end_id) {
      this.finished = true
    } else {
      this.offset = ret.data.last_id
    }
  } catch (error) {
    console.error('加载评论失败', error)
  }
}

评论功能实现

最后，我们实现了评论功能，包括发表评论和评论回复：

export const comment = (options) => {
  return request({
    method: 'post',
    url: 'v1_0/comments',
    data: {
      target: options.target,
      content: options.content,
      art_id: options.articleId
    }
  })
}

在组件中绑定提交事件并实现评论提交逻辑：

提交

async sendComment() {
  try {
    await comment({
      target: this.articleId,
      content: this.value
    })
    this.list = []
    this.offset = null
    await this.onLoad()
    this.value = ''
  } catch (error) {
    this.$toast('评论文章失败')
  }
}