建设有Laravel和角度一车 [英] Building a Cart with Laravel and Angular

查看:225
本文介绍了建设有Laravel和角度一车的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在我的应用程序中的车,但目前工作对我来说,虽然我的同事正在遇到的问题是,它是太慢。我一直在想一个更好的办法来实现这个,使其更快,效率更高。

I have in my application a cart, it currently works for me, though the issue my colleague is having is that it is too "slow". I have been thinking of a better way to implement this to make it faster and efficient.

目前这是怎么了我的页面加载:

Currently this is how my page loads:


  1. 产品/票务页面加载。

  2. AJAX功能得到产品/票从服务器,并显示在页面上。

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

Each product has a buy button like this:

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

这是buyticket如何工作的:

This is how the buyticket works:

我通过产品/车票的标识,以我的功能。

I pass the id of the product/ticket to my function.


  1. AJAX功能的帖子ID服务器。

  2. 服务器上运行的数据库查询,根据ID检索产品/票务信息。

  3. 产品/票务信息被保存到购物车表。

  4. 数据真实
  5. AJAX函数返回的响应。

  6. 我这个广播:

  1. AJAX function posts id to server.
  2. Server runs a database query to retrieve product/ticket information based on id.
  3. Product/ticket information is saved into "cart" table.
  4. AJAX function returns with data "true" as the response.
  5. I broadcast this:

$ rootScope $广播('TICKET_ADDED',真);

$rootScope.$broadcast('TICKET_ADDED', true);

车指令监听广播,使一个AJAX调用服务器,以获得购物车数据:

Cart directive listens to broadcast and makes an AJAX call to server to get cart data:

$范围。在$('TICKET_ADDED',函数(响应){
    $ scope.loadCart();
})

$scope.$on('TICKET_ADDED', function(response) { $scope.loadCart(); })

返回的数据被分配到一个数组并显示在购物车中。

Data returned is assigned to an array and displayed in the cart.

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

Each user cart is identified by a randomly generated string of length 25.

这是我的车是如何工作的,现在,我想一个更快,更好的方式来做到这一点吧。

That is how my cart works for now, i would like a faster, better way to do this please.

编辑:(用于调试酒吧得到这些统计数据)

(used a debug bar to get these statistics)

当页面加载:
查询号运行:1
内存使用情况:12.25 MB
申请时间:1.04s
AJAX请求数:3

When page loads: No. of queries run: 1 Memory Usage: 12.25 MB Request Duration: 1.04s No. of AJAX requests: 3

点击买门票功能:
查询号运行:5
内存使用情况:12.75 MB
申请时间:934.41毫秒
AJAX请求数:2

When buy ticket function is clicked: No. of queries run: 5 Memory Usage: 12.75 MB Request Duration: 934.41 ms No. of AJAX requests: 2

推荐答案

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

You can improve performance by introducing caching, both server side and client side.

服务器端缓存:不是每次做一个数据库查询,对象保持在内存中的一段时间。您可以定义一个生存时间的对象,如果对象已过期,则重新查询数据库。

Server side caching: instead of doing a DB query every time, keep objects in memory for some period of time. You can define a 'time to live' for an object and if the object has 'expired', you requery the db.

有可能很多支持这种功能的库在那里,但我只想建立它自己,因为它没有那么复杂。最棘手的部分是确保没有发生故障时多个线程试图修改缓存的对象的集合。

There are probably plenty of libraries out there that support this kind of functionality, but I would simply build it myself, because it's not that complicated. The trickiest part is making sure that nothing breaks down when multiple threads are trying to modify your collection of cached objects.

客户端缓存是轻而易举的事,当你使用的角度。这是 $ HTTP 的文档:

Client side caching is a breeze when you use angular. This is from the documentation of $http:

要启用缓存,请求配置缓存属性设置为
  真(使用默认缓存)或自定义缓存对象(与建
  $ cacheFactory)。当启用高速缓存,$ HTTP存储响应
  从指定的缓存服务器。下一次相同的请求
  制成,响应从缓存提供,而不发送
  请求发送到服务器。

To enable caching, set the request configuration cache property to true (to use default cache) or to a custom cache object (built with $cacheFactory). When the cache is enabled, $http stores the response from the server in the specified cache. The next time the same request is made, the response is served from the cache without sending a request to the server.

这篇关于建设有Laravel和角度一车的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆