基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(九) —— 构建 Vuex 模块

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

基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(八) —— 通过 Axios 库构建 API 请求

在上一篇教程中,我们在 Laravel 后端定义好了 API 接口,在本篇教程中,我们将通过 JavaScript 构建 API 请求来访问那些后端 API。由于我们已经配置好了 Vue 和前端路由,构建这些请求应该非常顺利,并且我们还可以通过 Vuex 模块来保存数据。 第一步:配置 config.js 文件 和 .env 类似,config.js 对多环境前端开发来说非常重要,我将所...

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

在上一篇教程中,我们通过 Vue Router 为 Roast 应用添加了前端路由,现在我们需要为对应的页面提供数据以便渲染。需要注意的是,在 API 驱动的单页面应用中,所有数据都是通过 Ajax 异步加载的,因此,我们需要现在 Laravel 后端提供 API 接口,然后根据接口返回数据通过 Vue 进行渲染。 第一步:设计路由 在提供 API 接口之前,需要先明确提供哪些路由,在上...

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

单页面应用的实现有赖于 HTML 5 History API,不过现在让你从头学习 HTML 5 History API 肯定不现实,好在 Vue Router 帮我们处理了几乎所有底层操作,比如推入和弹出状态,而且我们通过 Vue 构建应用,使用起来会更加如鱼得水,并且可以和 Vue 中的其他组件无缝对接。 在这篇教程中,我们会设置首页路由、咖啡店列表路由、咖啡店详情页路由、以及新增咖...

Laravel 5.7 新特性系列之新的 URL 生成语法

感谢 Sebastian De Deyne,Laravel 5.7 支持了一种新的控制器动作 URL 生成语法,你之前有可能已经听过这种 URL 生成特性 —— 「元组符号」或者「可调用数组语法」: $url = action([PostsController::class, 'index']); 在当前版本(Laravel 5.6)URL 辅助函数只支持这种风格的控制器动作 URL ...

基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(五) —— 引入 Vue 2、Vue Router 和 Vuex

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

基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(四) —— 配置 JavaScript 和 SASS

到目前为止,我们都是在 Laravel 后端进行初始化和扩展包的安装配置,从这一篇教程开始,我们把视线转移到前端。对于前端开发,Laravel 自带了强大的 Laravel Mix,有了这个工具,我们不需要再担心复杂的 Webpack、Sass 配置以及前端文件的编译,虽然我们还是使用 NPM,但是 Laravel Mix 会帮我们打理所有的构建和编译工作,开发者甚至可以在 Larave...

基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(三) —— 安装配置 Laravel Passport

早在 Laravel 5.3 中就已经引入了 Laravel Passport(详情查看相关文档),如果你还没有用过它,实在让人难以置信,通过 Laravel Passport,你可以在几分钟内搭建起一个功能完备的 OAuth 服务器,用户可以像 Github、微信、QQ、Google 那样基于你提供的 OAuth 服务登录到不同的 Web 服务。不过,我们的目标是不同设备通过同一个入口...

基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(二) —— 安装配置 Laravel Socialite 并实现基于 Github 的用户认证

在上一篇教程中,我们完成了 Roast 应用的初始化工作,这一篇教程将在其基础上安装 Laravel Socialite 扩展包并实现基于 Github 进行登录认证,Laravel Socialite 还支持世界上其他主流的社交媒体,你可以在这里找到所有第三方 OAuth 提供者:Socialite Providers,你可以按照自己的需求对第三方 OAuth 服务进行更改,我们这里只...

基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(一) —— 初始化 Laravel 单页面应用

今天开始,学院君要开启一个系列教程,和之前的博客系列一样,通过一个完整的手把手教程带大家学习如何通过 Laravel + VueJS 开发 API 驱动的应用程序,整个教程的篇幅大概在 40 篇左右,主要讲述 Web 端及移动端的单页面应用(Single Page Application)开发,后端基于 Laravel 5.6,前端基于 Vue 2,演示教程的开发环境使用的是 MacOS...