Flutter + PHP 全栈实战：打造属于你的个性化跑步 APP

​

项目环境

• macOS：15.3.1
• XAMPP：8.2.4
• Xcode：16.0
• Flutter：3.24.3

最近空闲时间比较多，作为一个平时爱跑步的 iOS 开发者，我一直对现有的跑步类 APP 不太满意 —— 广告太多，功能繁杂。既然如此不如自己动手开发一款专属的 跑步记录 APP，不仅贴合自己的使用习惯，还可以顺带加强后端开发能力。

从 Flutter 到全栈开发

我原本主要从事 iOS 原生开发，最近两年已经逐渐转向 Flutter，也积累了一些跨平台开发经验。这次项目选择继续使用 Flutter 来实现前端部分。

而后端方面，考虑到之前零散学过一些 PHP，也已经在本地安装配置好了 XAMPP（内置 Apache + MySQL + PHP），所以就用 PHP 来搭建后端，走一遍完整的全栈开发流程。

后端：从零开始搭建 API

搭建好 XAMPP 后，启动 Apache 和 MySQL，访问 http://localhost 就能看到本地服务页面。

接下来我遇到了第一个挑战：后端到底该怎么开始？

最初我对数据库设计和 API 编写流程还比较模糊，包括：

• 登录、注册接口怎样写以及怎样与数据库表交互？
• 在本地没有公网地址的情况下，APP 怎样访问我的接口？

幸好现在有 ChatGPT 等 AI 工具，用 AI 提问之后基本就理清了思路。

先从注册功能入手：

• 使用 MySQL 创建了 user 表；
• 编写 register.php 接口，实现接收用户名、密码并存入数据库；
• 使用 终端 本地调试成功；
• 最后在 APP 中通过 http.post() 请求接口，成功注册用户。

目前已经可以在本地数据库中看到新增的用户数据：

并且已经基本实现登录和注册页面的逻辑：

下一步计划

接下来的目标是：

• 完善首页的界面布局和数据交互逻辑；
• 接入 Apple 健康数据，同步跑步距离和时间；
• 持续打磨 APP UI，记录跑步历史、展示图表统计；
• 尝试部署到远程服务器，支持外部访问。

总结

这次项目是一次从 “用 Flutter 开发 APP” 迈向 “理解全栈逻辑” 的尝试。相比之前只负责前端或客户端，现在更深入地理解了后端数据存储与交互的全过程。虽然一开始踩了一些坑，但能通过实践把原来零散的知识点串起来，过程非常有收获。

如果你也和我一样，有一点开发基础、有个想做的 App，又恰好有空，不妨尝试一下 “全栈自研” 这个挑战。你会发现：从0到1，真的没那么难。

​