一、文章详情——关注用户
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
}
使用v-model
已关注
关注
自然父组件中
文章收藏和点赞同理
二、文章评论——准备组件
创建组件 src/views/article/components/comment-list.vue
import CommentList from './components/comment-list'
components:{
CommentList
}正文结束
【项目分析七】
推荐阅读
- 项目分析六
- vue.js|vue-cli3.0 使用postcss-plugin-px2rem(推荐)和 postcss-pxtorem(postcss-px2rem)自动转换px为rem 的配置方法;
- 大数据项目总结|基于Java+springmvc+vue 健康管理系统
- Java毕业设计|基于Java+SpringMvc+vue+element实现博物馆平台系统
- vue|Vue基础知识点(一)
- vuejs|vue-router原理与源码分析
- 前端面试总结|vue核心面试题(vue中模板编译原理)
- Vue|Vue2的核心原理剖析
- vue.js|Vue练习题--不定时分享