收藏文章地址

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,在页面中需要展示收藏按钮,可以使用`v-if`和`v-else`指令来判断是否已经收藏了该文章,然后展示不同的按钮。 在Vue中,可以使用`axios`发送HTTP请求来获取当前用户已经收藏文章列表,然后判断该文章是否已经被收藏。以下是一个简单的示例代码: ```html <template> <div> <button v-if="isFavorite" @click="removeFavorite">已收藏</button> <button v-else @click="addFavorite">未收藏</button> </div> </template> <script> import axios from 'axios'; export default { data() { return { isFavorite: false, // 是否已经收藏 articleId: '123' // 文章ID,需要根据实际情况传入 }; }, mounted() { this.checkFavorite(); }, methods: { // 判断该文章是否已经被收藏 checkFavorite() { axios.get('/api/favorites').then(response => { const favorites = response.data; this.isFavorite = favorites.some(favorite => favorite.id === this.articleId); }); }, // 添加收藏 addFavorite() { axios.post('/api/favorites', { id: this.articleId }).then(() => { this.isFavorite = true; }); }, // 取消收藏 removeFavorite() { axios.delete(`/api/favorites/${this.articleId}`).then(() => { this.isFavorite = false; }); } } }; </script> ``` 在上面的代码中,`checkFavorite`方法会发送一个GET请求获取当前用户已经收藏文章列表,然后使用`Array.prototype.some`方法判断该文章是否在收藏列表中。如果已经被收藏,将`isFavorite`设置为`true`,展示“已收藏”按钮;否则将其设置为`false`,展示“未收藏”按钮。 当用户点击“未收藏”按钮时,`addFavorite`方法会发送一个POST请求将该文章添加到收藏列表中,并将`isFavorite`设置为`true`。当用户点击“已收藏”按钮时,`removeFavorite`方法会发送一个DELETE请求将该文章收藏列表中移除,并将`isFavorite`设置为`false`。 注意,上面的代码只是一个简单的示例,实际情况中需要根据具体的业务逻辑进行修改。同时,需要根据后端API的实现来编写相应的HTTP请求代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值