Vue js和喜欢/喜欢的按钮

Question

我想知道喜欢，订阅或喜欢的按钮是如何工作的。 我不明白。

例如：

用户喜欢标识为243的帖子。

ajax请求被发送到服务器，其id为帖子（243）[此处返回结束，用户最喜欢的列表已更新，包括该帖子]，服务器发回成功响应

现在，我想如何处理修改类似按钮以实际显示喜欢的内容（永久性，包括刷新）。

我如何在Vue JS中实现这一点。事情如何更新？我不明白这部分。

Answer 1

如果服务器发回成功的响应，您可以增加已存在的数字。

这个初始数字是你通过prop，直接从服务器或通过初始AJAX请求得到的。

如果你想永久地＆＃34;更新按钮上的喜欢量，您必须将其持久保存到数据库（或其他一些存储介质）。在您的服务器上，您可以拥有一个接受post id作为参数的路由，并增加该特定用户的帖子：

/incrementlike/243

这是你要向POST ajax请求的地方。大多数情况下，在MVC框架中，您将有一个映射到此路由的控制器操作/方法，其中包含响应此调用的逻辑。

如果您对向服务器发出AJAX请求以在后端增加类似内容后发生的部分感兴趣，我建议您阅读路由或MVC结构。

Answer 2

如何做到这一点真的是根据具体情况来完成的。这实际上取决于许多事情，例如你的后端在喜欢它时对帖子做了什么。

如果你想对我在下面附上的过程进行一般性的“解释”，这不是特定的Vue，但总体思路是一样的：

前端方面：

• 修改发布的本地状态以设置正确的标志，例如。在将请求发送到服务器之前，单击它时会立即post1.liked = true。
• 确保您的GUI代表此更改。恩。将每个帖子的“喜欢”属性上的按钮颜色作为基础。
• 如果从服务器收到失败响应，请通知用户并允许他们“再试一次”或类似的东西。
• 刷新页面时，请确保从服务器获取更改，如果您已正确完成后端部分，则从后端收到的数据中对帖子状态的修改将是正确的（post1.liked will是真的）

后端

当请求进入时，以正确的方式修改帖子的状态并确保下次提取帖子时，将发送新状态。