w blog

w-مدونة

يصف

مدونة شخصية تستخدم Spring Boot 2.x في الواجهة الخلفية، وnuxtJs في الواجهة الأمامية، وvue في الواجهة الخلفية

مقدمة

1. وصلة

   • رابط جيتي:
     • واجهة برمجة التطبيقات: https://gitee.com/windsnowli/w-blog-api
     • مكتب الاستقبال: https://gitee.com/windsnowli/vue-ssr-blog
     • الواجهة الخلفية: https://gitee.com/windsnowli/vue-admin-blog
   • رابط جيثب:
     • واجهة برمجة التطبيقات: https://github.com/WindSnowLi/w-blog-api
     • مكتب الاستقبال: https://github.com/WindSnowLi/vue-ssr-blog
     • الواجهة الخلفية: https://github.com/WindSnowLi/vue-admin-blog

2. ينقسم مشروع المدونة الشخصية البسيط إلى ثلاثة أجزاء:前台،后台، api .

   • واجهة برمجة التطبيقات: تعتمد الواجهة الخلفية على SpringBoot . تعتمد بشكل أساسي على Mybatis و Mybatis-Redis و Redis و fastjson و DruidDataSource و Lombok و java-jwt و aliyun-sdk-oss و knife4j وما إلى ذلك. تستخدم قاعدة البيانات MySQL8.0+

   • مكتب الاستقبال: النمط الرئيسي لمكتب الاستقبال يأتي من قالب BizBlog الموجود على الإنترنت، ولا أعرف من أين جاء في الأصل، وقد تمت إعادة كتابته في مشروع nuxtJs استنادًا إلى الأصل.

   • الواجهة الخلفية: يتم استخدام vue-element-admin المستخدم في واجهة المستخدم الخلفية بشكل أساسي بشكل مباشر. إذا كنت تريد تخصيصه بنفسك، فإن القوة لا تسمح بذلك.

3. مثال: طعام أخضر - كلب كاي

ابدأ محليًا

ابدأ المشروع بمشروع

API: واجهة برمجة التطبيقات التي تطلبها الواجهة الأمامية والخلفية تستخدم نفس المشروع

1. git clone https://gitee.com/WindSnowLi/w-blog-api.git أو git clone https://github.com/WindSnowLi/w-blog-api.git لاستنساخ المشروع محليًا

2. mvn clean install dependency:tree

3. إنشاء قاعدة بيانات وضبطها على ترميز UTF8 ( utf8mb4 )

4. تعديل إعدادات البيئة

   • تعديل معلومات تكوين قاعدة البيانات في بيئة التطوير application-dev.yml وبيئة الإنتاج application-prod.yml ؛
   • تعديل المعلومات المتعلقة Redis في redis.properties ؛
   • ملاحظة: يتم تنشيط knife4j فقط في بيئة التطوير.

5. mvn clean package -Dmaven.test.skip=true يتخطى الاختبارات وينشئ حزم jar

6. يتم استخدام java -jar 生成的包名.jar لتشغيل بيئة تكوين التطوير، وستتم تهيئة قاعدة البيانات تلقائيًا أثناء التشغيل الأول (يمكن لبيئة الإنتاج تحديد ملف التكوين المراد تحميله --spring.profiles.active="prod" )

7. تفضل بزيارة http://127.0.0.1:9000/doc.html لعرض وثائق api

8. يوصى باستخدام IDEA لفتح مجلد المشروع للتعامل مع التبعيات تلقائيًا وتسهيل التشغيل.

مكتب الاستقبال

1. git clone https://gitee.com/WindSnowLi/vue-ssr-blog.git أو git clone https://github.com/WindSnowLi/vue-ssr-blog.git استنساخ المشروع على المستوى المحلي
2. npm install
3. يمكن تعديل عنوان host في ملف config/sitemap.xml لإنشاء خريطة وصول.
4. يمكن تعديل رقم المنفذ في nuxt.config.js
5. يمكنك تعديل BASE_URL في script في ملف package.json لتحديد عنوان واجهة api الخلفية.
6. npm run build
7. npm start محليًا

وراء الكواليس

1. git clone https://gitee.com/WindSnowLi/vue-admin-blog.git أو git clone https://github.com/WindSnowLi/vue-admin-blog.git استنساخ المشروع على المستوى المحلي
2. npm install
3. يستخدم npm run dev واجهة محاكاة لمعاينة البيانات
4. قم بتعديل عنوان VUE_APP_BASE_API في ملف .env.production إلى عنوان api الواجهة الخلفية
5. npm run build:prod
6. يمكن وضع الملفات المجمعة في مجلد dist ضمن خادم http (يمكنك استخدام npm لتثبيت http-server ) للوصول إليها.

بدأ تكامل عامل الميناء

1. git clone https://gitee.com/WindSnowLi/w-blog.git أو git clone https://github.com/WindSnowLi/w-blog.git استنساخ مستودع w-blog إلى محلي
2. cd w-blog للتبديل إلى الدليل الجذر w-blog
3. sh ./step-1-clone.sh استنساخ w-blog-api و vue-ssr-blog و vue-admin-blog إلى الدليل الجذر
4. تعديل التكوينات المتعلقة بكل مشروع
   1. مشروع w-blog-api
      1. تعديل معلومات تكوين قاعدة البيانات في بيئة التطوير application-dev.yml وبيئة الإنتاج application-prod.yml ؛
      2. تعديل المعلومات المتعلقة Redis في redis.properties ؛
      3. ملاحظة: يتم تنشيط knife4j فقط في بيئة التطوير.
      4. redis可自行安装، أو يمكنك تحديد الإعدادات ذات الصلة docker-compose.yml
   2. مشروع vue-ssr-blog
      1. يمكن تعديل عنوان host في ملف config/sitemap.xml لإنشاء خريطة وصول.
      2. يمكن تعديل رقم المنفذ في nuxt.config.js
      3. يمكنك تعديل BASE_URL في script في ملف package.json لتحديد عنوان واجهة api الخلفية.
   3. مشروع vue-admin-blog
      1. قم بتعديل عنوان VUE_APP_BASE_API في ملف .env.production إلى عنوان api الواجهة الخلفية
5. sh ./step-2-build.sh يقوم بتثبيت التبعيات وإنشاء الملفات ذات الصلة
6. قم بتعديل تعيين المنفذ ذي الصلة وتعيين المجلد لـ docker-compose.yml
7. docker-compose up -d يقوم بإنشاء docker镜像وتشغيلها

عرض الواجهة

مكتب الاستقبال

وراء الكواليس

رخصة

معهد ماساتشوستس للتكنولوجيا

حقوق الطبع والنشر (ج) 2021 WindSnowLi