Bagaimana untuk menggunakan Vue untuk melaksanakan halaman carian seperti JD.com?

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular hari ini. Ia boleh membantu kami membina antara muka pengguna yang cekap dan cantik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk melaksanakan halaman carian seperti JD.com.

Pertama, kita perlu menyediakan alatan dan teknologi berikut:

• Vue CLI: digunakan untuk memulakan projek Vue dengan cepat.
• axios: digunakan untuk menghantar permintaan HTTP dan memproses respons.
• Vuex: digunakan untuk mengurus keadaan aplikasi.
• UI Elemen: digunakan untuk menyediakan pelbagai komponen UI.

1. Initialize Vue project

Menggunakan Vue CLI untuk memulakan projek baharu adalah sangat mudah, cuma laksanakan arahan berikut pada baris arahan:

vue create jd-search

Arahan ini akan mencipta fail bernama dalam direktori semasa jd -cariprojek dan pasang secara automatik kebergantungan yang diperlukan. 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

Tambah UI Elemen
🎜Memasang UI Elemen adalah sangat mudah, cuma laksanakan arahan berikut dalam baris arahan: 🎜rrreee🎜Selepas pemasangan selesai, dalam main.js: 🎜rrreee<ol start="3">🎜Buat komponen carian🎜🎜🎜Buat fail bernama <code>Search.vuedalam src/components direktori > komponen. Komponen ini mengandungi kotak input dan butang carian Kod adalah seperti berikut: 🎜rrreee🎜Komponen ini mengandungi atribut data kata kunci

, yang digunakan untuk menyimpan kata kunci yang dimasukkan oleh pengguna. Apabila pengguna mengklik butang carian atau menekan kekunci Enter, kaedah search akan dicetuskan, menghantar nilai keyword semasa sebagai parameter kepada komponen induk. 🎜

🎜Buat komponen senarai produk🎜🎜🎜Buat komponen bernama ProductList.vue dalam direktori src/components. Komponen ini akan memaparkan senarai produk hasil carian Kod adalah seperti berikut: 🎜rrreee🎜Komponen ini menerima atribut bernama products untuk memaparkan hasil carian. Ia menggunakan komponen el-card dan el-image UI untuk memaparkan senarai produk dan menggunakan Grid CSS untuk melaksanakan reka letak penyesuaian. 🎜
🎜Buat modul pengurusan negeri🎜🎜🎜Sangat mudah untuk menggunakan Vuex untuk mengurus status permohonan anda. Buat modul bernama search.js dalam direktori src/store. Modul ini mengandungi keadaan, operasi dan getter berikut: 🎜rrreee🎜 Modul ini mengandungi operasi tak segerak yang dipanggil search yang menghantar permintaan carian dan mengemas kini hasil carian. Ia juga mengandungi keadaan bernama kata kunci dan keadaan bernama products untuk menyimpan kata kunci dan hasil carian yang dimasukkan oleh pengguna. 🎜
🎜Buat halaman carian🎜🎜🎜Buat halaman bernama SearchPage.vue, yang akan mengandungi Cari dan ProductList / kod> komponen dan menguruskan interaksi antara mereka melalui Vuex. Kodnya adalah seperti berikut: 🎜rrreee🎜Halaman ini mengandungi komponen <code>Cari dan ProductList serta menggunakan mapState dan mapActions Vuex. > memetakan atribut products dan operasi search. Apabila pengguna memasukkan kata kunci dan mengklik butang carian atau menekan kekunci Enter, operasi search akan dicetuskan, hasil carian akan diperoleh daripada API bahagian belakang dan products dalam Vuex akan dikemas kini. 🎜<ol start="7">🎜Hantar permintaan carian🎜🎜🎜Konfigurasikan Axios dalam <code>src/main.js, kodnya adalah seperti berikut: 🎜rrreee🎜Konfigurasi ini membolehkan kami menggunakannya dalam application$axios
menghantar permintaan HTTP. Kini kami boleh menghantar permintaan carian dalam tindakan search. 🎜🎜Pada ketika ini, kami telah menyelesaikan pelaksanaan halaman carian seperti JD.com. Halaman ini menggunakan teknologi seperti Vue, UI Elemen, Axios dan Vuex serta mengikuti amalan terbaik untuk aplikasi satu halaman moden. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan halaman carian seperti JD.com?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!