基于 Laravel 构建前后端分离应用系列教程

教程介绍&目录索引

本系列教程将基于 Laravel 5.6 + Vue 2 开发一个 API 驱动的前后端分离应用,命名为 Roast,意为通过地图查找附近的咖啡烘焙店和专卖店,本系列课程将分为 10 大章节,4...

Laravel 初始化

JavaScript 初始化

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(四) —— 配置 JavaScript 和 SASS

到目前为止,我们都是在 Laravel 后端进行初始化和扩展包的安装配置,从这一篇教程开始,我们把视线转移到前端。对于前端开发,Laravel 自带了强大的 Laravel Mix,有了这个工具...

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

到目前为止,我们已经搭建好了 Roast 单页面应用的基本骨架:安装好了 Laravel、配置好了基于 Socialite 的社会化登录、基于 Passport 配置好了自己的 OAuth 服务...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(六) —— 通过 Vue Router 配置前端路由

单页面应用的实现有赖于 HTML 5 History API,不过现在让你从头学习 HTML 5 History API 肯定不现实,好在 Vue Router 帮我们处理了几乎所有底层操作,比...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(七) —— 实现 Laravel 后端 API 接口

在上一篇教程中,我们通过 Vue Router 为 Roast 应用添加了前端路由,现在我们需要为对应的页面提供数据以便渲染。需要注意的是,在 API 驱动的单页面应用中,所有数据都是通过 Aj...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(八) —— 通过 Axios 库构建 API 请求

在上一篇教程中,我们在 Laravel 后端定义好了 API 接口,在本篇教程中,我们将通过 JavaScript 构建 API 请求来访问那些后端 API。由于我们已经配置好了 Vue 和前端...

Vuex & Vue Router 使用入门:表单提交

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

在上一篇教程中,我们在 resources/assets/js/api/cafe.js 文件中通过 JavaScript 的 Axios 库构建了一些调用 Laravel 后端 API 路由的方...

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

在本教程中我们将调用之前定义的 API 并使用上一篇教程中创建的 Vuex 模块,我们会在 Vue 组件中使用 Vuex 模块并加载页面所需要的数据。 第一步:设置 Home.vue 组件 在一...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十一) —— 通过 Laravel Mix 将 SASS 编译到 Vue 组件

在为单页面应用配置 JavaScript 和 Sass 这篇教程中,我们已经为所有 Sass 资源构建了目录结构,我们可以将 Vue 组件的 Sass 资源放到这些目录中。 第一步:创建变量文件...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十二) —— 为 Vue Router 添加页面布局

Laravel 可以通过 Blade 模板为应用添加页面布局,不过由于我们构建的是单页面应用,可以通过 Vue Router 来实现:创建一个根级页面,其中包含在每个页面都会用到的 Vue 组件...

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

在这篇教程中,我们来为咖啡店添加一些数据。我们构建这个应用的目的是为了帮助咖啡爱好者找到下一杯咖啡,所以首先需要让认证用户可以提交咖啡店到应用,不论何时在单页面应用中处理表单,都需要让 Lara...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十四) —— 通过 JavaScript 和 Laravel 验证表单请求

在上一篇教程中,我们结合 Vuex 和 Laravel 实现了表单提交功能,目前看来,工作的很好,但是有个遗憾,就是没有对表单提交数据做任何校验,所以我们将在这篇教程中来弥补这个缺憾,并且在前端...

在地图上标记咖啡店

添加喜欢、标签功能

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

在前面的教程中,我们已经陆续完成了咖啡店的添加和在高德地图上的标记,接下来我们会实现一些更加复杂的功能,在实现这些功能之前,需要先准备好数据结构,因为一个咖啡店可能会提供多种冲泡方法,单个冲泡方...

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

上一篇教程中,我们创建了相应的数据表结构来存储咖啡店与冲泡方法的多对多关联以及获取方法,现在我们需要在其基础上来调整新增咖啡店表单:由于一个咖啡店可能有多个分店,我们可能需要多个位置字段(具体数...

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

对很多应用而言,尤其是社交媒体类应用,都有喜欢或收藏功能,在这篇教程中,我们就来演示如何基于 Laravel 和 Vue 从前端到后端完整实现喜欢/取消喜欢咖啡店功能。 在上一篇教程中我们构建了...

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

接下来的两篇教程中,我们会咖啡店实现打标签功能,这个标签与咖啡店、标签和用户相关联,我们将最终根据用户为每个咖啡店标记的标签数量为排序条件为每个咖啡店构建标签云,由于功能相对而言比较复杂,我们分...

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

在上一篇教程中,我们已经实现咖啡店标签的后端 API 接口用于实现标签的查询、新增和删除,在这篇教程中,我们来实现标签的前端输入、提交和显示。 第一步:新增标签输入组件 我们将通过创建一个 Vu...

实现数据筛选功能

前端用户认证

编辑用户信息

应用代码重构

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

通过前面三十篇教程的讲解,我们已经完成了 Roast 应用的所有前端功能,相信你也已经初步掌握了基于 Laravel + Vue 实现前后端分离单页面应用的开发,接下来的几篇教程我们将围绕对现有...

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

这篇教程我们将来演示新增咖啡店功能的重构,按照上篇教程中的规划,我们会将之前存储咖啡店的 cafes 表一分为三,即 cafes 表、companies 表和 cities 表,所以对应的前端页...

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

在这篇教程中,我们将实现咖啡店的编辑和删除功能,在实现过新增咖啡店功能后,咖啡店的编辑功能实现起来非常简单,无论是前台表单还是后台逻辑,思路都是一样的,无非是最后一个在数据库中新增,一个更新而已...

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

在这篇教程中我们将在前面重构的基础上对咖啡店详情页和个人信息编辑页进行重构。这两个页面的重构不涉及到后端逻辑的调整,主要改动都在前端。 一、咖啡店详情页重构 首先打开 resources/ass...

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

你会发现我们在之前的几篇重构教程中大量使用了 CSS 动画效果,比如通知框的弹出和消失、过滤器的滑出和隐藏、编辑表单的弹出和关闭、以及隐式菜单栏的滑出和隐藏等,这些动画效果有些是从左往右的,有些...

构建后台管理系统

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

随着应用的扩张,用户越来越多,数据越来越多,用来管理这些数据的后台管理系统日渐被提上日程,此外我们还要为用户进行分级,为不同角色用户设置不同的操作权限,比如商家可以编辑或删除自家的咖啡店,以及在...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(三十七) —— 管理后台后端动作审核接口实现

从这篇教程开始,我们将开始为 Roast 应用构建管理后台,在上一篇教程中,我们为咖啡店的增删改查加上了权限管理,普通用户针对咖啡店的新增、修改和删除请求都会在后台管理员审核后才能执行,否则就是...

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

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

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

在上一篇教程中,我们完成了管理后台前端路由定义,并通过 Vue Router 的路由元信息功能实现了在前端路由中进行权限判断及请求拦截。在这篇教程中我们就要来真正为动作审核列表编写管理后台页面,...

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

作为整个系列的最后一篇教程,我们将会为管理后台新增公司管理、咖啡店管理、城市管理、用户管理和冲泡方法管理等功能,在这篇教程中,我不会过多阐述细节,而是给出大致框架和实现代码,你们可以遵循前面教程...

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

前言 随着单页面应用体量越来越大,将所有 JavaScript 代码都打包到一个文件,这个 JavaScript 文件也会随之越来越大,这样会造成的一个后果是在浏览器打开应用首页,会出现 Jav...

Search Results