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

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

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

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

1. Vue 프로젝트 초기화

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

vue create jd-search

이 명령은 현재 디렉터리 jd에 라는 파일을 생성합니다. -의 프로젝트를 검색하고 필요한 종속성을 자동으로 설치합니다. 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

요소 UI 추가
🎜요소 UI 설치는 매우 간단합니다. 명령줄에서 다음 명령을 실행하면 됩니다. 🎜rrreee🎜설치가 완료된 후 main.js: 🎜rrreee<ol start="3">🎜검색 구성 요소 만들기🎜🎜🎜 <code>src/comComponents에 Search.vue라는 파일을 만듭니다. > 디렉토리 > 구성 요소. 이 구성 요소에는 입력 상자와 검색 버튼이 포함되어 있습니다. 🎜rrreee🎜이 구성 요소에는 사용자가 입력한 키워드를 저장하는 데 사용되는 keyword 데이터 속성이 포함되어 있습니다. 사용자가 검색 버튼을 클릭하거나 Enter 키를 누르면 search 메서드가 트리거되어 현재 keyword 값을 매개변수로 상위 구성 요소에 전달합니다. 🎜
🎜제품 목록 컴포넌트 생성🎜🎜🎜src/comComponents 디렉터리에 ProductList.vue라는 컴포넌트를 생성합니다. 이 구성 요소는 검색 결과의 제품 목록을 표시합니다. 🎜rrreee🎜이 구성 요소는 검색 결과를 표시하기 위해 products라는 속성을 받습니다. Element UI의 el-card 및 el-image 구성 요소를 사용하여 제품 목록을 표시하고 CSS Grid를 사용하여 적응형 레이아웃을 구현합니다. 🎜
🎜상태 관리 모듈 만들기🎜🎜🎜Vuex를 사용하여 애플리케이션 상태를 관리하는 것은 매우 편리합니다. src/store 디렉터리에 search.js라는 모듈을 만듭니다. 이 모듈에는 다음과 같은 상태, 작업 및 getter가 포함되어 있습니다. 🎜rrreee🎜이 모듈에는 검색 요청을 보내고 검색 결과를 업데이트하는 search라는 비동기 작업이 포함되어 있습니다. 또한 사용자가 입력한 키워드와 검색 결과를 저장하기 위한 keyword라는 상태와 products라는 상태가 포함되어 있습니다. 🎜
🎜검색 페이지 만들기🎜🎜🎜SearchPage.vue라는 이름의 페이지를 만듭니다. 여기에는 Search 및 ProductList /가 포함됩니다. code> 구성 요소를 관리하고 Vuex를 통해 구성 요소 간의 상호 작용을 관리합니다. 코드는 다음과 같습니다. 🎜rrreee🎜이 페이지에는 <code>Search 및 ProductList 구성 요소가 포함되어 있으며 Vuex의 mapState 및 mapActions를 사용합니다. > 제품 속성과 검색 작업을 매핑합니다. 사용자가 키워드를 입력하고 검색 버튼을 클릭하거나 Enter 키를 누르면 검색 작업이 실행되고 검색 결과는 백엔드 API에서 얻어지며 제품 상태가 업데이트됩니다. 🎜<ol start="7">🎜검색 요청 보내기🎜🎜🎜 <code>src/main.js에서 Axios를 구성하세요. 코드는 다음과 같습니다. 🎜rrreee🎜이 구성을 사용하면 다음에서 사용할 수 있습니다. 애플리케이션$axios
객체는 HTTP 요청을 보냅니다. 이제 search 작업에서 검색 요청을 보낼 수 있습니다. 🎜🎜이 시점에서 JD.com과 유사한 검색 페이지 구현이 완료되었습니다. 이 페이지는 Vue, Element UI, Axios 및 Vuex와 같은 기술을 사용하며 최신 단일 페이지 애플리케이션에 대한 모범 사례를 따릅니다. 🎜

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