基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十四) —— 使用 Vue Mixins 在高德地图上对咖啡店点标记进行筛选过滤

在上一篇教程中我们在应用首页通过 Vue Mixins 实现了对咖啡店的筛选过滤,在这篇教程中,我们将复用上一篇教程中的过滤处理函数通过 Vue Mixins 实现在高德地图上对咖啡店点标记进行筛选过滤的功能,实现思路和上篇教程类似,只不过前者是对列表数据进行过滤,而本篇教程是在地图上对点标记进行过滤。 第一步:创建高德地图过滤组件 和上篇教程的 CafeFilter 组件类似,我们首先...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十三) —— 通过 Vue Mixins 在前端首页对咖啡店进行过滤筛选

随着咖啡店数量的增多,需要按照指定条件对咖啡店进行过滤筛选,才能找到心仪的咖啡店。由于我们现在在应用首页已经将所有咖啡店数据一次性返回了,所以现在我们在前端基于 Vue 对咖啡店进行过滤,当然,随着数据的进一步增大,筛选过滤功能必须集合后端 API 实现,但是对于目前数据量来说,前端处理就可以了。 我们将基于以下几个维度对数据进行过滤: 文本搜索 标签选择 是否是烘焙店 冲泡方法 我...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十二) —— 咖啡店标签前端输入及显示功能实现

在上一篇教程中,我们已经实现咖啡店标签的后端 API 接口用于实现标签的查询、新增和删除,在这篇教程中,我们来实现标签的前端输入、提交和显示。 第一步:新增标签输入组件 我们将通过创建一个 Vue 组件来实现标签的输入,使用组件的好处是方便标签输入组件的复用,在 resources/assets/js/components/global 目录下新增一个 forms 子目录,然后在 for...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十一) —— 咖啡店标签后端 API 接口功能实现

接下来的两篇教程中,我们会咖啡店实现打标签功能,这个标签与咖啡店、标签和用户相关联,我们将最终根据用户为每个咖啡店标记的标签数量为排序条件为每个咖啡店构建标签云,由于功能相对而言比较复杂,我们分两篇教程来实现,首先实现后端相关 API 接口,从后端角度来说,这也是一个多对多关联,只不过在中间表中需要引入用户 ID 以便区分不同用户打的标签。 实现标签系统后,我们就可以通过多种维度对咖啡店...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十) —— 通过 Laravel + Vue 实现喜欢/取消喜欢咖啡店功能

对很多应用而言,尤其是社交媒体类应用,都有喜欢或收藏功能,在这篇教程中,我们就来演示如何基于 Laravel 和 Vue 从前端到后端完整实现喜欢/取消喜欢咖啡店功能。 在上一篇教程中我们构建了咖啡店之间的父子关联关系,并且在更早的教程中构建了咖啡店与冲泡方法之间的多对多关联,而在这篇教程中,我们将构建基于用户和咖啡店的另一个多对多关联关系:一个咖啡店可以被多个用户喜欢,一个用户也可以喜...

基于 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,所以这里以高德地图为例进行演示,其他地图服务实现思路完全一样。 在上一篇教程中,我们对提交过来的咖啡店数据进行了验...