How to use Vue to implement a JD.com-like search page?

Vue is one of the most popular front-end frameworks today. It can help us quickly build efficient and beautiful user interfaces. In this article, we will introduce how to use Vue to implement a JD.com-like search page.

First, we need to prepare the following tools and technologies:

• Vue CLI: used to quickly initialize a Vue project.
• axios: used to send HTTP requests and process responses.
• Vuex: Used to manage the state of the application.
• Element UI: used to provide various UI components.

1. Initialize Vue project

It is very simple to initialize a new project using Vue CLI. You only need to execute the following command on the command line:

vue create jd-search

This command will create a project named jd-search in the current directory and automatically install the required dependencies.

2. Add Element UI

Installing Element UI is very simple, just execute the following command in the command line:

npm install element-ui

After the installation is completed, Introduce Element UI in main.js:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. Create search component

Create it in the src/components directory A component named Search.vue. This component contains an input box and a search button. The code is as follows:

<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>

This component contains a keyword data attribute, which is used to save the keywords entered by the user. When the user clicks the search button or presses the Enter key, the search method will be triggered, passing the current keyword value as a parameter to the parent component.

4. Create a product list component

Create a component named ProductList.vue in the src/components directory. This component will display the product list of the search results. The code is as follows:

<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>

This component receives an attribute named products, which is used to display the search results. It uses Element UI's el-card and el-image components to display the product list, and uses CSS Grid to implement adaptive layout.

5. Create a state management module

It is very convenient to use Vuex to manage the status of an application. Create a module named search.js in the src/store directory. This module contains the following states, operations, and 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,
};

This module contains an asynchronous operation named search that is used to send search requests and update search results. It also contains a state named keyword and a state named products to save the keywords and search results entered by the user.

6. Create a search page

Create a page named SearchPage.vue, which will contain Search and ProductList components and manage the interaction between them through Vuex. The code is as follows:

<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>

This page contains Search and ProductList components, and uses Vuex's mapState and mapActions mapping products attributes and search operations. When the user enters a keyword and clicks the search button or presses the Enter key, the search operation is triggered, the search results are obtained from the backend API, and the products status in Vuex is updated.

7. Send search request

Configure Axios in src/main.js, the code is as follows:

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

axios.defaults.baseURL = 'http://localhost:3000'

This configuration makes We can use the $axios object in our application to send HTTP requests. Now we can send search requests in the search action.

So far, we have completed the implementation of the JD.com-like search page. This page uses technologies such as Vue, Element UI, Axios, and Vuex, and follows best practices for modern single-page applications.

The above is the detailed content of How to use Vue to implement a JD.com-like search page?. For more information, please follow other related articles on the PHP Chinese website!