基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(四十一) —— 通过 Laravel Mix + Vue Router 路由懒加载实现单页面应用 JS 文件按组件分割

前言 随着单页面应用体量越来越大,将所有 JavaScript 代码都打包到一个文件,这个 JavaScript 文件也会随之越来越大,这样会造成的一个后果是在浏览器打开应用首页,会出现 JavaScript 文件加载时间过长而导致页面出现一段时间的空白现象,用户体验很不好。 好在 Vue Router 也考虑到这个问题,为我们提供了路由懒加载功能,通过路由懒加载,我们可以将不同路由对应...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(四十) —— 在管理后台添加公司、咖啡店、城市、用户、冲泡方法管理功能

作为整个系列的最后一篇教程,我们将会为管理后台新增公司管理、咖啡店管理、城市管理、用户管理和冲泡方法管理等功能,在这篇教程中,我不会过多阐述细节,而是给出大致框架和实现代码,你们可以遵循前面教程的学习方法,沿着后端路由->中间件/授权类/请求类->控制器->模型类/Service->前端路由(Vue Router)->前端页面/组件->Vuex模块的思路自己去了解下整个实现过程,相信有了...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(三十八) —— 通过 Vue Router 提供的路由元信息功能实现前端路由权限判断

在这篇教程中,我们来构建 Roast 应用管理后台前端 UI,首先,我们为管理后台初始化创建以下子目录: /resources/assets/js/api/admin /resources/assets/js/components/admin /resources/assets/js/modules/admin /resources/assets/js/pages/admin 第一步...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(三十三) —— 功能模块重构 & CSS 整体优化:实现编辑/删除咖啡店功能

在这篇教程中,我们将实现咖啡店的编辑和删除功能,在实现过新增咖啡店功能后,咖啡店的编辑功能实现起来非常简单,无论是前台表单还是后台逻辑,思路都是一样的,无非是最后一个在数据库中新增,一个更新而已,此外,编辑咖啡店时需要先获取待编辑数据渲染到表单中。下面我们就来一步步实现编辑和删除功能。 第一步:更新模型类 由于我们要实现删除功能,并且实现的是软删除,之前已经在数据表迁移类中通过 $tab...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(三十一) —— 功能模块重构 & CSS 整体优化:首页篇

通过前面三十篇教程的讲解,我们已经完成了 Roast 应用的所有前端功能,相信你也已经初步掌握了基于 Laravel + Vue 实现前后端分离单页面应用的开发,接下来的几篇教程我们将围绕对现有 Roast 应用进行优化展开,对底层数据结构和前端功能模块进行重构,从而让应用的整体架构更加清晰,同时对 CSS 进行优化,从而让应用看上去更加美观,以首页为例,优化后的效果是这样的: 跟之前...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十九) —— 实现用户个人信息编辑功能

第一步:定义要收集的数据 在这篇教程中,我们将为 Roast 应用添加个人信息编辑页用于完善用户个人信息,以便附近有新咖啡店,或者某个咖啡店新增了用户最喜欢的冲泡方法时通知用户,此外,收集个人信息还可以为用户及朋友推荐附近的咖啡店,从而逐渐形成一个咖啡社区。基于以上种种功能,我们需要收集以下用户信息: 最喜欢的咖啡类型 口味记录 是否公开用户信息 位置信息 第二步:完善用户信息表 接...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十八) —— 通过 Vuex + Vue Router 导航守卫在前端实现认证路由保护

我们已经在上一篇教程中实现了通过 Vue 组件实现用户登录,但是现在有个问题,就是用户在没有登录的情况下也可以访问需要认证的页面,比如新增咖啡店页面: 虽然在提交表单数据到后台 API 时不会成功,但是这会给用户造成困扰,所以,我们需要对这种需要认证页面的访问请求进行拦截,我们以前在开发非单页面应用时,会在访问这种页面时从后端进行判断,比如经过 auth 中间件进行过滤,如果需要认证则...

Laravel API 系列教程(二): 结合 Laravel 5.5 和 Vue SPA 基于 jwt-auth 实现 API 认证

 上一篇我们简单演示了 Laravel 5.5 中 RESTful API 的构建、认证和测试,本教程将在上一篇教程的基础上进行升华,我们将结合 Laravel 和 Vue 单页面应用(SPA),在此双剑合壁的基础上引入 jwt-auth 实现 API 认证,由于 Laravel 集成了对 Vue 的支持,所以在 Laravel 应用中使用 Vue 也是如鱼得水,非常顺畅,整篇教程涉...