一、项目介绍

在程序员的日常工作中，SQL 几乎是一项必备技能。无论是后端开发、数据分析还是产品运营，都离不开数据库查询和数据处理。然而，市面上的 SQL 学习资源要么过于理论化，要么需要复杂的环境搭建，学习门槛相对较高。

而且传统的 SQL 教程往往缺乏互动性，学习者很难在实践中检验自己的学习效果。就像学游泳一样，光看教程是不够的，必须要下水练习才能真正掌握。

正是基于这样的思考，鱼皮开发了这个闯关式 SQL 自学网。项目的核心理念很简单：让 SQL 学习像玩游戏一样有趣，让每个人都能在浏览器中轻松练习 SQL。

在线体验：http://sqlmother.yupi.icu

视频演示：https://www.bilibili.com/video/BV1pV4y1i7LW

开源地址：https://github.com/liyupi/sql-mother

这个项目最大的亮点在于 闯关式 的学习体验，鱼皮把 SQL 知识点设计成了一个个关卡，每通过一关就能解锁新的关卡，提升大家学习的趣味性。

整个项目采用纯前端实现，无需任何后端服务和数据库环境。

项目包含了 30 多个精心设计的关卡，从最基础的 SELECT 查询开始，逐步深入到复杂的多表联查、聚合函数、子查询等高级特性。每个关卡都有详细的教程说明、代码示例和提示，确保学习者能够循序渐进地掌握 SQL 技能。

二、项目优势

项目收获

项目以前端为主，对于前端开发者来说，除了能学习到常用的前端开发技术之外，这个项目还能帮你学到很多有价值的技术方案。包括 WebAssembly 的实际应用、纯前端架构的设计思路、模块化的代码架构等等。

鱼皮系列项目优势

鱼皮原创项目系列以实战为主，用 全程直播 的方式，从 0 到 1 带大家学习技术知识，并立即实践运用到项目中，做到学以致用。

此外，还提供如下服务：

详细的文字教程或直播笔记
完整的项目源码
1 对 1 答疑解惑
专属项目交流群
⭐️ 现成的简历写法（直接写满简历）
⭐️ 项目的扩展思路（拉开和其他人的差距）
⭐️ 项目相关面试题、题解和真实面经（提前准备，面试不懵逼）
⭐️ 前端 + Java 后端万用项目模板（快速创建项目）

比起看网上的教程学习，鱼皮项目系列的优势：从学知识 => 实践项目 => 复习笔记 => 项目答疑 => 简历写法 => 面试题解的一条龙服务

从需求分析、技术选型、项目设计、项目初始化、Demo 编写、前后端开发实现、项目优化、部署上线等，每个环节我都 从理论到实践 给大家讲的明明白白、每个细节都不放过！

对比维度	跟学鱼皮项目	自学网上免费项目	⭐️ 鱼皮项目优势
项目选题	✅ 选题新颖，刻意避开网上热门项目	传统项目场景（博客、商城、管理系统）	增加区分度，提高简历通过率
学习人数	✅ 少，不容易撞车	百万以上，烂大街	增加区分度，提高简历通过率
教学方式	✅ 全程直播，带你敲每一行代码、带你踩坑和解决 Bug，不漏过每一个细节	录制课程，视频虽然看起来简短、一帆风顺，但你遇到错误无从下手	降低学习门槛，减少学习时长
直播笔记	✅ 详细的官方笔记 + 精选学员优质笔记	有笔记，但未经筛选	学到更多知识细节
视频内容	✅ 项目教程 + 经验分享	项目教程	学到更多编程经验
项目源码	✅ 完整源码仓库 + 每章的提交记录 + 定期更新	只有代码包、不更新	节省时间，避免踩坑
项目答疑	✅ 各项目交流群 + 答疑解惑 + 常见问题整理	无免费的答疑服务，遇到问题自行解决	节省时间
简历写法	✅ 现成的简历写法	无	节省时间、提高简历通过率
项目扩展	✅ 给出扩展思路 + 学员作品共享	无	开拓思路、拉开和其他人的差距
项目面试	✅ 项目相关面试题、题解和真实面经	无	提前准备，面试不懵逼

编程导航已有 **近 20 套项目教程！**每个项目的学习重点不同，几乎全都是前端 + 后端的 全栈项目 。

详细请见：https://codefather.cn/course（在该页面右侧有教程推荐和学习建议）

往期项目介绍视频：https://bilibili.com/video/BV1YvmbYbEgS

三、核心功能

让我们来看看这个SQL自学网都提供了哪些功能。

首先是 在线编程环境。项目内置了一个功能完整的 SQL 编辑器，支持语法高亮、代码格式化、智能提示等特性。更重要的是，编辑器集成了sql.js库，可以在浏览器中直接执行SQL语句，无需连接任何外部数据库。

接下来是 判题系统。与其他平台简单的文本匹配不同，这里采用了更加准确的判题机制。系统会同时执行用户提交的 SQL 和标准答案，然后对比两个结果集的结构和数据是否一致。这意味着只要查询结果正确，即使 SQL 写法与标准答案不同，也能通过测试。

当你遇到困难时，可以查看执行结果、获取提示信息、查看建表语句，甚至直接查看答案，给学习者提供可选的自由提示。

项目提供很多关卡可供选择。主线关卡按照 SQL 学习的自然顺序排列，从基础查询开始，逐步深入到条件筛选、排序分组、多表联查等高级特性。每个关卡都有明确的学习目标和难度标识。

除了主线关卡，项目还支持自定义关卡功能。这为社区贡献者提供了扩展内容的可能，也让不同水平的学习者都能找到适合自己的挑战。同时，所有关卡都支持自由选择，学习者可以根据自己的需要跳跃式学习。

除了结构化的关卡学习，项目还提供了一个 SQL 练习广场。在这里，学习者可以自由编写 SQL 语句，验证自己的想法，或者进行一些实验性的练习。

四、技术架构

纯前端架构

这个项目最大的技术创新在于采用了纯前端架构。传统的 SQL 学习平台通常需要后端服务来处理 SQL 执行，但鱼皮这里通过 WebAssembly 技术，在浏览器中直接运行了一个完整的 SQLite 数据库引擎。

具体的实现依赖于 sql.js这个开源库。sql.js 是 SQLite 数据库的 JavaScript/WebAssembly 版本，它将 SQLite 的 C 代码编译成 WebAssembly，使得我们可以在浏览器中获得完整的 SQL 执行能力。

▼
javascript
复制代码
// SQL执行的核心代码
export const initDB = async (initSql?: string) => {
  if (!SQL) {
    SQL = await initSqlJs({
      locateFile: () => "./sql-wasm.wasm",
    });
  }
  const db = new SQL.Database();
  if (initSql) {
    db.run(initSql);
  }
  return db;
};

这种架构有几个好处。首先是部署简单，整个项目可以部署到任何静态文件服务器上，甚至可以直接用 GitHub Pages 托管。其次是用户体验好，没有网络延迟，SQL 执行速度很快。最后是成本很低，不需要维护后端服务器和数据库。

技术选型

主要前端技术：

Vue 3：现代化的前端框架，提供优秀的响应式系统和组合式API
Vue Router 4：Vue官方路由管理器，支持现代化的路由功能
Ant Design Vue 3.x：基于Ant Design的Vue组件库
TypeScript 4.6.x：类型安全的JavaScript超集
Vite 3.x：现代化的前端构建工具

核心依赖库：

monaco-editor：VS Code同款代码编辑器，提供专业级编程体验
sql.js：SQLite数据库的JavaScript/WebAssembly版本
sql-formatter：SQL代码格式化工具
bytemd：Markdown编辑和渲染组件
pinia：Vue 3推荐的状态管理库
lodash：JavaScript工具函数库

开发工具：

ESLint：代码质量检查工具
Prettier：代码格式化工具

五、学习大纲

基于对项目的深入分析，我为大家设计了一套完整的学习路线，帮助大家从零开始掌握这个项目的开发。

第 1 期：项目总览（本期）

项目介绍
项目优势
核心功能
技术架构
学习大纲

第 2 期：环境搭建和项目分析

开发环境准备和项目启动
项目依赖分析
项目目录结构解析

第 3 期：SQL 执行和判题

WebAssembly 介绍
sql.js 库的集成使用
关卡数据初始化
SQL 执行和结果处理
判题机制

第 4 期：代码编辑器

Monaco Editor 介绍
编辑器集成和初始化
SQL 语法高亮
代码格式化
编辑器扩展和功能定制

第 5 期：关卡系统

关卡系统的整体架构设计
关卡数据结构和类型定义
关卡加载和切换机制
进度管理和持久化
自定义关卡扩展机制

第 6 期：部署上线

相信通过这套教程的学习，你不仅能够掌握一个有趣的项目开发，更能够从中收获技术经验和产品思维。

让我们开始这段精彩的学习之旅吧！

编程导航教程