[ВАЖНО - Читай описание] Таблица на Vue.js. VUEX+AXIOS+API. Пагинация и сортировка данных.
HTML-код
- Опубликовано: 20 янв 2020
- --------------------------------------------------------------------------------------------------------------------------------------------------------
ВАЖНО - Видео на этом канале 3х летней давности и большинство уже НЕАКТУАЛЬНЫЕ в силу изменения синтаксиса, методов и подходов во Vue.js версии 3. Все видео были записаны на Vue.js версии 2. Много чего уже просто НЕ БУДЕТ РАБОТАТЬ или выдаст ошибки.
Новый канал на актуальном стеке Vue.js v3, Pinia, Vue router@next, Ionic (мобильные приложения), FireBase (база данных, аутентификация и тд) - / @intothecoding
НО! Новый канал ведется на АНГЛИЙСКОМ ЯЗЫКЕ - так что у вас есть уникальная возможность научиться кодить и подтянуть язык - так как Английский нужен всегда!
Жду вас на новом канале!
--------------------------------------------------------------------------------------------------------------------------------------------------------
В этом уроке я научу вас как за пол часа создать таблицу с реальными данными, полученными через API, выводить данные по страницам и сортировать. В материале так же использованы:
- VUEX (центральное хранилище данных)
- AXIOS (для получение данных через API)
- JSON-SERVER (fake-api)
Приятного просмотра!
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](http://i.ytimg.com/vi/5lBf-Fm4io4/mqdefault.jpg)
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](/img/tr.png)
![[ВАЖНО - Читай описание] BUTTON. Создание универсального и переиспользуемого компонента Vue](http://i.ytimg.com/vi/gUJFLFvVV-g/mqdefault.jpg)
![[ВАЖНО - Читай описание] SELECT. Создание кастомного стилизуемого компонента на Vue.js](/img/1.gif)
Спасибо огромное за ваши уроки! Все просто и понятно! Продолжайте снимать!
Спасибо, куча полезных видео по вью посмотрел. Почти во всем разобрался, а вот связку vuex + axios ты мне помог понять. Жму руку 🤝
Канал достоин подписоты. Побольше Vue - как он самый легкий из (Vue, React, Anglural)
Огонь!)
Крутой канал! Спасибо за видео
Очень полезный урок! Респект
Спасибо за видео! Единственное нормальное объяснение реализации пагинации которое я видел. Лайк!
Михаил Сергеевич рад стараться:)
@@gofrontend2220 а не подскажите, из за чего после обновления страницы может все ломаться и ничего не отображаться на странице (добавлял эту возможность на свой сайт)? Дело видимо именно в добавленной пагинации, ибо если её закомментить то все работает как раньше :/
Mikhail так трудно сказать. Надо кол видеть. Можете в телеграм написать @aboltnev
@@mikhail2238 Из-за того, что у тебя таблица не может стартовать из-за отсутствия данных. Скорее всего в хранилище нужно прописать users = []
спасибо большое за пагинацию более чем понятно
Спасибо большое!
лучшее видео!
как раз на тестовом задании нечто подобное дали. начал гуглить, на твой видос наткнулся) то что надо.
вот если бы ещё показал как сделать asc desc было бы 5+++ ))
Классно
Spasibo! Dolgo iscala prostyu schemy kak postroit pagination
Таблица - это хорошо.
Не хватает CRUD функционала. Например эконки EDIT на каждой строке, кликнув на которую появляются кнопки save/cancel и мы можем изменить данные.
Лайк за шутку
Только автор забыл добавить, что на реальных проектах так делать нельзя. Пагинация должна делать запросы к БД и брать оттуда только необходимое кол-во записей. Иначе при сравнительно большом количестве записей, ваш метод положит любой браузер. От такой пагинации нет никакого смысла, разве что с массивами попрактиковаться :)
А как правильно? подскажите видео или материал по лучше?
@@isos6534 Я уже не помню что в видео, но по хорошему если в таблице, допустим выводится 20 записей, при загрузке страницы из базы тянутся первые 20 записей и выводятся. На второй странице пагинации снова идет запрос к базе и тянутся записи с 21 по 40 и так далее. Конечно можно оптимизировать, что бы при возврате на первую страницу не лезть в БД, но это уже нюансы.
@@VIMPdev спасибо, а можешь туториал сделать?
@@VIMPdev ок, что делать с сортировкой? Каждый раз при запросе к БД сортировать данные таблицы и брать нужные записи? Или подготавливать заранее отсортированные таблицы в БД и зависимо от запроса тянуть данные с разных таблиц?
@@clevervlad1999 нет, этим всем занимается api по которому вы обращаетесь. Вы просто передаёте нужные параметре в запросе и вам возвращается отфильтрованные данные.
А как сортировать в обратном порядке, при последующих кликах? как toggle
Тот момент, когда ставишь лайк одновременно с кнопкой воспроизвести) спасибо! У вас есть свой курс?
data: github.com/antonboltnev/vue-portfolio-code-example/blob/master/db.json
Pagination 20:21 ( pun =))
''супер таблица, спасибо за просмотр) штука" хехе)
Добрый день!
Спасибо за прекрасные уроки, все понятно, даже в каком-то смысле нативно.
Кстати, есть помарочка, которая вызвала у меня небольшой затуп: её видно в коде, скажем, на 36:35, в самом верху, в pages(), деление нужно производить не на 10, а на this.usersPerPage; вдруг кому будет полезно.
Кстати, вопрос по стилю: вы как-то разделяете использование CamelCase и нижних подчеркиваний в названиях переменных или пишете вперемешку оба?
UPPER_SNAKE_CASE используется для констант.
я чет не пойму ток одного, в чем смысл такой пагинации и сортировки именно на фронте?(т.е для этого нам надо получать сразу все данные из БД, а если их там 10 000+) так кто то вообще делает? я всегда думал, что например для пагинации инфу надо получать кусками(т.е нажал на страницу получил нужные позиции с сервака) и касательно сортировки тож самое
Здравствуйте! Как выводить данные, если на странице сделать поиск? Ведь по сути на страницу выводится массив "вырезанный" инструментом slice и мы не можем искать в нем, нам нужно искать в общем массиве. Спасибо большое за видео! Буду благодарен если ответите.
Вопрос: Обязательно ставить return в стрелочных функциях, по-моему это и так подразумевается? Например когда мы задаем дэфолтное состояние в пропсах.
не обязательно, оно работает by default
есть такой момент, если например нажать в браузере назад, то будет перекидывать на предыдущую страницу на сайте, а не по пагинации
тут реализация без vue-router, в SPA преложениях с установленным vue-router спокойно привяжете маршруты к соответствующим страничкам. У автора на канале есть уроки по vue-router.
Спасибо за урок! У меня такой вопрос: а нельзя было использовать Vuetify? Там все эти фишки(сортировка, пагинация) уже встроены. Это значительно сократило бы время. И используете ли вы сами для проектов Vuetify?
ai Gooner ну мы же вроде как учимся:) а вьютифай сделает все за нас и какой смысл в этом?) я не использую его в проектах. Слишком много лишнего
а как использовать связи ORM Laravel во vue? не могу найти информацию совсем
начало разбивки на постраничную пагинацию 21:00
спасибо
Есть бесплатный источник с подготовленной базой данных json
Разные варианты данных:
@t - другие варианты
конкретно для этого урока:
@t
Если хочется работать со своими данными тогда можно, как у автора видео.
Плюс, источника выше - не надо постоянно перезапускать db.json
prop: type check failed for prop "row_data". Expected Object, got Array
Все делал как на видео, но поймал вот такую ошибку
Оч полезное видео, большое спасибо!
Но возник один вопрос, который я не могу разобрать, можете сможете разъяснить мне пожалуйста, а именно:
Зачем в App.vue мы импортируем из vuex mapGetters и после передаем поле users в пропсы компонента
Почему мы сразу в v-table.vue также не импортируем из vuex mapGetters и не используем уже непосредственно там поле users? Зачем передавать через пропсы?
Mr Reflection в принципе можно, но есть риск того, что таблица уже будет рисоваться в dom, а данные в геттере еще не будут готовы и тогда получим ошибку. Поэтому мы дергаем геттер в родителе, так как дочерний компонент таблицы замаунтится в дом только тогда, когда родительский закончит маунт и как следствие геттер уже будет запрошен и мы гарантированно загрузим его в таблицу.
@@gofrontend2220 понял, спасибо за разъяснение
@@gofrontend2220 привет, куда пропал? Ждем твоих крутых видосов. Надеемся - что у тебя все хорошо.
Может кто подскажет , в каком уроке подключали Material Icon ? Я так смотрю он тут не компонентом , а html вставляется , интересно посмотреть поэтапно как установить , при чтении плохо воспринимаю , нужно прям мелочи увидеть , чтобы вопросы отпали
проимпортируй в main.js import 'material-design-icons-iconfont' и тогда сможешь прописывать тег с названием нужной иконки
Не совсем понял, как вы по переменной pages, которая возвращает число прошлись циклом.. (22.47)
да, мне тоже интересно
Посмотрел этот урок и урок 4/8 про Axios. Сижу уже день не могу получить данные. Это все будет ли работать на Vue CLI 3, Vuex 4 ? Я в форумах искал не нашел ответа консоль не видит ошибок. Что делать ПЖ помогите...(ИСПРАВЛЕНО ответ в кометах)
Ошибка была исправлено.)) Ошибка заключалось в моем невнимательности, поле this.GET_PRODUCTS_FROM_API я забыл поставить скобки))))
mounted() {
this.GET_PRODUCTS_FROM_API()
}
Аааааааааааааааааааааааааааааааааааааааааааааааааааааааааааааа!
Аааааааа!
Аааааааааааааа!
Если я хочу сделать пагинацию на по количеству строк на странице, а по первой букве user.name ?
Сделал. Корявенько, но получилось.
20:40 Давайте Сделаем Пагинацию
AxiosResponse возникла ошибка "Type annotations can only be used in TypeScript files.ts(8010)" в файле store. Может у кого тоже была, подскажите решение
его не надо писать , это шаблонное заполнение от ВебШтрома(Среды на котором автор пишет)
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
Добрый день а как можно пагинацию ограничить, если данных слишком много которые получаются через API, а если конкретно то данных 7326 и там 440 страниц, которые опознались пагинацией, и как сделать допустим 1,2,3,4,5,6.......438.439.440, если не сложно помогите пожалуйста, пагинация сделана по вашему примеру
Решили вопрос.? Отпишите пожалуйста
@@TAtoshkkko Давно решил, просто используя плагин пагинации
@@user-nb1ui6kl6g не могли бы вы пожалуйста скинуть код или ссылку на решение данного вопроса? Был бы крайне признателен!
@@HearonPlay Этот вопрсо уже давно не актуален, так как эту работу решают плагины на пагинацию, своими силами не имеет смысла решать задачу
@@user-nb1ui6kl6g спасибо
Реально, а почему не выложить исходники? Я наткнулся на ошибку и хоть убей не могу найти её сравнивая свой код и код на видео, исходник бы помог :(
Это фронт или бэк?
Полезный урок, но как пожелание: поменьше "ээээ"
все хорошо, но а если 50 страниц? и квадратиков пагинации будет больше чем список пользователей.
pages.slice(index-1, index+1).map(page => page)
@@nuraimaratova480 спасибо. но вопрос не в теоретической реализации для меня конкретного, а чтобы это показать зрителям.
Нифига се и никакой магии??? Воистину говорю вам браты если плохо знаешь CSS, HTML и JavaScript то веб полон чудес и магии для тебя)))))
Исходники можно же было выложить
напиши сам =)
@@user-cl1gh4ho5b ЖЕЛАНИЕ ПРОПАДАЕТ СМОТРЕТЬ И СОВМЕСТНО ДЕЛАТЬ, ТЕРЯЕШЬ ЗРИТЕЛЕЙ, ПРОГРАММЁР
@@user-ym6dq4bi3f я только что прочитал набор слов не связаных между собой))
А вы хотите все готовое? Такого не будет. Я здесь учу людей как работать с vue. За готовыми решениями - на гитхаб
@@user-cl1gh4ho5bнеудивительно, Помимо того, что соображаешь туго, наравне с этим составляешь свои видео.
Не показано, что прописать в index.html, чтобы всё заработало.
d0n pan там ничего не надо писать. А что у вас не работает?
@@gofrontend2220 не отображается на странице, всё делал по видео. На странице пусто. Если есть телеграмм, могу скрины отправить.
@@gofrontend2220
Приложение
var app = new Vue({
el: '#app',
data: {
}
})
Что я здесь забыл указать?
d0n pan давайте. @aboltnev
срака, а де исходник