首页
学习
活动
专区
圈层
工具
发布

通过 Laravel 创建一个 Vue 单页面应用(三)

如果你还没有读过通过 Laravel 构建 Vue 单页应用的 第一部分 和 第二部分,我建议你先去看看,再回到这里。我会在这里等你。...到现在,你应该有一个 /api/users 接口可以用在单页应用中,如果你继续学看下去,你会注意到新的返回已经不满足当前的组件。...getUsers() 中这样调用: callback(null, response.data); beforeRouteUpdate 当组件已经处于渲染状态,并且路由更改时,将调用 beforeRouteUpdate...但是,前者可以在组件中使用 this,因此在样式上会略有不同: // 当路由更改并且组件已经渲染时, // 逻辑会略有不同。...UsersIndex.vue 组件后显示出的 SPA 结果: 下一步是什么 我们现在有一个有效的 API,可以从数据库中获取真实数据,还有一个简单的分页组件,该组件在后端使用 Laravel 的 API

6.3K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    结合 Bootstrap + Vue 组件实现 Laravel 异步分页功能

    在日常开发中,对数据库查询结果进行分页也是一个非常常见的需求,我们可以基于之前介绍的查询方法和前端 HTML 视图实现分页功能,不过从 Laravel 5.3 开始,Laravel 框架就已经为我们提供了非常完整的分页解决方案...不管你使用查询构建器还是 Eloquent 模型类,都可以在一分钟内完成分页功能,Laravel 还为我们提供了丰富的自定义支持,不管是后端的分页器,前端的分页链接,还是整个分页视图,都可以按需进行定制化开发...关于如何使用 Laravel 自带的分页功能进行分页,可以参考官方文档中的分页章节,说的非常清楚,在这篇教程中我们就不再一一演示了,不过 Laravel 自带的分页器实现的分页链接是动态 URL,不利于...(循环设置分页码时用到) per_page:每页显示文章数 from:当前页起始文章 ID to:当前页终止文章 ID total:文章总数量 elements 中包含的是页面与对应页面URL之间的映射关系...我们会在组件 created 阶段调用 fetchPaginationData() 方法初始化这两个属性,代码比较简单,需要注意的是,这里我们会根据当前页面 URL 中的 page 参数动态获取分页数据

    8.3K20

    测试用例(功能用例)——资产盘点

    005 资产盘点列表页 数据超过10行分页显示 资产管理员正确打开资产盘点管理页面,数据足以分页 无 无 分页显示,在首页时首页和上一页按钮灰色显示,在末页时末页和下一页按钮灰色显示 低 通过 ZCGL-ST-SRS016...ZCGL-ST-SRS016-016 新增盘点单 新增盘点单页面数据超过10行分页显示 资产管理员正确打开新增盘点单页面,数据足以分页 无 无 分页显示,在首页时首页和上一页按钮灰色显示,在末页时末页和下一页按钮灰色显示...10行分页显示 资产管理员正确打开盘点结果录入页面,数据足以分页 无 无 分页显示,在首页时首页和上一页按钮灰色显示,在末页时末页和下一页按钮灰色显示 低 通过 ZCGL-ST-SRS016-066 录入盘点结果...按盘点状态(列表中有数据)进行查询 资产管理员正确打开资产盘点管理页面 盘点状态:列表中有数据 输入以上数据,点击【查询】按钮 保留查询条件,显示符合条件的资产盘点记录 高 通过 ZCGL-ST-SRS016...,数据足以分页 无 无 分页显示,在首页时首页和上一页按钮灰色显示,在末页时末页和下一页按钮灰色显示 低 通过 ZCGL-ST-SRS016-146 查看盘点结果 查看盘点结果页面点击【上一页】按钮 资产管理员正确打开查看盘点结果页面

    1.3K11

    测试用例(功能用例)——资产借还、资产转移

    按照登记时间降序)排列 4、当列表记录超过10条时,列表显示翻页功能 低 通过 ZCGL-ST-SRS012-003 资产借还列表页 面包屑导航【首页】按钮有效性验证 资产管理员正确打开资产借还管理页面...低 通过 ZCGL-ST-SRS012-005 资产借还列表页 数据超过10行分页显示 资产管理员正确打开资产借还管理页面,数据足以分页 无 无 分页显示,在首页时首页和上一页按钮灰色显示,在末页时末页和下一页按钮灰色显示...按照登记时间降序)排列 4、当列表记录超过10条时,列表显示翻页功能 低 通过 ZCGL-ST-SRS013-003 资产转移列表页 面包屑导航【首页】按钮有效性验证 资产管理员正确打开资产转移管理页面...低 通过 ZCGL-ST-SRS013-005 资产转移列表页 数据超过10行分页显示 资产管理员正确打开资产转移管理页面,数据足以分页 无 无 分页显示,在首页时首页和上一页按钮灰色显示,在末页时末页和下一页按钮灰色显示...2、在资产借还列表,系统自动将原使用人的借用单状态“未归还”置为“已归还”,归还日期取转移日期,备注为“资产转移:新使用人姓名(工号)”; 3、在资产借还列表,系统将自动生成关于新使用人的借用单,状态为

    1.2K11

    黑眼圈大神程序员用5000字带你通透读懂Elasticsearch的注意事项

    不过,直接重命名字段时,使用reindex功能会导致原来保存的旧字段名的索引数据失效,这种情况该如何解决?...◆ 陷阱一:Elasticsearch是准实时的吗 当 更 新 数 据 至 Elasticsearch 且 返 回 成 功 提 示 时 , 会 发 现 通 过Elasticsearch查询返回的数据仍然不是最新的...1)当新的Document被创建时,数据首先会存放到新的Segment中,同时旧的Document会被删除,并在原来的Segment上标记一个删除标识。...当Document被更新时,旧版Document会被标识为删除,并将新版Document存放在新的Segment中。...举一个例子,查询结果按照订单总金额分页,上一页最后一个订单的总金额total_amount是10,那么下一页的查询示例代码如下: 这个search_after里的值,就是上次查询结果排序字段的结果值。

    61300

    我们为什么要重新思考服务器端渲染?

    慢慢地,React、Vue 上场,状态管理也来了,组件拆分、路由、API 层、loading 状态……等等,我们本来是为了更简单,结果把事情越搞越复杂?...来看几个典型场景对比:场景传统做法HTMX 做法列表渲染拉 JSON + 手动 map 渲染后端返回一个 就好分页处理维护分页状态 + loading点击分页按钮触发 /list?...用 ServBay 几分钟搞定环境别看 HTMX 听起来新,其实你本地跑起来一点也不麻烦,只要你有个干净的后端环境就行。...想试试“回归服务器渲染”的开发方式?这个组合真的轻量又优雅。四、为什么这种方式现在又可行了?有人可能会问:我们不早就用过服务器渲染了吗?为啥又回去了?...webpack,直接上线,轻松多了 可以说:我们不是回到了老办法,而是用上了现代能力,走了一条更加简单直接的路线。

    16230

    黑眼圈大神程序员用5000字带你通透读懂Elasticsearch的注意事项

    不过,直接重命名字段时,使用reindex功能会导致原来保存的旧字段名的索引数据失效,这种情况该如何解决?...陷阱一:Elasticsearch是准实时的吗 当 更 新 数 据 至 Elasticsearch 且 返 回 成 功 提 示 时 , 会 发 现 通 过Elasticsearch查询返回的数据仍然不是最新的...1)当新的Document被创建时,数据首先会存放到新的Segment中,同时旧的Document会被删除,并在原来的Segment上标记一个删除标识。...当Document被更新时,旧版Document会被标识为删除,并将新版Document存放在新的Segment中。...举一个例子,查询结果按照订单总金额分页,上一页最后一个订单的总金额total_amount是10,那么下一页的查询示例代码如下: 这个search_after里的值,就是上次查询结果排序字段的结果值。

    56330

    细数 Mycat 中的那些坑

    之后,当测试人员再次点击分页查询的时候,运维又监控到了LIMIT 0, 151400这种怪异的SQL,我们花了好几个小时排查,在本地跑测试,还是没发现什么问题,真的感觉到了要怀疑人生了!...在分库分表的情况下,宕 limit 的开始位置特别大的时候,例如大于某表的总行数时,mycat 将查询各个分表的结果集返,然后在mycat中进行合并和排序,再返回结果。...结果集特别大的情况会导致查询很慢,严重的情况会直接导致 mycat OOM!...2.2、子查询结果偶尔不完整 当通过某些条件,筛选订单项数据时,测试人员反馈某些数据偶尔出现不完整。...select id,productName from orderItem where orderId in ( select id from order where userName = '张三' ) 预期的查询结果时

    99141

    Laravel API教程:如何构建和测试RESTful API

    虽然会一步步跟着做,但由于php还只停留在几年前的初学阶段,以及个人英语水平所限,有些新名词可能会理解有误,翻译过程中难免出现错误之处,还请各位能见谅与指出或有能力也可以直接点击上面的链接查看英文原文。...当您localhost:8000在浏览器上打开时,应该会看到这个示例页面。...当一个动作执行成功,但没有内容返回。 206:部分内容。当您必须返回分页的资源列表时很有用。 400: 错误的请求。无法通过验证的请求的标准选项。 401:未经授权 用户需要进行身份验证。...403:禁止 用户已通过身份验证,但没有执行操作的权限。 404: 未找到。当没有找到资源时,这将由Laravel自动返回。 500: 内部服务器错误。...,在测试期间,Laravel应用程序不会在新的请求上再次实例化。

    22.6K20

    Laravel 6.7.0 版本发布,支持不加载关联关系

    Laravel 开发团队本周发布了 v6.7.0 版本,新增了一些新特性,以及对之前版本问题的修复。...(); // 例如 users.created_at $model->getQualifiedUpdatedAtColumn(); // 例如 users.updated_at 异常处理器中可以使用新的...现在会抛出错误来取代之前的静默失败,此更新无需调整任何上层业务代码: 此外,一个比较重要的更新是 Eloquent 模型类现在还新增了 withoutRelations() 方法,用来支持在队列任务中不加载关联关系...资源集合现在可以通过调用 preserveQueryParameters() 方法在 API 资源分页时保留查询字符串: return MyResourceCollection::make($repository...withoutRelations() 和 unsetRelations() 方法(#30802) 新增 ResourceCollection::preserveQueryParameters() 方法以便在 API 资源分页时保留查询字符串

    1.9K20

    ElasticSearch分页查询的3个坑

    当请求第10000页,每页10条记录,则需要先从每个分片中获取满足查询条件的前100010个结果,返回给协调节点。...search_after + pit 分页查询过程中,PIT 视图过期怎么办? search_after查询,如果需要回到前几页怎么办?...如果您需要在分页超过 10000 个点击时保留索引状态,请使用带有时间点 (PIT) 的 search_after 参数。...虽然es 会有自动清理机制,但是 srcoll_id 的存在会耗费大量的资源来保存一份当前查询结果集映像,并且会占用文件描述符。所以用完之后要及时清理。...并且保留上下文需要足够的堆内存空间。 适用场景 全量或数据量很大时遍历结果数据,而非分页查询。 「官方文档强调:」 不再建议使用scroll API进行深度分页。

    5K11

    一篇文学会商用可编辑问卷表单制作【iVX 十二】

    背景色栏用于更改当前某一动态添加的组件的背景色(调色板位于扩展组件中),序号栏用于提示当前选中的时哪一行动态添加的组件栏: 接下来我们为表单内容添加一个事件,当点击该表单内容将会记录此行的序号。...,用于接收服务传递过来的数据: 接着给页面添加一个事件,该事件显示时触发,触发后默认显示第一页,并且将结果赋予给分页数据变量: 接着我们为需要显示的文本绑定数据,此处以创建时间为例,将数据绑定为循环创建时的创建时间列内容...: 随后预览该页内容,内容将会显示在页面中: 接下来为分页添加点击事件,当点击分页页数后调用分页数据获取服务,传递当前页面页码作为参数,将返回结果赋值给分页数据,那么即可实现分页: 四、表单填写页功能编写...为了更好的进行操作,我们在数据库查询结果变量中点击添加根节点,创建几个节点: 创建节点后将会非常方便赋值: 此时我们预览页面,将会出现我们动态添加的结果: 4.3 提交填写数据 页面生成完后我们填写内容后需要对数据进行提交...5.2 获取自己创建的表单信息 接下来创建一个服务,命名为获取自己已填写表单信息: 该服务接受手机号作为参数: 随后用手机号对比提交用户做为条件查询数据,使用降序的方式进行数据输出且删除字段不能等于

    7.9K30

    MySQL【知识改变命运】06

    前言:在05这节数据结构里面,我们知道select * from 这个操作很危险,如果数据库很大,会把服务器资源耗尽,接下来提到的查询可以有效的限制返回记录 1:分页查询 分页查询可以有效控制一次查询出来的结果集的记录条数...⽂成绩更新为原来的 +10分 Update 注意事项 • 以原值的基础上做变更时,不能使⽤math += 30这样的语法 • 不加where条件时,会导致全表数据被列新,谨慎操作 3:Delete...我们会发现,自增会从表记录中的值开始填充 执行截断操作: 我们再加入数据: 表回到了最初的创建时候状态 自增id也会从0开始 6:插入查询结果 6.1:语法: INSERT INTO...SELECT ... 6.2:练习: 删除表中的重复记录,重复的数据只能有⼀份 创建一个表 **实现思路:**原始表中的数据⼀般不会主动删除,但是真正查询时不需要重复的数据,如果每次查询 都使⽤...可以创建⼀张与 t_recored 表结构相同的表,把 去重的记录写⼊到新表中,以后查询都从新表中查,这样真实的数据不丢失,同时⼜能保证查询效 率 创建一个新表: 这里有个小技巧: 语法

    20610

    竟然有人质疑我还在用Laravel开发?别忘了PHP是最好的语言。(2)模型工厂类

    之前写了一篇Laravel提高DB查询效率的文章,转发到群里后竟然有人质疑我说“Laravel是他好几年前用的框架,没想到现在还有人在用。” 纳尼,什么意思嘛?别忘了PHP是最好的语言!...下面我介绍一下目前Laravel最新版(8.0版本)的新特性: Laravel 8 通过引入 Laravel Jetstream,模型工厂类,迁移压缩,队列批处理,改善速率限制,队列改进,动态 Blade...组件,Tailwind 分页视图, 时间测试助手,artisan serve 的改进,事件监听器的改进,以及各种其他错误修复和可用性改进,对 Laravel 7.x 继续进行了改善。...xxxxxxxxx', // password 'remember_token' => Str::random(10), ]; } } 由于在生成模型时可以使用新的...PHP 类,状态转换可以直接写成一个方法。

    3.3K41

    竟然有人质疑我还在用Laravel开发?别忘了PHP是最好的语言。

    之前写了一篇Laravel提高DB查询效率的文章,转发到群里后竟然有人质疑我说“Laravel是他好几年前用的框架,没想到现在还有人在用。” 纳尼,什么意思嘛?别忘了PHP是最好的语言!...下面我介绍一下目前Laravel最新版(8.0版本)的新特性: Laravel 8 通过引入 Laravel Jetstream,模型工厂类,迁移压缩,队列批处理,改善速率限制,队列改进,动态 Blade...组件,Tailwind 分页视图, 时间测试助手,artisan serve 的改进,事件监听器的改进,以及各种其他错误修复和可用性改进,对 Laravel 7.x 继续进行了改善。...xxxxxxxxx', // password 'remember_token' => Str::random(10), ]; } } 由于在生成模型时可以使用新的...PHP 类,状态转换可以直接写成一个方法。

    3K60

    Axure交互大全:Axure全交互模板及视频教程

    新同学能够通过学习该模板,快速掌握axure里面的交互,打好扎实的基础;老同学在画原型时,如果忘记了某个交互,也可以当速查表,快速查询。...1.1.2 新窗口/新标签这个交互和上一个交互的不同处在于会在新的标签页面打开某个页面,这样原来的页面还保留,客户可以切换标签查看不同的内容。一般适用外部于广告,链接的跳转。...1.1.4 父极窗口父级窗口对应弹出窗口,就是在弹窗窗口中可以设置原来窗口的页面。这个交互一般和关闭页面一起用,例如点击了弹窗中的广告,先可以设置原来的页面跳转至产品页面,再关闭弹出窗口。...在框架中打开链接1.3.1 内联框架这个也是每个项目必备的事件,一般项目原型会设置一个菜单页,点击菜单栏后在内联框架中打开某个页面。...,快速查询中继器列表中包含输入文字的数据行4.4 移除筛选可以移除中继器列表中的单个筛选或者所有筛选4.5 设置显示页面如果中继器列表数据太多,一般会用分页显示的方式,该交互就是可以设置中继器显示那一页的内容

    1.2K31

    SpringBoot 集成 MybatisPlus 八——插件

    乐观锁 OptimisticLockerInnerInterceptor3 分页插件在之前使用 mapper模式 及 ActiveRecord 模式进行分页查询时,都使用了配置类中配置分页插件的方式,实现分页查询功能...,在 SQL 语句末尾使用 limit 语句实现分页查询。...5.2 锁的分类悲观锁悲观锁是对数据被外界修改持保守态度。在整个数据处理过程当中,将数据处于锁定状态。通常依靠数据库提供的锁机制。...5.3 MybatisPlus乐观锁插件5.3.1 实现方式从数据库取出记录时,获取当前数据的版本;执行更新时,会对原来读取的版本与数据当前版本进行比较,如果一致就执行更新;更新成功后,数据版本号增加。...,也会更新失败。

    44610

    MySQL三种日志有啥用?如何提高MySQL并发度?

    有如下几个时机 Buffer Pool不够用了,要给新加载的页腾位置了,所以会利用改进的后的LRU算法,将一些脏页刷回磁盘 后台线程会在MySQL不繁忙的时候,将脏页刷到磁盘中 redolog写满时(redolog...当这条更新语句在事务中执行,当事务回滚时,就可以通过undolog将数据恢复为原来的模样。...每个阶段的log操作都是记录在磁盘的,在恢复数据时,redolog 状态为commit则说明binlog也成功,直接恢复数据;如果redolog是prepare,则需要查询对应的binlog事务是否成功...我也不知道 「后来dba排查到原因,把复制方式从半同步复制改为异步复制解决了这个问题」 「异步复制」:MySQL默认的复制即是异步的,主库在执行完客户端提交的事务后会立即将结果返给给客户端,并不关心从库是否已经接收并处理...在一个方法中,我先插入了一条数据,然后过一会再查一遍,结果插入成功,却没有查出来」 这个比较容易排查,如果系统中采用了数据库的读写分离时,写插入的是主库,读的却是从库,binlog同步比较慢时,就会出现这种情况

    98720

    「硬核JS」图解Promise迷惑行为|运行机制补充

    也是宏任务),和特殊异步任务(即微任务); 普通的异步任务等有了运行结果其回调就会进入事件触发线程管理的 任务队列(可理解为宏任务队列); 特殊的异步任务也就是微任务的回调会立即进入一个微任务队列; 当主线程内的任务执行完毕...我们可以在执行then方法时如果还在等待态 pending,就把回调函数临时寄存到队列(就是一个数组)里,当状态发生改变时依次从数组中取出执行就好了。...哦,原来 then 方法并不是在上一个 Promise 对象 resolve 后才执行,它在一开始就执行并返回了一个新的 Promise,在返回的新 Promise 中会根据上一个 Promise 的状态来做判断...我们之前的手写实现,当使用 Promise 返回一个新的 Promise 时,内部会调用它的 then 方法从而产生一个新的微任务,其回调入队,后面微任务队列执行到这个回调时,拿到传入的值作处理后再 resolve...程序回到最初的状态如下: 首先整个程序会作为一个宏任务第一批执行: P1 中直接使用 Promise 构造函数中的 resolve 方法创建了一个成功态的实例,P1-t1 的 then 方法执行时,由于是成功态

    2.5K30
    领券