Руководство по внедрению, используемому в моем веб-сайте портфолио.

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

Вот краткий предварительный просмотр разбиения на страницы и текстового поиска:

  1. Разбивка на страницы:

Я относительно новичок в ReactJS, поэтому моей первой мыслью, когда я столкнулся с реализацией разбиения на страницы, было желание сначала посмотреть, что сделали другие люди. Это привело меня к тому, что я нашел реагировать на страницы. позвольте мне поделиться этим с вами.

Вот компонент paginatedPosts:

Давайте пройдемся по этому файлу:

React-Paginate легкий. Это касается только самих кнопок пагинации. Компонент реакции делает все остальное в отношении математики, чтобы выяснить, какие сообщения отображать на странице.

  1. Включите компонент ReactPaginate в строку 2.
  2. Установите все необходимые строки состояния 10 — 14
  3. Сделайте запрос к конечной точке NodeJS и верните список сообщений, которые мы будем перебирать, и отображать строки 38 — 45
  4. Добавьте функцию handlePageClick, которая будет устанавливать offSets, определяющие, какие записи отображать на странице. Это происходит путем выяснения того, какие сообщения следует нарезать и отображать.

Ссылка для полных конфигураций атрибутов react-paginate: https://www.npmjs.com/package/react-paginate для другой реализации

2. Нечеткий поиск:

Вы заметите, что в моем GIF-файле взаимодействия есть текстовое поле, отображаемое на экране, которое будет выполнять текстовый поиск (строка 36 файла JS выше):

<SearchInput setQuery={setQuery} />

Рассмотрим подробнее компонент SearchInput:

  1. Передайте хук состояния setQuery из компонента paginatedPost.
  2. Обновите состояние setQuery при изменении ввода текста.

Это значение setQuery и query будет использоваться обратно в компоненте paginatedPost и передаваться вместе с API в качестве параметра запроса с именем search —

В файле pagination.js:

fetch(“http://localhost:3000/api/posts?search=" + query)

Этот запрос API вызовет мой сервер NodeJS и ответит меньшим списком сообщений на основе текстового поиска. Вот пример кода этого маршрутизатора в моем проекте NodeJS:

Первое, на что следует обратить внимание, это использование fuse.js — этот пакет отлично подходит для общего нечеткого поиска по любому типу набора данных. Это дополнение к моей кодовой базе казалось бы отличным решением для нечеткого поиска, и до сих пор так оно и было. Я очень рекомендую этот пакет

NOTE:
Notice on line 15 — await Model.find() — That is using a mongoose model schema that was included into this file that defines the shape of the data that is referenced: Look into moongoosejs for more information on that.

Давайте пройдемся по этому файлу маршрутизатора NodeJS:

  1. Включите все необходимые компоненты и пакеты.
  2. Инициализируйте Fuse с данными, которые были найдены в БД.
  3. Если передан поисковый запрос, найдите его с помощью Fuse.js или просто передайте все данные обратно в ответ.

3. Завершение

После этой первоначальной реализации Pagination и Search кажется, что react-paginate и fuse.js отлично сочетаются друг с другом, создавая дружественный UX. Это не идеальное решение, и я уверен, что продолжу улучшать этот процесс и добавлять новые функции с течением времени. Этот пост, вероятно, будет продолжать расти по мере развития и изменения событий.

ПАКЕТЫ И РЕФЕРЕНЦИИ —

  1. реагировать на страницы
  2. предохранитель.js