sql mother
1.0.0
Implementação pura de front-end da rede de auto-estudo SQL
Pela de peixe programador, uma pessoa está em serviço completo
Experiência on -line: http://sqlmother.yupi.icu
Demonstração em vídeo: https://www.bilibili.com/video/bv1pv4y1i7lw
Um site de tutorial de auto-estudo do SQL completamente gratuito, combinado com a própria aprendizagem e experiência prática do Yusie SQL, escreveu mais de 30 níveis. Os usuários podem enviar o código SQL on -line para fazer perguntas e passar os níveis. O objetivo é ajudar todos a dominar a sintaxe SQL comumente usada de 0 a 1.
Além disso, o site suporta seleção gratuita de níveis, níveis personalizados, SQL Online Practice Square e outras funções.
Antes de tudo, o conhecimento do SQL é extremamente importante e é quase uma habilidade necessária para programadores, gerentes de produto e colegas de análise de análise de dados.
Para a aprendizagem do SQL, é mais adequado começar a prática prática do que a leitura dos tutoriais. Embora existam redes de auto-estudo SQL semelhantes on-line, elas são carregadas ou não são sistemáticas o suficiente.
Então, Yuxi decidiu fazer isso sozinho e configurar uma rede de aprendizado SQL de código aberto. Por um lado, espero que isso ajude todos a começar com o SQL com mais facilidade; Por outro lado, também espero que o código do projeto também possa lhe dar alguma inspiração, para que mais alunos tenham a oportunidade de participar e se tornar colaboradores e fazer um bom trabalho juntos!
1) Vá diretamente para a página inicial e a área de tutorial e perguntas à esquerda está. Por favor, leia na íntegra primeiro
2) Escreva o código SQL na área superior direita para fazer as perguntas, clique em Executar para enviar os resultados
3) Você pode se ajudar com a área de assistente de perguntas no canto inferior direito
4) Depois que o resultado da execução estiver correto, você pode inserir o próximo nível
Você também pode escolher níveis para desafiá -los livremente. Não há restrições em todos os níveis, e você não precisa fazer as perguntas em ordem:
Como o projeto é implementado com um front-end puro, é muito fácil iniciar o projeto localmente!
Existem muitos visitantes on -line e podem ser gaguejados, por isso é recomendável que você o use localmente ~
1) Faça o download do código deste projeto
2) Digite o diretório raiz do projeto e execute npm install para instalar as dependências do projeto
3) Execute npm run dev Local Startup
Este projeto é implementado usando um front-end puro e não requer nenhum conhecimento front-end do back-end ~
P: Por que usar a implementação pura do front-end?
R: Reduza o risco de ataque + economize dinheiro + novas tentativas de aprendizado
Adotando a idéia de desenvolvimento modular, a página baseada em perguntas (página inicial) é dividida na área de navegação de perguntas, na área de codificação SQL e na área de resultado da pergunta. Cada área é um arquivo de componente VUE independente, que realiza isolamento lógico e reutilização de componentes (por exemplo, a área de codificação SQL também pode ser reutilizada na página da SQL Practice Square).
Em seguida, esses componentes podem ser introduzidos no IndexPage.vue , e informações de nível, resultados em execução e outros dados podem ser passados para os componentes e montados em uma página completa.
Embora não exista um banco de dados de back-end, todos os dados relevantes ainda devem ser gerenciados de maneira uniforme; portanto, levels é definido para armazenar dados relacionados ao nível uniformemente.
Primeiro, dividimos os níveis em duas categorias, níveis de linha principal (tutoriais) e níveis personalizados (para facilitar customLevels.ts expansão) e somos gerenciados nos arquivos mainLevels.ts .
Cada nível é um diretório separado, permitindo o isolamento entre os níveis.
Como os artigos do tutorial para cada nível podem ser muito longos e escrevê -los diretamente no arquivo TS não é propício à leitura e gerenciamento, a estratégia aqui é escrever todos os artigos no arquivo .md Markdown e ler o arquivo .md no index.ts de arquivo de definição de nível.ts.
O código de amostra é o seguinte e as informações de cada nível são definidas e isoladas independentemente:
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 ; Como um front-end puro opera o banco de dados e executa o SQL? Os alunos com experiência de front-end pensarão instintivamente na tecnologia webassembly .
É isso mesmo, através da tecnologia webassembly , podemos executar idiomas que não sejam JS (como C ++) no navegador. Mas não há necessidade de implementar a lógica de execução do SQL por si mesmo. De pé nos ombros dos gigantes, usando diretamente a biblioteca sql.js de código aberto, você pode executar suas próprias operações SQL no front -end.
O código principal está no src/core/sqlExecutor.ts , que define duas funções: inicializando o DB e executando o SQL, que é muito simples:
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 ) ;
} ;Quando o nível for carregado, a instrução SQL de inicialização correspondente ao nível será executada primeiro para concluir a criação da tabela e importar dados de amostra e, em seguida, o usuário pode gravar os dados na tabela de consulta SQL.
Todo o código relacionado ao julgamento baseado em perguntas é definido centralmente no arquivo src/core/result.ts , incluindo funções que definem vários estados de execução e determinam se o resultado está correto.
Como determinar se a instrução SQL do usuário está correta?
Em vez de comparar diretamente se a declaração de entrada do usuário é consistente com a resposta predefinida (que é muito rígida), realizamos as três operações a seguir, por sua vez:
Aqui, o autor usou um método de truque para comparar os dados, convertendo diretamente os dois resultados em formato JSON e comparando se as cordas JSON são consistentes, em vez de múltiplas loops.
Congratulamo -nos com todos os tipos de heróis para participar das contribuições e beneficiar os outros e a si mesmo ~
Atualmente, existem vários métodos de contribuição recomendados:
Antes de contribuir para o nível, certifique -se de entender como esse projeto carrega o nível.
Para garantir a consistência do tutorial, é recomendável contribuir com自定义关卡em vez de níveis principais, que são mais fáceis de ser mesclados.
Etapas para contribuir para um nível personalizado:
1) Copie src/levels/custom/自定义关卡模板e altere o nome do diretório para o seu próprio nome em chinês
2) Modifique a declaração de criação da tabela createTable.sql no modelo e importe os dados padrão
3) Modifique o arquivo index.ts no modelo, defina o nome chinês e inglês do nível, SQL padrão, Responder SQL, Prompts, etc.
4) Modifique o arquivo README.md no modelo, altere o título e o conteúdo do título e forneça as informações da estrutura da tabela e tente expressar claramente a pergunta (por exemplo, ela deve ser emitida em uma determinada ordem)
5) Introduzir níveis personalizados no arquivo customLevels.ts .
Observe que este projeto suporta apenas a sintaxe do SQLite (basicamente o SQL geral)! Não use funções muito sofisticadas!
Por exemplo, corrigindo erros nos níveis, otimizando a redação para facilitar a compreensão ou a adição de mais informações, ajustando a dificuldade dos níveis, etc.
Este projeto é desenvolvido apenas pela pele de peixe sozinha, com tempo e energia limitados. Muitos lugares não foram melhorados. Todos são convidados a expandir o projeto e criar sua própria série de produtos como o filho de SQL, o neto da SQL e o bisneto do SQL. . .
Algumas idéias possíveis de extensão:
Obrigado pela leitura e bem -vindo a ingressar no círculo de aprendizado de programação do autor para aprender mais projetos originais ~
