项目分析七

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

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 = truetry { // 如果已关注,则取消关注 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 }

二、文章评论——准备组件
创建组件 src/views/article/components/comment-list.vue import CommentList from './components/comment-list' components:{ CommentList }正文结束

【项目分析七】

    推荐阅读