sql mother
1.0.0
Чистая фронтальная реализация сети самообучения SQL
Благодаря программисту Fish Skin, один человек на полном обслуживании
Опыт онлайн: http://sqlmother.yupi.icu
Видео демонстрация: https://www.bilibili.com/video/bv1pv4y1i7lw
Полностью бесплатный веб-сайт SQL Selfudy Luctire, в сочетании с собственным обучением SQL и практическим опытом Yusie, написал более 30 уровней. Пользователи могут отправлять SQL -код онлайн, чтобы выполнять вопросы и передавать уровни. Цель состоит в том, чтобы помочь всем освоить обычно используемый синтаксис SQL от 0 до 1.
Кроме того, веб -сайт поддерживает бесплатный выбор уровней, пользовательских уровней, SQL Online Practice Square и других функций.
Прежде всего, знание SQL чрезвычайно важно и является почти необходимым навыком для программистов, менеджеров по продуктам и одноклассников по анализу данных.
Для обучения SQL он больше подходит для работы с практической практикой, чем чтение учебных пособий. Хотя в Интернете есть аналогичные сети самообучения SQL, они либо заряжены, либо недостаточно систематичны.
Поэтому Yuxi решил сделать это самостоятельно и настроить сеть SQL SQL SQL с открытым исходным кодом. С одной стороны, я надеюсь, что это может помочь всем начать с SQL легче; С другой стороны, я также надеюсь, что код проекта также может дать вам некоторое вдохновение, чтобы больше студентов имели возможность участвовать, стать участниками и хорошо работать вместе!
1) Перейдите прямо на домашнюю страницу, а область обучения и вопроса слева. Пожалуйста, сначала прочитайте это в полном объеме
2) Напишите код SQL в верхней правой области, чтобы задать вопросы, нажмите «Запуск», чтобы отправить результаты
3) Вы можете помочь себе с вопросом помощника в нижней части справа
4) После того, как результат выполнения верен, вы можете ввести следующий уровень
Вы также можете выбрать уровни, чтобы оспаривать их свободно. На всех уровнях нет ограничений, и вам не нужно делать вопросы по порядку:
Поскольку проект реализован с чистым фронтальным, очень легко запустить проект локально!
Есть много онлайн -посетителей и может быть заикается, поэтому рекомендуется использовать его на местном уровне ~
1) Загрузите код этого проекта
2) Введите каталог Project Root и выполните npm install для установки зависимостей проекта
3) Выполнить npm run dev
Этот проект реализован с использованием чистого фронтального конца и не требует никаких фронтальных знаний о задней части ~
В: Зачем использовать чистую переднюю реализацию?
A: снизить риск атаки + сэкономить деньги + новые попытки обучения
Принявая идею модульной разработки, страница на основе вопросов (домашняя страница) разделена на область просмотра вопросов, область кодирования SQL и область результатов вопроса. Каждая область представляет собой независимый файл компонентов VUE, который реализует логическую изоляцию и повторное использование компонентов (например, область кодирования SQL также может быть повторно использована на странице SQL Practice Square).
Затем эти компоненты могут быть введены в IndexPage.vue , и информация об уровне, результаты, выполняющие результаты и другие данные, могут быть переданы в компоненты и собраны на полную страницу.
Несмотря на то, что базы данных не существует, все соответствующие данные все еще должны управляться равномерно, поэтому каталог levels определяется для равномерного сохранения данных, связанных с уровнем уровня.
Во -первых, мы делим уровни на две категории: основные уровни (учебные пособия) и пользовательские уровни (для легкого расширения) и управляются в файлах mainLevels.ts и customLevels.ts соответственно.
Каждый уровень представляет собой отдельный каталог, обеспечивающий изоляцию между уровнями.
Поскольку учебные изделия для каждого уровня могут быть очень длинными, и написание их непосредственно в файле TS не способствует чтению и управлению, стратегия здесь состоит в том, чтобы написать все статьи в файле .md Markdown и прочитать файл .md в файле index.ts уровня.
Пример кода заключается в следующем, и информация каждого уровня независимо определена и изолирована друг от друга:
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 на переднем конце.
Код Core находится в src/core/sqlExecutor.ts , который определяет две функции: инициализация DB и выполнение SQL, что очень просто:
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 операции по очереди:
Здесь автор использовал метод хитрости для сравнения данных, непосредственно преобразование двух наборов результатов в формат 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. Полем Полем
Некоторые возможные идеи расширения:
Спасибо за чтение, и добро пожаловать, чтобы присоединиться к кругу обучения программированию автора, чтобы узнать больше оригинальных проектов ~
