คำนำ
ในการทำงานของสองบทก่อนหน้านี้เราประสบความสำเร็จในการดำเนินการเรนเดอร์หน้าแรก แต่มันเป็นเพียงการแสดงผลข้อมูลหนึ่งหน้า เราอาจต้องแสดงข้อมูลเพิ่มเติมดังนั้นในเวลานี้มันเป็นสิ่งจำเป็นสำหรับเราในการพิจารณาการเพจ
มีหลายวิธีในการเพจเช่นการโหลดแบบอะซิงโครนัส อย่างไรก็ตามสำหรับเพื่อนที่ไม่ได้ใช้เฟรมเวิร์กเทมเพลตส่วนหน้าอาจเป็นเรื่องยากที่จะใช้วิธีนี้ทันทีที่เริ่มต้น ดังนั้นการใช้งานการเพจของบทของเราจึงขึ้นอยู่กับการเพจลิงก์ทั่วไป
หลังจากที่เรามีประสบการณ์มากขึ้นในการใช้เฟรมเวิร์กส่วนหน้าเราสามารถใช้วิธีการปนเปื้อนที่สมบูรณ์ยิ่งขึ้น
ในความเป็นจริงมันเป็นไปไม่ได้ที่เราจะสร้างองค์ประกอบการเพจด้วยตัวเอง ในด้านมือถือฉันใช้มันด้วยรหัสของฉันเอง อย่างไรก็ตามสิ่งที่ฉันต้องการแนะนำที่นี่คือการใช้ปลั๊กอินหน้าเค้าโครงและเว็บไซต์อย่างเป็นทางการคือ (http://laypage.layui.com/)
การพัฒนากฎการเพจ
ก่อนอื่นมาดูคำอธิบายอินเทอร์เฟซ
นี่คืออินเทอร์เฟซ GET ดังนั้นดังที่แสดงในรูปด้านบนวิธีที่ถูกต้องในการร้องขอคือการผนวกพารามิเตอร์โดยตรงหลังจาก URL ของอินเทอร์เฟซ
http://cnodejs.org/api/v1/topics?page=11
ตกลงที่อยู่ URL ของเราสามารถเป็น //xxx/index.shtml?1 เพราะฉันไม่ได้วางแผนที่จะใช้พารามิเตอร์อื่น ๆ ดังนั้นคุณสามารถเพิ่ม ID การแบ่งหน้าโดยตรงหลังจากนั้นจากนั้นรับ ID ใน URL ผ่านฟังก์ชั่นและผนวกเข้ากับอินเทอร์เฟซเพื่อให้ความต้องการของเราสามารถรับรู้ได้
เขียนรหัสเพื่อนำไปใช้!
รับ ID ใน URL
อย่างที่ฉันคิดไว้ข้างต้นเราต้องการฟังก์ชั่นที่สามารถรับ ID ได้อย่างถูกต้องเราต่อท้ายที่อยู่ URL เพื่อทักทายคุณได้ดี
ฟังก์ชั่น geturlid () {var host = window.location.href; var id = host.substring (host.indexof ("?")+1, host.length); return id;}ดังที่แสดงในรหัสด้านบนด้วยวิธีการฟังก์ชั่นนี้เราสามารถรับ ID ที่เราผนวกหลังจาก URL และทดสอบมัน
$ (function () {var id = geturlid (); console.log (id); var url = "http://cnodejs.org/api/v1/topics"; getjson (url, pushdom);});ดังที่แสดงในรูปด้านล่าง:
เราได้รับข้อมูลที่แตกต่างผ่าน ID
$ (function () {var id = geturlid (); var url = "http://cnodejs.org/api/v1/topics?page="+id; getjson (url, pushdom);});ดังที่ได้กล่าวมาแล้วคุณสามารถรับข้อมูลที่แตกต่างกันตาม URL ที่แตกต่างกัน
ใช้เค้าโครงเพื่อใช้การปนเปื้อน
ก่อนอื่นแน่นอนคือการอ้างอิงไฟล์
<script src = "res/js/plugins/laypage/laypage.js"> </script>
ในส่วนที่เหมาะสมของ HTML ให้เพิ่มกล่องลงในส่วนประกอบเพจแสดงดังต่อไปนี้:
<div> </div>
จากนั้นเราคัดลอกรหัสบนเว็บไซต์ทางการ ปรับเปลี่ยนได้อย่างเหมาะสมและรหัสมีดังนี้
$ (function () {var id = geturlid (); var url = "http://cnodejs.org/api/v1/topics?page="+id; getjson (url, pushdom); เลย์เอาต์ ({ต่อ: $ (" หน้า ") '?'+e.curr;}}});})เอฟเฟกต์สุดท้ายจะแสดงในรูปด้านล่าง:
สรุป
ในบทนี้เนื้อหาของเรามีส่วนเกี่ยวข้องกับ Vue เพียงเล็กน้อย อย่างไรก็ตามไม่ว่าจะใช้เนื้อหาใดในที่สุดก็มีวัตถุประสงค์เพื่อให้โครงการเสร็จสมบูรณ์ การใช้ปลั๊กอินที่พัฒนาแล้วนั้นสามารถปรับปรุงประสิทธิภาพของเราได้อย่างมาก
ภาคผนวก
เว็บไซต์อย่างเป็นทางการของ Vue
รายละเอียด cnodejs API
ดาวน์โหลดซอร์สโค้ดของชุดบทเรียนนี้
บทที่ 1 ของการสอนเชิงปฏิบัติ Vuejs สร้างพื้นฐานและการแสดงผลรายการ
Vuejs การสอนการปฏิบัติบทที่ 2 แก้ไขข้อผิดพลาดและความสวยงาม
การสอนการปฏิบัติ Vuejs บทที่ 3 โดยใช้ปลั๊กอินเลย์เอาต์เพื่อรับรู้การปนเปื้อน
บทความนี้เขียนโดย Fungleo เดิม
ที่อยู่รุ่นแรก: http://blog.csdn.net/fungleo/article/details/51649074
บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น