使用 Laravel 和 Angular 构建购物车答案

【问题标题】：Building a Cart with Laravel and Angular使用 Laravel 和 Angular 构建购物车
【发布时间】：2015-04-15 12:44:22
【问题描述】：

我的应用程序中有一个购物车，它目前对我有用，但我的同事遇到的问题是它太“慢”。我一直在想一个更好的方法来实现它，以使其更快、更高效。

目前这是我的页面加载方式：

每个产品都有一个这样的购买按钮：

<button ng-click="buyTicket(id)" class="btn">Buy Ticket</button>

buyticket 是这样运作的：

我将产品/票证的 ID 传递给我的函数。

AJAX 函数将 id 发布到服务器。
服务器运行数据库查询以根据 id 检索产品/票证信息。
产品/票信息保存在“购物车”表中。
AJAX 函数返回数据“true”作为响应。
我广播了这个：

$rootScope.$broadcast('TICKET_ADDED', true);
Cart 指令监听广播并对服务器进行 AJAX 调用以获取购物车数据：

$scope.$on('TICKET_ADDED', function(response) { $scope.loadCart(); })
返回的数据分配给一个数组并显示在购物车中。

每个用户购物车都由一个随机生成的长度为 25 的字符串标识。

这就是我的购物车目前的工作方式，我想要一个更快、更好的方法来做到这一点。

编辑：（使用调试栏获取这些统计信息）

页面加载时： 运行的查询数：1 内存使用：12.25 MB 请求时长：1.04s AJAX 请求数：3

点击购票功能时： 运行的查询数：5 内存使用：12.75 MB 请求持续时间：934.41 毫秒 AJAX 请求数：2

【问题讨论】：

【解决方案1】：

您使用的方法很好，只是您可能没有使用缓存。使用缓存，您将获得良好的速度。还可以在 Google Speed Insights 上检查您的服务器响应时间、速度等。它会告诉你如何让它更真实。希望对您有所帮助。

【讨论】：

【解决方案2】：

您可以通过在服务器端和客户端引入缓存来提高性能。

服务器端缓存：不是每次都进行数据库查询，而是将对象保存在内存中一段时间。您可以为对象定义“生存时间”，如果对象“过期”，则重新查询数据库。

可能有很多库支持这种功能，但我会自己构建它，因为它并不复杂。最棘手的部分是确保当多个线程尝试修改您的缓存对象集合时不会发生任何故障。

当您使用 Angular 时，客户端缓存变得轻而易举。这是来自$http的文档：

要启用缓存，请将请求配置缓存属性设置为 true（使用默认缓存）或自定义缓存对象（使用 $缓存工厂）。启用缓存后，$http 存储响应从指定缓存中的服务器。下次同样的请求进行时，从缓存中提供响应而不发送向服务器请求。

【讨论】：