リアルタイム文章検索アプリを構築する | Vue.js、JSON、Web 開発

はじめに

このプロジェクトでは、ユーザーが文学作品からの美しい文章をリアルタイムで検索して表示できる Web アプリケーションを作成する方法を学びます。このアプリケーションは JSON ファイルからデータを取得し、Vue.js を使用して検索機能を実装し、結果を表示します。

👀 プレビュー

Web アプリケーションの検索インターフェイスのプレビュー

リアルタイムの検索結果表示

🎯 タスク

このプロジェクトでは、以下のことを学びます。

プロジェクトをセットアップし、提供されたファイルとディレクトリを理解する方法
data.jsonファイルからデータを取得するためのデータ要求を実装する方法
一致する文章を表示するためのリアルタイム検索機能を実装する方法
Web ページをスタイリッシングすることでプロジェクトにいくつかの仕上げを加える方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

HTML、CSS、JavaScript を使用して Web 開発プロジェクトをセットアップする
Vue.js を使用して応答性が高くインタラクティブな Web アプリケーションを構築する
JSON ファイルからデータを取得し、Web ページに表示する
リアルタイム検索機能を実装し、一致するキーワードを強調表示する
CSS を使用して Web ページをスタイリッシングし、全体的な外観とユーザーエクスペリエンスを向上させる

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了してください。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── 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 ファイルです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

データ要求を実装する

このステップでは、data.jsonファイルからデータを取得するためのデータ要求を完了します。

index.htmlファイルで、<script>セクション内のTODOコメントを探します。
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を設定し、その後、mounted()フック内でgetData()メソッドを呼び出してdata.jsonファイルからデータを取得します。

index.htmlファイルを保存し、Web ページを更新します。この時点で、data.jsonファイルから読み込まれた初期データが表示されるはずです。

リアルタイム検索機能を実装する

このステップでは、ユーザーの入力に基づいて一致する文章を表示するためのリアルタイム検索機能を実装します。

index.htmlファイルで、<div class="search-form">セクション内のTODOコメントを探します。
<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 のディレクティブを使用して、ユーザーの入力に基づいて一致する文章のリストを動的にレンダリングします。

次に、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コンピュートドプロパティは、検索ボックス内のユーザー入力に基づいて文章のlistをフィルタリングします。

index.htmlファイルを保存し、Web ページを更新します。この時点で、リアルタイム検索機能が機能し、一致する文章が表示され、キーワードが強調表示されているはずです。

完了後の最終的なページの表示は以下の通りです。

画像の説明

まとめ

おめでとうございます！このプロジェクトを完了しました。実験技術を向上させるために、LabEx でさらに多くの実験を行ってみましょう。

Vue.js を使ったリアルタイム文章検索