YoYoCms.AbpProjectTemplate

موقع تجريبي

دعونا نتحدث عن هذا المشروع أولا. تمامًا مثل العنوان، فهو إطار عمل تم تطويره استنادًا إلى VUE+.NET وهو أيضًا إطار عمل ABP الذي طالب به أعضاء المجموعة للحصول على إصدار vue. دعونا نلقي نظرة على الصفحة الرئيسية أولا:

إنه أمر رائع جدًا، سأقدم لك حسابًا تجريبيًا.

العنوان التجريبي: http://vue.yoyocms.com/ الحساب: كلمة المرور التجريبية: bb123456 بالطبع، يمكنك أيضًا تسجيل حساب بنفسك للتحقق.

يقدم

أولاً، بالنسبة للطلاب الذين لا يعرفون إطار عمل برنامج الجسر الأكاديمي، دعونا نشرح ما هو إطار عمل برنامج الجسر الأكاديمي:

ABP هو اختصار لـ "ASP.NET Boilerplate Project (ASP.NET Boilerplate Project)". يعد ASP.NET Boilerplate نقطة انطلاق جديدة لتطوير تطبيقات الويب الحديثة باستخدام أفضل الممارسات والتقنيات الشائعة، ويهدف إلى أن يصبح إطارًا عالميًا لتطبيقات الويب وقالبًا للمشروع. Framework ABP هو إطار عمل تطبيقي يعتمد على أحدث تقنيات ASP.NET CORE وASP.NET MVC وWeb API. وباستخدام الأطر والمكتبات الشائعة، فإنه يوفر وظائف شائعة سهلة الاستخدام مثل التفويض، وحقن التبعية، والتحقق من الصحة، ومعالجة الاستثناءات، والتعريب، والتسجيل، والتخزين المؤقت، وما إلى ذلك. تطبق ABP بنية متعددة الطبقات (طبقة المجال، وطبقة التطبيق، وطبقة البنية التحتية، وطبقة العرض)، بالإضافة إلى التصميم القائم على المجال (الكيانات، والمستودعات، وخدمات المجال، وخدمات التطبيقات، وDTO، وما إلى ذلك). يتم أيضًا تنفيذ البنية التحتية الجيدة وتوفيرها لتنفيذ أفضل الممارسات مثل حقن التبعية. يقوم Template ABP بإنشاء قوالب بدء التشغيل لمشاريعك بسهولة. يتضمن الأطر والمكتبات الأكثر استخدامًا بشكل افتراضي. يسمح لك أيضًا باختيار بنية صفحة واحدة (Angularjs) أو بنية متعددة الصفحات أو EntityFramework أو NHibernate كـ ORM. قم بزيارة الموقع الرسمي لمعرفة المزيد.

بناء

هيكل المشروع المختار هذه المرة هو:

• صافي الإطار 4.6
• VUE + VUEX + VUE-ROUTER عبارة عن تقنية فصل للواجهة الأمامية والخلفية، لكن الفصل ليس نقيًا جدًا بسبب تصميم ABP، إذا كنت تريد فصل الواجهة الأمامية والواجهة الأمامية تمامًا، فهذا هو سيكون الأمر مزعجًا بعض الشيء عند إجراء التفويض، لذلك لا يتم استخدام طريقة الرمز المميز.

في المقالة السابقة [ABP Framework] استخدام اعتراض واجهة برمجة التطبيقات الديناميكية للويب، تم شرح كيفية استخدام الرمز المميز للتحقق من الترخيص. حاليًا، لا تزال طريقة ملف تعريف الارتباط مستخدمة للتحقق. لكنه لا يؤثر على أساليب تطوير الواجهة الأمامية والخلفية. ألق نظرة على صفحة تسجيل الدخول:

تحقيق الوظيفة

• تسجيل الدخول تسجيل
• تبديل متعدد اللغات
• إدارة الرسائل
• إدارة المستأجرين (متعدد المستأجرين)
• إدارة الدور
• حصة
• التفويض (إدارة الحقوق)
• إدارة الإعدادات
• إدارة متعددة اللغات
• سجل التدقيق
• Dynamic WebApi والوظائف الأخرى، أتمنى أن تتمكن من تجربتها بنفسك.

إذا لم تكن مهاراتك في .NET قوية أو كنت ترغب في تحسينها، فإن برنامج ABP هو أفضل إطار عمل للتعلم.

وصف مكدس التكنولوجيا الأمامية:

####الإطار المستخدم من قبل الواجهة الأمامية 1.vue
2.vuex
3.vue-جهاز التوجيه
4. مسج

مكتبة واجهة المستخدم

1.element-ui
2. موجات
3.bootstrap
4.بسبادمين

هيكل المشروع

• بناء البرنامج النصي الذي تم إنشاؤه بواسطة webpack
• تكوين تكوين حزمة الويب
• الملفات بعد بناء التوزيعة
• دليل التعليمات البرمجية المصدر src
  • الأصول ملفات الموارد العالمية
  • الأسلوب العام النمط العام
    • حزمة اللغة (غير مستخدمة مؤقتًا)
    • فئة الأدوات المستخدمة
  • مكونات المكونات العالمية
  • مرشحات المرشحات
  • تقوم mixins بتخزين أنماط مختلفة من ساس
  • تكوين توجيه جهاز التوجيه
  • طبقة طلب واجهة الخدمة
  • com.storevuex
  • يقوم البائع بتخزين مكتبات الطرف الثالث
  • عرض ملف المشاهدة
  • vuePlugin البرنامج الإضافي المخصص لـ vue
• الملفات الثابتة الثابتة، يبقى الدليل المترجم دون تغيير

فيما يلي الكلمات الأصلية لموظفي الواجهة الأمامية، شكرًا لك Huixin666 على الوقت الذي أمضيته في تحسين واجهة vue.

خطوات التطوير

قبل التطوير، نفترض أن لديك قاعدة مهارات أساسية في es6 و sass و vue و vue-router و vuex .
يوصى بقراءة نصيحة You Yuxi

تثبيت تبعيات الواجهة الأمامية

أدخل دليل الأصول في Web项目

 $ npm i

تشغيل المشروع

تذكر أن تبدأ الخلفية أولاً

 $ npm run dev

سيستخدم webpack Express لبدء خادم ويب بمنفذ 8986

نشر

 $ npm run build

سيقوم هذا الأمر بتجميع كافة الملفات في دليل dist ، راجع مخطط هيكل المشروع أعلاه

1.إضافة صفحة

• انتقل أولاً إلى src/views لإنشاء دليل الوحدة النمطية.
  على سبيل المثال، قمت حاليًا بإضافة دليل يسمى administration ، والذي يحتوي على جميع صفحات إدارة النظام، وقد تحتوي كل وحدة أيضًا على أدلة components assets ، مما يعني أن المكونات والموارد الموجودة فيها تنتمي فقط إلى الوحدة الحالية.
• بعد ذلك، قم بإضافة Index.vue كصفحة التوجيه الرئيسية للتحكم في جميع الصفحات ضمن هذه الوحدة.
  بحاجة إلى الاهتمام بدور البقاء على قيد الحياة
• ثم أضف الصفحة التي تحتاجها، مثل User.vue
  إذا كنت بحاجة إلى الحصول على البيانات، فيرجى إضافة طريقة تسمى fetchData في methods . في هذه الطريقة، تحتاج إلى استدعاء abp.view.setContentLoading(false) بعد الحصول على البيانات لإغلاق طبقة قناع التحميل لمنطقة المحتوى. (يمكنك الرجوع إلى User.vue)

2.إضافة الطريق

• أدخل دليل src/router ، وأضف مجلد وحدة التوجيه، وأضف ملفًا باسم index.js في المجلد.
• ثم قم بتسجيل معلومات التوجيه المضافة حاليًا في src/router/index.js

3.إضافة الخدمة

• أدخل دليل src/services وأضف الوحدة المقابلة لطلب الواجهة. على سبيل المثال، يتم وضع الكائنات المرتبطة بالدور في roleService.js تتوافق الكائنات المصدرة بواسطة ملف roleService.js مع abp.services.yoyocms.role . وميزة استخدامه بهذه الطريقة هي أنه يمكن إدارته وتوسيعه بشكل موحد

ما ورد أعلاه هو الوضع الأساسي لإصدار vue من ABP.

عنوان التحميل:

عنوان المصدر المفتوح لإصدار vue: https://github.com/yoyocms/YoYoCms.AbpProjectTemplate العنوان التجريبي لإصدار vue: http://vue.yoyocms.com/ عنوان المصدر المفتوح لإصدار angularJS: https //github.com/ltm0203/YoYoCms angularJS عنوان الإصدار التجريبي: http://www.yoyocms.com

إذا كانت لديك اقتراحات جيدة أو تعليقات على الأخطاء، فيرجى تقديم مشكلة على github.

وفي الوقت نفسه، قمنا أيضًا بإنشاء منشئ مشروع بوظائف مشابهة لقالب ABP الرسمي. سيتم إصدار الوظيفة في منتصف العام، لذا يرجى متابعة الأمر.