sql mother
1.0.0
SQL 자체 연구 네트워크의 순수한 프론트 엔드 구현
프로그래머 어류 피부에 의해 한 사람이 풀 서비스를 받고 있습니다.
온라인 경험 : http://sqlmother.yupi.icu
비디오 데모 : https://www.bilibili.com/video/bv1pv4y1i7lw
Yusie의 자체 SQL 학습 및 실제 경험과 함께 완전 무료 SQL Self-Study Tutorial 웹 사이트는 30 개 이상의 레벨을 작성했습니다. 사용자는 온라인으로 SQL 코드를 제출하여 질문을하고 레벨을 전달할 수 있습니다. 목표는 모든 사람이 일반적으로 사용되는 SQL 구문을 0에서 1까지 마스터하도록 돕는 것입니다.
또한 웹 사이트는 무료 레벨, 사용자 정의 레벨, SQL 온라인 실습 제곱 및 기타 기능을 무료로 선택합니다.
우선, SQL 지식은 매우 중요하며 프로그래머, 제품 관리자 및 데이터 분석 급우에게는 거의 필요한 기술입니다.
SQL 학습의 경우 자습서를 읽는 것보다 실용적인 연습을 시작하는 것이 더 적합합니다. 온라인에서 비슷한 SQL 자체 학습 네트워크가 있지만, 이들은 충분히 청구되거나 체계적이지 않습니다.
그래서 Yuxi는 직접 수행하고 오픈 소스 SQL 학습 네트워크를 설정하기로 결정했습니다. 한편으로, 나는 모든 사람들이 SQL을보다 쉽게 시작하는 데 도움이되기를 바랍니다. 다른 한편으로, 나는 또한 프로젝트 코드가 당신에게 영감을 줄 수 있기를 바랍니다. 그래서 더 많은 학생들이 참여하고 기여자가되고 함께 좋은 일을 할 수있는 기회를 갖기를 바랍니다!
1) 홈페이지로 직접 이동하면 왼쪽의 튜토리얼 및 질문 영역이 있습니다. 먼저 읽어주세요
2) 오른쪽 상단 영역에 SQL 코드를 작성하여 질문을 수행하려면 실행을 클릭하여 결과를 제출하십시오.
3) 오른쪽 하단에있는 질문 보조 영역으로 자신을 도울 수 있습니다.
4) 실행 결과가 올바른 후에 다음 단계로 들어갈 수 있습니다.
또한 자유롭게 도전 할 수있는 레벨을 선택할 수도 있습니다. 모든 수준에 대한 제한이 없으며 다음과 같이 질문을 할 필요가 없습니다.
프로젝트는 순수한 프론트 엔드로 구현되므로 프로젝트를 로컬로 시작하는 것은 매우 쉽습니다!
온라인 방문자가 많고 말더듬이있을 수 있으므로 로컬로 사용하는 것이 좋습니다 ~
1)이 프로젝트의 코드를 다운로드하십시오
2) 프로젝트 루트 디렉토리를 입력하고 npm install 실행하여 프로젝트 종속성을 설치하십시오.
3) npm run dev
이 프로젝트는 순수한 프론트 엔드를 사용하여 구현되며 백엔드에 대한 프론트 엔드 지식이 필요하지 않습니다.
Q : 순수한 프론트 엔드 구현을 사용하는 이유는 무엇입니까?
A : 공격 위험 감소 + 비용 절감 + 새로운 학습 시도
모듈 식 개발 아이디어를 채택하면 질문 기반 페이지 (홈 페이지)는 질문 브라우징 영역, SQL 코딩 영역 및 질문 결과 영역으로 나뉩니다. 각 영역은 독립적 인 VUE 구성 요소 파일로 논리적 격리 및 구성 요소 재사용을 실현합니다 (예 : SQL 코딩 영역은 SQL Practice Square 페이지에 재사용 될 수 있음).
그런 다음 이러한 구성 요소는 IndexPage.vue 에 소개 될 수 있으며 레벨 정보, 실행 결과 및 기타 데이터를 구성 요소로 전달하여 전체 페이지로 조립할 수 있습니다.
백엔드 데이터베이스는 없지만 모든 관련 데이터는 여전히 균일하게 관리되어야하므로 levels 디렉토리는 레벨 관련 데이터를 균일하게 저장하도록 정의됩니다.
먼저 레벨을 메인 라인 레벨 (튜토리얼) 및 사용자 정의 레벨 (쉽게 확장)으로 나누고 각각 mainLevels.ts 및 customLevels.ts 파일로 관리됩니다.
각 레벨은 별도의 디렉토리이며 레벨 간의 격리를 가능하게합니다.
각 레벨에 대한 튜토리얼 기사가 매우 길고 TS 파일에 직접 작성하는 것은 읽기 및 관리에 도움이되지 않기 때문에 여기에서 전략은 .md Markdown 파일에 모든 기사를 작성하고 레벨 정의 파일 index.ts 에서 .md 파일을 읽는 것입니다.
샘플 코드는 다음과 같습니다. 각 레벨의 정보는 독립적으로 정의되고 격리됩니다.
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 작업을 실행할 수 있습니다.
핵심 코드는 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의 증손자와 같은 일련의 제품을 만들 수 있습니다. . .
가능한 확장 아이디어 :
읽어 주셔서 감사합니다. 더 많은 독창적 인 프로젝트를 배우려면 저자의 프로그래밍 학습 서클에 가입하시기 ~
