sql mother
1.0.0
SQLの自己統治ネットワークの純粋なフロントエンド実装
プログラマーフィッシュスキンによって、1人がフルサービスを提供しています
オンラインエクスペリエンス：http：//sqlmother.yupi.icu
ビデオデモンストレーション：https：//www.bilibili.com/video/bv1pv4y1i7lw
Yusie自身のSQL学習と実践的な経験と組み合わせた完全に無料のSQL自己学習チュートリアルWebサイトは、30以上のレベルを書きました。ユーザーは、SQLコードをオンラインで送信して質問をし、レベルに合格できます。目標は、全員が一般的に使用されるSQL構文を0から1に習得できるようにすることです。
さらに、このWebサイトは、レベル、カスタムレベル、SQLオンラインプラクティススクエア、その他の機能の無料選択をサポートしています。
まず第一に、SQLの知識は非常に重要であり、プログラマー、製品マネージャー、およびデータ分析のクラスメートにとってほとんど必要なスキルです。
SQL学習の場合、チュートリアルを読むよりも実践的な実践を開始する方が適しています。オンラインで同様のSQLの自己統治ネットワークがありますが、それらは充電されるか、十分に体系的ではありません。
そこで、Yuxiは自分でそれを行い、オープンソースSQL学習ネットワークを設定することにしました。一方では、誰もがSQLをより簡単に始めるのに役立つことを願っています。一方、プロジェクトコードがインスピレーションを与えることもできることを願っています。そうすれば、より多くの学生が参加して貢献者になり、一緒に良い仕事をする機会があります。
1）ホームページに直接移動すると、左側のチュートリアルと質問領域があります。最初に完全に読んでください
2）右上の領域にSQLコードを記述して質問をするには、[実行]をクリックして結果を送信します
3）右下の質問アシスタントエリアで自分を助けることができます
4）実行結果が正しい後、次のレベルに入ることができます
また、レベルを選択して自由に挑戦することもできます。すべてのレベルに制限はありません。質問を順番に行う必要はありません。
プロジェクトは純粋なフロントエンドで実装されているため、プロジェクトをローカルで開始するのは非常に簡単です！
多くのオンライン訪問者がいて、utter音を立てている可能性があるため、ローカルで使用することをお勧めします〜
1）このプロジェクトのコードをダウンロードします
2）プロジェクトルートディレクトリを入力し、 npm installを実行してプロジェクトの依存関係をインストールします
3） npm run devローカルスタートアップを実行します
このプロジェクトは、純粋なフロントエンドを使用して実装されており、バックエンドのフロントエンドの知識を必要としません〜
Q：なぜ純粋なフロントエンドの実装を使用するのですか？
A：攻撃リスクを減らす +お金を節約 +新しい学習の試み
モジュラー開発のアイデアを採用すると、質問ベースのページ（ホームページ）は、質問ブラウジング領域、SQLコーディング領域、および質問結果領域に分けられます。各領域は独立したVUEコンポーネントファイルであり、論理的な分離とコンポーネントの再利用を実現します（たとえば、SQLコーディング領域をSQL Practice Squareページに再利用することもできます）。
これらのコンポーネントはIndexPage.vueで導入され、レベル情報が導入され、実行結果およびその他のデータをコンポーネントに渡して完全なページに組み立てることができます。
バックエンドデータベースはありませんが、関連するすべてのデータは均一に管理する必要があるため、 levelsディレクトリはレベル関連データを均一に保存するように定義されます。
まず、レベルをメインラインレベル（チュートリアル）とカスタムレベル（簡単な拡張のため）の2つのカテゴリに分割し、それぞれmainLevels.tsとcustomLevels.tsファイルで管理されます。
各レベルは別のディレクトリであり、レベル間の分離を有効にします。
各レベルのチュートリアル記事は非常に長く、TSファイルに直接書き込むことは読み取りと管理を助長しないため、ここでの戦略は、 .md Markdownファイルにすべての記事を記述し、レベル定義ファイルindex.tsの.mdファイルを読み取ることです。
サンプルコードは次のとおりであり、各レベルの情報は互いに独立して定義され、分離されています。
import md from "./README.md?raw" ;
import sql from "./createTable.sql?raw" ;
export default {
key : "level1" ,
title : "基础语法 - 查询 - 全表查询" ,
initSQL : sql ,
content : md ,
defaultSQL : "select * from student" ,
answer : "select * from student" ,
hint : "请仔细查看本关给出的示例" ,
type : "main" ,
} as LevelType ;純粋なフロントエンドはデータベースをどのように操作し、SQLを実行しますか？フロントエンドエクスペリエンスを持つ学生は、本能的にwebassemblyテクノロジーを考えます。
そうです、 webassemblyテクノロジーを通じて、ブラウザのJS（C ++など）以外の言語を実行できます。ただし、SQL実行ロジックを自分で実装する必要はありません。巨人の肩に立って、オープンソースsql.jsライブラリを直接使用して、フロントエンドで独自のSQL操作を実行できます。
コアコードはsrc/core/sqlExecutor.tsにあります。これは、DBの初期化とSQLの実行の2つの関数を定義します。これは非常に簡単です。
import initSqlJs , { Database , SqlJsStatic } from "sql.js" ;
/**
* SQL 执行器
*
* @author coder_yupi https://github.com/liyupi
*/
let SQL : SqlJsStatic ;
/**
* 获取初始化 DB
* @param initSql
*/
export const initDB = async ( initSql ?: string ) => {
if ( ! SQL ) {
SQL = await initSqlJs ( {
// Required to load the wasm binary asynchronously
locateFile : ( ) =>
"https://cdn.bootcdn.net/ajax/libs/sql.js/1.7.0/sql-wasm.wasm" ,
} ) ;
}
// Create a database
const db = new SQL . Database ( ) ;
if ( initSql ) {
// Execute a single SQL string that contains multiple statements
db . run ( initSql ) ; // Run the query without returning anything
}
return db ;
} ;
/**
* 执行 SQL
* @param db
* @param sql
*/
export const runSQL = ( db : Database , sql : string ) => {
return db . exec ( sql ) ;
} ;レベルがロードされると、レベルに対応する初期化SQLステートメントが最初に実行され、テーブルの作成とサンプルデータをインポートし、ユーザーがSQLクエリテーブルにデータを記述できます。
質問ベースの判断に関連するすべてのコードは、いくつかの実行状態を定義し、結果が正しいかどうかを判断する関数を含む、 src/core/result.tsファイルで中心的に定義されています。
ユーザーのSQLステートメントが正しいかどうかを判断する方法は？
ユーザーの入力ステートメントがプリセットの回答と一致しているかどうかを直接比較する代わりに（これは硬すぎます）、次の3つの操作を実行します。
ここで、著者はトリック方法を使用してデータを比較し、2つの結果セットをJSON形式に直接変換し、JSON文字列が複数のループではなく一貫しているかどうかを比較しました。
私たちはあらゆる種類のヒーローが貢献に参加し、他の人と自分自身に利益をもたらすことを歓迎します〜
現在、いくつかの推奨貢献方法があります。
レベルに貢献する前に、このプロジェクトがレベルをどのようにロードするかを確認してください。
チュートリアルの一貫性を確保するために、マージしやすいメインレベルの代わりに自定义关卡を寄付することをお勧めします。
カスタムレベルに貢献する手順：
1） src/levels/custom/自定义关卡模板をコピーし、ディレクトリ名を独自のレベルの中国名に変更します
2） createTable.sqlテーブル作成ステートメントをテンプレートで変更し、デフォルトのデータをインポートする
3） index.tsファイルをテンプレートで変更し、レベルの中国語と英語名、デフォルトSQL、回答SQL、プロンプトなどを設定します。
4） README.mdファイルをテンプレートで変更し、タイトルとタイトルのコンテンツを変更し、テーブル構造情報を提供し、質問を明確に表現してみてください（たとえば、特定の順序で出力する必要があります）
5） customLevels.tsファイルにカスタムレベルを導入します。
このプロジェクトは、SQLite構文（基本的に一般的なSQL）のみをサポートしていることに注意してください！あまりにも派手な機能を使用しないでください！
たとえば、レベルのエラーを修正し、コピーライティングを最適化して情報を理解しやすくするか、レベルの難易度を調整できるようにします。
このプロジェクトは、時間とエネルギーが限られている魚の肌だけでのみ開発されています。多くの場所は改善されていません。誰もがプロジェクトを拡大し、SQLの息子、SQLの孫、SQLのgreat孫など、独自の製品を作成することを歓迎します。 。 。
いくつかの可能な拡張アイデア：
読んでくれてありがとう、そして著者のプログラミングラーニングサークルに参加して、より多くのオリジナルプロジェクトを学ぶことを歓迎します〜
