简体   繁体   English

如何在不重写整个应用程序(Laravel + jQuery,SPA风格)的情况下对结果进行分块(延迟加载?)

[英]How can I chunk results (lazy load?) without rewriting my whole application (Laravel + jQuery, SPA style)

I've developed a web application with the concept of Single Page Application but none of the modern techs and frameworks. 我已经开发了具有单页应用程序概念的Web应用程序,但是没有现代技术和框架。 So I have a jQuery page that dynamically requests data to localhost - a Laravel instance that compiles the entries in the DB (within a given time interval). 因此,我有一个jQuery页面,该页面动态地向localhost请求数据-Laravel实例(在给定的时间间隔内)编译数据库中的条目。

So the client wants to see all the entries for last week, the app works fine. 因此,客户希望查看上周的所有条目,该应用程序运行良好。 But if he wants to see the results for the whole last month... well, they're so many that the default execution time of the php ins't enough to process all the data (30 seconds). 但是,如果他想查看整个上个月的结果……那么,它们是如此之多,以至于php的默认执行时间不足以处理所有数据(30秒)。 I can easily override this, of course, but then the jQuery client will loop through these arrays of objects and do stuff with them (sort, find, sum...). 我当然可以轻松地覆盖它,但是jQuery客户端将遍历这些对象数组并对其进行处理(排序,查找,求和...)。 So I'm not even sure jQuery can handle this many data. 因此,我什至不确定jQuery是否可以处理这么多数据。

So my question can be broken in two: 所以我的问题可以分为两部分:

  1. Can laravel ->paginate() be used so the ajax request of jQuery can also chunk the data? 可以使用laravel-> paginate()来使jQuery的ajax请求也可以对数据进行分块吗? How does this work (hopefully in a manner that doesn't force me to rewrite all the code). 它是如何工作的(希望它不会强迫我重写所有代码)。

  2. How could I store large amounts of information on the client? 如何在客户端上存储大量信息? It's only temporary but the users will hang around for a considerable amount of time on my webpage, and I don't want them to wait 5 minutes every time they press a button 这只是暂时的,但是用户会在我的网页上闲逛相当长的时间,我不希望他们每次按下按钮都等待5分钟

Thanks. 谢谢。

If you want to provide an interface to a large amount of data stored in a backed, you should paginate the data . 如果您想提供一个接口来存储大量数据,则应该对数据进行分页 This is a standard approach, so I'm sure your client will be ok with that. 这是一种标准方法,所以我确定您的客户会接受的。

Using pagination is pretty simple - see the docs for Laravel 5.0 here: http://laravel.com/docs/5.0/pagination 使用分页非常简单-请在此处查看Laravel 5.0的文档: http ://laravel.com/docs/5.0/pagination

In order to paginate results in the backend, you need to call paginate($perPage) on your query instead of get() in your controller, like that: 为了在后端对结果进行分页,您需要在查询中调用paginate($ perPage) ,而不是在控制器中调用get() ,如下所示:

$users = User::whereIsActive(true)->paginate(15);

This will return paginated result with 15 records per page. 这将返回分页结果,每页15条记录。 Page number will be taken from page parameter of the request. 页码将从请求的page参数中获取。 In order to get 3rd page of users, you'll need your frontend jQuery app to send a request to URL like: 为了获得用户的第三页,您需要使用前端jQuery应用将请求发送至网址,例如:

/users?page=3

I don't recommend caching data in the frontend application. 我不建议在前端应用程序中缓存数据。 The data can be changed by some other user and you won't even know about it. 数据可以由其他用户更改,您甚至都不知道。 And with pagination, your requests should be lightweight enough to stop worrying about a request sent to fetch every page of results. 通过分页,您的请求应该足够轻巧,以免再担心发送到获取每一页结果的请求。

Not sure if you're subscribed to laracasts but Jeffery Way is amazing in explaining features of Laravel and I highly recommend his videos. 不确定您是否订阅了laracast,但是Jeffery Way在解释Laravel的功能方面令人赞叹,我强烈推荐他的视频。

In short you can paginate the results, then on the view when you call the foreach on your items you can array_chunk() the results to display them how you need to. 简而言之,您可以对结果进行分页,然后在视图上调用项目的foreach时,可以array_chunk()结果显示它们的显示方式。 But the paginated results are going to be fetched using a query in the URL, and i'm not sure that is what you want if you're already using a lot of jQuery to keep everything on the same page. 但是将使用URL中的查询来获取分页的结果,如果您已经使用了大量的jQuery将所有内容都保留在同一页面上,则我不确定这是您想要的。

https://laracasts.com/lessons/crazy-simple-pagination https://laracasts.com/lessons/crazy-simple-pagination

But assuming you're already paginating the results with whatever jQuery you've already written for the json data... 但是假设您已经使用已经为json数据编写的任何jQuery对结果进行分页...

You could also use a query scope to get the data you need to for the amount of time to scope to create a simple api to use with ajax. 您还可以使用查询范围来获取所需的数据,以达到创建一个简单的api与ajax一起使用所需的时间。 I think that's probably what you're looking for. 我认为这可能就是您要寻找的。

So here's what I would do assuming you're already doing some pagination manually with your javascript. 因此,这是假设您已经使用JavaScript手动进行分页的情况下所要做的。

  1. Create a few query scopes to filter the data for different lengths of time 创建一些查询范围以过滤不同时间长度的数据
  2. Create simple routes to fetch results from URI using the query scopes 使用查询范围创建简单的路由以从URI中获取结果
  3. Get the json data from the route preforming an ajax requests to the URIs created 从路由中获取json数据,该路由将ajax请求预置到创建的URI

More information on Query Scopes: http://laravel.com/docs/5.1/eloquent#query-scopes 有关查询范围的更多信息: http : //laravel.com/docs/5.1/eloquent#query-scopes

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用jQuery load()方法将从txt文件加载的链接设置为HTML样式? - How can I style links I loaded from a txt file with the jQuery load() method into my HTML? 如何设置我的mailto表单结果的样式? - How can I style my mailto form results? 如何销毁jquery幻灯片并使用默认样式加载元素? - How Can I destroy a jquery slideshow and load elements with default style? 如何延迟加载 Vue 组件? - How can I lazy load a Vue Component? 如何在 Express 中为单个路由禁用 CORS 而无需重写我的所有路由? - How can I disable CORS for a single route in Express without rewriting all of my routes? Laravel 应用程序中的延迟加载 vue 组件 - 未加载 - Lazy load vue components in a Laravel application - Not loading 如何在我的网站上延迟加载或预加载大背景图像? - How can I lazy load or preload large background images on my site? 为什么我的图像阻碍了页面加载,如何延迟/使其异步或延迟? - Why are my images holding up the page load, and how can I defer it/ make it asynchronous or lazy? 如何创建不使用路由的AngularJS SPA应用程序? - How can I create an AngularJS SPA application that does not use routing? HTML 5的 <picture> 延迟加载(没有jquery) - HTML 5's <picture> lazy load (without jquery)
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM