项目分析七

一、文章详情——关注用户

1.思路：
给按钮绑定点击事件
在事件处理函数中：
如果已关注，则取消关注
如果没有关注，则添加关注
已关注
关注

2.思路：在src/api/user.js中
查看文档，并封装请求
再调用，并获取数据
// 添加关注
export const addFollow = userId => {
  return request({
    method: 'POST',
    url: '/v1_0/user/followings',
    data: {
      target: userId
    }
  })
}
// 取消关注
export const deleteFollow = userId => {
  return request({
    method: 'DELETE',
    url: `/v1_0/user/followings/${userId}`
  })
}

已关注
关注

import { addFollow, deleteFollow } from '@/api/user'
data(){
    return{
        // 其他变量 ...
        followLoading:false  // 控制是否处于载中
    }
}，
methods:{
 async onFollow () {
  // 如果没有登录，就不允许操作
  if(!this.$store.state.user) return this.$toast('请登录！')
    
  // 开启按钮的 loading 状态
  this.isFollowLoading = true

  try {
    // 如果已关注，则取消关注
    const authorId = this.article.aut_id
    if (this.article.is_followed) {
      await deleteFollow(authorId)
    } else {
      // 否则添加关注
      await addFollow(authorId)
    }

    // 更新视图
    this.article.is_followed = !this.article.is_followed
  } catch (err) {
    if(err && err.response.status === 400){
        this.$toast('你不能关注自己')
    }else{
        this.$toast.fail('操作失败')
    }
  }

  // 关闭按钮的 loading 状态
  this.isFollowLoading = false
 }
}

删除article/index.vue里面部分内容：
删除followLoading变量
删除onFollow事件
删除导入addFollow, deleteFollow 方法
创建src/components/follow-user/index.vue







article/index.vue中导入关注组件
// 导入
import FollowUser from '@/components/follow-user'

// 注册
components: {
    FollowUser
}


使用v-model







自然父组件中


文章收藏和点赞同理

二、文章评论——准备组件

创建组件 src/views/article/components/comment-list.vue


import CommentList from './components/comment-list'
components:{
    CommentList
}

正文结束