点击收藏后，虽然实现了服务端的收藏。image.png
但是我们刷新页面后，收藏的状态又没有了
image.png
返回的列表增加收藏的字段。用到聚合的方法。追加like的字段。
image.png
使用聚合的操作符
image.png
使用$.in表示当前的某一个数组里面，是否包含某个字段。
image.png
先获取uesr的信息的。根据user_id
image.png
传入的数据，需要加上userId
image.png

获取到收藏的字段的数据。
image.png
然后把它放到数据里面第二项。
image.png

image.png
image.png
加也给name字段
image.png
上传并运行
image.png

is_like返回的是false，因为我们还没有添加收藏。
image.png
页面上报了个错误
image.png
这是因为这里并没有传userId
image.png
userid我们是需要每一个接口都要传的。在http里统一的传。

image.png
刷新页面，默认返回的数据。is_like为true这条数据是收藏的。
image.png
再点击一下，就是取消收藏。
image.png
再点击后，刷新页面看到返回的数据
image.png

修改页面的状态

这里把item传进去了likes组件。
image.png
在页面渲染的时候 created里面把 this.like赋值。
image.png
还要考虑另外一种情况，就是我们在渲染like字段 的时候，我们的item可能还没有赋值成功。
image.png
所以我们需要在watch里面去监听一下。我们来监听item的变化，所以这里就写item
image.png
image.png
回到页面，刷新。点击前两个收藏。
image.png
再次刷新页面，收藏的按钮还在
image.png
image.png
第二条数据，也是true
image.png
把第一个取消掉。
image.png
再次刷新页面。收藏的状态还是保留的。
image.png

点击提示收藏成功

在收藏之前，弹出一个加载的提示
image.png
函数请求之后。
image.png

image.png

image.png
image.png

结束