sql mother
1.0.0
Implementasi Pure Front-End dari SQL Self-Study Network
Oleh Programmer Fish Skin, satu orang dalam pelayanan penuh
Pengalaman Online: http://sqlmother.yupi.icu
Demonstrasi video: https://www.bilibili.com/video/bv1pv4y1i7lw
Situs web tutorial belajar mandiri SQL yang sepenuhnya gratis, dikombinasikan dengan SQL Learning dan pengalaman praktis Yusie sendiri, telah menulis lebih dari 30 level. Pengguna dapat mengirimkan kode SQL secara online untuk melakukan pertanyaan dan lulus level. Tujuannya adalah untuk membantu semua orang menguasai sintaks SQL yang umum digunakan dari 0 hingga 1.
Selain itu, situs web mendukung pemilihan level, level khusus, SQL Online Practice Square dan fungsi lainnya.
Pertama -tama, pengetahuan SQL sangat penting dan hampir merupakan keterampilan yang diperlukan untuk programmer, manajer produk, dan teman sekelas analisis data.
Untuk pembelajaran SQL, lebih cocok untuk memulai melalui praktik praktis daripada membaca tutorial. Meskipun ada jaringan belajar mandiri SQL yang serupa secara online, mereka dikenakan biaya atau tidak cukup sistematis.
Jadi Yuxi memutuskan untuk melakukannya sendiri dan mengatur jaringan pembelajaran SQL open source. Di satu sisi, saya berharap ini dapat membantu semua orang memulai dengan SQL dengan lebih mudah; Di sisi lain, saya juga berharap bahwa kode proyek juga dapat memberi Anda beberapa inspirasi, sehingga lebih banyak siswa memiliki kesempatan untuk berpartisipasi dan menjadi kontributor dan melakukan pekerjaan dengan baik bersama!
1) Pergi langsung ke halaman beranda, dan area tutorial dan tanya di sebelah kiri adalah. Harap baca secara lengkap dulu
2) Tulis kode SQL di area kanan atas untuk melakukan pertanyaan, klik jalankan untuk mengirimkan hasilnya
3) Anda dapat membantu diri Anda sendiri dengan Area Asisten Pertanyaan di bawah kanan
4) Setelah hasil eksekusi benar, Anda dapat memasuki level berikutnya
Anda juga dapat memilih level untuk menantangnya secara bebas. Tidak ada batasan pada semua tingkatan, dan Anda tidak perlu melakukan pertanyaan secara berurutan:
Karena proyek ini diimplementasikan dengan front-end murni, sangat mudah untuk memulai proyek secara lokal!
Ada banyak pengunjung online dan mungkin tergagap, jadi disarankan agar Anda menggunakannya secara lokal ~
1) Unduh kode proyek ini
2) Masukkan direktori root proyek dan jalankan npm install untuk menginstal dependensi proyek
3) Jalankan npm run dev Startup Lokal
Proyek ini diimplementasikan menggunakan front-end murni, dan tidak memerlukan pengetahuan front-end tentang back-end ~
T: Mengapa menggunakan implementasi front-end murni?
A: Mengurangi risiko serangan + menghemat uang + upaya pembelajaran baru
Mengadopsi ide pengembangan modular, halaman berbasis pertanyaan (halaman beranda) dibagi menjadi area penelusuran pertanyaan, area pengkodean SQL, dan area hasil pertanyaan. Setiap area adalah file komponen VUE independen, yang mewujudkan isolasi logis dan penggunaan kembali komponen (misalnya, area pengkodean SQL juga dapat digunakan kembali ke halaman SQL Practice Square).
Kemudian komponen -komponen ini dapat diperkenalkan di IndexPage.vue , dan informasi level, menjalankan hasil dan data lainnya dapat diteruskan ke komponen, dan dirakit menjadi halaman yang lengkap.
Meskipun tidak ada database back-end, semua data yang relevan masih harus dikelola secara seragam, sehingga direktori levels didefinisikan untuk menyimpan data terkait level secara seragam.
Pertama, kami membagi level menjadi dua kategori, level arus utama (tutorial) dan tingkat kustom (untuk ekspansi yang mudah), dan dikelola masing -masing di mainLevels.ts dan customLevels.ts file masing -masing.
Setiap level adalah direktori terpisah, memungkinkan isolasi antar level.
Karena artikel tutorial untuk setiap level mungkin sangat panjang dan menulisnya secara langsung dalam file TS tidak kondusif untuk membaca dan manajemen, strateginya di sini adalah untuk menulis semua artikel dalam file markdown .md dan membaca file .md di level definisi file index.ts .
Kode sampel adalah sebagai berikut, dan informasi dari setiap level didefinisikan secara independen dan diisolasi satu sama lain:
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 ; Bagaimana front-end murni mengoperasikan database dan menjalankan SQL? Siswa dengan pengalaman front-end secara naluriah akan memikirkan teknologi webassembly .
Itu benar, melalui teknologi webassembly , kita dapat menjalankan bahasa selain JS (seperti C ++) di browser. Tetapi tidak perlu menerapkan logika eksekusi SQL sendiri. Berdiri di atas bahu raksasa, secara langsung menggunakan perpustakaan sql.js open source, Anda dapat menjalankan operasi SQL Anda sendiri di ujung depan.
Kode inti adalah dalam src/core/sqlExecutor.ts , yang mendefinisikan dua fungsi: menginisialisasi DB dan mengeksekusi SQL, yang sangat sederhana:
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 ) ;
} ;Ketika level dimuat, pernyataan inisialisasi SQL yang sesuai dengan level akan dieksekusi terlebih dahulu untuk menyelesaikan pembuatan tabel dan mengimpor data sampel, dan kemudian pengguna dapat menulis data dalam tabel SQL Query.
Semua kode yang terkait dengan penilaian berbasis pertanyaan didefinisikan secara terpusat dalam file src/core/result.ts , termasuk fungsi yang menentukan beberapa status eksekusi dan menentukan apakah hasilnya benar.
Bagaimana cara menentukan apakah pernyataan SQL pengguna benar?
Alih -alih secara langsung membandingkan apakah pernyataan input pengguna konsisten dengan jawaban preset kami (itu terlalu kaku), kami melakukan 3 operasi berikut pada gilirannya:
Di sini, penulis menggunakan metode trik untuk membandingkan data, secara langsung mengonversi dua set hasil menjadi format JSON, dan membandingkan apakah string JSON konsisten, bukan banyak untuk loop.
Kami menyambut semua jenis pahlawan untuk berpartisipasi dalam kontribusi dan menguntungkan orang lain dan diri sendiri ~
Saat ini ada beberapa metode kontribusi yang disarankan:
Sebelum berkontribusi ke level, pastikan Anda memahami bagaimana proyek ini memuat level.
Untuk memastikan konsistensi tutorial, disarankan untuk menyumbangkan自定义关卡alih -alih tingkat utama, yang lebih mudah digabungkan.
Langkah -langkah untuk berkontribusi ke tingkat kustom:
1) Salin src/levels/custom/自定义关卡模板dan Ubah Nama Direktori ke Level Anda Sendiri Nama Cina
2) Ubah Pernyataan Pembuatan Tabel createTable.sql di Templat dan Impor Data Default
3) Ubah file index.ts dalam templat, atur nama level Cina dan Inggris, SQL default, jawab SQL, prompt, dll.
4) Ubah file README.md dalam templat, ubah judul dan judul konten, dan berikan informasi struktur tabel dan cobalah untuk mengungkapkan pertanyaan dengan jelas (misalnya, itu harus output dalam urutan tertentu)
5) Memperkenalkan level khusus dalam file customLevels.ts .
Perhatikan bahwa proyek ini hanya mendukung sintaks SQLite (pada dasarnya SQL umum)! Jangan gunakan fungsi yang terlalu mewah!
Misalnya, memperbaiki kesalahan dalam level, mengoptimalkan copywriting agar lebih mudah memahami atau menambahkan lebih banyak informasi, menyesuaikan kesulitan level, dll.
Proyek ini hanya dikembangkan oleh kulit ikan saja, dengan waktu dan energi yang terbatas. Banyak tempat belum ditingkatkan. Semua orang dipersilakan untuk memperluas proyek dan membuat serangkaian produk mereka sendiri seperti putra SQL, cucu SQL, dan cicit SQL. . .
Beberapa kemungkinan ide ekstensi:
Terima kasih telah membaca, dan selamat datang untuk bergabung dengan Lingkaran Pembelajaran Pemrograman Penulis untuk mempelajari lebih banyak proyek asli ~
