本课程面向中学生,以"我的地图"为项目主线, 从零搭建一个可交互的地图网站。通过 XAMPP 本地服务器环境, 结合 PHP 与 MySQL 数据库, 并调用 百度地图 API 实现地图标注与数据展示。
课程采用 vibe coding 方式——用自然语言向 AI 描述需求, AI 生成代码,学生在实践中理解 Web 开发的完整链路:
仿 Slidev 风格的全屏演示文稿,支持键盘方向键翻页, 适合课堂投屏教学与循序渐进学习。
所有内容在一个页面中连续滚动阅读, 适合课后复习、快速查找与自主节奏学习。
XAMPP、VS Code、Notepad++ 三平台安装包下载, 附带安装说明与平台选择指引。
回顾课程全貌,梳理技术栈与核心能力, 8 张幻灯片带你看懂 Vibe Coding 的本质。
展示所有同学上传的地图作品,游客可浏览公开作品, 登录后可查看自己的全部作品并管理公开/私有状态。
登录后记录课上课下的奇思妙想, 在讨论版与同学们碰撞思想火花。
| 软件 | 用途 | 说明 |
|---|---|---|
| XAMPP | 本地 Web 服务器 | 集成 Apache + MySQL + PHP,一键搭建开发环境 |
| MySQL | 数据库 | 存储地图标注数据,PHP 通过 SQL 语句读写 |
| VS Code | 代码编辑器 | 编辑 PHP / HTML / CSS 文件,语法高亮与智能提示 |
| 百度地图 API | 地图服务 | JavaScript SDK,实现地图展示、标注与交互 |
| AI 对话工具 | vibe coding 核心 | 用自然语言描述需求,AI 生成代码,学生理解并部署 |