Предисловие
В работе по двум предыдущим главам мы успешно реализовали домашнюю страницу, но это было просто одна страница данных. Нам может потребоваться предоставить больше данных, поэтому в настоящее время нам необходимо рассмотреть вопрос о пейджинге.
Есть много способов подрыва, таких как асинхронная нагрузка. Тем не менее, для друзей, которые не используют фронтальную структуру шаблона, может быть немного сложно использовать этот метод, как только они начнут. Следовательно, реализация пейджинга в нашей главе основана на обычной подтяжке ссылок.
После того, как у нас будет больше опыта в использовании фронтальных рамок, мы можем использовать более богатый метод страниц.
На самом деле, мы сами не невозможно создать компонент пейджинга. С другой стороны, я реализую его своим собственным кодом. Однако я хочу рекомендовать здесь использовать плагин страницы макета, а его официальный веб -сайт (http://laypage.layui.com/).
Развитие правил пейджинга
Во -первых, давайте посмотрим на описание интерфейса
Вот интерфейс Get. Следовательно, как показано на рисунке выше, правильным способом запроса является непосредственное добавление параметров после URL -адреса интерфейса.
http://cnodejs.org/api/v1/topics?page=11
ОК, тогда наш адрес URL может быть //xxx/index.shtml?1, потому что я не планирую использовать другие параметры, просто заполняйте страницу. Следовательно, вы можете напрямую добавить идентификатор странификации после него, а затем получить идентификатор в URL -адресу через функцию и добавить его к интерфейсу, чтобы можно было реализовать наши потребности.
Напишите код для реализации!
Получите удостоверение личности в URL
Как я думал выше, нам нужна функция, которая может правильно получить идентификатор, который мы добавим к адресу URL -адреса, чтобы приветствовать вас.
function 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="+d; 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="+d; getJson (url, pushdom); макет ({продолжение: $ (". Page "), Pages: 100, curr: id, jump: e, первое) {if! '?'+e.curr;Окончательный эффект показан на рисунке ниже:
краткое содержание
В этой главе наш контент на самом деле имеет мало общего с Vue. Однако независимо от того, какой контент используется, в конечном итоге он нацелен на завершение проекта. Использование уже разработанных плагинов может значительно повысить нашу эффективность.
Приложение
Вью Официальный сайт
Cnodejs API детали
Загрузите исходный код этой серии учебных пособий
ГЛАВА 1 Практического учебника Vuejs, создание оснований и визуализация списка
Практическое учебное пособие vuejs Глава 2 «Исправление ошибок и украсить время
Практическое учебное пособие Vuejs, используя плагин макета для реализации страниц.
Эта статья была первоначально написана Fungleo
Первый адрес выпуска: http://blog.csdn.net/fungleo/article/details/51649074
Эта статья была составлена в «Учебное пособие по изучению компонентов Vue.js Front-End», и все могут учиться и читать.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.