大家好，我是魚皮。

相信很多學(xué)編程的同學(xué)都學(xué)習(xí)過 SQL 吧？SQL 作為數(shù)據(jù)庫查詢語言，實(shí)在是太重要了，可以說是程序員、產(chǎn)品經(jīng)理、數(shù)據(jù)分析同學(xué)的必備技能。

為了幫助大家自學(xué) SQL，這段時(shí)間，我一個(gè)人做了個(gè)?免費(fèi)?的?闖關(guān)式?SQL 自學(xué)網(wǎng)，并且決定把代碼?完全開源?給大家學(xué)習(xí)！

如果你還不知道什么是 SQL，那么相信這個(gè)網(wǎng)站可以幫助你輕松入門；如果你已經(jīng)學(xué)過了 SQL，那么不妨來挑戰(zhàn)一下，看看自己的 SQL 水平是否過關(guān)。

項(xiàng)目演示視頻：https://www.bilibili.com/video/BV1pV4y1i7LW（推薦先看這個(gè)）

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

項(xiàng)目介紹

這個(gè) SQL 自學(xué)網(wǎng)的名稱為?SQL 之母?，寓意是像媽媽一樣貼心地帶你入門 SQL~

了解我的朋友應(yīng)該知道，我曾經(jīng)做了個(gè) SQL 代碼生成器叫?SQL 之父?，寓意是 “生 SQL” 的

我個(gè)人認(rèn)為，比起看教程學(xué) SQL，實(shí)戰(zhàn)闖關(guān)練習(xí)?的方式更容易帶大家入門，所以給系統(tǒng)設(shè)計(jì)了?一系列關(guān)卡（總共 30 多關(guān)，都是我自己做的）。

怎么使用網(wǎng)站來自學(xué)呢？步驟如下：

1）在主頁左側(cè)，是關(guān)卡的教程題目區(qū)域，包括了知識(shí)講解、示例和題目，請(qǐng)先完整閱讀

2）然后呢，在右上角的做題區(qū)域，編寫代碼并提交，嘗試返回題目中要求的數(shù)據(jù)

3）如果覺得題目太難了，可以使用右下角助手區(qū)域的查看提示、查看建表語句功能來幫助你答題，甚至你也可以直接查看答案

4）如果你寫的 SQL 語句和預(yù)期的結(jié)果一致，那么就可以進(jìn)入下一關(guān)啦

也可以直接看下面這張圖：

除了按照順序過關(guān)外，大家還可以進(jìn)入關(guān)卡頁面自由選擇關(guān)卡、自由學(xué)習(xí)，不用擔(dān)心卡在一道題目上過不去、也可以不做自己覺得簡(jiǎn)單的題目。

在關(guān)卡頁面，我還提供了幾個(gè)自定義關(guān)卡。畢竟時(shí)間和想象力有限，劇情可能比較水，大家別介意：

除了闖關(guān)外，我還提供了一個(gè) SQL 廣場(chǎng)功能，可以在小小的編輯器里隨意輸入 SQL 語句來練習(xí)~

項(xiàng)目開源

大家可能會(huì)好奇這個(gè)網(wǎng)站是怎么實(shí)現(xiàn)的？其實(shí)很簡(jiǎn)單，我把代碼完全開源了，大家可以自行閱讀，源碼之前沒有秘密！

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

很關(guān)鍵的一點(diǎn)是，這個(gè)項(xiàng)目?沒有后端?！甚至沒有用到數(shù)據(jù)庫！是純前端實(shí)現(xiàn)的項(xiàng)目！

有同學(xué)要問了：為什么不用后端呢？

魚皮：當(dāng)然是為了減少被攻擊的風(fēng)險(xiǎn)?。。?！

雖然項(xiàng)目是純前端實(shí)現(xiàn)，而且我自己是主后端開發(fā)的，都覺得這個(gè)項(xiàng)目不難。

首先框架用的是 Vue3，然后站在巨人的肩膀上，核心的 SQL 執(zhí)行部分使用了?sql.js?開源庫，通過 webassembly 實(shí)現(xiàn)了瀏覽器環(huán)境內(nèi) SQL 的執(zhí)行。

這個(gè)項(xiàng)目主要的麻煩之處在于關(guān)卡的設(shè)計(jì)，相當(dāng)于梳理并編寫了一套 SQL 的教程，很花時(shí)間。

更多的項(xiàng)目信息我都寫在開源文檔里了，希望項(xiàng)目代碼能給大家一些啟發(fā)。我還寫了一些項(xiàng)目貢獻(xiàn)指南和擴(kuò)展思路，希望能讓更多同學(xué)有機(jī)會(huì)參與進(jìn)來成為貢獻(xiàn)者，一起讓這個(gè)項(xiàng)目更好。

最后，希望這個(gè)網(wǎng)站能幫助大家順利入門 SQL，歡迎大家體驗(yàn)并且在評(píng)論區(qū)打出你通關(guān)的時(shí)間、或者是倒在第幾關(guān)了，便于我們?nèi)ジ牧季W(wǎng)站。

制作不易，也希望朋友們可以點(diǎn)贊支持下，謝謝大家~