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

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(三十六) —— 实现简单的、针对咖啡店增删改查的 RBAC 权限管理功能

随着应用的扩张,用户越来越多,数据越来越多,用来管理这些数据的后台管理系统日渐被提上日程,此外我们还要为用户进行分级,为不同角色用户设置不同的操作权限,比如商家可以编辑或删除自家的咖啡店,以及在自家公司下新增咖啡店,普通用户只有浏览权限,新增和更新操作需要审核通过才能执行,管理员才能登录到管理后台对大盘数据进行管理,以及为不具备权限的咖啡店更新和新增操作进行审核和处理。所以在开发管理后台...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(三十五) —— 通过 Vue Transitions 实现 Vue 组件的 CSS 动画效果 & 若干 Bug 修复

你会发现我们在之前的几篇重构教程中大量使用了 CSS 动画效果,比如通知框的弹出和消失、过滤器的滑出和隐藏、编辑表单的弹出和关闭、以及隐式菜单栏的滑出和隐藏等,这些动画效果有些是从左往右的,有些是从右往左的,有些是从上往下的,还有些是从中间向四周铺开,在 Vue 组件中实现这些动画效果很简单,下面我们就以表单提交成功后在页面顶部出现的通知组件 SuccessNotification.vu...

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

在这篇教程中我们将在前面重构的基础上对咖啡店详情页和个人信息编辑页进行重构。这两个页面的重构不涉及到后端逻辑的调整,主要改动都在前端。 一、咖啡店详情页重构 首先打开 resources/assets/js/components/cafes/CafeMap.vue,修改点标记点击回调函数实现: let store = this.$store; let router = this.$rou...

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

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

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

这篇教程我们将来演示新增咖啡店功能的重构,按照上篇教程中的规划,我们会将之前存储咖啡店的 cafes 表一分为三,即 cafes 表、companies 表和 cities 表,所以对应的前端页面和后端处理逻辑都要修改,大的数据表迁移在上篇教程中已经完成,这里我们还有一个微调,在 cafes 表中新增 matcha、tea 和 added_by 三个字段,用以适配前端筛选需要。 第一步:...

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

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

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(三十) —— 通过 Laravel + Vue 实现文件上传功能

我们在前面的教程中已经实现了多个表单的提交功能,如新增咖啡店、编辑用户个人信息等,但是还没有涉及到文件上传,那么在这篇教程中我们将基于 Laravel + Vue 在新增咖啡店页面实现咖啡店图片上传。 第一步:创建存储文件表 首先我们创建一张数据表 cafes_photos 来存储上传的咖啡店图片: php artisan make:migration create_cafes_phot...