sql mother
1.0.0
Reine Front-End-Implementierung von SQL Self-Study-Netzwerk
Durch Programmierer Fischhaut ist eine Person in voller Dienste
Online -Erfahrung: http://sqlmother.yupi.icu
Videodemonstration: https://www.bilibili.com/video/bv1pv4y1i7lw
Eine völlig kostenlose SQL-Self-Study-Tutorial-Website, kombiniert mit Yusies eigenem SQL-Lernen und praktischer Erfahrung, hat mehr als 30 Levels geschrieben. Benutzer können SQL -Code online einreichen, um Fragen zu stellen und die Ebenen zu übergeben. Ziel ist es, jedem zu helfen, die häufig verwendete SQL -Syntax von 0 bis 1 zu beherrschen.
Darüber hinaus unterstützt die Website eine kostenlose Auswahl an Ebenen, benutzerdefinierte Ebenen, SQL Online Practice Square und andere Funktionen.
Erstens ist SQL -Wissen äußerst wichtig und für Programmierer, Produktmanager und Datenanalyse fast eine notwendige Fähigkeit.
Für SQL Learning ist es besser geeignet, durch praktische Praxis zu beginnen als das Lesen von Tutorials. Obwohl es online ähnliche SQL-Selbststudiennetzwerke gibt, werden sie entweder aufgeladen oder nicht systematisch genug.
Deshalb hat Yuxi beschlossen, es selbst zu tun und ein Open Source SQL Learning Network einzurichten. Einerseits hoffe ich, dass es jedem helfen kann, mit SQL leichter zu beginnen. Auf der anderen Seite hoffe ich auch, dass der Projektcode Ihnen auch Inspiration geben kann, damit mehr Schüler die Möglichkeit haben, teilzunehmen und Mitwirkende zu werden und gemeinsam einen guten Job zu machen!
1) Gehen Sie direkt zur Startseite, und der Tutorial und den Fragebereich links sind. Bitte lesen Sie es zuerst vollständig durch
2) Schreiben Sie den SQL -Code im oberen rechten Bereich, um die Fragen zu stellen. Klicken Sie auf Ausführen, um die Ergebnisse einzureichen
3) Sie können sich mit dem Frage -Assistentenbereich auf der unteren rechten Seite helfen
4) Nach dem korrekten Ausführungsergebnis können Sie die nächste Stufe eingeben
Sie können auch Levels wählen, um sie frei herauszufordern. Es gibt keine Einschränkungen auf allen Ebenen, und Sie müssen die Fragen nicht in Ordnung stellen:
Da das Projekt mit einem reinen Front-End implementiert ist, ist es sehr einfach, das Projekt lokal zu starten!
Es gibt viele Online -Besucher und können stottert werden. Es wird daher empfohlen, es lokal zu verwenden ~
1) Laden Sie den Code dieses Projekts herunter
2) Geben Sie das Projektroot -Verzeichnis ein und führen Sie npm install aus, um die Projektabhängigkeiten zu installieren
3) Führen Sie das lokale Start npm run dev
Dieses Projekt wird mit einem reinen Front-End implementiert und erfordert keine Front-End-Kenntnisse über das Back-End ~
F: Warum reine Front-End-Implementierung verwenden?
A: Reduzieren Sie das Angriffsrisiko + Sparen Sie Geld + neue Lernversuche
Die modulare Entwicklungsidee übernimmt die fragebasierte Seite (Homepage) in den Fragebürregebiet, den SQL-Codierungsbereich und den Fragenergebnisbereich. Jeder Bereich ist eine unabhängige Vue -Komponentendatei, die die logische Isolation und die Wiederverwendung von Komponenten realisiert (z. B. kann der SQL -Codierungsbereich auch auf die SQL Practice Square -Seite wiederverwendet werden).
Anschließend können diese Komponenten in IndexPage.vue eingeführt werden, und es können Informationen, Ausführen von Ergebnissen und anderen Daten an die Komponenten übergeben und in eine vollständige Seite zusammengestellt werden.
Obwohl es keine Back-End-Datenbank gibt, sollten alle relevanten Daten weiterhin einheitlich verwaltet werden, sodass levels Verzeichnis so definiert ist, dass die Ebenen der Ebenen gleichmäßig speichern.
Zunächst teilen wir die Ebenen in zwei Kategorien: Hauptstufen (Tutorials) und benutzerdefinierte Ebenen (zur einfachen Erweiterung) und werden in den Dateien mainLevels.ts bzw. customLevels.ts verwaltet.
Jede Stufe ist ein separates Verzeichnis, das die Isolation zwischen den Ebenen ermöglicht.
Da die Tutorial -Artikel für jede Stufe möglicherweise sehr lang sein und diese direkt in der TS -Datei das Lesen und Management fördern, besteht die Strategie hier darin, alle Artikel in die .md -Markdown -Datei zu schreiben und die .md -Datei in der Stufe Definitionsdatei index.ts zu lesen.
Der Beispielcode ist wie folgt, und die Informationen jeder Ebene werden unabhängig voneinander definiert und voneinander isoliert:
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 ; Wie betreibt ein reines Front-End die Datenbank und führt SQL aus? Schüler mit Front-End-Erfahrung werden instinktiv an die webassembly -Technologie denken.
Das ist richtig. Durch die webassembly -Technologie können wir im Browser andere Sprachen als JS (wie C ++) ausführen. Es besteht jedoch keine Notwendigkeit, die SQL -Ausführungslogik selbst zu implementieren. Wenn Sie auf den Schultern der Riesen stehen und direkt mit der Open Source sql.js -Bibliothek Ihre eigenen SQL -Operationen am vorderen Ende ausführen können.
Der Kerncode befindet sich in src/core/sqlExecutor.ts , das zwei Funktionen definiert: Initialisierung von DB und Ausführung von SQL, was sehr einfach ist:
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 ) ;
} ;Wenn die Ebene geladen wird, wird die initialisierende SQL -Anweisung, die der Ebene entspricht, zuerst ausgeführt, um die Erstellung der Tabelle zu vervollständigen und Beispieldaten zu importieren. Anschließend kann der Benutzer die Daten in der SQL -Abfrage -Tabelle schreiben.
Jeder Code, der sich auf das fragbasierte Urteil bezieht, ist zentral in der Datei src/core/result.ts Datei definiert, einschließlich Funktionen, die mehrere Ausführungszustände definieren und feststellen, ob das Ergebnis korrekt ist.
Wie kann ich bestimmen, ob die SQL -Anweisung des Benutzers korrekt ist?
Anstatt direkt zu vergleichen, ob die Eingabeanweisung des Benutzers mit unserer voreingestellten Antwort übereinstimmt (das ist zu starr), führen wir die folgenden 3 Operationen wiederum aus:
Hier verwendete der Autor eine Trickmethode, um die Daten zu vergleichen, die beiden Ergebnissätze direkt in das JSON -Format zu konvertieren und zu vergleichen, ob die JSON -Zeichenfolgen konsistent sind, anstatt für Schleifen mehrerer.
Wir begrüßen alle möglichen Helden, um an den Beiträgen teilzunehmen und anderen und sich selbst zugute kommen ~
Derzeit gibt es mehrere empfohlene Beitragsmethoden:
Stellen Sie sicher, dass Sie verstehen, wie dieses Projekt das Niveau lädt.
Um die Konsistenz des Tutorials zu gewährleisten, wird empfohlen,自定义关卡anstelle von Hauptniveaus beizutragen, die leichter zusammengeführt werden können.
Schritte, um zu einer benutzerdefinierten Ebene beizutragen:
1) Kopieren Sie src/levels/custom/自定义关卡模板und ändern Sie den Verzeichnisnamen in Ihren eigenen chinesischen Namen
2) Ändern Sie die Anweisung createTable.sql -Tabelle in der Vorlage und importieren Sie die Standarddaten
3) Ändern Sie die Datei index.ts in der Vorlage, setzen Sie den chinesischen und englischen Namen der Ebene, Standard -SQL, Antwort SQL, Eingabeaufforderungen usw. fest
4) Ändern Sie die Datei README.md in der Vorlage, ändern Sie den Titel- und Titelinhalt und geben Sie die Informationen zur Tabellestruktur an und versuchen Sie, die Frage klar auszudrücken (z. B. muss sie in einer bestimmten Reihenfolge ausgegeben werden).
5) Führen Sie benutzerdefinierte Levels in die Datei customLevels.ts ein.
Beachten Sie, dass dieses Projekt nur die SQLite -Syntax (grundsätzlich allgemein SQL) unterstützt! Verwenden Sie keine zu ausgefallenen Funktionen!
Beispielsweise beheben Sie Fehler in der Ebene, Optimierung des Textenschreises, um das Verständnis oder das Hinzufügen weiterer Informationen, das Anpassen der Schwierigkeit der Ebenen usw. zu erleichtern.
Dieses Projekt wird nur von Fischhaut nur mit begrenzter Zeit und Energie entwickelt. Viele Orte wurden nicht verbessert. Jeder ist herzlich eingeladen, das Projekt zu erweitern und eine eigene Produktreihe wie den Sohn von SQL, den Enkel von SQL und den Urenkel von SQL zu erstellen. . .
Einige mögliche Erweiterungsideen:
Vielen Dank für das Lesen und willkommen, sich dem Programmierkreis des Autors anzuschließen, um mehr Originalprojekte zu erfahren ~
