Vue는 오늘날 가장 인기 있는 프런트 엔드 프레임워크 중 하나이며 효율적이고 아름다운 사용자 인터페이스를 빠르게 구축하는 데 도움이 됩니다. 이 기사에서는 Vue를 사용하여 JD.com과 유사한 검색 페이지를 구현하는 방법을 소개합니다.
먼저 다음 도구와 기술을 준비해야 합니다.
Vue CLI를 사용하여 새 프로젝트를 초기화하는 것은 매우 간단합니다. 명령줄에서 다음 명령을 실행하면 됩니다.
vue create jd-search
이 명령은 현재 디렉터리 jd에 라는 파일을 생성합니다. -
의 프로젝트를 검색하고 필요한 종속성을 자동으로 설치합니다. jd-search
的项目,并自动安装所需的依赖项。
安装 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
라는 파일을 만듭니다. > 디렉토리 > 구성 요소. 이 구성 요소에는 입력 상자와 검색 버튼이 포함되어 있습니다. 🎜rrreee🎜이 구성 요소에는 사용자가 입력한 키워드를 저장하는 데 사용되는 keyword
데이터 속성이 포함되어 있습니다. 사용자가 검색 버튼을 클릭하거나 Enter 키를 누르면 search
메서드가 트리거되어 현재 keyword
값을 매개변수로 상위 구성 요소에 전달합니다. 🎜src/comComponents
디렉터리에 ProductList.vue
라는 컴포넌트를 생성합니다. 이 구성 요소는 검색 결과의 제품 목록을 표시합니다. 🎜rrreee🎜이 구성 요소는 검색 결과를 표시하기 위해 products
라는 속성을 받습니다. Element UI의 el-card
및 el-image
구성 요소를 사용하여 제품 목록을 표시하고 CSS Grid를 사용하여 적응형 레이아웃을 구현합니다. 🎜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🎜이 구성을 사용하면 다음에서 사용할 수 있습니다. 애플리케이션$axiossearch
작업에서 검색 요청을 보낼 수 있습니다. 🎜🎜이 시점에서 JD.com과 유사한 검색 페이지 구현이 완료되었습니다. 이 페이지는 Vue, Element UI, Axios 및 Vuex와 같은 기술을 사용하며 최신 단일 페이지 애플리케이션에 대한 모범 사례를 따릅니다. 🎜
위 내용은 Vue를 사용하여 JD.com과 유사한 검색 페이지를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!