基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(十二) —— 为 Vue Router 添加页面布局

Laravel 可以通过 Blade 模板为应用添加页面布局,不过由于我们构建的是单页面应用,可以通过 Vue Router 来实现:创建一个根级页面,其中包含在每个页面都会用到的 Vue 组件,如 Header 和 Footer。使用布局的另一个好处是你可以一次加载所有你需要的 Vuex 数据,它们会随着布局里的组件出现在所有子页面上。 第一步:重新组织嵌套路由 在设置前端路由那篇教程...

基于 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 + 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 应用系列教程(三) —— 安装配置 Laravel Passport

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

基于 Laravel Route 的 ThinkSNS+ Component

在前面,我介绍了拓展类型,分别有 plus-compnent 和 plus-plugin 两个,这里重点讲以下如何实现 plus-component 的。 plus-component 是什么 就如同名字一样,plus 代表的是 ThinlSNS+ 程序,用 - 分割 后面的 component 就是「包」或者我们理解成应用。在这里的「应用」指的是通过实现 API 或者 web 的功...

Laracasts 教程总结:Laravel 5 菜鸟入门(上)

1. 使用 Composer 快速创建项目 本节介绍如何使用 Composer 来创建 Laravel 项目。 Composer 是 PHP 的一个依赖管理工具。它以项目为单位进行管理,允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们。Mac 下的安装(其他平台安装): $ curl -sS https://getcomposer.org/installer | php...

基于 Laravel + Vue + GraphQL 实现前后端分离的博客应用(一) —— 用户注册登录

概述 今天开始,学院君将通过三篇教程的篇幅来系统介绍如何基于 Laravel + Vue 实现一个简单的、带用户认证的、前后端分离的博客应用,同时趁热打铁地将 GraphQL 融入进来实现 API 构建 —— Laravel 作为 GraphQL 服务端为前端 Vue 应用提供 API 接口。 前端应用初始化 后端 Laravel 应用我们以前面地 API 系列教程中使用的 api...

Laravel API 系列教程(二): 结合 Laravel 5.5 和 Vue SPA 基于 jwt-auth 实现 API 认证

 上一篇我们简单演示了 Laravel 5.5 中 RESTful API 的构建、认证和测试,本教程将在上一篇教程的基础上进行升华,我们将结合 Laravel 和 Vue 单页面应用(SPA),在此双剑合壁的基础上引入 jwt-auth 实现 API 认证,由于 Laravel 集成了对 Vue 的支持,所以在 Laravel 应用中使用 Vue 也是如鱼得水,非常顺畅,整篇教程涉...