ZhihuDaily

1. กระบวนการติดตั้งและการแนะนำโครงการ

ติดตั้ง

ตามปฏิกิริยาของคนที่กระตือรือร้น

 npm install
npm run serve

แนะนำ

โครงการนี้ทำซ้ำตามเนื้อหาของฝั่ง iOS ของ Zhihu ทุกวันตั้งแต่เดือนเมษายนถึงพฤษภาคม 2565 มันมีไว้สำหรับการอ้างอิงการเรียนรู้เท่านั้นและไม่ได้ใช้เพื่อผลกำไร

2. ลอจิกหน้า

มันแบ่งออกเป็นสองส่วน: หน้าและส่วนประกอบ

2.1 index.vue

หน้านี้เป็นโฮมเพจและที่อยู่คือ '/' ในองค์ประกอบการกำหนดเส้นทาง มี headcontent.vue (บน) swipe.vue (รายการข่าว) Newslist.vue (รายการข่าว)

headcontent.vue คลิกที่อวตารเพื่อข้ามไปที่ swipe.vue (แถบด้านข้าง)

Swipe.vue and Newslist.vue กระโดดไปที่ NewsDetail.vue (หน้ารายละเอียดข่าว)

2.2 Swipe.Vue

หน้านี้เป็นแถบด้านข้างคุณสามารถป้อนรายการโปรดของฉัน collect.vue

2.3 collect.vue

หน้านี้เป็นที่ชื่นชอบซึ่งมีเนื้อหาที่ชื่นชอบหลายอย่าง คลิกเพื่อป้อน newsdetail.vue (หน้ารายละเอียดข่าว)

2.4 newsdetail.vue

สามารถเข้าถึงได้หลายวิธีรวมถึง Newsmenu.vue (ฟังก์ชั่นแถบ) และ Share.vue (หน้าแบ่งปัน)

Newsmenu.vue มีสี่ฟังก์ชั่น: ไลค์คอลเลกชันความคิดเห็นและการแบ่งปัน ความคิดเห็นจะข้ามไปที่ ความคิดเห็น Vue Share และ Trigger Share.vue

2.5 comment.vue

หน้าความคิดเห็นรวมถึงความคิดเห็นที่ยาวนานและความคิดเห็นสั้น ๆ คลิกที่ด้านล่างเพื่อข้ามไปยังหน้า writecomment.vue

2.6 writecomment.vue

คุณสามารถเขียนความคิดเห็นในหน้า writecomment.vue คลิกโพสต์และข้ามกลับไปที่ ความคิดเห็น

3. การจัดเรียงจุดฟังก์ชั่น

3.1 headcontent.vue

แสดงวันที่แสดงอวตารและหน้ากระโดดไม่ยาก

3.2 Swipe.Vue

ไดอะแกรม Carousel ที่เขียนด้วยลายมือจะรับรู้อัตโนมัติ (สลับทุก ๆ 4s) และการสลับการปัดด้านซ้ายและขวา

3.3 Newslist.Vue

รายการข่าวการเลื่อนลงจะแสดงเนื้อหาข่าวจากไม่กี่วันที่ผ่านมาโดยใช้องค์ประกอบการเลื่อนแบบไม่มีที่สิ้นสุดของ Element-UI

3.4 Collect.vue

คลิกปุ่มรายการโปรดบนหน้าและเนื้อหาข่าวที่เกี่ยวข้องจะปรากฏในหน้ารายการโปรดของฉันรีเฟรชโดยไม่สูญเสีย

3.5 Newsmenu.vue

คุณสามารถคลิกเพื่อชอบรวบรวมและแบ่งปันความคิดเห็นและอย่าสูญเสียมันหลังจากสดชื่น

3.6 Share.Vue

หลังจากคลิกหน้าการแชร์จะปรากฏขึ้นและพื้นหลังด้านหลังจะเปลี่ยนเป็นสีเทา คลิกที่พื้นหลังหรือคลิกยกเลิกและหน้าการแชร์จะหายไป

3.7 comment.vue

แสดงความคิดเห็นเช่นความคิดเห็นรีเฟรชและออกโดยไม่หายไป

3.8 writecomment.vue

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

4. การดำเนินการ

เลือกการใช้งานที่สำคัญกว่านี้สำหรับคำอธิบาย

4.1 Newslist.Vue

ใช้ V-Infinite-Scroll ใน Element-UI เพื่อดึงลงไปด้านล่างเพื่อเรียกข่าววันที่ผ่านมาเพื่อรับข่าววันที่ผ่านมาใช้ this.date.setDate (this.date.getDate ()-1) เพื่อคำนวณวันที่

4.2 Newsmenu.vue

-

5. ติดตามความคิด

บนพื้นฐานของโครงการที่มีอยู่เพิ่มฟังก์ชั่นแบ็กเอนด์และทำหลังจากที่คุณได้เรียนรู้ node.js

5.1 ฟังก์ชั่นการเข้าสู่ระบบ

5.2 ใช้ฐานข้อมูลเพื่อจัดเก็บไลค์และคอลเลกชันของผู้ใช้

5.3 ...