Vue 是当下非常流行的前端框架之一，它可以帮助我们快速构建高效且美观的用户界面。在本文中，我们将介绍如何使用 Vue 实现仿京东搜索页面。
首先，我们需要准备以下工具和技术：
- Vue CLI：用于快速初始化一个 Vue 项目。
- axios：用于发送 HTTP 请求和处理响应。
- Vuex：用于管理应用程序的状态。
- Element UI：用于提供各种 UI 组件。
- 初始化 Vue 项目
使用 Vue CLI 初始化一个新的项目非常简单，只需要在命令行中执行以下命令即可：
vue create jd-search
这个命令会在当前目录下创建一个名为 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 操作中发送搜索请求了。
至此，我们已经完成了仿京东搜索页面的实现。这个页面使用了 Vue、Element UI、Axios 和 Vuex 等技术，并遵循了现代化的单页面应用程序的最佳实践。