Vue を使用して JD.com のような検索ページを実装するにはどうすればよいですか?

Vue は現在最も人気のあるフロントエンド フレームワークの 1 つで、効率的で美しいユーザー インターフェイスを迅速に構築するのに役立ちます。この記事では、Vue を使用して JD.com 風の検索ページを実装する方法を紹介します。

まず、次のツールとテクノロジーを準備する必要があります:

• Vue CLI: Vue プロジェクトを迅速に初期化するために使用されます。
• axios: HTTP リクエストの送信と応答の処理に使用されます。
• Vuex: アプリケーションの状態を管理するために使用されます。
• 要素 UI: さまざまな UI コンポーネントを提供するために使用されます。

1. Vue プロジェクトの初期化

Vue CLI を使用して新しいプロジェクトを初期化するのは非常に簡単で、コマンド ラインで次のコマンドを実行するだけです。

vue create jd-search

このコマンドは、現在のディレクトリにjd-searchという名前のプロジェクトを作成し、必要な依存関係を自動的にインストールします。

2. 要素 UI の追加

要素 UI のインストールは非常に簡単です。コマンド ラインで次のコマンドを実行するだけです。

npm install element-ui

インストールが完了したら、main.jsに要素 UI を導入します:

import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)

3. 検索コンポーネントの作成

src/componentsに作成します。ディレクトリSearch.vueという名前のコンポーネント。このコンポーネントには、入力ボックスと検索ボタンが含まれています。コードは次のとおりです:

このコンポーネントには、ユーザーが入力したキーワードを保存するために使用されるkeywordデータ属性が含まれています。ユーザーが検索ボタンをクリックするか Enter キーを押すと、searchメソッドがトリガーされ、現在のkeyword値がパラメーターとして親コンポーネントに渡されます。

4. 製品リスト コンポーネントの作成

ProductList.vueという名前のコンポーネントをsrc/componentsディレクトリに作成します。このコンポーネントは、検索結果の製品リストを表示します。コードは次のとおりです:

このコンポーネントは、検索結果の表示に使用されるproductsという名前の属性を受け取ります。 Element UI のel-cardコンポーネントとel-imageコンポーネントを使用して製品リストを表示し、CSS グリッドを使用してアダプティブ レイアウトを実装します。

5. 状態管理モジュールを作成する

Vuex を使用してアプリケーションの状態を管理すると非常に便利です。src/storeディレクトリにsearch.jsという名前のモジュールを作成します。このモジュールには、次の状態、操作、およびゲッターが含まれています。

const state = { keyword: '', products: [], }; const mutations = { updateKeyword(state, keyword) { state.keyword = keyword; }, updateProducts(state, products) { state.products = products; }, }; const actions = { async search({ commit }, keyword) { const response = await this.$axios.get('/api/search', { params: { keyword }, }); commit('updateProducts', response.data); }, }; const getters = {}; export default { namespaced: true, state, mutations, actions, getters, };

このモジュールには、検索リクエストの送信と検索結果の更新に使用されるsearchという名前の非同期操作が含まれています。また、ユーザーが入力したキーワードと検索結果を保存するための、keywordという名前の状態とproductsという名前の状態も含まれています。

6. 検索ページの作成

SearchPage.vueという名前のページを作成します。このページには、Searchとが含まれます。 ProductListコンポーネントを管理し、Vuex を通じてコンポーネント間の対話を管理します。コードは次のとおりです。

このページにはSearchコンポーネントとProductListコンポーネントが含まれており、Vuex のmapStateとmapActions## を使用します。#products属性とsearch操作をマッピングします。ユーザーがキーワードを入力して検索ボタンをクリックするか Enter キーを押すと、search操作がトリガーされ、検索結果がバックエンド API から取得され、productsステータスがバックエンド API から取得されます。 Vuexが更新されました。

検索リクエストを送信

src/main.jsで Axios を設定します。コードは次のとおりです:

import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) axios.defaults.baseURL = 'http://localhost:3000'

$axiosオブジェクトを使用して HTTP リクエストを送信できます。これで、searchアクションで検索リクエストを送信できるようになりました。

以上がVue を使用して JD.com のような検索ページを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。