Реальный поиск предложений с использованием Vue.js

Введение

В этом проекте вы научитесь создавать веб-приложение, которое позволяет пользователям искать и отображать прекрасные предложения из литературы в режиме реального времени. Приложение получит данные из JSON-файла и использует Vue.js для реализации функции поиска и отображения результатов.

👀 Предварительный просмотр

🎯 Задачи

В этом проекте вы научитесь:

• настраивать проект и понимать предоставленные файлы и директории;
• реализовывать запрос данных для получения данных из файла data.json;
• реализовывать функцию реального времени поиска для отображения соответствующих предложений;
• добавлять некоторые финальные штрихи в проект, стилизуя веб-страницу.

🏆 Достижения

После завершения этого проекта вы сможете:

• настраивать веб-разработку проект с использованием HTML, CSS и JavaScript;
• использовать Vue.js для создания отзывчивого и интерактивного веб-приложения;
• получать данные из JSON-файла и отображать их на веб-странице;
• реализовывать функцию реального времени поиска и выделять соответствующие ключевые слова;
• стилизовать веб-страницу с использованием CSS для улучшения общего вида и пользовательского опыта.

Настройте структуру проекта

В этом шаге вы настройте файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура директории следующая:

├── css
│   └── style.css
├── data.json
├── index.html
└── js
    ├── axios.min.js
    └── vue.min.js

В них:

• css/style.css — файл стилей.
• index.html — главная страница.
• data.json — данные, которые будут использоваться в проекте.
• js/vue.min.js — файл версии vue2.x, используемый в проекте.
• js/axios.min.js — файл axios.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, чтобы увидеть страницу.

Реализуйте запрос данных

В этом шаге вы завершите запрос данных для получения данных из файла data.json.

1. В файле index.html найдите комментарий TODO в секции <script>.
2. Внутри функции data() добавьте следующий код для получения данных из файла data.json:

data() {
  return {
    list: [],
    search: ""
  };
},
mounted() {
  this.getData();
},
methods: {
  async getData() {
    const res = await axios({ url: "./data.json" });
    this.list = res.data;
  }
}

Этот код настраивает начальные свойства данных, list и search, а затем вызывает метод getData() в хуке mounted() для получения данных из файла data.json.

3. Сохраните файл index.html и обновите веб-страницу. Теперь вы должны увидеть загруженные начальные данные из файла data.json.

Реализуйте функциональность реального времени поиска

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

1. В файле index.html найдите комментарий TODO в секции <div class="search-form">.
2. Замените содержимое внутри элемента <div class="search-form"> следующим кодом:

<input
  type="text"
  id="search"
  class="search"
  v-model="search"
  placeholder="Title Sentence Author"
/>
<ul class="suggestions">
  <li v-for="item in filterList">
    <span v-html="hightLight(item.poetry_content)" class="poet"></span>
    <span class="title">
      <span v-html="hightLight(item.title)"></span>
      -
      <span v-html="hightLight(item.author)"></span>
    </span>
  </li>
</ul>

Этот код использует директивы Vue.js для динамического рендеринга списка соответствующих предложений в зависимости от ввода пользователя.

3. Далее добавьте следующий код в mounted():

mounted() {
  this.getData();
},
computed: {
  hightLight() {
    return (text) => {
      if (this.search) {
        const reg = new RegExp(this.search, "g");
        return text.replace(
          reg,
          `<span class='highlight'>${this.search}</span>`
        );
      }
      return text;
    };
  },
  filterList() {
    let { search, list } = this;
    let str = search.trim();
    if (str.length == 0) {
      return [];
    } else {
      return search
       ? list.filter(
            (item) =>
              item.title.includes(search) ||
              item.author.includes(search) ||
              item.poetry_content.includes(search)
          )
        : [];
    }
  }
},

Вычисляемое свойство hightLight — это функция, которая оборачивает соответствующие ключевые слова в тег <span class='highlight'>. Вычисляемое свойство filterList фильтрует список предложений в зависимости от ввода пользователя в поле поиска.

4. Сохраните файл index.html и обновите веб-страницу. Теперь вы должны увидеть работу функции реального времени поиска, с отображением соответствующих предложений и выделением ключевых слов.

После завершения итоговый эффект страницы выглядит так:

Резюме

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