uniapp-034-内容区-收藏按钮的前端数据回显

我们实现了收藏按钮的点击收藏。

但是刷新列表之后，发现页面当中并没有回显我们的收藏状态。

我们应该怎么办呢？

1 - 文章数据

在我们获取文章数据的时候(通过get_list云函数)，我们现在获取的是content这个字段的数据。

文章数据的结构如下的：

这是我从云数据库的表当中截图的。

我们获取一个文章，我们需要拿到这个文章的id，然后我们看看这个文章的id是不是在用户的收藏列表中。

这样我们就能够控制回显了，对不对？

2 - 获取文章数据的 - 数据处理

我们使用了聚合方法.addFields给获取的文章数据，都增加了一个字段，叫做is_like。

我们准备用这个字段，来支撑前端的回显。

$是什么？

3 - 聚合操作符的使用

$是一个聚合操作符。

$.in(['$_id'], article_likes_ids)表示的是啥意思呢？

就是判断聚合当中的每一个文章id，是不是在用户的收藏列表中。

就是这个意思。

4 - 统一云函数调用传入user_id

那么，我们就需要获取到用户的收藏列表，对不对？

那么我们这个云函数就要传进来user_id，对不对？

几乎所有的接口，都要传入user_id的，对不对？

那么我们可以在http.js当中使用uniCloud.callFunction来调用云函数的时候，统一处理，传入user_id。

如下图所示：

接下来，我们做什么？

我们应该在获取文章数据的时候，获取到用户的信息，从用户的信息当中拿到用户的文章收藏列表。

像是下面的样子：

5 - 结果

到这一步，结果是什么？

结果就是，我们获取文章数据的时候，我们获取的数据里头有什么？

有is_like字段，这个字段表达了什么？

表达了这个文章是不是被当前登录的用户收藏了，对不对？

---

那么接下来我们做什么？

我们可以去前端来看看，怎么进行回显了，对不对？

6 - 前端回显

我们是在哪里渲染我们的文章数据的？

在list-card组件当中。

我们的list-card组件当中，一个card就是渲染一个文章的数据，这个数据叫做item。

---

我们把这个item数据传给了likes组件，对不对？

对的。

---

所以我们可以在likes当中控制我们的小红心回显。

我们能够拿到item的，对不对。

当然，我们就可以拿到item.is_like。

我们是通过自定义的like数据来控制我们的小红心，所以用下面的简单代码，就可以做到效果：

7 - 网络的细节考虑

我们需要考虑一个情况。

我们的item数据是从哪里来的？

item数据代表的一个卡片对应的、文章数据，对不对？

这是从哪里来的？

这是从网络请求的。

我们在渲染like字段的时候，是不是可能这个item还没有拿到？

是可能的。

所以我们需要利用watch来监听is_like。

如果这个is_like的数据有变化，那么我们干什么？进行赋值。

8 - 交互提示优化

我们点击小红心的时候，需要提示我们的，提示我们什么？

是否收藏成功。

这是一个什么效果呢？

这里头用了uni.showLoading，也用了uni.hideLoading。

这里头用了uni.showToast。

可以直接看下面的效果图。