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 という名前のコンポーネント。このコンポーネントには、入力ボックスと検索ボタンが含まれています。コードは次のとおりです:

<template>
  <div class="search">
    <el-input
      v-model="keyword"
      placeholder="请输入关键词"
      class="search-input"
      @keyup.enter.native="search"
    />
    <el-button
      type="primary"
      icon="el-icon-search"
      class="search-btn"
      @click="search"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
    }
  },
  methods: {
    search() {
      this.$emit('search', this.keyword);
    }
  },
}
</script>

<style scoped>
.search {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.search-input {
  width: 500px;
  margin-right: 20px;
}

.search-btn {
  width: 80px;
}
</style>

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

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

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

<template>
  <div class="product-list">
    <el-card v-for="product in products" :key="product.id">
      <div slot="header" class="product-header">
        <h3>{{ product.title }}</h3>
        <span class="product-price">{{ product.price }}</span>
      </div>
      <div>
        <img :src="product.image" class="product-image" />
      </div>
      <div>
        {{ product.description }}
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    products: {
      type: Array,
      default: () => [],
    },
  },
}
</script>

<style scoped>
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 20px;
}

.product-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.product-price {
  font-size: 18px;
}
</style>

このコンポーネントは、検索結果の表示に使用される 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 を通じてコン​​ポーネント間の対話を管理します。コードは次のとおりです。

<template>
  <div class="search-page">
    <search @search="search" />
    <product-list :products="products" />
  </div>
</template>

<script>
import Search from '@/components/Search';
import ProductList from '@/components/ProductList';
import { mapState, mapActions } from 'vuex';

export default {
  components: { Search, ProductList },
  computed: {
    ...mapState('search', ['products']),
  },
  methods: {
    ...mapActions('search', ['search']),
  },
}
</script>

<style scoped>
.search-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
</style>

このページには 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'

Thisアプリケーションで

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

これまでに、JD.com 風の検索ページの実装が完了しました。このページでは、Vue、Element UI、Axios、Vuex などのテクノロジを使用し、最新のシングルページ アプリケーションのベスト プラクティスに従っています。

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