vue admin 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 .

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

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

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

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

ابدأ محليًا

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. تعديل معلومات تكوين قاعدة البيانات في بيئة التطوير application-dev.yml وبيئة الإنتاج application-prod.yml ؛ يتم تنشيط knife4j فقط في بيئة التطوير.
4. قم بإنشاء قاعدة بيانات فارغة بالاسم المحدد في تكوين قاعدة البيانات، بتشفير UTF8
5. mvn clean package -Dmaven.test.skip=true يتخطى الاختبارات وينشئ حزم jar
6. يتم استخدام java -jar 生成的包名.jar لتشغيل بيئة تكوين التطوير، وستتم تهيئة قاعدة البيانات تلقائيًا أثناء التشغيل الأول.
7. تفضل بزيارة http://127.0.0.1:8888/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 ) للوصول إليها.
7. الحساب الافتراضي: [email protected] ، كلمة المرور: 123456

عرض الواجهة

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

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

رخصة

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

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