基于 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...

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

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

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

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

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

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