sql mother
1.0.0
Implementación pura de front-end de la red de auto-estudio SQL
Por el programador de piel de pescado, una persona está en servicio completo
Experiencia en línea: http://sqlmother.yupi.icu
Demostración de video: https://www.bilibili.com/video/bv1pv4y1i7lw
Un sitio web de tutorial de autoestudio SQL completamente gratuito, combinado con el propio aprendizaje SQL y experiencia práctica de Yusie, ha escrito más de 30 niveles. Los usuarios pueden enviar el código SQL en línea para hacer preguntas y aprobar los niveles. El objetivo es ayudar a todos a dominar la sintaxis SQL comúnmente utilizada de 0 a 1.
Además, el sitio web admite la selección gratuita de niveles, niveles personalizados, SQL en línea de práctica en línea y otras funciones.
En primer lugar, el conocimiento de SQL es extremadamente importante y es casi una habilidad necesaria para programadores, gerentes de productos y compañeros de clase de análisis de datos.
Para el aprendizaje SQL, es más adecuado comenzar a través de la práctica práctica que la lectura de tutoriales. Aunque hay redes de autoestudio SQL similares en línea, se cobran o no sean lo suficientemente sistemáticos.
Entonces, Yuxi decidió hacerlo tú mismo y configurar una red de aprendizaje SQL de código abierto. Por un lado, espero que pueda ayudar a todos a comenzar con SQL más fácilmente; Por otro lado, también espero que el código del proyecto también pueda brindarle algo de inspiración, para que más estudiantes tengan la oportunidad de participar y convertirse en contribuyentes y hacer un buen trabajo juntos.
1) Vaya directamente a la página de inicio, y el área tutorial y de preguntas a la izquierda es. Por favor léelo en su totalidad
2) Escriba el código SQL en el área superior derecha para hacer las preguntas, haga clic en Ejecutar para enviar los resultados
3) Puede ayudarse con el área de Asistente de preguntas en la parte inferior derecha
4) Después de que el resultado de la ejecución sea correcto, puede ingresar al siguiente nivel
También puede elegir niveles para desafiarlos libremente. No hay restricciones en todos los niveles, y no tiene que hacer las preguntas en orden:
Dado que el proyecto se implementa con un front-end puro, ¡es muy fácil iniciar el proyecto localmente!
Hay muchos visitantes en línea y puede estar tartamudeado, por lo que se recomienda que lo use localmente ~
1) Descargue el código de este proyecto
2) Ingrese el directorio root del proyecto y ejecute npm install para instalar las dependencias del proyecto
3) Ejecutar npm run dev Startup local
Este proyecto se implementa utilizando un front-end puro, y no requiere ningún conocimiento frontal del back-end ~
P: ¿Por qué utilizar la implementación frontal pura?
R: Reducir el riesgo de ataque + ahorrar dinero + nuevos intentos de aprendizaje
Adoptando la idea de desarrollo modular, la página basada en la pregunta (página de inicio) se divide en el área de navegación de preguntas, el área de codificación SQL y el área de resultados de la pregunta. Cada área es un archivo de componentes VUE independiente, que realiza el aislamiento lógico y la reutilización de componentes (por ejemplo, el área de codificación SQL también se puede reutilizar a la página SQL Practice Square).
Luego, estos componentes se pueden introducir en IndexPage.vue , y la información de nivel, la ejecución de resultados y otros datos se pueden pasar a los componentes y ensamblarse en una página completa.
Aunque no hay una base de datos de fondo, todos los datos relevantes aún deben administrarse de manera uniforme, por lo que levels se define para almacenar datos relacionados con el nivel de manera uniforme.
Primero, dividimos los niveles en dos categorías, los niveles principales (tutoriales) y los niveles personalizados (para una fácil expansión), y se gestionan en los archivos principales de mainLevels.ts y customLevels.ts , respectivamente.
Cada nivel es un directorio separado, que permite el aislamiento entre los niveles.
Dado que los artículos tutoriales para cada nivel pueden ser muy largos y escribirlos directamente en el archivo TS no es propicio para la lectura y la administración, la estrategia aquí es escribir todos los artículos en el archivo .md Markdown y leer el archivo .md en el archivo de definición de nivel index.ts
El código de muestra es el siguiente, y la información de cada nivel está definida y aislada de forma independiente entre sí:
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 ; ¿Cómo funciona un front-end puro la base de datos y ejecuta SQL? Los estudiantes con experiencia front-end pensarán instintivamente en la tecnología webassembly .
Así es, a través de la tecnología webassembly , podemos ejecutar idiomas distintos de JS (como C ++) en el navegador. Pero no hay necesidad de implementar la lógica de ejecución de SQL usted mismo. De pie sobre los hombros de los gigantes, directamente utilizando la biblioteca sql.js de código abierto, puede ejecutar sus propias operaciones SQL en la parte delantera.
El código central está en src/core/sqlExecutor.ts , que define dos funciones: inicializando DB y ejecutando SQL, que es muy 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 ) ;
} ;Cuando se carga el nivel, la instrucción SQL de inicialización correspondiente al nivel se ejecutará primero para completar la creación de la tabla e importar datos de muestra, y luego el usuario puede escribir los datos en la tabla de consulta SQL.
Todo el código relacionado con el juicio basado en la pregunta se define centralmente en el archivo src/core/result.ts , incluidas las funciones que definen varios estados de ejecución y determinan si el resultado es correcto.
¿Cómo determinar si la declaración SQL del usuario es correcta?
En lugar de comparar directamente si la declaración de entrada del usuario es consistente con nuestra respuesta preestablecida (eso es demasiado rígido), realizamos las siguientes 3 operaciones a su vez:
Aquí, el autor utilizó un método de truco para comparar los datos, convirtiendo directamente los dos conjuntos de resultados en formato JSON y comparando si las cadenas JSON son consistentes, en lugar de múltiples para bucles.
Agradecemos a todo tipo de héroes para participar en las contribuciones y beneficiar a los demás y a uno mismo ~
Actualmente hay varios métodos de contribución recomendados:
Antes de contribuir al nivel, asegúrese de comprender cómo este proyecto carga el nivel.
Para garantizar la consistencia del tutorial, se recomienda contribuir con自定义关卡en lugar de los niveles principales, que son más fáciles de fusionar.
Pasos para contribuir a un nivel personalizado:
1) Copiar src/levels/custom/自定义关卡模板y cambie el nombre del directorio a su propio nivel
2) Modifique la instrucción createTable.sql de creación de tabla en la plantilla e importe los datos predeterminados
3) Modifique el archivo index.ts en la plantilla, establezca el nombre chino e inglés del nivel, SQL predeterminado, respuesta SQL, indicaciones, etc.
4) Modifique el archivo README.md en la plantilla, cambie el contenido del título y el título, y proporcione la información de la estructura de la tabla e intente expresar la pregunta claramente (por ejemplo, debe obtenerse en cierto orden)
5) Introducir niveles personalizados en el archivo customLevels.ts .
¡Tenga en cuenta que este proyecto solo admite la sintaxis SQLite (básicamente SQL general)! ¡No uses funciones demasiado elegantes!
Por ejemplo, arreglar los errores en los niveles, optimizar la redacción de la redacción para facilitar la comprensión o agregar más información, ajustar la dificultad de los niveles, etc.
Este proyecto solo es desarrollado solo por la piel de los peces, con tiempo limitado y energía. Muchos lugares no se han mejorado. Todos son bienvenidos para expandir el proyecto y crear su propia serie de productos como el hijo de SQL, el nieto de SQL y el bisnieto de SQL. . .
Algunas ideas de extensión posibles:
Gracias por leer y bienvenido a unirse al círculo de aprendizaje de programación del autor para obtener más proyectos originales ~
