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

上一篇教程中,我们创建了相应的数据表结构来存储咖啡店与冲泡方法的多对多关联以及获取方法,现在我们需要在其基础上来调整新增咖啡店表单:由于一个咖啡店可能有多个分店,我们可能需要多个位置字段(具体数目未知),因此需要一个动态表单。通过 Vue.js 我们可以轻松实现这样的动态表单。 第一步:构思新的 NewCafe.vue 组件功能 很显然,我们需要对 NewCafe.vue 表单组件进行重...

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

在前面的教程中,我们已经陆续完成了咖啡店的添加和在高德地图上的标记,接下来我们会实现一些更加复杂的功能,在实现这些功能之前,需要先准备好数据结构,因为一个咖啡店可能会提供多种冲泡方法,单个冲泡方法本身也不隶属于任何咖啡店,所以在这篇教程中,我们将通过 Laravel Eloquent 模型类的多对多关联来构建咖啡店和对应冲泡方法之间的关联关系,有关多对多关联的实现,可以先阅读下官方文档。...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十七) —— 在高德地图上自定义咖啡店点标记图标并显示信息窗体

在上一篇教程中我们已经成功将咖啡店显示到高德地图中,除此之外,我们还可以基于高德地图提供的 JS API 实现更多的高级功能,比如自定义点标记图标,点击点标记图标展示信息窗体等,本篇教程我们将以这两个案例为例进行演示,希望可以抛砖引玉,帮助你快速学会如何使用高德地图 JS API 实现自己需要的高级功能。 自定义点标记 在开始之前,你可以快速浏览下高德地图自定义点标记的 JS API 文...

基于 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,可以在数分钟内为...