我们在上一篇教程中通过是否需要登录访问重新组织了后端路由，并且移除了之前依赖后端 + 视图实现的登录方式，在这一篇教程中，我们将通过 Vue 组件 + 后端 API 实现在单页面应用中的无跳转登录。 第一步：前端默认重定向到首页 我们首先在 resources/assets/js/routes.js 中通过 redirect 属性将前端路由 / 重定向到首页页面 home，这样，layo...
到目前为止，我们的 Roast 应用必须登录后才能使用，这在开发环境没啥问题，但是如果作为实际产品发布则很影响用户体验，所以我们有必要对应用不同功能的访问权限重新进行组织。 第一步：重新组织 API 路由 首先从路由着手，对应用而言，一般首页、列表页、详情页都应该是可以公开访问的，只有新增、编辑、喜欢、取消喜欢等与用户相关的功能需要登录后才能访问。我们姑且将不需要登录即可访问的路由称之为...
我们在前两篇教程中实现咖啡店列表和点标记的筛选过滤功能，这篇教程与前面教程没啥关系，可以算作是针对 Roast 应用的两个优化项。 优化多点标记高德地图信息窗体显示 我们在之前实现了在高德地图上点击点标记显示信息窗体的功能，不过那个窗体有点太简陋了，只显示了咖啡店的名称，我们可以通过编写 HTML 内容片段为信息窗体提供更加丰富的显示信息，打开 assets/js/components/...
在上一篇教程中我们在应用首页通过 Vue Mixins 实现了对咖啡店的筛选过滤，在这篇教程中，我们将复用上一篇教程中的过滤处理函数通过 Vue Mixins 实现在高德地图上对咖啡店点标记进行筛选过滤的功能，实现思路和上篇教程类似，只不过前者是对列表数据进行过滤，而本篇教程是在地图上对点标记进行过滤。 第一步：创建高德地图过滤组件 和上篇教程的 CafeFilter 组件类似，我们首先...
随着咖啡店数量的增多，需要按照指定条件对咖啡店进行过滤筛选，才能找到心仪的咖啡店。由于我们现在在应用首页已经将所有咖啡店数据一次性返回了，所以现在我们在前端基于 Vue 对咖啡店进行过滤，当然，随着数据的进一步增大，筛选过滤功能必须集合后端 API 实现，但是对于目前数据量来说，前端处理就可以了。 我们将基于以下几个维度对数据进行过滤： 文本搜索 标签选择 是否是烘焙店 冲泡方法 我...
在上一篇教程中，我们已经实现咖啡店标签的后端 API 接口用于实现标签的查询、新增和删除，在这篇教程中，我们来实现标签的前端输入、提交和显示。 第一步：新增标签输入组件 我们将通过创建一个 Vue 组件来实现标签的输入，使用组件的好处是方便标签输入组件的复用，在 resources/assets/js/components/global 目录下新增一个 forms 子目录，然后在 for...
接下来的两篇教程中，我们会咖啡店实现打标签功能，这个标签与咖啡店、标签和用户相关联，我们将最终根据用户为每个咖啡店标记的标签数量为排序条件为每个咖啡店构建标签云，由于功能相对而言比较复杂，我们分两篇教程来实现，首先实现后端相关 API 接口，从后端角度来说，这也是一个多对多关联，只不过在中间表中需要引入用户 ID 以便区分不同用户打的标签。 实现标签系统后，我们就可以通过多种维度对咖啡店...
对很多应用而言，尤其是社交媒体类应用，都有喜欢或收藏功能，在这篇教程中，我们就来演示如何基于 Laravel 和 Vue 从前端到后端完整实现喜欢/取消喜欢咖啡店功能。 在上一篇教程中我们构建了咖啡店之间的父子关联关系，并且在更早的教程中构建了咖啡店与冲泡方法之间的多对多关联，而在这篇教程中，我们将构建基于用户和咖啡店的另一个多对多关联关系：一个咖啡店可以被多个用户喜欢，一个用户也可以喜...
上一篇教程中，我们创建了相应的数据表结构来存储咖啡店与冲泡方法的多对多关联以及获取方法，现在我们需要在其基础上来调整新增咖啡店表单：由于一个咖啡店可能有多个分店，我们可能需要多个位置字段（具体数目未知），因此需要一个动态表单。通过 Vue.js 我们可以轻松实现这样的动态表单。 第一步：构思新的 NewCafe.vue 组件功能 很显然，我们需要对 NewCafe.vue 表单组件进行重...
在前面的教程中，我们已经陆续完成了咖啡店的添加和在高德地图上的标记，接下来我们会实现一些更加复杂的功能，在实现这些功能之前，需要先准备好数据结构，因为一个咖啡店可能会提供多种冲泡方法，单个冲泡方法本身也不隶属于任何咖啡店，所以在这篇教程中，我们将通过 Laravel Eloquent 模型类的多对多关联来构建咖啡店和对应冲泡方法之间的关联关系，有关多对多关联的实现，可以先阅读下官方文档。...
