Создание приложения в Vue JS (WebPack, Axios, Bootstrap 4, Reddit и бесконечная прокрутка в ванильном JavaScript)

Дайвинг внутри

Прежде всего, поскольку мы строим приложение в Vue JS, убедитесь, что у вас установлен узел, NPM и Vue-CLI. Если вы не знаете, как это сделать … Тогда я получил YAH BRUH! Здесь Смотри мои видео на этом

Теперь давайте создадим пустой проект Vue, используя WebPack. На вашем терминале введите эту команду.

vue init webpack vuemedium

Оттуда просто нажмите Enter. Он настроит такие вещи, как Eslint, Vue-маршрутизатор, тесты на единицу и т. Д… Нам не понадобятся те, но сейчас все в порядке!

Если вы знаете, как их использовать, вы можете продлить приложение, используя эту полную настройку! Убедитесь, что вы следуете за моим инструкциям точно так, как я их вводит, иначе Eslint будет жаловаться!

Если вы думаете, что ваша подруга, жалуясь кошмаром, то вы не пробовали эсценеры!

Из-за этого вы, вероятно, не хотите нажать Enter для Eslint! Затем просто следуйте командам, напечатанным в терминале, в этом конкретном порядке!

cd vuemedium
npm install
npm run dev

Последняя команда будет запустить приложение и автоматически откроет вкладку в вашем браузере!

Это почему? Ну … все началось, когда мне было 5 … просто шучу!

Ответ внутри Package.json. Под сценариями у вас есть dev, при этом при запуске NPM запустить dev, он в основном выполнит эту сборку командного узла/dev-server.js. АААААААЯНЕ! Это не цель этого поста, поэтому давайте продолжим!

Первые строки кода

Поскольку это всего лишь пост, я сделаю все в App.vue. Во-первых, давайте схватим Bootstrap 4 из CDN.

Внутри index.html включают Bootstrap 4 CSS Link.

Теперь внутри App.Vue Удалить все, чтобы мы остались с (почти) пустым файлом. Как это…

Теперь давайте создадим контейнер и карт-столбцы. Card Columns новые в Bootstrap, и они потрясающие. Ну … они просто карты, чтобы быть честными! Так что ваш шаблон теперь должен выглядеть так.

Мы в основном у нас есть HTML, необходимый для карт, и мы также добавили текст загрузки, поэтому не боясь, вы можете узнать больше о Bootstrap 4 карты здесь Отказ

Если вы посмотрите на ваш браузер сейчас, вы должны увидеть это.

Ничего плохого о том, что давайте продолжим.

Привет Vue!

Сначала давайте установим Axios.

npm install axios

Вы также можете использовать флаг Сохранить, чтобы сохранить его как зависимость в вашем файле Package.json!

Теперь давайте будем работать со сценарием. Давайте импортируем AXIOS и создать метод GetPosts, который принимает страницу и вызовов ее в созданный крючок жизненного цикла.

Я ездил там? Ну, если вы знаете, Vue JS, это кусок пирога, если вы этого не сделаете, то у вас определенно есть несколько вопросов, но все объясняется в моих вариантах Vue, щелкните ниже. Всегда подключайтесь! Vue 2.0 для начинающих Vue 2.0 и Laravel 5.3

Наш скрипт теперь выглядит так:

Давайте работать с нашими данными сейчас. Что нам нужно?

Нам нужно хранить посты.
Нам нужно посмотреть, сделаем ли мы запрос HTTP на API Reddit.
И нам нужно определить следующую страницу.

Кусок пирога. Вот, пожалуйста…

Посты первоначально является пустым массивом, пост нагрузки устанавливается на ложь … ну, потому что мы не загружаем никакой публикации, когда приложение запускается, а следующая страница – это ноль, потому что она хочет быть нулевым.

Теперь давайте сделаем некоторую работу с методом GetPosts.

Когда мы называем этот метод, мы хотим установить докладку в True, мы хотим хранить URL-адрес reddi (не технически URL-адреса API, но что угодно), нам нужно проверить, есть ли у нас страница, передаваемая методу GetPosts (Reddit Pagination немного странно) и, наконец, сделать HTTP Call с помощью Axios.

Давайте работать над этим. Это код для метода GetPosts:

getPosts (page) {
  this.postsLoading = true

  var url = 'https://www.reddit.com/r/all/top.json?limit=30&count=30'

  if (page != null) {
  url = 'https://www.reddit.com/r/all/top.json?limit=30&count=30&after=' + page
}

  axios.get(url)
    .then(response => {
    })
    .catch(error => {
    })
}

Если мы в конечном итоге передам страницу к методу GetPosts, мы объединяем его к URL-адресу с помощью строки запроса URL после URL.

С Axios мы делаем запрос на этот URL-адрес, и у нас есть наш обычный и поймать. Внутри пойма, давайте просто регистрируем ошибку.

Внутри тогда мы хотим объединить любые сообщения, которые мы получаем от вызова API к нашим посты на массиве.

Тогда мы хотим назначить следующую страницу следующей страницы, и пост нагрузки возвращается в false. Давайте посмотрим, что в действии!

getPosts (page) {
  this.postsLoading = true

  var url = 'https://www.reddit.com/r/all/top.json?limit=30&count=30'

  if (page != null) {
  url = 'https://www.reddit.com/r/all/top.json?limit=30&count=30&after=' + page
}

  axios.get(url)
    .then(response => {
      this.posts = this.posts.concat(response.data.data.children)

      this.nextPage = response.data.data.after

      this.postsLoading = false
    })
    .catch(error => {
      console.log(error)
    })
}

Легко кресться лимона сжимается!

Если честно, вы все еще получаете эту честную страницу на своем экране, однако, если вы проверяете свою сетевую активность, мы успешно сделаем запрос на Reddit.

И если у вас есть Vue JS DEV Tools, установленные на Google Chrome, вы также получаете этот результат.

Вернуться к шаблону

Прежде всего, мы хотим петлю через каждый пост внутри массива постов и отображать каждый пост как карту.

Мы также хотим добавить ссылку, которая указывает на каждое начало для «читать больше». И, наконец, мы хотим отобразить текст загрузки только тогда, когда мы производим запрос на получение. Таким образом, наш шаблон теперь меняется на это:

Давайте сломаем изменения.

Здесь

Мы просто петлю через каждый пост. Здесь


  {{ post.data.title }}

Мы отображаем название поста. Здесь


   Read more on {{ post.data.domain }}

У нас есть ссылка на пост. И наконец…

Здесь


    Loading...

Мы хотим отобразить текст загрузки только тогда, когда мы производим запрос на получение. ПОЗДРАВЛЯЮ! У нас наконец-то есть что-то на нашем экране!

Неплохо!

Бесконечная прокрутка

Наконец, давайте закроем этот пост, внедряя бесконечную прокрутку в ванильном JavaScript!

Потому что, если вы можете сделать это в ванильном JavaScript, то просто сделайте это! В созданном крючке жизненного цикла мы добавим прослушиватель прокрутки. Таким образом, созданные изменения в этом:

created () {
  this.getPosts()

  window.addEventListener('scroll', this.handleScroll)
}

Как видите, мы называем методом ручного плана, поэтому давайте создадим это.

handleScroll () {
  if (document.body.scrollHeight - window.innerHeight - document.body.scrollTop <= 5) {
    if (this.nextPage != null) {
      this.getPosts(this.nextPage)
    }
  }
}

Самая сложная часть вот эта линия

if (document.body.scrollHeight - window.innerHeight - document.body.scrollTop <= 5)

Эта линия просто говорит: «Если вы прокрутите вниз до нижней части экрана, то сделайте что-нибудь.

То, что мы делаем, это проверить, не будет NULL NULL, если это не нуль, то мы называем методом GetPosts, и мы проходим в качестве аргумента следующая страница.

Теперь … Всякий раз, когда вы прокрутите в нижней части экрана, появляется текст загрузки, мы ждем секунду, и мы загружаем следующие сообщения.

Конец

Это все на сегодня! Мы использовали Vue JS, WebPack, Axios, Bootstrap 4, API Reddit (если вы можете вызвать его API), и мы реализовали бесконечную прокрутку в ванильном JavaScript.

Если я пропустил что-то выше, здесь у вас есть весь рабочий исходный код.