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

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

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

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

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十九) —— 通过 Vue.js 实现动态表单一次提交多个咖啡店位置信息

上一篇教程中,我们创建了相应的数据表结构来存储咖啡店与冲泡方法的多对多关联以及获取方法,现在我们需要在其基础上来调整新增咖啡店表单:由于一个咖啡店可能有多个分店,我们可能需要多个位置字段(具体数目未知),因此需要一个动态表单。通过 Vue.js 我们可以轻松实现这样的动态表单。 第一步:构思新的 NewCafe.vue 组件功能 很显然,我们需要对 NewCafe.vue 表单组件进行重...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十八) —— 实现 Laravel 模型类之间的多对多关联及冲泡方法前端查询 API

在前面的教程中,我们已经陆续完成了咖啡店的添加和在高德地图上的标记,接下来我们会实现一些更加复杂的功能,在实现这些功能之前,需要先准备好数据结构,因为一个咖啡店可能会提供多种冲泡方法,单个冲泡方法本身也不隶属于任何咖啡店,所以在这篇教程中,我们将通过 Laravel Eloquent 模型类的多对多关联来构建咖啡店和对应冲泡方法之间的关联关系,有关多对多关联的实现,可以先阅读下官方文档。...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十三) —— 通过 Vue 组件、Vue Router、Vuex 和 Laravel 实现表单提交

在这篇教程中,我们来为咖啡店添加一些数据。我们构建这个应用的目的是为了帮助咖啡爱好者找到下一杯咖啡,所以首先需要让认证用户可以提交咖啡店到应用,不论何时在单页面应用中处理表单,都需要让 Laravel API 和调用 JavaScript 路由并更新 Vuex 储存数据的 Vuex 模块协同工作。听起来需要做的事情很多,但如果我们将它们拆解开来各个击破,也没有那么复杂。 第一步:回顾我们...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十) —— 在 Vue 组件中使用 Vuex 模块

在本教程中我们将调用之前定义的 API 并使用上一篇教程中创建的 Vuex 模块,我们会在 Vue 组件中使用 Vuex 模块并加载页面所需要的数据。 第一步:设置 Home.vue 组件 在一个 API 驱动的单页面应用中,会首先加载 HTML、CSS 和 JavaScript,这意味着页面会在布局和样式加载之后才加载数据。我们所要做的就是绑定 Home 页面组件的一个声明周期钩子并加...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(九) —— 构建 Vuex 模块

在上一篇教程中,我们在 resources/assets/js/api/cafe.js 文件中通过 JavaScript 的 Axios 库构建了一些调用 Laravel 后端 API 路由的方法。在这一篇教程中我们需要将从 API 接口获取的数据保存下来以便在单页面应用中使用,而这正是 Vuex 模块可以大展拳脚的地方。 在 Vuex 文档中将 Vuex 定位成专为 Vue.js 应用...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(五) —— 引入 Vue 2、Vue Router 和 Vuex

到目前为止,我们已经搭建好了 Roast 单页面应用的基本骨架:安装好了 Laravel、配置好了基于 Socialite 的社会化登录、基于 Passport 配置好了自己的 OAuth 服务器,并且配置好了 JavaScript 和 Sass。 在这一篇教程中我们将开始安装配置 Vue 全家桶(Vue 2 + Vuex + Vue Router),在我看来,这个全家桶是最经过深思熟虑...