مقدمة
في عمل الفصلين السابقين ، قمنا بتنفيذ الصفحة الرئيسية بنجاح ، ولكن كان مجرد تقديم صفحة واحدة من البيانات. قد نحتاج إلى تقديم المزيد من البيانات ، لذلك في هذا الوقت ، من الضروري بالنسبة لنا التفكير في الترحيل.
هناك العديد من الطرق للترحيل ، مثل التحميل غير المتزامن. ومع ذلك ، بالنسبة للأصدقاء الذين لا يستخدمون إطار عمل القالب الأمامي ، قد يكون من الصعب بعض الشيء استخدام هذه الطريقة بمجرد بدءهم. لذلك ، يعتمد تنفيذ الترحيل لفصلنا على ترحيل الارتباط العادي.
بعد أن يكون لدينا المزيد من الخبرة في استخدام الأطر الأمامية ، يمكننا استخدام طريقة ترقيم ترقيم أكثر ثراءً.
في الواقع ، ليس من المستحيل علينا بناء مكون الترحيل بأنفسنا. على جانب الهاتف المحمول ، أقوم بتنفيذه بواسطة رمز خاص بي. ومع ذلك ، فإن ما أريد أن أوصي به هنا هو استخدام المكون الإضافي لصفحة التصميم ، وموقعه الرسمي هو (http://laypage.layui.com/).
تطوير قواعد الترحيل
أولاً ، دعنا نلقي نظرة على وصف الواجهة
ها هي واجهة الحصول على. لذلك ، كما هو موضح في الشكل أعلاه ، فإن الطريقة الصحيحة للطلب هي إلحاق المعلمات مباشرة بعد عنوان URL للواجهة.
http://cnodejs.org/api/v1/topics؟page=11
حسنًا ، يمكن أن يكون عنوان عنوان URL الخاص بنا هو //xxx/index.shtml؟1 لأنني لا أخطط لاستخدام معلمات أخرى ، ما عليك سوى إكمال ترقيم الصفحات. لذلك ، يمكنك إضافة معرف الترقيم مباشرة بعد ذلك ، ثم الحصول على المعرف في عنوان URL من خلال وظيفة وإلحاقه بالواجهة ، بحيث يمكن تحقيق احتياجاتنا.
اكتب رمزًا للتنفيذ!
احصل على المعرف في عنوان URL
كما اعتقدت أعلاه ، نحتاج إلى وظيفة يمكنها الحصول على المعرف بشكل صحيح الذي نلحقه بعنوان عنوان URL لتحية لك جيدًا.
دالة geturlid () {var host = window.location.href ؛ var id = host.substring (host.indexof ("؟")+1 ، host.length) ؛ معرف الإرجاع ؛}كما هو موضح في الكود أعلاه ، من خلال طريقة الوظيفة هذه ، يمكننا الحصول على المعرف الذي قمنا بإلحاقه بعد عنوان URL ، واختباره
$ (function () {var id = geturlid () ؛ console.log (id) ؛ var url = "http://cnodejs.org/api/v1/topics" ؛ getJson (url ، pushdom) ؛}) ؛كما هو مبين في الشكل أدناه:
نحصل على بيانات مختلفة من خلال معرف
$ (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 ، أضف المربع إلى مكون الترحيل ، على النحو التالي:
<viv> </viv>
ثم ، نقوم بنسخ الرمز على الموقع الرسمي. قم بتعديله بشكل مناسب ، والرمز كما يلي
$ (function () {var id = geturlid () ؛ var url = "http://cnodejs.org/api/v1/topics؟page="+id ؛ getJson (url ، pushdom) ؛ kyout ({cont: $ (". '؟'+e.curr ؛يظهر التأثير النهائي في الشكل أدناه:
ملخص
في هذا الفصل ، لا علاقة له في الواقع مع Vue. ومع ذلك ، بغض النظر عن المحتوى المستخدم ، فإنه يهدف في النهاية إلى إكمال المشروع. يمكن أن يؤدي استخدام المكونات الإضافية المطورة بالفعل إلى تحسين كفاءتنا.
زائدة
موقع VUE الرسمي
cnodejs تفاصيل API
قم بتنزيل الكود المصدري لهذه السلسلة من البرامج التعليمية
الفصل الأول من برنامج Vuejs العملي ، بناء الأساسيات وتقديم القائمة
Vuejs التعليمي العملي الفصل 2 ، إصلاح الأخطاء وتجميل الوقت
Vuejs البرنامج التعليمي الفصل 3 ، باستخدام المكون الإضافي للتخطيط لتحقيق ترقيم الصفحات
هذا المقال كتب في الأصل من قبل Fungleo
عنوان الإصدار الأول: http://blog.csdn.net/fungleo/article/details/51649074
تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.