집 > 기사 > 웹 프론트엔드 > Vue를 사용하여 JD.com과 유사한 검색 페이지를 구현하는 방법은 무엇입니까?

Vue를 사용하여 JD.com과 유사한 검색 페이지를 구현하는 방법은 무엇입니까?

PHPz원래의: 2023-06-25 09:05:051438검색

Vue는 오늘날 가장 인기 있는 프런트 엔드 프레임워크 중 하나이며 효율적이고 아름다운 사용자 인터페이스를 빠르게 구축하는 데 도움이 됩니다. 이 기사에서는 Vue를 사용하여 JD.com과 유사한 검색 페이지를 구현하는 방법을 소개합니다.

먼저 다음 도구와 기술을 준비해야 합니다.

Vue CLI: Vue 프로젝트를 빠르게 초기화하는 데 사용됩니다.
axios: HTTP 요청을 보내고 응답을 처리하는 데 사용됩니다.
Vuex: 애플리케이션 상태를 관리하는 데 사용됩니다.
Element UI: 다양한 UI 컴포넌트를 제공하는데 사용됩니다.

Vue 프로젝트 초기화

Vue CLI를 사용하여 새 프로젝트를 초기화하는 것은 매우 간단합니다. 명령줄에서 다음 명령을 실행하면 됩니다.

vue create jd-search

이 명령은 현재 디렉터리 jd에 라는 파일을 생성합니다. -의 프로젝트를 검색하고 필요한 종속성을 자동으로 설치합니다. jd-search 的项目，并自动安装所需的依赖项。

添加 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)

创建搜索组件

在 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 值作为参数传递给父组件。

创建商品列表组件

在 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 实现自适应布局。

创建状态管理模块

使用 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 的状态，用于保存用户输入的关键词和搜索结果。

创建搜索页面

创建一个名为 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 状态。

发送搜索请求

在 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

main.js: 🎜rrreee<ol start="3">🎜검색 구성 요소 만들기🎜🎜🎜 <code>src/comComponents

Search.vue

keyword

search

keyword

src/comComponents

ProductList.vue

products

el-card

el-image

src/store

search.js

search

keyword

products

SearchPage.vue

Search

ProductList /가 포함됩니다. code> 구성 요소를 관리하고 Vuex를 통해 구성 요소 간의 상호 작용을 관리합니다. 코드는 다음과 같습니다. 🎜rrreee🎜이 페이지에는 <code>Search

ProductList

mapState

mapActions

제품

검색

제품 상태가 업데이트됩니다. 🎜<ol start="7">🎜검색 요청 보내기🎜🎜🎜 <code>src/main.js

search

위 내용은 Vue를 사용하여 JD.com과 유사한 검색 페이지를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Vue를 사용하여 이미지 및 자리 표시자 이미지의 지연 로딩을 구현하는 방법은 무엇입니까?다음 기사：Vue를 사용하여 이미지 및 자리 표시자 이미지의 지연 로딩을 구현하는 방법은 무엇입니까?