Wie verwende ich Vue, um eine JD.com-ähnliche Suchseite zu implementieren?

Vue ist heute eines der beliebtesten Frontend-Frameworks und kann uns dabei helfen, schnell effiziente und schöne Benutzeroberflächen zu erstellen. In diesem Artikel stellen wir vor, wie Sie mit Vue eine JD.com-ähnliche Suchseite implementieren.

Zuerst müssen wir die folgenden Tools und Technologien vorbereiten:

• Vue CLI: Wird zum schnellen Initialisieren eines Vue-Projekts verwendet.
• axios: Wird zum Senden von HTTP-Anfragen und zum Verarbeiten von Antworten verwendet.
• Vuex: Wird zur Verwaltung des Anwendungsstatus verwendet.
• Element-Benutzeroberfläche: Wird zur Bereitstellung verschiedener UI-Komponenten verwendet.

1. Vue-Projekt initialisieren

Die Verwendung von Vue CLI zum Initialisieren eines neuen Projekts ist sehr einfach. Führen Sie einfach den folgenden Befehl in der Befehlszeile aus:

vue create jd-search

Dieser Befehl erstellt eine Datei mit dem Namen im aktuellen Verzeichnis jd -Durchsuchen Sies Projekt und installieren Sie automatisch die erforderlichen Abhängigkeiten. 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

Element UI hinzufügen
🎜Die Installation von Element UI ist sehr einfach. Führen Sie einfach den folgenden Befehl in der Befehlszeile aus: 🎜rrreee🎜Nachdem die Installation abgeschlossen ist, in main.js: 🎜rrreee<ol start="3">🎜Erstellen Sie eine Suchkomponente🎜🎜🎜Erstellen Sie eine Datei mit dem Namen <code>Search.vueim src/components Verzeichnis > Komponente. Diese Komponente enthält ein Eingabefeld und eine Suchschaltfläche. Der Code lautet wie folgt: 🎜rrreee🎜Diese Komponente enthält ein keyword-Datenattribut, das zum Speichern der vom Benutzer eingegebenen Schlüsselwörter verwendet wird. Wenn der Benutzer auf die Suchschaltfläche klickt oder die Eingabetaste drückt, wird die Methode search ausgelöst, die den aktuellen Wert von keyword als Parameter an die übergeordnete Komponente übergibt. 🎜
🎜Erstellen Sie eine Produktlistenkomponente.🎜🎜🎜Erstellen Sie eine Komponente mit dem Namen ProductList.vue im Verzeichnis src/components. Diese Komponente zeigt die Produktliste der Suchergebnisse an. Der Code lautet wie folgt: 🎜rrreee🎜Diese Komponente erhält ein Attribut namens products zur Anzeige von Suchergebnissen. Es verwendet die Komponenten el-card und el-image von Element UI, um die Produktliste anzuzeigen, und verwendet CSS Grid, um ein adaptives Layout zu implementieren. 🎜
🎜Erstellen Sie ein Statusverwaltungsmodul🎜🎜🎜Es ist sehr praktisch, Vuex zum Verwalten des Status Ihrer Bewerbung zu verwenden. Erstellen Sie ein Modul mit dem Namen search.js im Verzeichnis src/store. Dieses Modul enthält die folgenden Zustände, Operationen und Getter: 🎜rrreee🎜 Dieses Modul enthält eine asynchrone Operation namens search, die Suchanfragen sendet und Suchergebnisse aktualisiert. Es enthält außerdem einen Status namens keyword und einen Status namens products, um die vom Benutzer eingegebenen Schlüsselwörter und Suchergebnisse zu speichern. 🎜
🎜Erstellen Sie eine Suchseite🎜🎜🎜Erstellen Sie eine Seite mit dem Namen SearchPage.vue, die Search und ProductList enthält. code>-Komponenten und verwalten Sie die Interaktion zwischen ihnen über Vuex. Der Code lautet wie folgt: 🎜rrreee🎜Diese Seite enthält <code>Search- und ProductList-Komponenten und verwendet Vuexs mapState und mapActions Zuordnung des Attributs products und der Operation search. Wenn der Benutzer ein Schlüsselwort eingibt und auf die Suchschaltfläche klickt oder die Eingabetaste drückt, wird der Suchvorgang-Vorgang ausgelöst, die Suchergebnisse werden von der Back-End-API und Produkten in Vuex wird aktualisiert. 🎜<ol start="7">🎜Suchanfrage senden🎜🎜🎜Konfigurieren Sie Axios in <code>src/main.js, der Code lautet wie folgt: 🎜rrreee🎜Diese Konfiguration ermöglicht uns die Verwendung im application$axios
-Objekt sendet HTTP-Anfragen. Jetzt können wir Suchanfragen in der Aktion search senden. 🎜🎜Zu diesem Zeitpunkt haben wir die Implementierung der JD.com-ähnlichen Suchseite abgeschlossen. Diese Seite nutzt Technologien wie Vue, Element UI, Axios und Vuex und folgt Best Practices für moderne Single-Page-Anwendungen. 🎜

Das obige ist der detaillierte Inhalt vonWie verwende ich Vue, um eine JD.com-ähnliche Suchseite zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!