sql mother
1.0.0
การใช้งาน Front-end บริสุทธิ์ของเครือข่ายการศึกษาด้วยตนเอง SQL
โดย Programmer Fish Skin คนหนึ่งมีบริการเต็มรูปแบบ
ประสบการณ์ออนไลน์: http://sqlmother.yupi.icu
การสาธิตวิดีโอ: https://www.bilibili.com/video/bv1pv4y1i7lw
เว็บไซต์การสอนการเรียนรู้ด้วยตนเอง SQL ฟรีอย่างสมบูรณ์รวมกับการเรียนรู้ SQL และประสบการณ์เชิงปฏิบัติของ Yusie ได้เขียนมากกว่า 30 ระดับ ผู้ใช้สามารถส่งรหัส SQL ออนไลน์เพื่อทำคำถามและผ่านระดับ เป้าหมายคือการช่วยให้ทุกคนควบคุมไวยากรณ์ SQL ที่ใช้กันทั่วไปตั้งแต่ 0 ถึง 1
นอกจากนี้เว็บไซต์ยังสนับสนุนการเลือกระดับฟรีระดับที่กำหนดเอง SQL Online Practice Square และฟังก์ชั่นอื่น ๆ
ก่อนอื่นความรู้ SQL มีความสำคัญอย่างยิ่งและเกือบจะเป็นทักษะที่จำเป็นสำหรับโปรแกรมเมอร์ผู้จัดการผลิตภัณฑ์และเพื่อนร่วมชั้นวิเคราะห์ข้อมูล
สำหรับการเรียนรู้ของ SQL มันเหมาะสมกว่าที่จะเริ่มต้นผ่านการฝึกปฏิบัติมากกว่าการอ่านแบบฝึกหัด แม้ว่าจะมีเครือข่ายการศึกษาด้วยตนเอง SQL ที่คล้ายกัน แต่พวกเขาจะถูกเรียกเก็บเงินหรือไม่เป็นระบบเพียงพอ
ดังนั้น Yuxi จึงตัดสินใจทำด้วยตัวเองและตั้งค่าเครือข่ายการเรียนรู้ SQL โอเพนซอร์ส ในอีกด้านหนึ่งฉันหวังว่ามันจะช่วยให้ทุกคนเริ่มต้นด้วย SQL ได้ง่ายขึ้น ในทางกลับกันฉันยังหวังว่ารหัสโครงการจะให้แรงบันดาลใจให้คุณเพื่อให้นักเรียนมีโอกาสเข้าร่วมและเป็นผู้มีส่วนร่วมและทำงานร่วมกันได้ดี!
1) ไปที่หน้าแรกโดยตรงและพื้นที่สอนและพื้นที่คำถามทางด้านซ้ายคือ โปรดอ่านเต็มก่อน
2) เขียนรหัส SQL ในพื้นที่ด้านบนขวาเพื่อทำคำถามคลิกเรียกใช้เพื่อส่งผลลัพธ์
3) คุณสามารถช่วยตัวเองในพื้นที่ผู้ช่วยคำถามที่ด้านล่างขวา
4) หลังจากผลการดำเนินการถูกต้องคุณสามารถป้อนระดับถัดไป
คุณยังสามารถเลือกระดับที่จะท้าทายพวกเขาได้อย่างอิสระ ไม่มีข้อ จำกัด ในทุกระดับและคุณไม่จำเป็นต้องทำคำถามตามลำดับ:
เนื่องจากโครงการถูกนำไปใช้กับ Front-End บริสุทธิ์จึงเป็นเรื่องง่ายมากที่จะเริ่มโครงการในพื้นที่!
มีผู้เยี่ยมชมออนไลน์จำนวนมากและอาจพูดติดอ่างดังนั้นขอแนะนำให้คุณใช้ในพื้นที่ ~
1) ดาวน์โหลดรหัสของโครงการนี้
2) ป้อนไดเรกทอรีรูทของโครงการและดำเนินการ npm install เพื่อติดตั้งการพึ่งพาโครงการ
3) เรียกใช้งาน npm run dev Local Startup
โครงการนี้ดำเนินการโดยใช้ Front-end ที่บริสุทธิ์และไม่ต้องการความรู้ด้านหน้าของส่วนหลัง ~
ถาม: ทำไมต้องใช้การใช้งาน Front-End บริสุทธิ์?
ตอบ: ลดความเสี่ยงจากการโจมตี + ประหยัดเงิน + ความพยายามในการเรียนรู้ใหม่
การใช้แนวคิดการพัฒนาแบบแยกส่วนหน้าคำถาม (หน้าแรก) แบ่งออกเป็นพื้นที่การท่องคำถามพื้นที่การเข้ารหัส 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 ; Front-end บริสุทธิ์ใช้ฐานข้อมูลและดำเนินการ 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)! อย่าใช้ฟังก์ชั่นแฟนซีเกินไป!
ตัวอย่างเช่นการแก้ไขข้อผิดพลาดในระดับการเพิ่มประสิทธิภาพการเขียนคำโฆษณาเพื่อให้เข้าใจหรือเพิ่มข้อมูลเพิ่มเติมได้ง่ายขึ้นปรับความยากของระดับ ฯลฯ
โครงการนี้ได้รับการพัฒนาโดย Fish Skin เพียงอย่างเดียวโดยมีเวลาและพลังงาน จำกัด หลายสถานที่ยังไม่ได้รับการปรับปรุง ทุกคนยินดีที่จะขยายโครงการและสร้างชุดผลิตภัณฑ์ของตัวเองเช่นลูกชายของ SQL หลานชายของ SQL และหลานชายของ SQL - -
แนวคิดการขยายที่เป็นไปได้บางอย่าง:
ขอบคุณสำหรับการอ่านและยินดีต้อนรับสู่การเข้าร่วมวงกลมการเรียนรู้การเขียนโปรแกรมของผู้แต่งเพื่อเรียนรู้โครงการดั้งเดิมเพิ่มเติม ~
