sql mother
1.0.0
التنفيذ الأمامي الخالص لشبكة الدراسة الذاتية SQL
بواسطة المبرمجين السمك ، شخص واحد في الخدمة الكاملة
الخبرة عبر الإنترنت: 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) بعد أن تكون نتيجة التنفيذ صحيحة ، يمكنك إدخال المستوى التالي
يمكنك أيضًا اختيار مستويات لتحديها بحرية. لا توجد قيود على جميع المستويات ، وليس عليك إجراء الأسئلة بالترتيب:
نظرًا لأن المشروع يتم تنفيذه مع الواجهة الأمامية الخالصة ، فمن السهل جدًا بدء المشروع محليًا!
هناك العديد من الزوار عبر الإنترنت وقد يتم تأثرهم ، لذلك يوصى باستخدامه محليًا ~
1) قم بتنزيل رمز هذا المشروع
2) أدخل دليل جذر المشروع وتنفيذ npm install لتثبيت تبعيات المشروع
3) تنفيذ بدء التشغيل المحلي npm run dev
يتم تنفيذ هذا المشروع باستخدام واجهة أمامية خالصة ، ولا يتطلب أي معرفة أمامية من الواجهة الخلفية ~
س: لماذا تستخدم تنفيذ الواجهة الأمامية النقية؟
ج: تقليل مخاطر الهجوم + توفير المال + محاولات التعلم الجديدة
عند اعتماد فكرة التطوير المعياري ، يتم تقسيم الصفحة المستندة إلى الأسئلة (الصفحة الرئيسية) إلى منطقة تصفح الأسئلة ، ومنطقة ترميز SQL ، ومنطقة نتائج السؤال. كل منطقة عبارة عن ملف مكون VUE مستقل ، يدرك العزلة المنطقية وإعادة استخدام المكون (على سبيل المثال ، يمكن أيضًا إعادة استخدام منطقة ترميز SQL إلى صفحة SQL Practice Square).
بعد ذلك ، يمكن تقديم هذه المكونات في IndexPage.vue ، ويمكن نقل المعلومات المستوية ، والنتائج الجارية والبيانات الأخرى إلى المكونات ، وتجميعها في صفحة كاملة.
على الرغم من عدم وجود قاعدة بيانات خلفية ، إلا أنه لا يزال ينبغي إدارة جميع البيانات ذات الصلة بشكل موحد ، لذلك يتم تعريف دليل levels لتخزين البيانات المتعلقة بمستوى بشكل موحد.
أولاً ، نقوم بتقسيم المستويات إلى فئتين ومستويات الخط الرئيسي (البرامج التعليمية) ومستويات مخصصة (لسهولة التوسع) ، ويتم إدارتها في ملفات mainLevels.ts و customLevels.ts على التوالي.
كل مستوى هو دليل منفصل ، يمكّن العزلة بين المستويات.
نظرًا لأن المقالات التعليمية لكل مستوى قد تكون طويلة جدًا وكتابتها مباشرة في ملف TS لا تفضي إلى القراءة والإدارة ، فإن الإستراتيجية هنا هي كتابة جميع المقالات في ملف Marmdown .md وقراءة ملف .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 الخاصة بك على الواجهة الأمامية.
الكود الأساسي موجود في 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 الخاصة بالمستخدم صحيحة؟
بدلاً من مقارنة ما إذا كانت عبارة إدخال المستخدم تتفق بشكل مباشر مع إجابةنا المسبقة (هذا صارم للغاية) ، فإننا نقوم بإجراء العمليات الثلاثة التالية بدورها:
هنا ، استخدم المؤلف طريقة خدعة لمقارنة البيانات ، وتحويل مجموعات النتيجة مباشرة إلى تنسيق JSON ، ومقارنة ما إذا كانت سلاسل JSON متسقة ، بدلاً من متعددة للحلقات.
نرحب بجميع أنواع الأبطال للمشاركة في المساهمات والاستفادة من الآخرين ونفسهم ~
يوجد حاليًا العديد من طرق المساهمة الموصى بها:
قبل المساهمة في المستوى ، تأكد من فهم كيفية تحميل هذا المشروع المستوى.
لضمان اتساق البرنامج التعليمي ، يوصى بالمساهمة自定义关卡بدلاً من المستويات الرئيسية ، والتي من السهل دمجها.
خطوات للمساهمة في مستوى مخصص:
1) نسخ src/levels/custom/自定义关卡模板وتغيير اسم الدليل إلى اسمك الصيني الخاص بك
2) تعديل عبارة إنشاء جدول createTable.sql في القالب واستيراد البيانات الافتراضية
3) قم بتعديل ملف index.ts في القالب ، وقم بتعيين الاسم الصيني والإنجليزي للمستوى ، أو الافتراضي SQL ، أو الإجابة SQL ، والمطالبات ، إلخ.
4) قم بتعديل ملف README.md في القالب ، وقم بتغيير محتوى العنوان والمحتوى ، وقم بإعطاء معلومات بنية الجدول وحاول التعبير عن السؤال بوضوح (على سبيل المثال ، يجب إخراجه بترتيب معين)
5) تقديم مستويات مخصصة في ملف customLevels.ts .
لاحظ أن هذا المشروع يدعم فقط SQLite Syntax (بشكل أساسي SQL)! لا تستخدم وظائف رائعة للغاية!
على سبيل المثال ، إصلاح الأخطاء في المستويات ، وتحسين كتابة النصوص لتسهيل فهم أو إضافة المزيد من المعلومات ، وضبط صعوبة المستويات ، وما إلى ذلك.
تم تطوير هذا المشروع فقط من قبل Skin بمفرده ، مع وقت محدود وطاقة. لم يتم تحسين العديد من الأماكن. الجميع مرحب بهم لتوسيع المشروع وإنشاء سلسلة من منتجاتهم الخاصة مثل ابن SQL وحفيد SQL وحفيد SQL. . .
بعض أفكار التمديد الممكنة:
شكرًا لك على القراءة ، ومرحبا بكم للانضمام إلى دائرة تعلم البرمجة للمؤلف لمعرفة المزيد من المشاريع الأصلية ~
