Building an App Using Vibe Coding

本篇将深入 University Ranking Backend 的代码结构。我们探索应用入口和驱动大学搜索过滤系统的核心逻辑。 🏗️ 整体架构 后端遵循标准的 模型-视图-控制器 (MVC) 模式（其中"视图"是 JSON 响应）。 app.py：初始化应用、注册路由的入口点 routes/：处理 HTTP 请求、解析参数、委托给模型 models/：包含业务逻辑和数据库交互 db/：管理 SQLite 数据库连接 1. 入口点：app.py 这个文件是应用的心脏。它设置 Flask 服务器、配置安全，连接所有组件。 函数：全局作用域 / if __name__ == "__main__": 输入：无（脚本启动时执行） 逻辑： 初始化：创建 Flask 应用实例 CORS 配置：应用 CORS(app) 允许跨域请求。这很关键，因为前端单独托管，需要权限与此 API 通信 蓝图注册：注册三个主蓝图。蓝图如同"插件"为应用添加特定路由： universities_bp（在 /universities） dropdown_bp（在 /dropdown） ranking_detail_bp（在 /subject_rankings） 启动：在端口 10000 启动开发服务器 输出：运行中的 HTTP 服务器 from flask import Flask from routes.universities import universities_bp from routes.dropdown import dropdown_bp from routes.ranking_detail import ranking_detail_bp from flask_cors import CORS app = Flask(__name__) CORS(app) # 注册蓝图 app.register_blueprint(universities_bp, url_prefix="/universities") app.register_blueprint(dropdown_bp, url_prefix="/dropdown") app.register_blueprint(ranking_detail_bp, url_prefix="/subject_rankings") if __name__ == "__main__": app.run(host='0.0.0.0', port=10000) 2. 核心逻辑：models/universities.py 这个文件包含搜索功能的"大脑"。处理复杂的搜索、过滤、排序逻辑。 ...

在 第一部分，我们探讨了核心搜索逻辑和 API 结构。本篇深入 数据层——如何规范化、存储和检索数据。我们还看看驱动后端功能的实用脚本。 1. 数据"胶水"：utils/normalize_name.py 从多个来源（QS、US News、Niche）聚合数据的最大挑战是它们命名大学的方式不一。“MIT” 在一个数据集中是"Massachusetts Institute of Technology"，在另一个可能是"Mass Inst of Tech"。 这个文件包含标准化名称的逻辑，以便我们能将数据链接在一起。 函数：normalize_name 输入：name（字符串），如"University of California, Berkeley (UCB)" 逻辑： 转小写：全部转小写避免大小写不匹配 清理：删除括号内文本（如缩写）和标点 别名检查：检查已知别名字典（ALIASES）。若输入"mit"，自动转换为"massachusetts institute of technology" 输出：清洁、标准化的字符串（如"university of california berkeley"） def normalize_name(name: str) -> str: # 转小写 name = name.lower() # 删除括号内文本，如"(MIT)" name = re.sub(r'\(.*?\)', '', name) # 删除标点 name = re.sub(r'[^\w\s]', '', name) # 规范化空格 name = re.sub(r'\s+', ' ', name) if name in ALIASES: # 若名称是别名，替换为全名 name = ALIASES[name] return name.strip() 2. 详细资料逻辑：models/university.py 虽然 models/universities.py（复数）处理列表和搜索，但这个文件处理 单一 大学资料的深度挖掘。 函数：get_university_by_id 这个函数很有趣，因为它必须从 许多 不同表收集数据构建完整资料。 输入：univ_id（整数） 逻辑： 基础信息：从 Universities 表获取主要信息（名称、位置、照片） 翻译：与 University_names_en_to_zh 联接获中文名称 动态排名检索： 查询 sqlite_master 查找数据库中所有以 _Rankings 结尾的表 遍历每张排名表检查该大学是否在其中 这使系统易于扩展——若添加新排名表（如"Mars_University_Rankings"），这函数自动使用它，无需代码改动 统计数据：从 UniversityStats 获取统计信息（学生数等） 输出：包含该大学已知所有信息的大字典 def get_university_by_id(univ_id): conn = get_db_connection() # 第一步：获取大学基础信息 cur = conn.execute(""" SELECT Universities.*, T.chinese_name FROM Universities LEFT JOIN University_names_en_to_zh AS T ON Universities.id = T.id WHERE Universities.id = ? """, (univ_id,)) row = cur.fetchone() if not row: return None university = dict(row) normalized_name = university['normalized_name'] # 第二步：从所有 *_Rankings 表获取排名 cur = conn.execute("SELECT name FROM sqlite_master WHERE type='table' AND name LIKE '%_Rankings'") ranking_tables = [r["name"] for r in cur.fetchall()] rankings = [] for table in ranking_tables: try: cur = conn.execute( f"""SELECT subject, source, rank_value FROM "{table}" WHERE normalized_name = ?""", (normalized_name,) ) rankings += [dict(r) for r in cur.fetchall()] except Exception as e: # 跳过格式错误或不匹配的表 continue # 第三步：从 UniversityStats 获取统计数据 cur = conn.execute( "SELECT type, count, year FROM UniversityStats WHERE normalized_name = ?", (normalized_name,) ) stats = [dict(r) for r in cur.fetchall()] conn.close() rankings = sorted(rankings, key= lambda x: -1 if "global" in x["subject"] or "World" in x["subject"] else x["rank_value"]) # 合并所有信息 university["rankings"] = rankings university["stats"] = stats return university 3. 学科排名：routes/ranking_detail.py 这个路由处理特定学科排名，如"计算机科学"或"医学"。 ...

在这篇文章中，我将分享构建 University Ranking Backend 的过程。这是一个 RESTful API，用于聚合和提供来自 QS 和 US News 等权威机构的大学排名数据。我们将探讨 Vibe Coding 策略、技术架构和驱动系统的核心算法。 📚 完整系列阅读 这个项目内容丰富，我将其分为深入系列文章： 第一部分：核心逻辑与 API 架构 探索 app.py 应用入口 解析 models/universities.py 中的"智能表选择"算法 讲解 API 路由的实现 第二部分：数据工程与脚本 介绍 ETL 流程（提取、转换、加载） 展示如何在不同数据集间标准化大学名称 阐述动态排名发现机制 🚀 项目介绍 University Ranking Backend 是一个集中式服务，为全球大学提供详细信息。 核心功能： 数据聚合：整合来自多个来源（QS、US News、Niche）的排名数据 多语言支持：内置英文和中文大学名称支持 智能过滤：支持按名称、国家、城市和排名标准进行搜索 目标是创建一个轻量级、易查询的接口，让前端应用能轻松使用，无需关心合并不同排名数据的复杂逻辑。 💡 Vibe Coding 策略 “Vibe Coding” 是一种 AI 辅助编码方法，开发者与 AI 工具协作加速开发，AI 充当协作伙伴处理重复任务、生成模板代码，并快速探索解决方案。本项目采用 数据驱动、逻辑其次 的策略，并得到 AI 的充分协助。 数据收集与质量检查： 首先在 data/ 目录收集原始数据（CSV、JSON 格式） 通过"质量检查"确保数据统一一致、排名准确、格式规范 脚本化处理流程： 编写独立脚本（scripts/ 目录）处理原始数据和填充 SQLite 数据库 这样做能将混乱的数据清洗与干净的应用逻辑分离 API 作为网关： 数据库就绪后，Flask API 作为简单网关构建 重点是让端点易用直观（/filter、/search），而非过度设计 查看 第一部分 和 第二部分 了解 “Vibe Coding”（AI 辅助开发）如何影响代码结构的具体例子，比如延迟导入和动态表发现。这些模式都通过 AI 协助优化，避免常见陷阱并提升可扩展性。 ...

这是我们 University Ranking Frontend 代码深度分析的第二部分。确保你已经阅读了 https://xiaruize.org/zh/post/university-ranking-frontend/ 和 https://xiaruize.org/zh/post/university-ranking-frontend-part-1/。 概述 在第二部分，我们将探索： ThemeContext - 实现带平台特定持久化的主题切换 LanguageContext - 管理国际化和语言偏好 RankingsProvider - 使用 React Query 进行后台数据同步 React Query Hooks - 构建可重用的数据获取模式 平台特定优化 - 不同方式处理 iOS、Android 和 Web ThemeContext：主题管理 ThemeContext 管理整个应用的视觉主题——浅色模式、深色模式或自动（跟随系统偏好）。以下是完整的实现： 主题对象 export const lightTheme = { background: Platform.OS == 'android' ? '#ffffff' : '#f8f9fa', surface: '#ffffff', surfaceSecondary: '#f1f3f5', primary: '#4a90e2', text: '#2c3e50', textSecondary: '#6c757d', border: '#e1e5e9', card: '#ffffff', input: '#ffffff', shadow: '#000', }; export const darkTheme = { background: Platform.OS == 'android' ? '#121212' : '#121212', surface: '#1e1e1e', surfaceSecondary: '#434343ff', primary: '#4a90e2', text: '#ffffff', textSecondary: '#b0b0b0', border: '#333333', card: '#2a2a2a', input: '#2a2a2a', shadow: '#000', }; 注意： background 在 Android 和 iOS 之间不同。这是 Vibe Coding 的实际应用——当 AI 生成平台特定代码时，它经常发现手动编码可能错过的这种细微差别。 ...

这是我们 University Ranking Frontend 代码深度分析的第一部分。如果你还没有阅读 https://xiaruize.org/zh/post/university-ranking-frontend/ 介绍，我建议从那里开始。 概述 在第一部分，我们将探索： 导航编排 - 如何在 App.js 中编排底部标签和堆栈导航器 SearchScreen 实现 - 用实时过滤构建主搜索界面 DetailPage 构造 - 显示包含动态内容的全面大学资料 API 集成 - 用 axios 获取数据并处理异步操作 架构课程：我们为什么使用这种导航模式 许多开发者会过度思考导航。University Ranking Frontend 使用一个简单但强大的模式： 底部标签 ├── 首页（搜索） │ └── 堆栈导航器 │ ├── SearchScreen │ ├── DetailPage │ └── UniversitySourceRankingsPage ├── 学科排名 │ └── 堆栈导航器 │ ├── SubjectRankingsPage │ ├── RankingDetailPage │ └── DetailPage ├── 收藏 │ └── 堆栈导航器 │ └── FavoritesScreen └── 我的（个人资料） └── 堆栈导航器 └── MeScreen 为什么这样有效： ...

介绍 University Ranking Frontend 是一个精细的 React Native 应用，展示了如何使用 Vibe Coding 构建生产级移动体验——一种开发哲学，其中 AI 协助指导架构决策、简化状态管理并加速功能实现。 与构建后端服务不同（需要谨慎的数据库设计和算法优化），前端开发通常关乎创建直观的用户体验和管理复杂的应用状态。在本系列中，我们将探索 Vibe Coding 如何将前端开发从劳动密集型过程转变为迭代的、AI 协助的协作，生成干净、可维护的代码。 什么是 Vibe Coding？ Vibe Coding 意味着与 AI 协作构建软件，利用机器学习模型来： 生成架构模式，符合问题空间的需求 建议状态管理解决方案，适配你的数据流 加速组件开发，通过智能代码生成 验证设计模式，在实现前识别潜在改进 快速迭代功能，通过 AI 生成的模板代码和脚手架 对于 University Ranking Frontend，Vibe Coding 帮助我们： 选择 React Native + Expo 作为开发框架，基于对跨平台支持的需求（iOS、Android、Web） 设计 Context API 系统，用于主题、语言和排名管理，无需过度工程化 构造 API 集成，使用 React Query 进行高效的数据获取和缓存 构建 UI 组件，无缝适配深色模式和语言切换 实现搜索过滤，提供响应迅速的原生体验 项目概述 University Ranking Frontend 是一个移动优先的应用，允许用户： 搜索大学，按名称、国家或城市实时筛选 查看详细排名，跨多个排名系统（QS、US News 等） 切换主题（浅色/深色模式），带持久化偏好 切换语言（英文/中文），完全本地化 UI 保存收藏，快速访问经常查看的大学 比较排名，跨不同指标和来源 技术栈 核心框架： ...