WhiteJotter

---

هذا مشروع فصل بسيط للواجهة الأمامية والخلفية، تم تطويره بشكل أساسي باستخدام تقنيات Vue.js + SpringBoot.

بالإضافة إلى استخدامه كتمرين تمهيدي، آمل أيضًا أن يتم استخدام المشروع كدعامة لبعض مشاريع الويب الشائعة لمساعدتك في تبسيط عملية إنشاء موقع ويب. يطلق عليه اسم التشويش الأبيض لأنه يبدأ عند 0 ويتحسن تدريجياً بمرور الوقت.

الواجهة الأمامية: https://github.com/realdonald1994/WhiteJotter_Vue

الريبو الخلفي: https://github.com/realdonald1994/WhiteJotter

مرحبًا بك في الانضمام إلى White Jotter!

العرض الشامل

1. المنزل

كصفحة عرض، تتضمن المواد المرجعية الرئيسية لتطوير هذا المشروع وآخر التحديثات والشعار

2. المكتبة

توفير وظيفة عرض معلومات الكتاب والفيلم

3. جوتر

توفير الملاحظات، وظيفة عرض منشورات المدونة

4. إدارة الخلفية

بما في ذلك لوحة القيادة، وإدارة المحتوى، وإدارة المستخدم والسلطة، وما إلى ذلك.

5. عني

مقدمة شخصية والروابط ذات الصلة

بنيان

• طلب

• تكنولوجيا

كومة التكنولوجيا

1. مكدس تكنولوجيا الواجهة الأمامية

1.Vue.js
2.ElementUI
3.axios
4. فويكس

2. مكدس تكنولوجيا الواجهة الخلفية

1. التمهيد الربيع
2. بيانات الربيع + JPA
3. ماي إس كيو إل
4.شيرو

3. قاعدة البيانات

1. ماي أس كيو إل

4. الخادم

1.سنتوس7
2. نجينكس
3.FastDFS

5. الاختبار

1. يونيوت
2. مزاح

النشر

1.استنساخ المشروع إلى المستوى المحلي

الواجهة الأمامية:

git clone https://github.com/realdonald1994/WhiteJotter_Vue

النهاية الخلفية:

git clone https://github.com/realdonald1994/WhiteJotter

2. قم بإنشاء قاعدة بيانات white_jotter في mysql، وقم بتشغيل المشروع، وسيتم حقن البيانات تلقائيًا.

منفذ Redis هو 6379 (المنفذ الافتراضي)، وكلمة المرور فارغة.

3. تم تكوين قاعدة البيانات في ملف application.properties في دليل src main resources لمشروع الواجهة الخلفية، وإصدار mysql هو 8.0.15.

4. قم بتشغيل مشروع الواجهة الخلفية في IntelliJ IDEA. لضمان تشغيل المشروع بنجاح، يمكنك النقر بزر الماوس الأيمن فوق pom.xml وتحديد maven-> reimport وإعادة تشغيل المشروع

في هذه المرحلة، يتم تشغيل الخادم بنجاح، وفي نفس الوقت، قم بتشغيل مشروع الواجهة الأمامية، قم بزيارة http: // localhost: 8080 ، يمكنك الدخول إلى صفحة تسجيل الدخول، الحساب الافتراضي هو admin ، كلمة المرور هي 123

إذا كنت تريد إجراء تطوير ثانوي، فيرجى الاستمرار في رؤية الخطوتين الخامسة والسادسة.

5. أدخل الدليل الجذر لمشروع الواجهة الأمامية، وأدخل الأوامر التالية بالترتيب في سطر الأوامر:

# Install dependencies
  npm install

# Start the project at localhost: 8080
  npm run dev

منذ أن تم تكوين إعادة توجيه المنفذ في مشروع wj-front لإعادة توجيه البيانات إلى SpringBoot، بعد بدء المشروع، أدخل http: // localhost: 8080 في المتصفح للوصول إلى مشروع الواجهة الأمامية لدينا، جميع الطلبات تعيد توجيه البيانات إلى SpringBoot من خلال إعادة توجيه المنفذ (لاحظ أنه لا ينبغي عليك إغلاق مشروع SpringBoot في الوقت الحالي).

6.أخيرًا، يمكنك استخدام WebStorm والأدوات الأخرى لفتح مشروع wj-front ومواصلة التطوير. بعد اكتمال التطوير، عندما يصبح المشروع متصلاً بالإنترنت، ستظل تدخل إلى الدليل wj-front ، ثم قم بتنفيذ الأمر التالي:

 npm run build

بعد تنفيذ الأمر بنجاح، يتم إنشاء مجلد dist ضمن دليل wj-front، ويمكن نسخ الملفين assets و index.html الموجودين في المجلد إلى nginx. ثم أدخل الدليل الجذر للواجهة الخلفية وقم بتنفيذ سطر الأوامر:

 mvn clean install

وأخيرًا، أدخل سطر الأوامر java -jar xxx.jar في الدليل target الذي تم إنشاؤه حديثًا. بدء تشغيل الخادم الخلفي.

أدخل سطر الأوامر ضمن ملف nginx: start nginx . بدء تشغيل خادم الواجهة الأمامية.

تحديث

2020

08-20 أضف ريديس
06-09 إضافة اختبار الوحدة باستخدام أدوات اختبار Vue وJest
06-04 استخدم gzip لحل مشكلة تحميل صفحة الويب ببطء
02-06 تم نشر المشروع على الخادم السحابي وتم نشر الموقع لأول مرة ؟
05-29 مشاريع الواجهة الأمامية والخلفية منفصلة
04-20 استخدم محرر تخفيض السعر مفتوح المصدر لتحقيق عرض المقالات ووحدة الإدارة

...