sql mother
1.0.0
Implémentation frontale pure du réseau d'auto-étude SQL
Par la peau de poisson du programmeur, une personne est en service complet
Expérience en ligne: http://sqlmother.yupi.icu
Démonstration vidéo: https://www.bilibili.com/video/bv1pv4y1i7lw
Un site Web de tutoriel d'auto-étude SQL entièrement gratuit, combiné à l'apprentissage et à l'expérience pratique SQL de Yusie, a écrit plus de 30 niveaux. Les utilisateurs peuvent soumettre du code SQL en ligne pour faire des questions et passer les niveaux. L'objectif est d'aider tout le monde à maîtriser la syntaxe SQL couramment utilisée de 0 à 1.
De plus, le site Web prend en charge la sélection gratuite de niveaux, de niveaux de coutume, SQL Online Practice Square et d'autres fonctions.
Tout d'abord, les connaissances SQL sont extrêmement importantes et sont presque une compétence nécessaire pour les programmeurs, les chefs de produit et les camarades de classe d'analyse des données.
Pour l'apprentissage SQL, il est plus adapté à commencer à travers la pratique pratique que la lecture de tutoriels. Bien qu'il existe des réseaux d'auto-étude SQL similaires en ligne, ils sont facturés ou pas suffisamment systématiques.
Yuxi a donc décidé de le faire vous-même et de configurer un réseau d'apprentissage SQL open source. D'une part, j'espère que cela pourra aider tout le monde à démarrer avec SQL plus facilement; D'un autre côté, j'espère également que le code du projet pourra également vous inspirer, afin que plus d'étudiants aient la possibilité de participer et de devenir contributeurs et de faire un bon travail ensemble!
1) Allez directement sur la page d'accueil, et la zone de tutoriel et de questions à gauche est. Veuillez le lire en totalité d'abord
2) Écrivez du code SQL dans la zone supérieure droite pour poser les questions, cliquez sur Exécuter pour soumettre les résultats
3) Vous pouvez vous aider dans la zone des questions-questions en bas à droite
4) Une fois le résultat d'exécution correct, vous pouvez saisir le niveau suivant
Vous pouvez également choisir des niveaux pour les défier librement. Il n'y a aucune restriction à tous les niveaux, et vous n'avez pas à faire les questions dans l'ordre:
Étant donné que le projet est mis en œuvre avec un frontal pur, il est très facile de démarrer le projet localement!
Il y a beaucoup de visiteurs en ligne et peut être bégayé, il est donc recommandé de l'utiliser localement ~
1) Téléchargez le code de ce projet
2) Entrez le répertoire racine du projet et exécutez npm install pour installer les dépendances du projet
3) Exécuter npm run dev Local Startup
Ce projet est mis en œuvre à l'aide d'un pur front-end et ne nécessite aucune connaissance frontale de l'arrière-end ~
Q: Pourquoi utiliser la mise en œuvre frontale pure?
R: Réduire le risque d'attaque + économiser de l'argent + nouvelles tentatives d'apprentissage
L'adoption de l'idée de développement modulaire, la page basée sur les questions (page d'accueil) est divisée en zone de navigation de questions, dans la zone de codage SQL et la zone de résultat de la question. Chaque zone est un fichier de composant VUE indépendant, qui réalise l'isolement logique et la réutilisation des composants (par exemple, la zone de codage SQL peut également être réutilisée à la page SQL Practice Square).
Ensuite, ces composants peuvent être introduits dans IndexPage.vue , et les informations de niveau, l'exécution des résultats et d'autres données peuvent être transmises aux composants et assemblés en une page complète.
Bien qu'il n'y ait pas de base de données back-end, toutes les données pertinentes doivent toujours être gérées uniformément, de sorte que levels est défini pour stocker uniformément les données liées au niveau.
Tout d'abord, nous divisons les niveaux en deux catégories, les niveaux de ligne principale (tutoriels) et les niveaux personnalisés (pour une expansion facile), et sont gérés respectivement dans les fichiers mainLevels.ts et customLevels.ts .
Chaque niveau est un répertoire distinct, permettant l'isolement entre les niveaux.
Étant donné que les articles du didacticiel pour chaque niveau peuvent être très longs et les écrire directement dans le fichier TS ne sont pas propices à la lecture et à la gestion, la stratégie ici est d'écrire tous les articles dans le fichier .md Markdown et de lire le fichier .md dans le fichier de définition de niveau index.ts .
L'exemple de code est le suivant, et les informations de chaque niveau sont définies indépendamment et isolées les unes des autres:
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 ; Comment un pur frontal fonctionne-t-il la base de données et exécute-t-elle SQL? Les étudiants ayant une expérience frontale penseront instinctivement à la technologie webassembly .
C'est vrai, via la technologie webassembly , nous pouvons exécuter des langues autres que JS (comme C ++) dans le navigateur. Mais il n'est pas nécessaire d'implémenter vous-même la logique d'exécution SQL. Debout sur les épaules des géants, en utilisant directement la bibliothèque Open source sql.js , vous pouvez exécuter vos propres opérations SQL sur l'avant.
Le code de base est dans src/core/sqlExecutor.ts , qui définit deux fonctions: initialisation de la base de données et exécution de SQL, ce qui est très simple:
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 ) ;
} ;Lorsque le niveau est chargé, l'instruction SQL d'initialisation correspondant au niveau sera d'abord exécutée pour terminer la création de table et importer des données d'échantillons, puis l'utilisateur peut écrire les données dans la table de requête SQL.
Tout le code lié au jugement basé sur les questions est défini de manière centralisée dans le fichier src/core/result.ts , y compris les fonctions qui définissent plusieurs états d'exécution et déterminent si le résultat est correct.
Comment déterminer si l'instruction SQL de l'utilisateur est correcte?
Au lieu de comparer directement si l'instruction d'entrée de l'utilisateur est cohérente avec notre réponse prédéfinie (qui est trop rigide), nous effectuons les 3 opérations suivantes à tour de rôle:
Ici, l'auteur a utilisé une méthode Trick pour comparer les données, convertissant directement les deux ensembles de résultats en format JSON et comparant si les chaînes JSON sont cohérentes, plutôt que multiples pour les boucles.
Nous accueillons toutes sortes de héros pour participer aux contributions et profiter aux autres et à soi-même ~
Il existe actuellement plusieurs méthodes de contribution recommandées:
Avant de contribuer au niveau, assurez-vous de comprendre comment ce projet charge le niveau.
Pour garantir la cohérence du tutoriel, il est recommandé de contribuer自定义关卡au lieu des principaux niveaux, qui sont plus faciles à fusionner.
Étapes pour contribuer à un niveau personnalisé:
1) Copiez src/levels/custom/自定义关卡模板et modifiez le nom du répertoire en votre propre nom chinois
2) Modifiez l'instruction createTable.sql Table Creation dans le modèle et importez les données par défaut
3) Modifiez le fichier index.ts dans le modèle, définissez le nom chinois et anglais du niveau, SQL par défaut, répondez SQL, invites, etc.
4) Modifiez le fichier README.md dans le modèle, modifiez le contenu du titre et du titre et donnez les informations de la structure du tableau et essayez d'exprimer clairement la question (par exemple, elle doit être sortie dans un certain ordre)
5) Introduisez des niveaux personnalisés dans le fichier customLevels.ts .
Notez que ce projet ne prend en charge que la syntaxe SQLite (essentiellement Général SQL)! N'utilisez pas de fonctions trop sophistiquées!
Par exemple, la réparation des erreurs dans les niveaux, l'optimisation de la rédaction pour faciliter la compréhension ou l'ajout de plus d'informations, l'ajustement de la difficulté des niveaux, etc.
Ce projet n'est développé que par la peau de poisson seul, avec un temps et une énergie limités. De nombreux endroits n'ont pas été améliorés. Tout le monde est invité à étendre le projet et à créer sa propre série de produits tels que le fils de SQL, le petit-fils de SQL et l'arrière-petit-fils de SQL. . .
Quelques idées d'extension possibles:
Merci d'avoir lu, et bienvenue pour rejoindre le cercle d'apprentissage de la programmation de l'auteur pour apprendre plus de projets originaux ~
