كيف بدأ كل شيء؟
أنا مطور متقدم ، لكني أسعى للتطوير ، قررت أن أكتب طلبًا كاملاً وأن
أصبح مليونيرا لاكتساب خبرة لا تقدر بثمن.
لذلك ، بدأت في تخطيط الواجهة الخلفية ، واخترت MongoDB لتخزين البيانات ، وكنت على استعداد للتخطيط للعلاقات الهيكلية والميدانية.
لكنني واجهت عدم وجود محرر مخطط بسيط وعملي بما فيه الكفاية بدون زخرفة على قواعد بيانات NoSQL.
- لا؟ لذلك سوف أمارس أعمالًا وأجد مكتبة وأملأ الواجهة!
تم دفع فكرة Fullstack إلى الخلفية وبدأت في دراسة أبسط محرر لمخططات قواعد البيانات.
- ساذج ... - لكنني أدركت هذا بعد قليل.
بحث
أولاً ، يتم دفع معظم المكتبات من هذا النوع وتتطلب الكثير منها!
ثانياً ، أولئك الذين أحرارًا لا يتألقون مع الوظائف أو أنهم ممتلئون بالأخطاء!
في الثالث لن يكون MxGraph وجدت. لم يتم ذكرها عملياً على الإنترنت ، على الرغم من أن خدمة draw.io الممتازة مكتوبة عليها وهي في حد ذاتها أداة ملائمة للغاية لتصور البيانات وتحريرها.
فكرة
أعتقد أن الجميع قد سمعوا عن
Vue.js ، ولكن فقط في حالة - هذا هو JavaScript - إطار عمل لإنشاء واجهات مستخدم على رد الفعل.
MxGraph هي مكتبة لتصور وتحرير مختلف العمليات ، وسير العمل و BPM ، وتصور قواعد البيانات ، وشبكات رسم الخرائط والاتصالات السلكية واللاسلكية ، وتطبيقات رسم الخرائط ونظم المعلومات الجغرافية GIS ، UML ، والدوائر الإلكترونية ، VLSI ، CAD ، والشبكات المالية والاجتماعية ، المخططات التنظيمية وأكثر من ذلك بكثير.
التوافق
MxGraph هي أداة قديمة (وليست قديمة) ، لذا فإن تثبيت npm البسيط في مشروع Vue هنا لن يمنحنا التوافق التام. لذلك ، اضطررت إلى حفر الشبكة وفتح إنتاج الدراجات.
عانى الحلول وجدت
يبدو الاستيراد والدمج في مكون Vue كما يلي:
<script> import mxgraph from 'mxgraph';
لماذا قمت بإنشاء المتغيرات ، ومن ثم تسجيلها في النافذة؟!
الحقيقة هي أن webpack يعيد تسمية المتغيرات أثناء التجميع ولا يمكن العثور عليها mxgraph فيما بعد. لذلك ، خاصة بالنسبة لـ mxgraph ، فقد قمت بوضعها في كائن عمومي.
لا تنس أيضًا التكوين - خاصةً عند استخدام واجهات mxEditor المدمجة ، وإلا ستكون هناك مشاكل في محتوى المكتبة.
ولماذا خرج المتغير من المحرر؟
أثناء التشغيل ، لن نتمكن دائمًا من الوصول إلى متغير vue بسبب سياق أساليب mxgraph. وسيؤدي نقلها إلى متغيرات عالمية إلى توفير الوقت وبضع حفنة من الأعصاب.
كائنات البيانات المخصصة لماذا مرة أخرى في النافذة؟!
تستخدم Mxgraph نماذج أولية لإنشاء كائنات بيانات جديدة. يجب أيضًا كتابتها إلى النافذة - وإلا ستحدث مشكلات في الاستيراد / التصدير المدمج في المخططات.
أصبح التطوير الإضافي أسهل ولم أعد أواجه مشكلات مع الوصول إلى الكائنات.
لا أعتقد أن هذا النهج مثالي ، وسأكون سعيدًا إذا قدم شخص ما بديلاً لحل التوافق هذا.وماذا حدث؟
تطبيق صغير لنمذجة مخططات قاعدة البيانات:
nosqldbm.ruمما يساعدني على تصور مخطط قاعدة بيانات تقريبي للمشاريع المستقبلية.
شكرا لك على قراءة المنشور الأول ، وآمل أن تكونوا مهتمين.
git المثال الكاملمستودعاختيار MxGraphمستودعدليل صغيرمستندات APIأمثلة