iBlog

التحضير البيئي

• Node.js v14.15.5
• مونغو دي بي v4.2.17

تثبيت قاعدة بيانات MongoDB

أدخل إلى الموقع الرسمي للتنزيل، الإصدار 4.2.17، والنظام الأساسي هو Windows، وحزمة التثبيت بتنسيق msi.

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

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

$ git clone [email protected]:miqilin21/vue-blog.git
$ cd vue-blog
$ pnpm i

2. تثبيت تبعيات مشروع الواجهة الأمامية والخلفية (المسؤول والويب) والواجهة الخلفية (الخادم):

$ pnpm install-all

3. تشغيل مشاريع الواجهة الأمامية والخلفية (المسؤول والويب) والخلفية (الخادم):

$ pnpm serve-all

4. افتح معاينة المتصفح:

يفتح http://localhost:8080 الصفحة المحلية للواجهة الأمامية؛ ويفتح http://localhost:8088 الصفحة المحلية في الخلفية.

يرجى تسجيل المستخدم عند تسجيل الدخول كمسؤول الواجهة الخلفية لأول مرة. بعد تسجيل الدخول، يمكنك إخفاء زر التسجيل لمنع تسرب حساب تسجيل الدخول.

نظام إدارة الواجهة الخلفية

• إضافة فئة جديدة

• قائمة الفئات (إضافة، حذف، تعديل، فحص)

• إضافة مقالة جديدة

• قائمة المقالات (إضافة، حذف، تعديل، فحص)

• قائمة التعليقات على المقالة

• إضافة رابط صديق

• قائمة الروابط المألوفة (إضافة، حذف، تعديل، فحص)

• قائمة الرسائل

• قائمة مستخدمي الرسالة

• تكامل محرر تخفيض السعر

• وظيفة تحميل الصور

• إضافة مستخدم جديد

• قائمة المستخدمين (إضافة، حذف، تعديل، فحص)

• تنفيذ واجهة الإضافة والحذف والتعديل والاستعلام الشاملة (مورد البرامج الوسيطة)

• وظيفة تسجيل الدخول

• وظيفة تسجيل الخروج

• إضافة التحقق من jwt (1. البحث عن اسم المستخدم 2. التحقق من كلمة المرور 3. رمز الإرجاع)

• إضافة اعتراض http (الطلب والاستجابة)

نظام المدونة

• واجهة المستخدم للصفحة الرئيسية للمدونة
• تنفيذ واجهة الصفحة الرئيسية للمدونة
• واجهة مستخدم صفحة أرشيف المدونة
• تنفيذ واجهة صفحة أرشيف المدونة
• واجهة مستخدم صفحة علامة المدونة
• تنفيذ واجهة صفحة علامة المدونة
• واجهة مستخدم صفحة منشور المدونة
• تنفيذ واجهة صفحة مقال المدونة
• واجهة مستخدم صفحة رابط صديق المدونة
• تنفيذ واجهة صفحة رابط المدونة لصديق
• واجهة مستخدم صفحة رسائل المدونة
• تنفيذ واجهة صفحة رسالة المدونة

ملاحظات التكوين

1. للرد على تعليقات الأشخاص الآخرين على صفحة التعليقات، يتم استخدام صندوق بريد QQ الخاص بك للإشعارات المتزامنة. تحتاج إلى تكوين صندوق البريد في server/plugins/sendEmail.js . كيفية الحصول على رمز تفويض صندوق بريد QQ موضح في الشكل أدناه ( في صفحة حساب إعدادات صندوق بريد QQ).

2. تكوين الحساب الرئيسي للتعليقات (يتم استخدام الحساب الرئيسي للردود عبر البريد الإلكتروني، لذا يجب أن يكون البريد الإلكتروني للحساب الذي تم إنشاؤه للتعليقات هو نفس البريد الإلكتروني الخاص برمز تفويض صندوق بريد QQ في الخطوة السابقة وفي نفس الوقت التعليق). يجب تعيين الحساب في web/src/commentConfig.js (لاحظ أن topNickName يجب أن يكون متسقًا مع لقب الحساب الرئيسي الذي أنشأه التعليق. يمكن الحصول على topParentId من صفحة الخلفية إذا تم مسح الحساب الرئيسي، يجب إعادة تكوينه.
3. فيما يتعلق بتحميل صورة الخلفية: الافتراضي هو التحميل على المستوى المحلي، وهذه الطريقة لها متطلبات أعلى للخادم. وبطبيعة الحال، ستتأثر سرعة تحميل الواجهة الأمامية. يمكنك اختيار استخدام OSS الخاص بـ Alibaba Cloud للتحميل والتخزين. تحتاج إلى إضافة server/routes/admin/index.js ، وقم بالتعليق على الكود الخاص بتحميل الصور المحلية، وأخيرًا قم بملء تكوين Alibaba Cloud oss ​​الخاص بك.

تعبئة المشروع ونشره

• حزمة مشروع الويب والإدارة (قم بتشغيل الأمر pnpm build-all في الدليل الجذر)
• شراء اسم النطاق
• حل اسم المجال
• شراء خادم سحابي لينكس
• تثبيت git، إضافة مفتاح ssh
• إدارة العمليات PM2
• تكوين إنجنيكس
• تكوين مونجودب
• ترحيل بيانات mongodb من المحلية إلى الخادم
• Qiniuyun cdn تسريع مجاني للموقع بأكمله

لنشر الخادم عبر الإنترنت، يرجى الرجوع إلى هذا الدليل.

نظام إدارة الواجهة الخلفية للمدونة

نظام المدونة

مرحباً بالنجمة، القضايا

• نجمك هو حافزي للتحديثات والصيانة المستمرة! ! !
• إذا كانت هناك أية مشكلات أثناء الاستخدام، فلا تتردد في الإبلاغ عن المشكلات

قائمة المهام

• تحسين الأداء، يجب ضغط الصور وتحميلها مسبقًا
• إضافة وظيفة البحث إلى صفحة منشور المدونة
• مشكلات توافق المتصفح، والتكيف مع الأجهزة المحمولة. لقد استخدمت فقط تأثيرات تطوير متصفح Google Chrome والتكيف مع الهاتف المحمول على جهاز الكمبيوتر الخاص بي، ولم أجرب أي طرق أخرى، ومع ذلك، لا يوصى باستخدام تأثير تسجيل الدخول للكمبيوتر.
• حل مشكلة SEO الخاصة بـ Vue ومشكلة الارتعاش الناتجة عن تحديث صفحة العرض. سنقوم بالعرض المسبق لـ Vue في الوقت الحالي، ولا نستبعد إجراء العرض من جانب خادم Vue أو العرض من جانب خادم nuxt.js في المستقبل.
• تنظيم الكود وتقسيمه إلى مكونات. اجعل الهيكل أكثر وضوحًا وقلل من كمية التعليمات البرمجية
• إعادة بناء المشروع بأكمله باستخدام الآلة الكاتبة
• سيتم إضافة وظائف مثيرة للاهتمام تدريجياً كلما فكرت بها، وهي قيد التطوير المستمر...