资源介绍
视频数量：7个
总时长：2小时22分
课程介绍：
用 Astro JS 复刻 Airbnb：从零搭建你的房源平台
想象一个场景：你想做个短租平台，像 Airbnb 那样——用户能浏览房源卡片，能按分类筛选，点进去看每个房间的详情，登录之后甚至可以自己发布房源。但问题来了，你从哪儿开始？是花几个月学一堆框架、啃半本数据库教程，还是直接动手做个能跑起来的项目？
这门课就是带你在两个多小时里，从一行命令开始，把这件事做成。课程用的核心工具叫 Astro，它跟 React、Vue 不太一样，属于内容驱动的建站框架。简单说，它默认把页面生成成静态 HTML，只在需要的地方跑少量 JavaScript，所以加载很快，特别适合做内容展示型的网站，比如房源列表这类。我们要做的就是它的简化版 Airbnb，先取名叫"Astra Rentals"，用空模板起步，一步步往上加东西。
第一个视频主要是热身。你会看到讲师的编辑器，跟着他输入 npm create astro@latest，选好模板，项目就跑起来了。这个过程不长，但几个关键决定值得注意：模板选空的好还是选带示例的好、要不要 TypeScript、要不要装额外的依赖——这些选择会直接影响后面的开发体验。讲师还会在浏览器里拆解 Airbnb 的页面结构：顶部一条导航栏，中间一排带图标的过滤栏，下面是房源卡片网格，最底部是页脚。看似简单，但搞清楚这块布局，后面写代码才有方向，不会写着写着迷失。
到了第二个视频，开始做分类筛选。Airbnb 首页上那排图标——"民宿""公寓""树屋""海景房"——点一下就能过滤房源。这部分课程教你做一个叫 CategoryPill 的组件，每个分类有自己的图标和链接。讲师用 Astro Icon 加 Iconify 的 MDI 图标库，通过接口定义 label、icon、link 三个属性，让组件可以复用。做完你会得到一排漂亮的圆形图标按钮，点上去就能切换筛选条件。这一步看似简单，其实是搭建整个交互体验的基础，后面所有筛选逻辑都要靠它串起来。
第三个视频进入核心：房源卡片。讲师不急着搞数据库，而是先用 Markdown 文件来存储房源数据。在 source 目录下建一个 rentals 内容文件夹，里面放好几个 .md 文件，每个文件就是一个房源。文件里写清楚标题、URL 路径、所在地、每晚价格、最多住客人数、卧室数、浴室数、房间类型、设施清单，还有指向图片的路径。你会发现 Markdown 在这里特别好用——它本来是写文章的，但拿来存结构化数据也很顺手，前提是你定义好字段。这部分的重点是理解 Astro 的内容集合机制，以及怎么用 .astro 组件把数据渲染成一张张带图带文字的卡片。
第四个视频是一个转折点：从静态 Markdown 转到数据库。为什么？因为 Markdown 适合写内容，但用户没法自己添加房源。要做一个真正的平台，必须有后台录入功能。课程会带你把之前的 Markdown 数据迁移到数据库里，这个过程不复杂，但能帮你理解数据建模的思路：哪些字段保留、怎么设计表结构、查询接口怎么写、用什么方式调取数据。做完这一步，你的平台就从"展示型网站"升级成了"可交互的应用"，性质完全不同。
第五个视频加入登录系统，用的是 Clerk。Clerk 是一个现成的身份认证服务，省得自己写注册、登录、密码加密、Session 管理那套麻烦逻辑。讲师会演示怎么在 Astro 项目里集成 Clerk，配置环境变量，包装受保护的路由——比如没登录的用户看不到发布按钮，但能浏览房源列表。登录这块往往是全栈项目里最枯燥最容易出错的部分，借用第三方服务能让你专注于业务逻辑。学完你会明白，第三方认证不是偷懒，而是现代开发的常态，把精力花在刀刃上。
第六个视频是表单和数据写入。用户登录之后能看到一个"添加房源"的入口，点进去填表——标题、价格、图片、描述——提交后写入数据库。然后这个新房源会出现在首页列表里，刷新就能看到。这个闭环一旦跑通，整个产品的形态就出来了：浏览、筛选、查看详情、登录、添加，五个核心功能齐全，剩下的就是打磨细节和优化体验。
第七个视频收尾，讲部署。Astro 项目怎么放到线上？讲师会演示构建命令、产物输出、环境变量配置、部署平台的选择。部署这步经常被新手忽略，以为代码写完就完事了，但实际上它是项目从"本地能跑"变成"别人能访问"的关键环节，中间有不少坑——比如图片路径怎么处理、API 地址怎么动态切换、构建报错怎么排查。
整个课程下来，你会得到一个能在线跑的 Airbnb 简化版，更重要的是，你会走完一个全栈项目的完整生命周期：搭框架、做组件、存数据、加认证、写交互、上线。每个环节都不深挖，但都讲到位，刚好够你建立信心往下自己探索。
如果你是前端开发者想往全栈方向走，或者刚学完 Astro 基础想做个真实项目练手，这门课的节奏和深度都挺合适。不需要你有什么数据库或后端经验，跟着敲代码就能跑通，每个步骤都看得见效果。