はじめに
このプロジェクトでは、Vue.js を使って動的なメニューツリー検索機能を構築する方法を学びます。このプロジェクトでは、JSON ファイルからサブメニューデータを取得し、曖昧検索機能を実装し、フィルタリングされたメニューツリーをページに表示します。
👀 プレビュー
🎯 タスク
このプロジェクトで学ぶことは以下の通りです。
axiosライブラリを使って JSON ファイルからサブメニューデータを取得する方法- ユーザーの入力に基づいてメニュー項目をフィルタリングする検索機能を実装する方法
- 一致するテキストを強調表示しながら、フィルタリングされたメニューツリーをページに表示する方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- Vue.js を使って動的で対話型のユーザーインターフェイスを開発する
- JSON ファイルからデータを取得し、非同期データ取得を処理する
- ユーザー入力に基づいてデータをフィルタリングする曖昧検索機能を実装する
- 階層型のメニューツリー構造を表示し、一致するテキストを強調表示する
プロジェクト構造を設定する
このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了してください。
プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。
├── js
│ ├── axios.min.js ## 非同期データ取得に使用する Ajax カプセル化ライブラリ
│ ├── index.js ## ページ機能を実装するロジックコード
│ └── vue.js ## Vue.js フレームワークの 2.x 版
├── data.json ## サブメニューの全データ
└── index.html ## ページレイアウト
WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。
現在は、静的なレイアウトのみが表示され、サブメニューデータの非同期取得と表示、および曖昧検索機能は実装されていません。
サブメニューデータを取得する
このステップでは、axios ライブラリを使って data.json ファイルからサブメニューデータを取得する方法を学びます。
/jsディレクトリ内のindex.jsファイルを開きます。created()ライフサイクルフック内で、axios.get()メソッドを使ってdata.jsonファイルからデータを取得します。
created() {
axios.get("../data.json").then((res) => {
this.list = res.data;
this.resultList = res.data;
});
},
このコードは、data.json ファイルからデータを取得し、それを list と resultList データプロパティに格納します。
検索機能を実装する
このステップでは、サブメニュー項目の検索機能を実装する方法を学びます。
index.jsファイルで、methodsオブジェクトにsearchData()メソッドを追加します。
methods: {
searchData() {
// TODO: Implementing the search function
this.resultList = [];
let set = new Set();
this.list.forEach((item1) => {
if (item1.meta.title.search(this.search)!== -1) {
set.add(item1);
}
if (item1.children) {
item1.children.forEach((item2) => {
if (item2.meta.title.search(this.search)!== -1) {
set.add(item1);
}
});
}
});
this.resultList = set;
}
}
- 検索入力に基づいて
resultListデータプロパティを更新します。searchData()メソッドは、listデータをループして、一致する項目をSetオブジェクトに追加します。その後、SetオブジェクトがresultListデータプロパティに割り当てられます。
この実装により、検索クエリに一致するサブメニュー項目が表示され、一致するテキストが黄色の背景で強調表示されます。
これらの変更により、ページは検索入力に基づいてフィルタリングされたメニューツリーを表示し、一致するテキストが強調表示されます。
最終的な実装の効果は以下の通りです。
まとめ
おめでとうございます！このプロジェクトを完了しました。実験技術を向上させるために、LabEx でさらに多くの実験を行ってみましょう。
