[ Laravel 从入门到精通 ] 数据库和 Eloquent 应用 —— 结合 Bootstrap + Vue 组件实现异步分页功能

通过前面的系列教程,我们已经介绍完了 Laravel 框架支持的所有对数据库相关基础功能。在日常开发中,对数据库查询结果进行分页也是一个非常常见的需求,我们可以基于之前介绍的查询方法和前端 HTML 视图实现分页功能,不过从 Laravel 5.3 开始,Laravel 框架就已经为我们提供了非常完整的分页解决方案,包括后端 API 和前端视图。不管你使用查询构建器还是 Eloquent...

[ Laravel 从入门到精通 ] 处理用户请求:基于 Laravel + Vue 组件实现文件异步上传

我们在上一篇教程中已经演示了如何通过 Request 请求实例获取各种文本输入数据,但是还有一种输入数据我们没有涉及到,那就是文件上传。我们可以通过 Request 请求实例提供的 file 方法获取用户上传文件,并将其保存到指定目录从而完成文件上传,接下来,我们将从前端到后端实现一个完整的用户上传文件功能,包括视图、路由、控制器部分代码。 定义文件上传路由 首先我们在 routes/w...

[ Laravel 从入门到精通 ] 前端入门:在 Laravel 项目中编写第一个 Vue 组件

和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 React,实现细节参考官方文档。 学院拥抱的是 Vue.js 框架,所以后续前端相关教程都会基于 Vue.js 编写,有关 Vue.js 的入门教程,可以阅读官方文档,值得一提的是,Vue....

[ Laravel 从入门到精通 ] Blade 模板引擎进阶篇:模板继承 & 组件引入

除了基本的数据渲染及控制结构指令之外,Blade 还提供了模板继承功能,从而允许视图模板之间继承、编辑及引入。 通过 @yield 和 @section/@show 在布局文件中定义内容 在理解 Blade 模板继承的时候,我们可以类比类的继承机制:在父类中定义抽象方法或公共方法,然后在子类中实现抽象方法或重写公共方法。在视图文件中,这个「父类」一般对应布局文件,不同的功能模块往往有不同...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(三十九) —— 管理后台前端动作审核列表页面功能实现

在上一篇教程中,我们完成了管理后台前端路由定义,并通过 Vue Router 的路由元信息功能实现了在前端路由中进行权限判断及请求拦截。在这篇教程中我们就要来真正为动作审核列表编写管理后台页面,对列表数据进行渲染并实现对每个审核动作的通过和拒绝操作。 第一步:为后台布局文件 Admin.vue 添加页面头部和导航组件 在开始之前,首先需要填充 resources/assets/js/la...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十七) —— 通过 Vue 组件实现单页面应用无跳转登录

我们在上一篇教程中通过是否需要登录访问重新组织了后端路由,并且移除了之前依赖后端 + 视图实现的登录方式,在这一篇教程中,我们将通过 Vue 组件 + 后端 API 实现在单页面应用中的无跳转登录。 第一步:前端默认重定向到首页 我们首先在 resources/assets/js/routes.js 中通过 redirect 属性将前端路由 / 重定向到首页页面 home,这样,layo...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十四) —— 使用 Vue Mixins 在高德地图上对咖啡店点标记进行筛选过滤

在上一篇教程中我们在应用首页通过 Vue Mixins 实现了对咖啡店的筛选过滤,在这篇教程中,我们将复用上一篇教程中的过滤处理函数通过 Vue Mixins 实现在高德地图上对咖啡店点标记进行筛选过滤的功能,实现思路和上篇教程类似,只不过前者是对列表数据进行过滤,而本篇教程是在地图上对点标记进行过滤。 第一步:创建高德地图过滤组件 和上篇教程的 CafeFilter 组件类似,我们首先...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十三) —— 通过 Vue Mixins 在前端首页对咖啡店进行过滤筛选

随着咖啡店数量的增多,需要按照指定条件对咖啡店进行过滤筛选,才能找到心仪的咖啡店。由于我们现在在应用首页已经将所有咖啡店数据一次性返回了,所以现在我们在前端基于 Vue 对咖啡店进行过滤,当然,随着数据的进一步增大,筛选过滤功能必须集合后端 API 实现,但是对于目前数据量来说,前端处理就可以了。 我们将基于以下几个维度对数据进行过滤: 文本搜索 标签选择 是否是烘焙店 冲泡方法 我...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十二) —— 咖啡店标签前端输入及显示功能实现

在上一篇教程中,我们已经实现咖啡店标签的后端 API 接口用于实现标签的查询、新增和删除,在这篇教程中,我们来实现标签的前端输入、提交和显示。 第一步:新增标签输入组件 我们将通过创建一个 Vue 组件来实现标签的输入,使用组件的好处是方便标签输入组件的复用,在 resources/assets/js/components/global 目录下新增一个 forms 子目录,然后在 for...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十) —— 通过 Laravel + Vue 实现喜欢/取消喜欢咖啡店功能

对很多应用而言,尤其是社交媒体类应用,都有喜欢或收藏功能,在这篇教程中,我们就来演示如何基于 Laravel 和 Vue 从前端到后端完整实现喜欢/取消喜欢咖啡店功能。 在上一篇教程中我们构建了咖啡店之间的父子关联关系,并且在更早的教程中构建了咖啡店与冲泡方法之间的多对多关联,而在这篇教程中,我们将构建基于用户和咖啡店的另一个多对多关联关系:一个咖啡店可以被多个用户喜欢,一个用户也可以喜...