如何使用 Vue 實現仿京東搜尋頁面？

Vue 是當下非常流行的前端框架之一，它可以幫助我們快速建立高效且美觀的使用者介面。在本文中，我們將介紹如何使用 Vue 實現仿京東搜尋頁面。

首先，我們需要準備以下工具和技術：

• Vue CLI：用於快速初始化一個 Vue 專案。
• axios：用於傳送 HTTP 請求和處理回應。
• Vuex：用於管理應用程式的狀態。
• Element UI：用於提供各種 UI 元件。

1. 初始化Vue 專案

使用Vue CLI 初始化一個新的專案非常簡單，只需要在命令列中執行以下命令：

vue create jd-search

這個指令會在目前目錄下建立一個名為jd-search 的項目，並自動安裝所需的依賴項。

2. 新增Element UI

安裝Element UI 非常簡單，只需要在命令列中執行以下命令：

npm install element-ui

安裝完成後，在main.js 中引入Element 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 資料屬性，用來保存使用者輸入的關鍵字。當使用者點擊搜尋按鈕或按下回車鍵時，會觸發 search 方法，將目前的 keyword 值作為參數傳遞給父元件。

4. 建立商品清單元件

在 src/components 目錄下建立一個名為 ProductList.vue 的元件。這個元件會顯示搜尋結果的商品列表，程式碼如下：

<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 Grid 實現自適應佈局。

5. 建立狀態管理模組

使用 Vuex 管理應用程式的狀態非常方便。在 src/store 目錄下建立一個名為 search.js 的模組。這個模組包含以下狀態、操作和 getters：

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 操作。當使用者輸入關鍵字並點擊搜尋按鈕或按下回車鍵時，會觸發 search 操作，從後端 API 取得搜尋結果，並更新 Vuex 中的 products 狀態。

7. 傳送搜尋請求

在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、Element UI、Axios 和 Vuex 等技術，並遵循了現代化的單頁應用程式的最佳實踐。

以上是如何使用 Vue 實現仿京東搜尋頁面？的詳細內容。更多資訊請關注PHP中文網其他相關文章！