基于 Laravel + Vue 构建前后端分离应用 | Laravel 学院
Laravel 学院
文档
Laravel 8.x 中文文档
Laravel 7.x 中文文档
Laravel 6.x 中文文档
Laravel 5.8 中文文档
Laravel 5.7 中文文档
Laravel 5.6 中文文档
Laravel 5.5 中文文档
Laravel 5.4 中文文档
Laravel 5.3 中文文档
Laravel 5.2 中文文档
Laravel 5.1 中文文档
Lumen 中文文档
全栈教程
PHP 全栈工程师指南
PHP 入门到实战
Laravel 入门到精通
Vue.js 入门到实战
玩转 PhpStorm 教程
Laravel 博客入门项目
Laravel 微信小程序项目
Laravel 前后端分离项目
Swoole 入门到实战
Eloquent 性能优化实战
Redis 高性能实战系列
Laravel 新版本特性
PHP 新特性与最佳实践
Golang
Go 入门教程
Go Web 编程
Gin 使用教程
微服务开发
内功修炼
数据结构与算法
网络协议
微服务从入门到实践
高性能 MySQL 实战
高性能 Redis 实战
Laravel 消息队列实战
Laravel 从学徒到工匠
PHP 设计模式系列
名企面试指南
资源库
Laravel 资源大全
Laravel 开源项目
Laravel 扩展包
Laravel 资源下载
更多
博客 & 新闻
问答 & 讨论
Leetcode 题解
学院君读书笔记系列
关于 Laravel 学院
Laravel 互助学习群
Golang 互助学习群
更多
Laravel 中文文档
Laravel 全栈教程
Laravel 学习路径
Go 入门教程
程序员内功修炼
博客
问答
搜索
注册
登录
Info
Content
章节导航
基于 Laravel + Vue 构建前后端分离应用
课程介绍&目录索引
Laravel 初始化
3篇文章
初始化 Laravel 单页面应用
安装配置 Laravel Socialite 并实现基于 Github 的用户认证
安装配置 Laravel Passport
JavaScript 初始化
5篇文章
配置 JavaScript 和 SASS
引入 Vue 2、Vue Router 和 Vuex
通过 Vue Router 配置前端路由
实现 Laravel 后端 API 接口
通过 Axios 库构建 API 请求
Vuex & Vue Router 使用入门：表单提交
6篇文章
构建 Vuex 模块
在 Vue 组件中使用 Vuex 模块
通过 Laravel Mix 将 SASS 编译到 Vue 组件
为 Vue Router 添加页面布局
通过 Vue 组件、Vue Router、Vuex 和 Laravel 实现表单提交
通过 JavaScript 和 Laravel 验证表单请求
在地图上标记咖啡店
3篇文章
通过高德地图 Web 服务 API 对咖啡店地址进行地理编码
通过 Vue + 高德地图 JS API 在地图上标记咖啡店
在高德地图上自定义咖啡店点标记图标并显示信息窗体
添加喜欢、标签功能
5篇文章
实现 Laravel 模型类之间的多对多关联及冲泡方法前端查询 API
通过 Vue.js 实现动态表单一次提交多个咖啡店位置信息
通过 Laravel + Vue 实现喜欢/取消喜欢咖啡店功能
咖啡店标签后端 API 接口功能实现
咖啡店标签前端输入及显示功能实现
实现数据筛选功能
3篇文章
通过 Vue Mixins 在前端首页对咖啡店进行过滤筛选
使用 Vue Mixins 在高德地图上对咖啡店点标记进行筛选过滤
优化高德地图多个点标记信息窗体显示 & 引入 Google Analytics 进行单页面应用访问统计
前端用户认证
3篇文章
根据是否需要登录重新组织后端路由
通过 Vue 组件实现单页面应用无跳转登录
通过 Vuex + Vue Router 导航守卫在前端实现认证路由保护
编辑用户信息
2篇文章
实现用户个人信息编辑功能
通过 Laravel + Vue 实现文件上传功能
应用代码重构
5篇文章
功能模块重构 & CSS 整体优化：首页篇
功能模块重构 & CSS 整体优化：新增咖啡店篇
功能模块重构 & CSS 整体优化：实现编辑/删除咖啡店功能
功能模块重构 & CSS 整体优化：咖啡店详情页篇
通过 Vue Transitions 实现 Vue 组件的 CSS 动画效果 & 若干 Bug 修复
构建后台管理系统
6篇文章
实现简单的、针对咖啡店增删改查的 RBAC 权限管理功能
管理后台后端动作审核接口实现
通过 Vue Router 提供的路由元信息功能实现前端路由权限判断
管理后台前端动作审核列表页面功能实现
在管理后台添加公司、咖啡店、城市、用户、冲泡方法管理功能
通过 Laravel Mix + Vue Router 路由懒加载实现单页面应用 JS 文件按组件分割
图书
基于 Laravel + Vue 构建前后端分离应用
课程介绍&目录索引
基于 Laravel + Vue 构建前后端分离应用
由 学院君 创建于3年前, 最后更新于 2年前
版本号 #13
766744 views
334 likes
19 collects
本系列教程将基于 Laravel 5.6 + Vue 2 开发一个 API 驱动的前后端分离应用，命名为 Roast，意为通过地图查找附近的咖啡烘焙店和专卖店，本系列课程将分为 10 大章节，40 余篇教程，通过这个系列教程的学习，你将学会 Laravel 基本开发流程，基于 Vue.js 进行前端开发，以及如何从零开始构建一个完整的、API 驱动的、包含后台管理系统的、前后端分离的单页面应用。
最终效果图
下面是 Roast 应用的部分截图。
首页：
详情页：新增咖啡店：管理后台：以下是 Roast 应用构建系列教程：
第一部分：Laravel 初始化初始化基于 Laravel 驱动的单页面应用安装配置 Laravel Socialite 并实现基于 Github 的登录认证安装配置 Laravel Passport第二部分：JavaScript 初始化配置 JavaScript 和 SASS引入 Vue 2、Vue Router、Vuex通过 Vue Router 配置前端路由为前端路由编写后端 API 接口使用 Axios 库构建 API 请求第三部分：Vuex、Vue Router 及 JS API 请求使用构建一个 Vuex 模块在 Vue 组件中使用 Vuex 模块通过 Laravel Mix 将 Sass 编译到 Vue 组件为 Vue Router 构建页面布局通过 JavaScript、Vuex 和 Laravel 实现表单提交通过 JavaScript 和 Laravel 进行表单请求验证第四部分：在地图上标记咖啡店功能实现通过高德地图进行地理编码通过 Vue.js 在高德地图上标记咖啡店在高德地图上自定义点标记图标并显示信息窗体第五部分：Laravel 关联关系、添加喜欢及标签等功能Laravel 模型类对多对关联及冲泡方法前端查询 API通过 VueJS 实现动态表单一次提交多个咖啡店位置信息通过 Laravel + Vue 实现喜欢/取消喜欢咖啡店功能通过 Laravel 实现后端标签 API 接口通过 Vue 实现前端标签输入组件 & 在咖啡店详情页显示标签第六部分：使用 Vue Mixins 实现数据过滤通过 VueJS Mixins 在首页对咖啡店数据进行过滤筛选复用 VueJS Mixins 在高德地图上对咖啡店点标记进行过滤增补篇：优化高德地图多点标记信息窗体显示 & 引入 Google Analytics 实现页面访问统计第七部分：通过 Vue 实现用户登录及前端路由保护根据是否需要登录重新组织后端路由通过 Vue 组件实现单页面应用无跳转登录通过 Vuex + Vue Router 导航守卫在前端实现认证路由保护第八部分：编辑用户信息及图片上传实现用户个人信息编辑功能通过 Laravel + Vue 实现图片上传第九部分：Roast 应用重构篇（2.0版本）功能模块重构 & CSS 整体优化：首页篇功能模块重构 & CSS 整体优化：新增咖啡店篇功能模块重构 & CSS 整体优化：编辑/删除咖啡店篇功能模块重构 & CSS 整体优化：咖啡店详情页篇增补篇：通过 Vue Transitions 实现 Vue 组件的 CSS 动画效果 & 若干 Bug 修复第十部分：构建后台管理系统基于 RBAC 的咖啡店增删改查权限管理功能管理后台后端动作审核接口 API 基于 Vue Router 路由元信息实现前端路由权限判断管理后台前端动作审核列表页面功能实现管理后台新增公司管理、用户管理、城市管理、冲泡方法管理等功能增补篇基于 Laravel Mix + Vue Router 路由懒加载实现单页面应用 JS 文件按组件分割
注：本项目基于 API Driven Development With Laravel and VueJS 这个项目进行汉化，源码位于 Github 上：nonfu/roastapp
订阅服务
如果你觉得这个系列教程对你学习有帮助，可以选择升级为学院君订阅用户对学院君进行支持：
立即升级为学院君订阅用户
点赞
取消点赞
收藏
取消收藏
赞赏
分享到以下平台：
<< 上一篇:
没有上一篇了
>> 下一篇:
初始化 Laravel 单页面应用
11 条评论
#11
学院君
评论于 1年前
回复 #10
正在删除评论...
有 一般升级到最新即可
‹
›
登录后即可添加评论
升级为学院君订阅用户(新年优惠🎁)
内容导航
最终效果图
第一部分：Laravel 初始化
第二部分：JavaScript 初始化
第三部分：Vuex、Vue Router 及 JS API 请求使用
第四部分：在地图上标记咖啡店功能实现
第五部分：Laravel 关联关系、添加喜欢及标签等功能
第六部分：使用 Vue Mixins 实现数据过滤
第七部分：通过 Vue 实现用户登录及前端路由保护
第八部分：编辑用户信息及图片上传
第九部分：Roast 应用重构篇（2.0版本）
第十部分：构建后台管理系统
增补篇
订阅服务
相关推荐
实现 Laravel 后端 API 接口
基于 Laravel + Vue 构建前后端分离应用
JavaScript 初始化
咖啡店标签后端 API 接口功能实现
基于 Laravel + Vue 构建前后端分离应用
添加喜欢、标签功能
咖啡店标签前端输入及显示功能实现
基于 Laravel + Vue 构建前后端分离应用
添加喜欢、标签功能
根据是否需要登录重新组织后端路由
基于 Laravel + Vue 构建前后端分离应用
前端用户认证
功能模块重构 & CSS 整体优化：咖啡店详情页篇
基于 Laravel + Vue 构建前后端分离应用
应用代码重构
回到顶部
2022 基于 Laravel 6 构建
关于学院
订阅服务
友情链接
站点地图
本站 CDN 加速服务由又拍云赞助