基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(三十三) —— 功能模块重构 & CSS 整体优化:实现编辑/删除咖啡店功能

在这篇教程中,我们将实现咖啡店的编辑和删除功能,在实现过新增咖啡店功能后,咖啡店的编辑功能实现起来非常简单,无论是前台表单还是后台逻辑,思路都是一样的,无非是最后一个在数据库中新增,一个更新而已,此外,编辑咖啡店时需要先获取待编辑数据渲染到表单中。下面我们就来一步步实现编辑和删除功能。 第一步:更新模型类 由于我们要实现删除功能,并且实现的是软删除,之前已经在数据表迁移类中通过 $tab...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(三十二) —— 功能模块重构 & CSS 整体优化:新增咖啡店篇

这篇教程我们将来演示新增咖啡店功能的重构,按照上篇教程中的规划,我们会将之前存储咖啡店的 cafes 表一分为三,即 cafes 表、companies 表和 cities 表,所以对应的前端页面和后端处理逻辑都要修改,大的数据表迁移在上篇教程中已经完成,这里我们还有一个微调,在 cafes 表中新增 matcha、tea 和 added_by 三个字段,用以适配前端筛选需要。 第一步:...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(三十一) —— 功能模块重构 & CSS 整体优化:首页篇

通过前面三十篇教程的讲解,我们已经完成了 Roast 应用的所有前端功能,相信你也已经初步掌握了基于 Laravel + Vue 实现前后端分离单页面应用的开发,接下来的几篇教程我们将围绕对现有 Roast 应用进行优化展开,对底层数据结构和前端功能模块进行重构,从而让应用的整体架构更加清晰,同时对 CSS 进行优化,从而让应用看上去更加美观,以首页为例,优化后的效果是这样的: 跟之前...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(三十) —— 通过 Laravel + Vue 实现文件上传功能

我们在前面的教程中已经实现了多个表单的提交功能,如新增咖啡店、编辑用户个人信息等,但是还没有涉及到文件上传,那么在这篇教程中我们将基于 Laravel + Vue 在新增咖啡店页面实现咖啡店图片上传。 第一步:创建存储文件表 首先我们创建一张数据表 cafes_photos 来存储上传的咖啡店图片: php artisan make:migration create_cafes_phot...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十九) —— 实现用户个人信息编辑功能

第一步:定义要收集的数据 在这篇教程中,我们将为 Roast 应用添加个人信息编辑页用于完善用户个人信息,以便附近有新咖啡店,或者某个咖啡店新增了用户最喜欢的冲泡方法时通知用户,此外,收集个人信息还可以为用户及朋友推荐附近的咖啡店,从而逐渐形成一个咖啡社区。基于以上种种功能,我们需要收集以下用户信息: 最喜欢的咖啡类型 口味记录 是否公开用户信息 位置信息 第二步:完善用户信息表 接...

PHP 如何使用比特币 Coinbase 钱包库开发区块链应用

这是Coinbase Wallet API v2的官方客户端库。我们提供直观,稳定的界面,将Coinbase Wallet集成到的PHP项目中。 重要提示:由于此库是针对较新的API v2的,因此需要v2权限(即wallet:accounts:read)。如果你仍在使用v1,请使用此库的旧版本。 安装 使用Composer安装库。如果你不熟悉Composer或依赖管理器,请阅读Compo...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十八) —— 通过 Vuex + Vue Router 导航守卫在前端实现认证路由保护

我们已经在上一篇教程中实现了通过 Vue 组件实现用户登录,但是现在有个问题,就是用户在没有登录的情况下也可以访问需要认证的页面,比如新增咖啡店页面: 虽然在提交表单数据到后台 API 时不会成功,但是这会给用户造成困扰,所以,我们需要对这种需要认证页面的访问请求进行拦截,我们以前在开发非单页面应用时,会在访问这种页面时从后端进行判断,比如经过 auth 中间件进行过滤,如果需要认证则...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十七) —— 通过 Vue 组件实现单页面应用无跳转登录

我们在上一篇教程中通过是否需要登录访问重新组织了后端路由,并且移除了之前依赖后端 + 视图实现的登录方式,在这一篇教程中,我们将通过 Vue 组件 + 后端 API 实现在单页面应用中的无跳转登录。 第一步:前端默认重定向到首页 我们首先在 resources/assets/js/routes.js 中通过 redirect 属性将前端路由 / 重定向到首页页面 home,这样,layo...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十六) —— 根据是否需要登录重新组织后端路由

到目前为止,我们的 Roast 应用必须登录后才能使用,这在开发环境没啥问题,但是如果作为实际产品发布则很影响用户体验,所以我们有必要对应用不同功能的访问权限重新进行组织。 第一步:重新组织 API 路由 首先从路由着手,对应用而言,一般首页、列表页、详情页都应该是可以公开访问的,只有新增、编辑、喜欢、取消喜欢等与用户相关的功能需要登录后才能访问。我们姑且将不需要登录即可访问的路由称之为...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十五) —— 优化高德地图多个点标记信息窗体显示 & 引入 Google Analytics 进行单页面应用访问统计

我们在前两篇教程中实现咖啡店列表和点标记的筛选过滤功能,这篇教程与前面教程没啥关系,可以算作是针对 Roast 应用的两个优化项。 优化多点标记高德地图信息窗体显示 我们在之前实现了在高德地图上点击点标记显示信息窗体的功能,不过那个窗体有点太简陋了,只显示了咖啡店的名称,我们可以通过编写 HTML 内容片段为信息窗体提供更加丰富的显示信息,打开 assets/js/components/...