前端计算数据还是后端计算数据？

Question

老师您好，我一直有一个疑惑，就是关于数据计算放在哪里的问题，在本项目中由于主要是购物车的计算，所以老师都放在了后端去计算，为了确保安全性。假设我现在模拟一个场景：一个图片列表，里面有很多的图片，你可以给喜欢的图片点赞，点击点赞按钮，点赞数量+1，再次点击点赞按钮就会取消点赞，点赞数量-1；就是这个操作应该放在哪里呢？如果说都放在后台的话，用户每点击一次都需要和后台交互，后台再把数据返回回来，页面再重新渲染，这种方式虽然方便，但是加载那么多图片肯定会有延迟，页面很容易出现白屏的情况。所以我想把这个需求放在前端实现。以下是我的思路，恳请老师指正一下并且帮忙回答一下其中的问题：

首先进入页面的时候获取数据展示在页面，并且把数据都保存下来（此时应该是保存在该页面的data里面还是vuex中呢？）；然后点赞的操作都是对本地数据做修改；当退出该页面的时候，再调用post（或者put）方法把数据传到后端。

Answer 1

河畔一角 2023-11-07 17:16:11

接口调用成功以后，如果是Vue语法，就直接通过item.count++了，为啥还需要去遍历一遍。 v-for在循环的时候，会根据key去做缓存优化的，图片并不会重复加载。

Answer 2

河畔一角 2023-11-07 16:15:03

点赞这个功能实际上也应该是后端计算，前端并不是把所有数据传给后端，然后从新在渲染所有的图片和数据，在点击点赞图标的时候，只需要把id传递过去后端会进行累加，然后返回成功或者失败，前端收到成功以后，把当前点赞数量加1就可以了。

• 提问者 慕粉孔帅 #1

  老师您好，最后一句话您说“前端收到成功以后，把当前点赞数量加1就可以了”，这里我有两个疑问：第一：这不就意味着前端需要保存数据么，当收到成功信息之后找到对应的这张图片点赞的数量然后+1；第二：这个图片列表肯定是循环展示出来的，改了其中一个数据，那不就意味着整个图片列表需要重新渲染一下了？

• 河畔一角 回复 提问者 慕粉孔帅 #2

  https://codesandbox.io/s/inspiring-ben-djq7gq?file=/src/App.vue 看一下我这个示例

• 提问者 慕粉孔帅 回复 河畔一角 #3

  老师您好，我对照着cart.vue那个页面可以理解您的话，实际上在cart页面老师把所有的操作都放在后端执行了，前端就是调接口，拿到接口数据了放到data里面就行了，页面会自动刷新。只是我在想这种方式如果遇到网速不好或者数据量太大的情况下，会不会出现页面卡顿或者白屏之类的情况让用户体验感不好？所以我才考虑是否要把操作移到前端来做。我同事说我有点钻牛角尖了，所有操作就应该都放在后台，前端就是不断地调接口就行了

点开查看后面1条评论