Comment utiliser Vue pour implémenter une page de recherche de type JD.com ?

Vue est l'un des frameworks front-end les plus populaires aujourd'hui. Il peut nous aider à créer rapidement des interfaces utilisateur efficaces et esthétiques. Dans cet article, nous présenterons comment utiliser Vue pour implémenter une page de recherche de type JD.com.

Tout d'abord, nous devons préparer les outils et technologies suivants :

• Vue CLI : utilisé pour initialiser rapidement un projet Vue.
• axios : utilisé pour envoyer des requêtes HTTP et traiter les réponses.
• Vuex : utilisé pour gérer l'état de l'application.
• Element UI : utilisé pour fournir divers composants d'interface utilisateur.

1. Initialiser le projet Vue

Utiliser Vue CLI pour initialiser un nouveau projet est très simple, il suffit d'exécuter la commande suivante sur la ligne de commande :

vue create jd-search

Cette commande créera un fichier nommé dans le répertoire courant jd -recherchez le projet de et installez automatiquement les dépendances requises. 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

Ajouter Element UI
🎜L'installation d'Element UI est très simple, exécutez simplement la commande suivante dans la ligne de commande : 🎜rrreee🎜Une fois l'installation terminée, dans main.js : 🎜rrreee<ol start="3">🎜Créez un composant de recherche🎜🎜🎜Créez un fichier nommé <code>Search.vuedans le src/components répertoire > composant. Ce composant contient une zone de saisie et un bouton de recherche. Le code est le suivant : 🎜rrreee🎜Ce composant contient un attribut de données keyword, qui est utilisé pour enregistrer les mots-clés saisis par l'utilisateur. Lorsque l'utilisateur clique sur le bouton de recherche ou appuie sur la touche Entrée, la méthode search sera déclenchée, transmettant la valeur actuelle du keyword en tant que paramètre au composant parent. 🎜
🎜Créez un composant de liste de produits🎜🎜🎜Créez un composant nommé ProductList.vue dans le répertoire src/components. Ce composant affichera la liste des produits des résultats de recherche. Le code est le suivant : 🎜rrreee🎜Ce composant reçoit un attribut nommé products pour afficher les résultats de recherche. Il utilise les composants el-card et el-image d'Element UI pour afficher la liste de produits et utilise CSS Grid pour implémenter une mise en page adaptative. 🎜
🎜Créez un module de gestion d'état🎜🎜🎜Il est très pratique d'utiliser Vuex pour gérer l'état de votre application. Créez un module nommé search.js dans le répertoire src/store. Ce module contient les états, opérations et getters suivants : 🎜rrreee🎜Ce module contient une opération asynchrone appelée search qui envoie des requêtes de recherche et met à jour les résultats de recherche. Il contient également un état nommé mot-clé et un état nommé produits pour enregistrer les mots-clés et les résultats de recherche saisis par l'utilisateur. 🎜
🎜Créez une page de recherche🎜🎜🎜Créez une page nommée SearchPage.vue, qui contiendra Recherche et ProductList composants et gérer l’interaction entre eux via Vuex. Le code est le suivant : 🎜rrreee🎜Cette page contient les composants <code>Search et ProductList, et utilise mapState et mapActions de Vuex. > mappage de l'attribut produits et de l'opération recherche. Lorsque l'utilisateur saisit un mot-clé et clique sur le bouton de recherche ou appuie sur la touche Entrée, l'opération recherche sera déclenchée, les résultats de la recherche seront obtenus à partir de l'API back-end et les produits dans Vuex sera mis à jour. 🎜<ol start="7">🎜Envoyer la requête de recherche🎜🎜🎜Configurez Axios dans <code>src/main.js, le code est le suivant : 🎜rrreee🎜Cette configuration nous permet de l'utiliser dans le application$axios
envoie des requêtes HTTP. Nous pouvons désormais envoyer des requêtes de recherche dans l'action search. 🎜🎜À ce stade, nous avons terminé la mise en œuvre de la page de recherche de type JD.com. Cette page utilise des technologies telles que Vue, Element UI, Axios et Vuex et suit les meilleures pratiques pour les applications modernes d'une seule page. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!