基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十六) —— 通过 Vue + 高德地图 JS API 在地图上标记咖啡店

在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的各种 API 来实现我们想要实现的功能(地图服务都是基于地理编码来实现),在这篇教程中,我们将基于地理编码在地图上标记咖啡店,我们将通过在 Cafes 页面中包含地图组件来实现这个功能。 第一步:获取高德地图 JS API Key 由于是在前端实现地图标记功能,所以需要申请高德地图的 JS API Key,在上一...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十五) —— 通过高德地图 Web 服务 API 对咖啡店地址进行地理编码

打开后续各种 LBS 功能大门的钥匙是首先将咖啡店的物理地址转化为地图上的经纬度格式,这个过程叫做地理编码(Geocode)。我们可以通过多种方式来实现地理编码,高德地图、百度地图、Google地图这些地图服务都提供了开放的 API,由于学院君之前用过一次高德地图的 API,所以这里以高德地图为例进行演示,其他地图服务实现思路完全一样。 在上一篇教程中,我们对提交过来的咖啡店数据进行了验...

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

在上一篇教程中,我们结合 Vuex 和 Laravel 实现了表单提交功能,目前看来,工作的很好,但是有个遗憾,就是没有对表单提交数据做任何校验,所以我们将在这篇教程中来弥补这个缺憾,并且在前端和后端都加上校验。 第一步:在 NewCafe.vue 组件中添加前端校验 首先我们在前端给表单提交添加校验功能,打开 NewCafe.vue,在数据模型中新增一个 validations 对象为...

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

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

[ Laravel 5.7 文档 ] 测试系列 —— HTTP 测试

简介 Laravel 为生成 HTTP 请求、测试输出提供了流式 API。举个例子,我们 Laravel 提供的测试示例: <?php namespace Tests\Feature; use Tests\TestCase; use Illuminate\Foundation\Testing\RefreshDatabase; use Illuminate\Foundation\...

[ Laravel 5.7 文档 ] Eloquent ORM —— API 资源

简介 构建 API 时,在 Eloquent 模型和最终返回给应用用户的 JSON 响应之间可能需要一个转化层。Laravel 的资源类允许你以简单优雅的方式将模型和模型集合转化为 JSON 格式数据。 生成资源类 要生成一个资源类,可以使用 Artisan 命令 make:resource,默认情况下,资源类存放在应用的 app/Http/Resources 目录下,资源类都继承自 I...

[ Laravel 5.7 文档 ] 安全系列 —— API 认证(Passport)

简介 Laravel 通过传统的登录表单已经让用户认证变得很简单,但是 API 认证怎么实现?API 通常使用令牌(token)进行认证并且在请求之间不维护会话(Session)状态。Laravel 官方扩展包 Laravel Passport 让 API 认证变得轻而易举,Passport 基于 Alex Bilbie 维护的 League OAuth2 server,可以在数分钟内为...

[ Laravel 5.7 文档 ] 基础组件 —— 控制器

简介 我们之前的演示示例都是将所有的请求处理逻辑放在路由文件的闭包函数中,这显然是不合理的,我们需要使用控制器类组织管理相对复杂的业务逻辑处理。控制器用于将相关的 HTTP 请求封装到一个类中进行处理,这些控制器类存放在 app/Http/Controllers 目录下。 控制器入门 定义控制器 下面是一个基本控制器类的例子。首先我们使用 Artisan 命令快速创建一个控制器: php...

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

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

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

在为单页面应用配置 JavaScript 和 Sass 这篇教程中,我们已经为所有 Sass 资源构建了目录结构,我们可以将 Vue 组件的 Sass 资源放到这些目录中。 第一步:创建变量文件 由于我们使用 Foundation 组件来实现快速格栅功能,包含应用所有 Sass 变量的 _variables.scss 将成为最重要的文件,我们将这个文件放到 resources/asset...