node vue moba

[ด้านบนของสแต็คเต็ม] Node.js + Vue.js การพัฒนาสแต็กเต็มรูปแบบของเว็บไซต์ทางการบนมือถือ Honor of Kings และแบ็กเอนด์การจัดการ

โปรเจ็กต์นี้เป็นซอร์สโค้ดที่เกี่ยวข้องของวิดีโอบทช่วยสอนระดับบนสุดของ Bilibili https://github.com/wxs77577/node-vue-moba มีการอัปเดตอย่างต่อเนื่อง... โปรดใส่ใจ

1. การเริ่มต้นใช้งาน

1. การแนะนำโครงการ
2. การติดตั้งเครื่องมือและการสร้างสภาพแวดล้อม (nodejs, npm, mongodb)
3. เริ่มต้นโครงการ

2. ภูมิหลังด้านการจัดการ

1. การสร้างอินเทอร์เฟซพื้นฐานสำหรับการจัดการพื้นหลังโดยใช้ Element UI

2. สร้างหมวดหมู่

3. รายการหมวดหมู่

4. ปรับเปลี่ยนการจำแนกประเภท

5. ลบหมวดหมู่

6. หมวดหมู่ย่อย

7. อินเทอร์เฟซ CRUD ทั่วไป

8. การจัดการอุปกรณ์

9. การอัพโหลดภาพ (multer)

10. การจัดการฮีโร่

11. แก้ไขฮีโร่ (การเชื่อมโยง, การเลือกหลายรายการ, el-select, หลายรายการ)

12. บรรณาธิการทักษะ

13. การจัดการบทความ

14. โปรแกรมแก้ไขข้อความแบบ Rich Text (ปากกาขนนก)

15. การจัดการโฆษณาหน้าแรก

16. การจัดการบัญชีผู้ดูแลระบบ (bcrypt)

17. หน้าเข้าสู่ระบบ

18. ส่วนต่อประสานการเข้าสู่ระบบ (jwt, jsonwebtoken)

19. การตรวจสอบการเข้าสู่ระบบเซิร์ฟเวอร์

20. ข้อจำกัดการกำหนดเส้นทางไคลเอ็นต์ (beforeEach, meta)

21. การยืนยันการเข้าสู่ระบบสำหรับไฟล์ที่อัปโหลด (el-upload, ส่วนหัว)

3. เว็บไซต์บนมือถือ

1. แนวคิด "รูปแบบเครื่องมือ" และ SASS (SCSS)
2. รีเซ็ตสไตล์
3. สีเว็บไซต์และคำจำกัดความของแบบอักษร (สี, ข้อความ)
4. คำจำกัดความสไตล์เค้าโครง Flex สากล (flex)
5. คำจำกัดความระยะขอบที่ใช้กันทั่วไป (ระยะขอบ, การเติม)
6. กรอบหน้าแรกและเมนูด้านบน
7. ภาพหมุนที่ด้านบนของหน้าแรก (vue Swiper)
8. ใช้สไปรท์
9. ใช้ไอคอนแบบอักษร (iconfont)
10. ส่วนประกอบการ์ด (การ์ด)
11. ส่วนประกอบของการ์ดรายการ (ลิสต์การ์ด, nav, Swiper)
12. หน้าแรก ข่าวสารและข้อมูล-ป้อนข้อมูล (+แก้ไขข้อผิดพลาดแบ็กเอนด์)
13. หน้าแรก ข่าวสารและข้อมูล-อินเทอร์เฟซข้อมูล
14. หน้าแรก ข่าวและข้อมูล-อินเทอร์เฟซจอแสดงผล
15. หน้าแรก รายชื่อฮีโร่-แยกข้อมูลเว็บไซต์อย่างเป็นทางการ
16. หน้าแรกรายการฮีโร่-ป้อนข้อมูล
17. การแสดงอินเทอร์เฟซรายการฮีโร่ในหน้าแรก
18. หน้ารายละเอียดข่าว
19. หน้ารายละเอียดข่าวที่สมบูรณ์แบบ
20. รายละเอียดฮีโร่หน้า-1-การเตรียมส่วนหน้า
21. รายละเอียดฮีโร่หน้า-2-การแก้ไขแบ็กเอนด์
22. รายละเอียดฮีโร่หน้า-3-ด้านบนของส่วนหน้า
23. รายละเอียดฮีโร่หน้า-4-สมบูรณ์แบบ

4. การเปิดตัวและการปรับใช้ (Alibaba Cloud)

1. คอมไพล์สำหรับสภาพแวดล้อมการผลิต
2. ซื้อชื่อโดเมนและเซิร์ฟเวอร์
3. การจำแนกชื่อโดเมน
4. การติดตั้งและการกำหนดค่า Nginx
5. การติดตั้งและกำหนดค่าฐานข้อมูล MongoDB
6. การติดตั้งและกำหนดค่า git ssh-key
7. Node.js ติดตั้งและกำหนดค่าอิมเมจ Taobao
8. ดึงโค้ด ติดตั้ง pm2 และเริ่มโปรเจ็กต์
9. กำหนดค่าพร็อกซีย้อนกลับ Nginx
10. ย้ายข้อมูลในเครื่องไปยังเซิร์ฟเวอร์ (mongodump)

5. ขั้นสูง

1. เปิดใช้งานการเชื่อมต่อ HTTPS ที่ปลอดภัยด้วยใบรับรอง SSL ฟรี
2. ใช้ที่เก็บข้อมูลบนคลาวด์ของ Alibaba Cloud OSS เพื่อจัดเก็บไฟล์ที่อัพโหลด