别怕,我用最大白话,一步步带你理解
这个网站是怎么「从无到有」做出来的
先搞懂全局,再看细节
你去一家餐厅吃饭。你看到的菜单、装修、桌椅——这是「前端」,是给你看、给你用的。
但后面还有一个你看不到的「厨房」——厨师在里面炒菜、配料、计算成本——这是「后端」。
搜索框、航班列表、价格显示、按钮……所有你眼睛看到的、手能点的东西
搜索航班、计算价格、给航班打分、连接各个平台……所有你看不到的计算
一共就5个文件,各有分工
app.py
Python 后端
这是「大脑」。负责:存储机场数据、搜索航班、计算评分、分析优缺点。所有聪明的事情都在这里发生。
打个比方:它就是餐厅后厨的厨师长 + 采购经理 + 成本会计,全干了。
static/index.html
前端页面
这是「脸面」。你看到的搜索框、航班卡片、价格对比、评分圆环……全部在这一个文件里。它包含了 HTML(骨架)+ CSS(化妆)+ JavaScript(动作)。
打个比方:它就是餐厅的门面装修 + 菜单设计 + 服务员的应对话术。
requirements.txt
依赖清单
列出了程序运行需要的「工具包」。就像做菜前要准备食材清单一样,这里列出了 fastapi、uvicorn 等工具。
打个比方:它是菜谱上的「食材准备」列表。
.env.example
配置模板
如果你想连接真正的航班数据库(Amadeus),就把密钥填在这里。不填也没关系,程序会用演示数据。
打个比方:它是 VIP 会员卡申请表,有了就能享受高级服务,没有也能正常用。
README.md
说明书
给人看的使用说明,告诉别人怎么安装和运行。
app.py(后端大脑)和 static/index.html(前端界面)。其他都是辅助的。
网页的「骨架」,就像房子的框架
盖房子先要搭框架——哪里是客厅、哪里是卧室、门在哪、窗在哪。
HTML 就是网页的框架。它告诉浏览器:这里放标题、那里放按钮、这里放一张图。
HTML 用「标签」来描述内容。标签长这样:
<h1> 就有结束 </h1>,内容夹在中间。就像括号 () 一样要配对。
在我们的机票比价网站中,搜索框部分的 HTML 简化版长这样:
下面有一小段 HTML 代码。你改改文字,点「运行」,看看右边会变什么:
点击「运行看看」查看效果 →
给骨架穿漂亮衣服、化妆
如果 HTML 是一个人的骨架和身体,那 CSS 就是衣服、化妆、发型。
同一个人(同一份 HTML),穿不同的衣服(用不同的 CSS),看起来就完全不一样。
CSS 的写法是:选中一个东西,然后给它设置样式。
同一个按钮,点下面的按钮给它「换衣服」:
点击上面的按钮切换样式
rounded-xl = 大圆角,bg-blue-500 = 蓝色背景。这样写起来特别快。
让网页「活」起来的魔法
HTML 做了一个木偶(骨架),CSS 给木偶穿了衣服。但木偶不会动啊!
JavaScript 就是操纵木偶的「线」——让按钮被点了能响应、让搜索结果能刷新出来、让下拉框能弹出选项。
在机票比价工具里,JavaScript 做了这些事情:
核心代码长这样(我加了中文注释帮你看懂):
点击按钮,JavaScript 会动态计算并改变页面内容:
结果会出现在这里...
每次点击,JavaScript 都在读取数字 → 计算 → 更新页面
搜索引擎 + 评分算法 + 数据服务
Python 后端就是厨房。它做了三大件事:
① 食材仓库(存储所有机场和航司数据)
② 做菜过程(根据你的要求搜索匹配的航班)
③ 调味评分(给每个航班打综合分)
60多个全球机场的信息(代码、城市、国家、经纬度),45家航空公司的评级。比如:
根据两个城市的距离自动计算飞行时间,根据航线自动选择合理的航空公司,根据航司类型(全服务/廉价)给出合理的票价范围。
比如上海→东京约1800km,飞行时间约2-3小时,全日空/日航会稍贵,春秋航空会便宜但没免费行李。
同一个航班在携程、飞猪、去哪儿等不同平台的价格会有微小差异(因为平台补贴、手续费不同)。后端模拟了这个现实情况,让你一眼看出哪个平台最便宜。
综合5个维度打分(下一章详细讲),然后自动贴上「最佳性价比」「最低价格」「最短用时」等标签,并生成优缺点列表。
一次搜索的完整旅程
让我们跟踪一次「搜索上海→东京航班」的完整过程:
GET /api/airports?q=上海POST /api/search → {origin:"PVG", dest:"NRT", dep_date:"2026-04-01", cabin:"economy", passengers:1}五大维度打分,这是核心的核心
就像高考有语数英物化生,每科满分不同、权重不同。
机票评分也有 5 个"科目",每个科目 0-100 分,最后按重要程度加权平均出总分。
越便宜分越高。最便宜的那个得 100 分,最贵的接近 0 分。
飞行时间越短分越高。最快的得 100 分。
直飞 100 分,经停 1 次 65 分,2 次以上 35 分。凌晨出发再扣分。可退票加分。
根据航空公司口碑打分。新加坡航空 96 分,全日空 92 分,春秋 62 分。
看有没有 WiFi、娱乐系统、充电口、餐食。有一项加一点分。
拖动滑块,看看不同分数组合的最终得分是多少:
现在你已经理解了:网站的前后端结构、HTML/CSS/JavaScript 各自的作用、Python 后端怎么处理数据、以及评分算法是怎么算的。