Busca de Frases em Tempo Real com Vue.js

Introdução

Neste projeto, você aprenderá como construir uma aplicação web que permite aos usuários pesquisar e exibir frases bonitas da literatura em tempo real. A aplicação buscará os dados de um arquivo JSON e usará Vue.js para implementar a funcionalidade de pesquisa e exibir os resultados.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o projeto e entender os arquivos e diretórios fornecidos
• Como implementar a requisição de dados para buscar os dados do arquivo data.json
• Como implementar a funcionalidade de pesquisa em tempo real para exibir as frases correspondentes
• Como adicionar alguns toques finais ao projeto, estilizando a página web

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Configurar um projeto de desenvolvimento web com HTML, CSS e JavaScript
• Usar Vue.js para construir uma aplicação web responsiva e interativa
• Buscar dados de um arquivo JSON e exibi-los na página web
• Implementar a funcionalidade de pesquisa em tempo real e destacar as palavras-chave correspondentes
• Estilizar uma página web usando CSS para melhorar a aparência geral e a experiência do usuário

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para completar esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

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

Dentre eles:

• css/style.css é o arquivo de estilo.
• index.html é a página principal.
• data.json são os dados que serão usados no projeto.
• js/vue.min.js é o arquivo da versão vue2.x usado no projeto.
• js/axios.min.js é o arquivo axios.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Implementar a Requisição de Dados

Nesta etapa, você completará a requisição de dados para buscar os dados do arquivo data.json.

1. No arquivo index.html, localize o comentário TODO na seção <script>.
2. Dentro da função data(), adicione o seguinte código para buscar os dados do arquivo data.json:

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

Este código configura as propriedades de dados iniciais, list e search, e então chama o método getData() no hook mounted() para buscar os dados do arquivo data.json.

3. Salve o arquivo index.html e atualize a página web. Você agora deve ver os dados iniciais carregados do arquivo data.json.

Implementar a Funcionalidade de Busca em Tempo Real

Nesta etapa, você implementará a funcionalidade de busca em tempo real para exibir as frases correspondentes com base na entrada do usuário.

1. No arquivo index.html, localize o comentário TODO na seção <div class="search-form">.
2. Substitua o conteúdo dentro do elemento <div class="search-form"> pelo seguinte código:

<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>

Este código usa diretivas do Vue.js para renderizar dinamicamente a lista de frases correspondentes com base na entrada do usuário.

3. Em seguida, adicione o seguinte código ao lado de 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)
          )
        : [];
    }
  }
},

A propriedade computada hightLight é uma função que envolve as palavras-chave correspondentes na tag <span class='highlight'>. A propriedade computada filterList filtra a list de frases com base na entrada do usuário na caixa de busca.

4. Salve o arquivo index.html e atualize a página web. Você agora deve ver a funcionalidade de busca em tempo real funcionando, com as frases correspondentes exibidas e as palavras-chave destacadas.

Após a conclusão, o efeito final da página é o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.