{"repo":"liyupi/sql-mother","free":true,"listed":false,"github":"https://github.com/liyupi/sql-mother","clone":"git clone https://github.com/liyupi/sql-mother.git","description":"程序员鱼皮原创项目，免费的闯关交互式 SQL 自学教程网站，从零基础到进阶，带你掌握常用 SQL 语法（MySQL、SQLite、PostgreSQL）、快速学习 SQL 和数据库。支持在线SQL编辑器、实时查询结果、语法高亮、SQL运行广场等功能。纯前端实现，简单易学~","language":"TypeScript","stars":4319,"topics":["css","frontend","html","javascript","sql","typescript","vue3","web","database","mysql"],"license":null,"category":"databases-storage","readme_excerpt":"SQL 之母 - 闯关式 SQL 自学网 纯前端实现的闯关式 SQL 自学网 By 程序员鱼皮 ，一人全役 在线体验：http://sqlmother.yupi.icu 视频演示：https://www.bilibili.com/video/BV1pV4y1i7LW 项目介绍 一个完全免费的闯关式 SQL 自学教程网站，结合鱼皮自己的 SQL 学习实践经验，编写了 30 多个关卡，用户可以在线提交 SQL 代码做题闯关，目标是从 0 到 1 地带大家掌握常用的 SQL 语法。 此外，网站支持自由选择关卡、自定义关卡、SQL 在线练习广场等功能。 为什么做这样一个网站？ 首先，SQL 知识极为重要，几乎是程序员、产品经理、数据分析同学的必备技能。 对于 SQL 的学习，比起看教程，更适合通过实战来入门。网上虽然也有类似的 SQL 自学网，但是要么收费、要么不够体系化。 所以鱼皮决定自己动手，搞一个开源的 SQL 学习网，一方面希望能够帮助大家更轻松地入门 SQL；另一方面，也希望项目代码也能给大家一些启发，让更多同学有机会参与进来成为贡献者，一起做好一个项目！ 20 秒学会使用 1）直接进入主页，左侧是教程和题目区域，请先完整阅读 2）在右上区域编写 SQL 代码做题，点击运行提交结果 3）可以通过右下的题目助手区域帮助自己做题 4）执行结果正确后，可以进入下一关 你也可以自由选择关卡来挑战，所有关卡都没有任何限制，不一定非要按顺序做题： 1 分钟本地启动 由于项目采用纯前端实现，本地启动项目非常简单！ 在线访问人数较多，可能会卡顿，所以更推荐大家自己在本地使用 1）下载本项目代码 2）进入项目根目录，执行 npm install 安装项目依赖 3）执行 npm run dev 本地启动即可 功能和特性 - 展示教程题目文档（Markdown 格式） - 在线做题 - 比对结果 - 题目助手 - 展示执行结果 - 查看提示 - 查看建表语句 - 查看答案 - 关卡设置 - 自由选择关卡 - 主线关卡 - 支持上一关 / 下一关 - 自定义关卡 - SQL 广场（自由输入 SQL） 技术选型 本项目采用纯前端实现，不需要任何后端的前置知识 Q：为什么采用纯前端实现？ A：减少攻击风险 + 省钱 + 新的学习尝试 - 主框架：Vue 3 - 组件库：ant-design-vue - Markdown 展示组件：bytemd + github-markdown-css 主题 - 代码编辑器：monaco-editor - SQL 执行：sql.js - SQL 代码格式化：sql-formatter - 全局状态管理：pinia + pinia-plugin-persistedstate - 前端工程化：typescript + eslint + prettier - 工具库：lodash 核心设计 1、界面模块化 采用模块化的开发思想，把做题页面（主页）拆分为题目浏览区、SQL 编码区、题目结果区，每个区都是一个独立的 Vue 组件文件，实现了逻辑的隔离和组件的复用（比如 SQL 编码区同样可以复用到 SQL 练习广场页面）。 - 题目浏览区（QuestionBoard）：展示题目 Markdown 文档 - SQL 编码区（SqlEditor）：封装了代码编辑器、运行 / 格式化 / 重置按钮 - 题目结果区（SqlResult）：封装了题目执行结果的展示 然后在 IndexPage.vue 中就可以引入这些组件，并且传递关卡信息、运行结果等数据给组","default_branch":null,"files":null,"tree":[],"storefront":"/r/liyupi","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/liyupi/sql-mother/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}