alibaixiu

การแนะนำโครงการ

Alibaba Baixiu ซึ่งเป็นระบบจัดการเนื้อหาแบ่งออกเป็น 2 ฟังก์ชันหลัก ได้แก่ การจัดการเนื้อหาและการแสดงเนื้อหา

1. โมดูลฟังก์ชัน

1.1 การจัดการเนื้อหา

โมดูล	การทำงาน
ผู้ใช้	เข้าสู่ระบบ ออกจากระบบ การเพิ่มผู้ใช้ การลบ การแก้ไข และแบบสอบถาม
บทความ	การจัดการบทความ
การจำแนกประเภท	การจัดการการจำแนกประเภท
ความคิดเห็น	การจัดการความคิดเห็น
การตั้งค่าเว็บไซต์	คำสำคัญ คำอธิบาย โลโก้เว็บไซต์ รูปภาพแบบหมุน

1.2 การแสดงเนื้อหา

โมดูล	การทำงาน
หน้าแรก	การนำทาง การแสดงข้อมูลบทความ
หน้ารายการ	แสดงรายการบทความตามหมวดหมู่
หน้ารายละเอียด	แสดงรายละเอียดบทความและใช้ฟังก์ชันแสดงความคิดเห็น

2. โหมดการพัฒนา

2.1 รูปแบบการพัฒนาแบบผสมของส่วนหน้าและส่วนหลัง

โค้ด HTML และข้อมูลทั้งหมดเชื่อมต่อกันทางฝั่งเซิร์ฟเวอร์ และเนื้อหาทั้งหมดจะถูกส่งไปยังไคลเอนต์พร้อมกัน เบราว์เซอร์จะรันโค้ดและนำเสนอเนื้อหาให้กับผู้ใช้

คำถาม:

1. นักพัฒนาส่วนหน้าและส่วนหลังไม่คุ้นเคยกับโค้ดของกันและกัน เป็นเรื่องยากมากสำหรับการพัฒนาแบบผสมที่จะจัดการกับโค้ดของกันและกัน
2. ในระหว่างกระบวนการพัฒนา โค้ดจะทับซ้อนกันอย่างหลีกเลี่ยงไม่ได้ ทำให้ภาระงานเพิ่มขึ้นเป็นสองเท่า

2.2 รูปแบบการพัฒนาการแยกส่วนหน้าและส่วนหลัง

ข้อดี มีความรับผิดชอบและแบ่งงานชัดเจน มีการพัฒนาอิสระ ไม่มีอิทธิพลซึ่งกันและกัน

3. โครงสร้างโครงการ

การแบ่งชั้นของระบบ	ใช้เทคโนโลยี
ชั้นข้อมูล	mongoDB
ชั้นบริการ	node.js (ด่วน)
ลูกค้า	เทมเพลตศิลปะ, jQuery, แบบอักษรที่ยอดเยี่ยม, การปัดนิ้ว

4. การตั้งค่าสภาพแวดล้อมการทำงานของโครงการ (สิ่งที่คุณต้องรู้เพื่อดำเนินโครงการ)

1. ติดตั้งซอฟต์แวร์ node.js และทดสอบว่าติดตั้งสำเร็จหรือไม่
   1. Win + R เปิดโปรแกรมที่รันอยู่ในระบบ Windows ป้อน PowerShell ในโปรแกรมที่รันอยู่แล้วกด Enter เพื่อเปิดโปรแกรมบรรทัดคำสั่ง
   2. ป้อนคำสั่ง node -v เพื่อตรวจสอบเวอร์ชันของ node.js หากหมายเลขเวอร์ชันถูกเอาต์พุตในโปรแกรมบรรทัดคำสั่งและไม่มีการรายงานข้อผิดพลาด แสดงว่าการติดตั้งสำเร็จ
2. ติดตั้งซอฟต์แวร์ mongodb และ mongodb-compass
3. คัดลอกโฟลเดอร์โครงการ Alibaba Baixiu ไปยังฮาร์ดดิสก์ (โปรแกรมฝั่งเซิร์ฟเวอร์)
4. ไปที่ไดเร็กทอรีรากของโปรเจ็กต์ในเครื่องมือบรรทัดคำสั่ง
   1. กดปุ่ม Shift ค้างไว้ คลิกขวาแล้วเลือก เปิดหน้าต่าง PowerShell ที่นี่
5. ใช้คำสั่ง npm install เพื่อติดตั้งไฟล์อ้างอิงที่จำเป็นสำหรับโปรเจ็กต์
6. เปิดไฟล์ app.js และแก้ไขส่วนการเชื่อมต่อฐานข้อมูลในบรรทัด 47: 'mongodb://itcast:itcast@localhost:27017/alibaixiu'

สำหรับ 'mongodb://localhost:27017/alibaixiu'

(1) เหตุผล: คุณไม่ได้สร้างบัญชีการเชื่อมต่อฐานข้อมูล mongodb และข้อมูลรหัสผ่าน เราเลือกที่จะใช้วิธีการเริ่มต้นในการเข้าสู่ฐานข้อมูล mongodb

(2) หากคุณต้องการเข้าสู่ระบบฐานข้อมูลด้วยบัญชีและรหัสผ่านของคุณ โปรดดูที่: https://www.cnblogs.com/b02330224/p/10049395.html

ป้อนคำสั่งตามลำดับบนบรรทัดคำสั่ง: use alibaixiu #Enter ฐานข้อมูล alibaixiu

db.createUser({user:'itcast',pwd:'itcast',roles:['readWrite']}) #สร้างผู้ใช้ฐานข้อมูล

​ หากคุณได้รับแจ้งว่าสิทธิ์ไม่เพียงพอ โปรดดูลิงก์ด้านบนและเข้าสู่ระบบฐานข้อมูลด้วยบัญชีผู้ดูแลระบบ mongodb ก่อน

7. (ขั้นตอนใหม่) เมื่อเร็วๆ นี้ ข้อมูลฐานข้อมูล db_data ได้รับการอัปโหลด และสามารถป้อนฐานข้อมูล alibaixiu ผ่านซอฟต์แวร์ mongodb-compass ได้

สร้าง users , comment , slides , categories , posts , settings การตั้งค่าที่มีชื่อเดียวกับข้อมูล json ในโฟลเดอร์ db_data

(Collection) และสุดท้ายก็นำเข้าข้อมูล json ที่เกี่ยวข้องในแต่ละคอลเลกชั่นตามลำดับ

8. ป้อน node app.js ในเครื่องมือบรรทัดคำสั่งเพื่อเริ่มโปรเจ็กต์

5. สิ่งที่ควรทราบหลังจากดำเนินโครงการ (สิ่งที่ต้องรู้เพื่อดำเนิน好看的项目)

1. เปิดเบราว์เซอร์และป้อน localhost:3000/admin/login.html ในแถบที่อยู่ของเบราว์เซอร์เพื่อเข้าสู่หน้าเข้าสู่ระบบ

กรอกชื่อผู้ใช้เริ่มต้นของระบบ: (เดิม) [email protected] (ตอนนี้) [email protected] รหัสผ่าน: 123456 เข้าสู่หน้าผู้ดูแลระบบ

2. เนื่องจากไม่ได้อัปโหลดไฟล์ฐานข้อมูล จึงจำเป็นต้องเพิ่มข้อมูลทั้งหมดด้วยตนเอง (หากแนะนำข้อมูล json ใน db_data ให้ข้ามขั้นตอนที่ 2-10)

3. เข้าสู่หน้าผู้ดูแลระบบและเปลี่ยนข้อมูลบัญชีของคุณก่อน (เปลี่ยนรหัสผ่าน ฯลฯ ) และอัปโหลดภาพประจำตัวของผู้ใช้

4. จากนั้นเพิ่มข้อมูลบทความ ข้อมูลการตั้งค่าระบบ และข้อมูลรูปภาพแบบหมุน (ไม่จำเป็นต้องเรียงลำดับ เพิ่มวิธีการกรอกข้อมูลแบบฟอร์ม การเลือกไฟล์รูปภาพ ฯลฯ)

5. โปรดทราบว่าเมื่อเปลี่ยนข้อมูลการจำแนกประเภท ไอคอนของข้อมูลการจำแนกจะต้องค้นหาด้วยแบบอักษรที่ยอดเยี่ยม เช่น fa-phone, fa-gift เป็นต้น

รูปแบบชื่อคลาสรูปภาพที่ค้นหาด้วย Font-Awesome คือ: fa fa-xxx-xxx คุณจะต้องเพิ่มส่วน fa-xxx-xxx หลังจากนั้นเท่านั้น

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

หรือใช้สิทธิ์เพิ่มผู้ใช้ของผู้ดูแลระบบเพื่อเพิ่มผู้ใช้ทั่วไป

7. หลังจากเพิ่มข้อมูลพื้นหลังแล้ว ให้ใช้บัญชีผู้ใช้ปกติเพื่อเข้าสู่หน้าแสดงบทความส่วนหน้า (หากคุณต้องการให้เนื้อหาของหน้าสมบูรณ์ยิ่งขึ้น

แนะนำให้เพิ่มข้อมูลบทความประมาณ 15 ชิ้น และข้อมูลหมวดหมู่ประมาณ 4 ชิ้น)

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

ป้อน localhost:3000 ในแถบที่อยู่เพื่อเข้าสู่หน้าแสดงบทความด้านหน้า

9. หากผู้ดูแลระบบเปิดฟังก์ชันแสดงความคิดเห็น ฟังก์ชันแสดงความคิดเห็นจะแสดงในหน้ารายละเอียดบทความด้านหน้า หากผู้ดูแลระบบปิดฟังก์ชันแสดงความคิดเห็น ฟังก์ชันแสดงความคิดเห็นจะปรากฏในหน้ารายละเอียดบทความด้านหน้า

เพจไม่แสดงฟังก์ชันแสดงความคิดเห็น

10. หากผู้ดูแลระบบเปิดฟังก์ชั่นตรวจสอบความคิดเห็น ความคิดเห็นของผู้ใช้จะไม่ปรากฏบนเพจทันที และผู้ดูแลระบบจะต้องอยู่ในพื้นหลัง

ความคิดเห็นจะได้รับการตรวจสอบในหน้าการจัดการและจะแสดงในหน้าบทความหลังจากได้รับการอนุมัติแล้วเท่านั้น หากผู้ดูแลระบบปิดฟังก์ชันแสดงความคิดเห็น

จะปรากฏในหน้ารายละเอียดบทความ

11. หากโครงการยังไม่สามารถดำเนินการได้โปรดติดต่อผมที่ 1565066165

6.ที่อยู่โครงการ

หน้าแรก: http://luoxu.ltd:3000/ (เปลี่ยนเป็น http://luoxucoder.icu ชั่วคราวในระหว่างการจดทะเบียนชื่อโดเมน)

หน้าเข้าสู่ระบบ: http://luoxu.ltd:3000/admin/login.html (ในทำนองเดียวกัน)

การแสดงเอฟเฟกต์โครงการ

1. หน้าแสดงบทความส่วนหน้า

2. หน้าการจำแนกบทความส่วนหน้า

3. หน้ารายละเอียดบทความส่วนหน้า

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

5. หน้าลงทะเบียน

6.หน้าการจัดการแบ็กเอนด์

ฟังก์ชั่นโครงการ

1. ฟังก์ชั่นผู้ใช้

1.1 เข้าสู่ระบบ

1. เพิ่มเหตุการณ์คลิกสำหรับปุ่มเข้าสู่ระบบ
2. รับชื่อผู้ใช้และรหัสผ่านที่ผู้ใช้ป้อนในกล่องข้อความ
3. ตรวจสอบว่าผู้ใช้ได้ป้อนชื่อผู้ใช้และรหัสผ่านหรือไม่ หากไม่เป็นเช่นนั้น ให้ป้องกันไม่ให้โปรแกรมทำงานด้านล่างและแจ้งให้ผู้ใช้ป้อนชื่อผู้ใช้และรหัสผ่าน
4. เรียกอินเทอร์เฟซที่ใช้ฟังก์ชันการเข้าสู่ระบบ หากการเข้าสู่ระบบสำเร็จ ระบบจะข้ามไปที่หน้าแรกของการจัดการข้อมูล หากการเข้าสู่ระบบล้มเหลว ระบบจะแจ้งว่าชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง

1.2 การสกัดกั้นการเข้าสู่ระบบ

1. ใช้แท็กสคริปต์เพื่อโหลดที่อยู่อินเทอร์เฟซที่เซิร์ฟเวอร์ให้มา
2. กำหนดค่าของตัวแปร isLogin หากค่าเป็นเท็จ ให้ข้ามไปที่หน้าเข้าสู่ระบบ

1.3 เพิ่มผู้ใช้

1. เพิ่มแอตทริบิวต์ชื่อให้กับแต่ละรายการในแบบฟอร์มที่เพิ่มฟังก์ชันผู้ใช้ และค่าแอตทริบิวต์ชื่อจะต้องสอดคล้องกับชื่อพารามิเตอร์ที่จำเป็นในเอกสารอินเทอร์เฟซ
2. ผูกเหตุการณ์การส่งเข้ากับแบบฟอร์มและป้องกันไม่ให้ส่งแบบฟอร์มตามค่าเริ่มต้นในฟังก์ชันตัวจัดการเหตุการณ์
3. รับเนื้อหาที่ผู้ใช้ป้อนในแบบฟอร์มในฟังก์ชันตัวจัดการเหตุการณ์
4. เรียกส่วนต่อประสานผู้ใช้เพิ่มและส่งเนื้อหาที่ได้รับไปยังเซิร์ฟเวอร์ผ่านส่วนต่อประสาน หากการดำเนินการสำเร็จ เพจจะถูกรีเฟรช หากการดำเนินการล้มเหลว ระบบจะแจ้งให้ผู้ใช้ทราบ

1.4 แสดงรายการผู้ใช้

1. ส่งคำขอ Ajax ไปยังเซิร์ฟเวอร์เพื่อขอข้อมูลรายชื่อผู้ใช้
2. ขั้นตอนที่สองคือการใช้เครื่องมือเทมเพลตเพื่อแยกข้อมูลและเทมเพลต html
3. ขั้นตอนที่สามคือการแสดงเนื้อหาที่แยกส่วนบนเพจ

1.5 การอัพโหลดอวตารของผู้ใช้

1. เพิ่มเหตุการณ์ onchange ให้กับตัวควบคุมการเลือกไฟล์และรับไฟล์ที่เลือกโดยผู้ใช้ในฟังก์ชันการจัดการเหตุการณ์
2. สร้างวัตถุ formData เพื่ออัปโหลดไฟล์รูปภาพ
3. เรียกอินเทอร์เฟซการอัปโหลดไฟล์รูปภาพเพื่อใช้งานการอัปโหลดรูปภาพ
4. เพิ่มฟิลด์ที่ซ่อนอยู่ใหม่ในแบบฟอร์มเพิ่มผู้ใช้ใหม่และจัดเก็บที่อยู่รูปภาพไว้ในฟิลด์ที่ซ่อนอยู่

1.6 การแสดงรายชื่อผู้ใช้

1. ส่งคำขอ Ajax ไปยังเซิร์ฟเวอร์เมื่อเพจโหลดเพื่อขอข้อมูลรายชื่อผู้ใช้
2. ใช้กลไกเทมเพลตเพื่อเชื่อมต่อข้อมูลและเทมเพลต html
3. แสดงเนื้อหาที่ต่อเชื่อมบนหน้า

1.7 การแก้ไขข้อมูลผู้ใช้

1. เพิ่มกิจกรรมสำหรับการคลิกปุ่มแก้ไขผ่านการมอบหมายกิจกรรม
2. รับค่า ID ของผู้ใช้ที่ถูกคลิกปัจจุบันในฟังก์ชันการจัดการเหตุการณ์
3. รับข้อมูลรายละเอียดของผู้ใช้ตามรหัสผู้ใช้ และแสดงข้อมูลรายละเอียดของผู้ใช้ลงในแบบฟอร์มทางด้านซ้ายผ่านกลไกจัดการเทมเพลต
4. เพิ่มเหตุการณ์การคลิกสำหรับปุ่มแก้ไข รับเนื้อหาที่ผู้ใช้ป้อนในแบบฟอร์มในฟังก์ชันการประมวลผลเหตุการณ์ และเรียกอินเทอร์เฟซการแก้ไขข้อมูลผู้ใช้เพื่อใช้ฟังก์ชันการแก้ไขข้อมูลผู้ใช้

1.8 ลบผู้ใช้

1. เพิ่มเหตุการณ์คลิกเพื่อลบปุ่ม
2. ยืนยันว่าผู้ใช้ต้องการลบการดำเนินการหรือไม่
3. รับ ID ของผู้ใช้ที่ถูกคลิกในปัจจุบัน
4. เรียกส่วนติดต่อผู้ใช้แบบลบเพื่อลบผู้ใช้ตาม ID หากการลบสำเร็จ ให้รีเฟรชเพจปัจจุบันเพื่อให้เพจแสดงเนื้อหาล่าสุด

1.9 ลบผู้ใช้เป็นกลุ่ม

1. จัดการสถานะการตรวจสอบของช่องทำเครื่องหมาย
   1. เมื่อเลือกปุ่มเลือกทั้งหมด ผู้ใช้ทั้งหมดจะถูกเลือก เมื่อยกเลิกการเลือกปุ่มเลือกทั้งหมด ผู้ใช้ทั้งหมดจะถูกยกเลิกการเลือก
   2. เมื่อสถานะของปุ่มช่องทำเครื่องหมายด้านหน้าผู้ใช้มีการเปลี่ยนแปลง ให้ตรวจสอบว่าผู้ใช้รายใดอยู่ในสถานะที่ไม่ได้เลือกหรือไม่ หากเป็นเช่นนั้น ให้ยกเลิกสถานะที่เลือกของปุ่มเลือกทั้งหมด สถานะที่เลือก ในขณะนี้ ปุ่มเลือกทั้งหมดตั้งค่าเป็นสถานะที่เลือก
2. จัดการสถานะของปุ่มลบจำนวนมาก
   1. เมื่อเลือกปุ่มเลือกทั้งหมด ปุ่มลบแบทช์จะปรากฏขึ้น เมื่อยกเลิกการเลือกปุ่มเลือกทั้งหมด ปุ่มลบแบทช์จะถูกซ่อน
   2. เมื่อสถานะปุ่มกล่องกาเครื่องหมายต่อหน้าผู้ใช้เปลี่ยนแปลง ให้ตรวจสอบสถานะที่เลือกของผู้ใช้ทั้งหมด หากเลือกผู้ใช้คนใดคนหนึ่ง ให้แสดงปุ่มลบแบทช์ หากไม่ได้เลือกผู้ใช้ทั้งหมด ให้ซ่อนปุ่มลบแบทช์
3. ใช้ฟังก์ชันการลบผู้ใช้เป็นกลุ่ม
   1. เพิ่มเหตุการณ์การคลิกลงในปุ่มลบเป็นกลุ่ม ในฟังก์ชันการประมวลผลเหตุการณ์การคลิก ให้จัดเก็บ ID ผู้ใช้ที่เลือกทั้งหมดไว้ในอาร์เรย์
   2. เรียกส่วนต่อประสานผู้ใช้ลบเพื่อใช้ฟังก์ชันลบผู้ใช้

1.10 เปลี่ยนรหัสผ่าน

1. เพิ่มแอตทริบิวต์ชื่อให้กับแต่ละรายการในแบบฟอร์มการเปลี่ยนแปลงรหัสผ่าน ค่าของแอตทริบิวต์ชื่อจะต้องสอดคล้องกับชื่อพารามิเตอร์ในอินเทอร์เฟซ
2. เพิ่มเหตุการณ์การส่งแบบฟอร์มลงในแบบฟอร์มการเปลี่ยนรหัสผ่าน และในฟังก์ชันตัวจัดการเหตุการณ์ ป้องกันพฤติกรรมการส่งเริ่มต้นของแบบฟอร์ม
3. รับเนื้อหาที่ผู้ใช้ป้อนในแบบฟอร์ม
4. เรียกอินเทอร์เฟซการแก้ไขรหัสผ่านเพื่อใช้ฟังก์ชันการแก้ไขรหัสผ่าน หากแก้ไขรหัสผ่านสำเร็จ ให้ข้ามไปที่หน้าเข้าสู่ระบบและอนุญาตให้ผู้ใช้เข้าสู่ระบบอีกครั้ง

1.11 แสดงข้อมูลผู้ใช้ที่เข้าสู่ระบบ

1. ตามค่าของตัวแปร userId ให้รับข้อมูลของผู้ใช้ที่ล็อกอินในปัจจุบันจากเซิร์ฟเวอร์
2. แสดงข้อมูลผู้ใช้ทางด้านซ้ายของหน้า

2. ฟังก์ชั่นการจำแนกประเภท

2.1 เพิ่มหมวดหมู่

1. เพิ่มแอตทริบิวต์ชื่อให้กับแต่ละรายการในแบบฟอร์ม ค่าของแอตทริบิวต์ชื่อจะต้องสอดคล้องกับชื่อพารามิเตอร์ที่ต้องการในเอกสารอินเทอร์เฟซ
2. เพิ่มเหตุการณ์การส่งแบบฟอร์มลงในแบบฟอร์ม และในฟังก์ชันตัวจัดการเหตุการณ์ ป้องกันพฤติกรรมเริ่มต้นของการส่งแบบฟอร์ม
3. รับเนื้อหาที่ผู้ใช้ป้อนในแบบฟอร์ม
4. เรียกอินเทอร์เฟซการเพิ่มหมวดหมู่เพื่อใช้ฟังก์ชันการเพิ่มหมวดหมู่

2.2 การแสดงข้อมูลจำแนก

1. ส่งคำขอ Ajax ไปยังเซิร์ฟเวอร์เพื่อขอข้อมูลหน้าหมวดหมู่
2. ใช้กลไกเทมเพลตเพื่อประกบข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์ด้วยเทมเพลต HTML
3. แสดงเนื้อหาที่ต่อเชื่อมบนหน้า

2.3 การแก้ไขข้อมูลที่เป็นความลับ

1. เพิ่มเหตุการณ์การคลิกลงในปุ่มแก้ไขผ่านการมอบหมายเหตุการณ์ และรับ ID ข้อมูลการจัดหมวดหมู่เพื่อแก้ไขในฟังก์ชันการประมวลผลเหตุการณ์
2. เรียกอินเทอร์เฟซตามรหัสเพื่อรับข้อมูลโดยละเอียดของข้อมูลที่จัดประเภท
3. ใช้กลไกเทมเพลตเพื่อประกบข้อมูลที่จัดประเภทและอักขระ HTML หลังจากการประกบกันเสร็จสิ้น เนื้อหาจะถูกแสดงผลลงในเพจ
4. เพิ่มเหตุการณ์การคลิกลงในปุ่มแก้ไข และรับเนื้อหาที่ผู้ดูแลระบบป้อนในแบบฟอร์มในฟังก์ชันตัวจัดการเหตุการณ์
5. เรียกอินเทอร์เฟซข้อมูลการจำแนกประเภทการปรับเปลี่ยนเพื่อใช้ฟังก์ชันการปรับเปลี่ยนข้อมูลการจำแนกประเภท

2.4 การลบข้อมูลจำแนก

1. เพิ่มเหตุการณ์การคลิกลงในปุ่มลบผ่านการมอบหมายเหตุการณ์ และกล่องยืนยันการลบจะปรากฏขึ้นในตัวจัดการเหตุการณ์การคลิก
2. หลังจากที่ผู้ใช้คลิกเพื่อยืนยันการลบ ให้รับ ID ของข้อมูลที่จัดประเภทที่จะลบ
3. เรียกอินเทอร์เฟซข้อมูลหมวดหมู่การลบเพื่อใช้ฟังก์ชันการลบข้อมูลหมวดหมู่ หากลบหมวดหมู่สำเร็จ ให้รีเฟรชเพจ

3. ฟังก์ชั่นบทความ

3.1 เพิ่มบทความ

1. รับข้อมูลการจัดหมวดหมู่บทความและแสดงข้อมูลในรายการแบบเลื่อนลงของหมวดหมู่เพื่อให้ผู้ดูแลระบบเลือก
2. อัปโหลดภาพหน้าปกบทความและบันทึกที่อยู่ภาพที่อัปโหลดในช่องที่ซ่อนอยู่
3. เพิ่มแอตทริบิวต์ชื่อให้กับแต่ละรายการในแบบฟอร์มเพิ่มบทความ และค่าแอตทริบิวต์ชื่อจะต้องสอดคล้องกับชื่อพารามิเตอร์ที่จำเป็นในอินเทอร์เฟซ
4. ผูกเหตุการณ์การส่งแบบฟอร์มเข้ากับแบบฟอร์มเพิ่มบทความ และป้องกันไม่ให้ส่งแบบฟอร์มตามค่าเริ่มต้นในฟังก์ชันตัวจัดการเหตุการณ์
5. รับเนื้อหาที่ผู้ดูแลระบบป้อนในแบบฟอร์ม
6. ส่งคำขอเพื่อเพิ่มบทความไปยังเซิร์ฟเวอร์เพื่อใช้ฟังก์ชันการเพิ่มบทความ หลังจากเพิ่มบทความเรียบร้อยแล้ว บทความจะข้ามไปยังหน้ารายการบทความ

3.2 การแสดงข้อมูลรายการบทความ

1. เมื่อเพจปรากฏขึ้น ให้ส่งคำขอไปยังเซิร์ฟเวอร์สำหรับข้อมูลรายการบทความ
2. ใช้กลไกเทมเพลตเพื่อประกบข้อมูลรายการบทความและ HTML หลังจากการประกบกันเสร็จสิ้น เนื้อหาจะปรากฏบนเพจ
3. ใช้ฟังก์ชันเพจข้อมูลรายการตามข้อมูลเพจ

3.3 การกรองรายการข้อมูลบทความ

1. ส่งคำขอไปยังเซิร์ฟเวอร์เพื่อขอข้อมูลการจำแนกประเภทบทความและแสดงข้อมูลในรายการแบบเลื่อนลงของหมวดหมู่ที่เกี่ยวข้อง
2. เพิ่มเหตุการณ์การคลิกลงในปุ่มตัวกรองและรับเนื้อหาที่เลือกโดยผู้ใช้ในฟังก์ชันตัวจัดการเหตุการณ์
3. ส่งคำขอไปยังเซิร์ฟเวอร์เพื่อขอข้อมูลรายการบทความที่ผู้ดูแลระบบร้องขอและแสดงข้อมูลบนเพจ

3.4 การแก้ไขบทความ

1. เพิ่มลิงก์ไปยังปุ่มแก้ไข และส่งรหัสบทความเป็นพารามิเตอร์การค้นหาของลิงก์ไปยังหน้าแก้ไขบทความ
2. รับพารามิเตอร์ id ในแถบที่อยู่ในหน้าแก้ไขบทความ
3. รับรายละเอียดบทความตาม id และแสดงข้อมูลบทความในแบบฟอร์มแก้ไขบทความ
4. ผูกเหตุการณ์การส่งแบบฟอร์มเพื่อแก้ไขแบบฟอร์มบทความ และป้องกันไม่ให้ส่งแบบฟอร์มตามค่าเริ่มต้นในฟังก์ชันตัวจัดการเหตุการณ์
5. รับเนื้อหาที่ผู้ใช้ป้อนในแบบฟอร์ม
6. ส่งคำขอไปยังเซิร์ฟเวอร์เพื่อใช้ฟังก์ชันการแก้ไขข้อมูลบทความ หากแก้ไขข้อมูลบทความสำเร็จ ให้ข้ามไปที่หน้ารายการบทความ

3.5 การลบบทความ

1. เพิ่มเหตุการณ์การคลิกไปที่ปุ่มลบผ่านการมอบหมายเหตุการณ์ ป๊อปอัปกล่องยืนยันการลบในฟังก์ชันการประมวลผลเหตุการณ์ และยืนยันการดำเนินการลบกับผู้ดูแลระบบ
2. รับรหัสของบทความที่จะลบในฟังก์ชันตัวจัดการเหตุการณ์
3. ส่งคำขอ Ajax เพื่อดำเนินการลบ การดำเนินการลบเสร็จสมบูรณ์และรีเฟรชเพจแล้ว

3.6 การแนะนำบทความยอดนิยม

1. ส่งคำขอไปยังเซิร์ฟเวอร์เพื่อรับข้อมูลคำแนะนำยอดนิยม

2. ใช้เอ็นจิ้นเทมเพลตเพื่อประกบข้อมูลและเทมเพลต html และแสดงเนื้อหาที่ประกบกันบนหน้า

    var str = '<div>{{name}}</div>' ;
   var obj = { name : '张三' }
   var html = template . render ( str , obj ) ;

3.7 การค้นหาบทความ

1. ผูกเหตุการณ์การส่งแบบฟอร์มเข้ากับแบบฟอร์มการค้นหา
2. ป้องกันพฤติกรรมการส่งเริ่มต้นของแบบฟอร์มในตัวจัดการเหตุการณ์ และรับคำสำคัญในการค้นหาที่ผู้ใช้ป้อน
3. ข้ามไปที่หน้าผลการค้นหาและส่งคำค้นหาที่ผู้ใช้ป้อนไปยังหน้าผลการค้นหา
4. ในหน้าผลการค้นหา คำสำคัญที่ผู้ใช้ป้อนจะได้รับจากพารามิเตอร์การค้นหาในแถบที่อยู่
5. อินเทอร์เฟซการค้นหาถูกเรียกตามคำสำคัญในการค้นหาที่ผู้ใช้ป้อน เมื่อเซิร์ฟเวอร์ส่งคืนข้อมูล ข้อมูลผลการค้นหาและเทมเพลต HTML จะถูกเชื่อมต่อกัน และในที่สุดเนื้อหาที่เชื่อมต่อก็จะแสดงบนเพจ

4.ฟังก์ชั่นแสดงความคิดเห็น

4.1 แสดงรายการความคิดเห็น

1. ส่งคำขอไปยังเซิร์ฟเวอร์เพื่อรับข้อมูลรายการความคิดเห็น
2. ใช้กลไกเทมเพลตเพื่อประกบข้อมูลรายการความคิดเห็นและเทมเพลต HTML จากนั้นแสดงเนื้อหาบนเพจหลังจากการประกบเสร็จสมบูรณ์
3. ใช้ฟังก์ชันเพจตามข้อมูลเพจ

4.2 การกลั่นกรองความคิดเห็น

1. เปลี่ยนข้อความในปุ่มกลั่นกรองตามสถานะของความคิดเห็นปัจจุบัน หากความคิดเห็นปัจจุบันไม่ได้รับการตรวจสอบ ปุ่มจะแสดงการอนุมัติ หากความคิดเห็นปัจจุบันได้รับการตรวจสอบ ปุ่มจะแสดง ยกเลิก
2. เพิ่มเหตุการณ์การคลิกลงในปุ่มตรวจสอบผ่านการมอบหมายเหตุการณ์ และรับสถานะของความคิดเห็นปัจจุบันในฟังก์ชันการจัดการเหตุการณ์
3. ส่งคำขอไปยังเซิร์ฟเวอร์และแจ้งเซิร์ฟเวอร์ว่าควรเปลี่ยนความคิดเห็นเป็นสถานะใด หากการแก้ไขสำเร็จ ให้รีเฟรชเพจเพื่อให้ข้อมูลล่าสุดปรากฏบนเพจ

4.3 การลบความคิดเห็น

1. เพิ่มเหตุการณ์คลิกไปที่ปุ่มลบผ่านการมอบหมายเหตุการณ์ และเปิดกล่องยืนยันการลบขึ้นมาในฟังก์ชันการจัดการเหตุการณ์
2. รับค่า ID ของความคิดเห็นที่ผู้ดูแลระบบต้องการลบ
3. ส่งคำขอไปยังเซิร์ฟเวอร์เพื่อลบความคิดเห็น หากลบความคิดเห็นสำเร็จ ให้รีเฟรชเพจ

5.ฟังก์ชั่นแผนภูมิแบบหมุน

5.1 เพิ่มข้อมูลภาพหมุน

1. ใช้ฟังก์ชันอัพโหลดรูปภาพและบันทึกที่อยู่รูปภาพที่อัพโหลดในช่องที่ซ่อนอยู่
2. เพิ่มแอตทริบิวต์ชื่อให้กับแต่ละรายการในแบบฟอร์มรูปภาพแบบหมุน ค่าของแอตทริบิวต์ชื่อจะต้องสอดคล้องกับชื่อพารามิเตอร์ที่จำเป็นในอินเทอร์เฟซ
3. ผูกเหตุการณ์การส่งแบบฟอร์มเข้ากับแบบฟอร์มภาพหมุน และป้องกันไม่ให้ส่งแบบฟอร์มตามค่าเริ่มต้นในฟังก์ชันตัวจัดการเหตุการณ์
4. รับเนื้อหาที่ผู้ดูแลระบบป้อนในแบบฟอร์ม
5. ส่งคำขอไปยังเซิร์ฟเวอร์เพื่อใช้ฟังก์ชันการเพิ่มข้อมูลภาพหมุน หากเพิ่มข้อมูลสำเร็จ ให้รีเฟรชหน้า

5.2 การแสดงข้อมูลแผนภูมิแบบหมุน

1. ส่งคำขอไปยังเซิร์ฟเวอร์สำหรับข้อมูลรายการภาพหมุน
2. ใช้กลไกเทมเพลตเพื่อประกบข้อมูลรายการรูปภาพแบบหมุนและเทมเพลต HTML หลังจากการประกบกันเสร็จสิ้น เนื้อหาจะแสดงบนเพจ

5.3 การลบข้อมูลภาพหมุน

1. เพิ่มเหตุการณ์คลิกไปที่ปุ่มลบผ่านการมอบหมายกิจกรรม
2. ป๊อปอัปกล่องยืนยันการลบในฟังก์ชันตัวจัดการเหตุการณ์
3. รับ ID ของข้อมูลรูปภาพแบบหมุนที่จะลบ
4. ส่งคำขอไปยังเซิร์ฟเวอร์เพื่อดำเนินการลบ การดำเนินการลบเสร็จสมบูรณ์และรีเฟรชเพจแล้ว

5.4 การแสดงข้อมูลแผนภูมิแบบหมุน (อัปเดต)

1. ส่งคำขอไปยังเซิร์ฟเวอร์สำหรับข้อมูลแบบหมุน
2. ใช้เอ็นจิ้นเทมเพลตเพื่อเชื่อมต่อข้อมูลและสตริง HTML และแสดงเนื้อหาที่เชื่อมต่อบนหน้า
3. ย้ายโค้ด JavaScript ดั้งเดิมที่ใช้เอฟเฟกต์แบบหมุนไปยังจุดสิ้นสุดของฟังก์ชันความสำเร็จของเมธอด ajax

6. ฟังก์ชั่นการตั้งค่าเว็บไซต์

6.1 การตั้งค่าเว็บไซต์

1. ใช้การอัพโหลดภาพโลโก้ของเว็บไซต์และบันทึกที่อยู่ภาพที่อัพโหลดในโดเมนที่ซ่อนอยู่
2. เพิ่มแอตทริบิวต์ชื่อให้กับแต่ละรายการในแบบฟอร์ม ค่าของแอตทริบิวต์ชื่อจะต้องสอดคล้องกับชื่อพารามิเตอร์ที่ต้องการในเอกสารอินเทอร์เฟซ
3. ผูกเหตุการณ์การส่งเข้ากับแบบฟอร์มและป้องกันไม่ให้ส่งแบบฟอร์มตามค่าเริ่มต้นในฟังก์ชันตัวจัดการเหตุการณ์
4. รับเนื้อหาที่ผู้ดูแลระบบป้อนในแบบฟอร์ม
5. ส่งคำขอไปยังเซิร์ฟเวอร์เพื่อใช้งานฟังก์ชั่นการเพิ่มข้อมูลการตั้งค่าเว็บไซต์

6.2 แสดงข้อมูลการตั้งค่าเว็บไซต์

1. ส่งคำขอไปยังเซิร์ฟเวอร์เพื่อรับข้อมูลการตั้งค่าเว็บไซต์
2. ตรวจสอบว่าข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์เป็นจริงหรือไม่ ให้แสดงข้อมูลในแบบฟอร์ม

7. ฟังก์ชั่นอัพเดตเว็บไซต์ล่าสุด

7.1 หน้าจะแสดงข้อมูลความคิดเห็นของบทความ

1. ค้นหาความคิดเห็นของบทความตามรหัสบทความ

2. ความคิดเห็นที่ได้รับการอนุมัติจะปรากฏบนหน้าโดยตรง

3. ความคิดเห็นล่าสุดได้รับการปรับให้เหมาะสม

4. ความคิดเห็นที่ไม่ได้รับการอนุมัติในหน้าการจัดการจะถูกทำเครื่องหมายสีแดง

7.2 การเพิ่มประสิทธิภาพหน้า

1. ปุ่มไลค์ทั้งหมดใช้ฟังก์ชันไลค์

2. ลิงก์ความคิดเห็นใช้ฟังก์ชันการข้ามไปยังบทความความคิดเห็น

3. ปุ่มการจัดหมวดหมู่ทั้งหมดใช้ฟังก์ชันการข้ามไปยังหน้าการจัดหมวดหมู่

7.3 หน้าลงทะเบียน

1. เพิ่มปุ่มลงทะเบียนผู้ใช้ในหน้าเข้าสู่ระบบ

2. js ในหน้าการลงทะเบียนใช้การตรวจสอบข้อมูลการลงทะเบียนส่วนหน้าเบื้องต้น

3. ฟังก์ชั่นเพจที่พัฒนาโดยใช้ bootstrap

4. ผู้ใช้ทุกคนที่ลงทะเบียนในหน้าลงทะเบียนเป็นผู้ใช้ทั่วไป

5. ใช้ฟังก์ชันการค้นหาผู้ใช้ตามที่อยู่อีเมลของพวกเขา

สำหรับข้อมูลโดยละเอียด โปรดดูเอกสารประกอบอินเทอร์เฟซ