Создание приложения поиска с Vue.js + Parcel + TypeScript: Часть 3 из 3

Во второй части мы добавили Bootstrap-Vue и настроили базовый макет для приложения поиска. Теперь мы создадим компоненты и отобразим/отобразим наши результаты поиска.

Во второй части мы помещаем весь наш HTML в наш компонент приложения. Это обеспечило быстрый прототип для просмотра нашего макета, но реальное рабочее приложение будет иметь отдельные компоненты. Некоторые преимущества отдельных компонентов заключаются в инкапсуляции сложности каждого компонента, а в некоторых случаях обеспечивают повторное использование компонентов.

Вот оригинальный шаблон из нашего компонента приложения:

Наш новый компонент приложения теперь будет выглядеть так:

Обратите внимание, что теперь у нас есть теги VS-Input и VS-Results. Давайте создадим эти новые компоненты.

Мы создадим файл с именем vs-input.vue и добавим следующий код:

Так что же делает этот компонент? Захват ввода для нашего поиска и предоставление события компоненту приложения, чтобы указать, что пользователь хочет искать.

• B-Input Element содержит V-модель директива. Это свяжет вход с переменной «термина»
• B-Button Element имеет @click Директива, чтобы запустить функцию «Поиск» на щелчке кнопки.
• В нашем теге сценария у нас есть наш код TypeScript, чтобы объявить термин переменная и Поиск функция Функция поиска просто излучает событие с термином, поэтому приложение знает, когда выполнять поиск.

Теперь давайте создадим компонент результатов, чтобы показать наши результаты. Добавьте новый файл с именем vs-results.vue со следующим кодом:

Давайте сначала сосредоточимся на HTML выше:

• v-for будет переиграть на нашем Результаты Массив, который передается из компонента приложения, как мы увидим позже.
• Тег IMG использует директиву V-IF для условного отображения миниатюры, которая связана с объектом. Свойство нашего элемента результата поиска.
• Название карты связано с item.title
• Корпус карты связан с item.description или item.abstract. Примечание здесь мы используем директиву V-HTML, так как этот контент может быть HTML, и мы хотим сделать ее HTML, а не только текст. Мы также называем усечение Метод, чтобы оставить текст ограниченным.

Теперь давайте внимательно посмотрим на код TypeScript:

• У нас есть собственность под названием данные Анкет Компонент приложения передаст это в.
• У нас есть вычисленная функция под названием полученные результаты . Это то, что мы ссылаемся в нашем шаблоне v-for, чтобы итерация над результатами.
• Функция усечения будет ограничивать наше описание 50 слов.
• Функция ошибки будет обрабатывать изображения результатов, которые не могут загрузить. Это ссылка на наш элемент IMG с @error директива.

Компонент app.vue должен быть изменен сейчас, чтобы обрабатывать событие из компонента VS-Input, выполните поиск, затем передайте результаты компоненту VS-Results:

• Обратите внимание в шаблоне выше VS-Input использует директиву @Search для привязки функции поиска. Это запустит нашу функцию поиска выше, когда VS-Input испускает событие.
• Функция Onearch будет вызвать API, чтобы получить результаты. Мы посмотрим на это следующее.
• Также обратите внимание в шаблоне VS-Results: атрибут данных. Именно здесь компонент приложения передаст переменную результатов в компонент VS-Results.

Почти сделано. Уведомление выше мы импортируем Voyagerapi. Нам нужно это создать. Добавьте файл с именем search-api.ts со следующим, который будет получать результаты поиска из индекса Solr.

export default {
  search: async function(term: string): Promise> {
    // solr endpoint
    const host = 'http://voyagerdemo.com/';
    const path = 'daily/solr/v0/select';
    const fields = 'id,name:[name],thumb:[thumbURL],abstract,description'; // fields we want returned
    const api = `${host}${path}?q=${term}&fl=${fields}&wt=json&rows=20`;
    const call = await fetch(api);
    const json = await call.json();
    return json.response.docs;
  }
}

Приведенный выше код определяет «API», который является URL -адресом индекса Solr. Поля Определите, какие поля мы хотели бы вернуться. Q Param передает «термин» пользовательский ввод и хочет отфильтровать результаты. Мы используем встроенную функцию «Fetch», чтобы сделать Ajax Call в API и «ждать» результатов, которые являются обещанием.

Вы также можете заметить, что функция поиска является Асинхронизация функция Это позволяет нам использовать ждет Чтобы код выглядел более синхронным, а не использует синтаксис обещания. then ().

Вот и все! Теперь, если вы проверете браузер, вы сможете ввести термин поиска и нажмите «Поиск» и см. Что -то вроде:

Если что -то пошло не так, вы можете получить полную рабочую версию отсюда: https://github.com/scottlepp/search-vue-parcel-typescript/tree/final

Оригинал: “https://dev.to/scottlepp/creating-a-search-app-with-vuejs–parcel–typescript-part-3-of-3-1j5f”