iBlog

การเตรียมสิ่งแวดล้อม

• โหนด js เวอร์ชัน 14.15.5
• MongoDB เวอร์ชัน 4.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 เปิดเพจท้องถิ่นเบื้องหลัง

กรุณาลงทะเบียนผู้ใช้เมื่อเข้าสู่ระบบในฐานะผู้ดูแลระบบแบ็กเอนด์เป็นครั้งแรก หลังจากเข้าสู่ระบบ คุณสามารถซ่อนปุ่มลงทะเบียนเพื่อป้องกันไม่ให้บัญชีเข้าสู่ระบบรั่วไหล

ระบบการจัดการแบ็กเอนด์

• เพิ่มหมวดหมู่ใหม่

• รายการหมวดหมู่ (เพิ่ม ลบ แก้ไข ตรวจสอบ)

• เพิ่มบทความใหม่

• รายการบทความ (เพิ่ม ลบ แก้ไข ตรวจสอบ)

• รายการความคิดเห็นของบทความ

• เพิ่มลิงค์เพื่อน

• รายการลิงค์ที่เป็นมิตร (เพิ่ม ลบ แก้ไข ตรวจสอบ)

• รายการข้อความ

• รายชื่อผู้ใช้ข้อความ

• การรวมตัวแก้ไข Markdown

• ฟังก์ชั่นอัพโหลดรูปภาพ

• เพิ่มผู้ใช้ใหม่

• รายชื่อผู้ใช้ (เพิ่ม ลบ แก้ไข ตรวจสอบ)

• การเพิ่ม การลบ การแก้ไข และการใช้งานอินเทอร์เฟซการสืบค้นแบบสากล (ทรัพยากรมิดเดิลแวร์มิดเดิลแวร์)

• ฟังก์ชั่นการลงทะเบียนเข้าสู่ระบบ

• ฟังก์ชั่นการออกจากระบบ

• เพิ่มการตรวจสอบ jwt (1. ค้นหาชื่อผู้ใช้ 2. การตรวจสอบรหัสผ่าน 3. โทเค็นการส่งคืน)

• เพิ่มตัวดัก http (คำขอ, ตอบกลับ)

ระบบบล็อก

• UI หน้าแรกของบล็อก
• การใช้งานอินเทอร์เฟซหน้าแรกของบล็อก
• UI หน้าเก็บถาวรของบล็อก
• การใช้งานอินเทอร์เฟซหน้าเก็บถาวรของบล็อก
• UI หน้าแท็กบล็อก
• การใช้อินเทอร์เฟซหน้าแท็กบล็อก
• UI หน้าโพสต์บล็อก
• การใช้งานอินเทอร์เฟซหน้าบทความบล็อก
• UI หน้าลิงก์เพื่อนบล็อก
• การใช้อินเทอร์เฟซหน้าลิงก์เพื่อนบล็อก
• UI หน้าข้อความบล็อก
• การใช้งานอินเทอร์เฟซหน้าข้อความบล็อก

บันทึกการกำหนดค่า

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 แสดงความคิดเห็นโค้ดสำหรับการอัปโหลดรูปภาพในเครื่อง และสุดท้ายกรอกการกำหนดค่า OSS ของ Alibaba Cloud ของคุณ

การบรรจุและการปรับใช้โครงการ

• แพ็คเกจเว็บและโครงการผู้ดูแลระบบ (รันคำสั่ง pnpm build-all ในไดเร็กทอรีราก)
• การซื้อชื่อโดเมน
• การจำแนกชื่อโดเมน
• ซื้อเซิร์ฟเวอร์คลาวด์ Linux
• การติดตั้ง git, การเพิ่มคีย์ ssh
• การจัดการกระบวนการ pm2
• การกำหนดค่า ngnix
• การกำหนดค่า mongodb
• ย้ายข้อมูล mongodb จากภายในเครื่องไปยังเซิร์ฟเวอร์
• Qiniuyun cdn เร่งความเร็วฟรีสำหรับทั้งไซต์

สำหรับการปรับใช้เซิร์ฟเวอร์ออนไลน์ โปรดดูคู่มือนี้

ระบบการจัดการแบ็กเอนด์ของบล็อก

ระบบบล็อก

ยินดีต้อนรับStar,ปัญหา

• ดาวของคุณคือแรงบันดาลใจของฉันในการอัปเดตและบำรุงรักษาอย่างต่อเนื่อง! - -
• หากมีปัญหาใดๆ ในระหว่างการใช้งาน โปรดรายงานปัญหาต่างๆ ได้ตามสบาย

รายการสิ่งที่ต้องทำ

• การเพิ่มประสิทธิภาพ รูปภาพจำเป็นต้องได้รับการบีบอัดและโหลดไว้ล่วงหน้า
• เพิ่มฟังก์ชันการค้นหาในหน้าโพสต์บล็อก
• ปัญหาความเข้ากันได้ของเบราว์เซอร์ การปรับตัวบนมือถือ ฉันใช้เฉพาะการพัฒนาเบราว์เซอร์ Google Chrome ของคอมพิวเตอร์ของตัวเองและการปรับแต่งโทรศัพท์มือถือเท่านั้น ฉันไม่ได้ลองใช้วิธีอื่นใดเลย อย่างไรก็ตาม ไม่แนะนำให้ใช้เอฟเฟกต์การเข้าสู่ระบบด้วยคอมพิวเตอร์จะดีกว่า
• แก้ไขปัญหา SEO ของ Vue และปัญหาการกระวนกระวายใจในการรีเฟรชเพจการเรนเดอร์ เราจะทำการเรนเดอร์ล่วงหน้าของ Vue ในขณะนี้ เราจะไม่ตัดทอนการเรนเดอร์ฝั่งเซิร์ฟเวอร์ Vue หรือเรนเดอร์ฝั่งเซิร์ฟเวอร์ nuxt.js ในอนาคต
• จัดระเบียบโค้ดและแบ่งออกเป็นส่วนประกอบ ทำให้โครงสร้างชัดเจนขึ้นและลดจำนวนโค้ด
• ปรับโครงสร้างโครงการทั้งหมดใหม่โดยใช้ typescript
• ฟังก์ชั่นที่น่าสนใจจะค่อยๆ เพิ่มเข้ามาตามที่ผมนึกถึง และยังมีการพัฒนาอย่างต่อเนื่อง...