当前位置：首页 > VUE

vue实现淘宝搜索

2026-03-09 01:34:44VUE

Vue 实现淘宝搜索功能

实现类似淘宝的搜索功能需要结合 Vue.js 的前端框架和后端数据处理。以下是关键步骤和代码示例：

前端实现

创建搜索组件 Search.vue：

<template>
  <div class="search-container">
    <input 
      v-model="searchQuery" 
      @input="handleInput"
      placeholder="搜索商品..."
    />
    <button @click="search">搜索</button>
    <div v-if="suggestions.length" class="suggestions">
      <ul>
        <li 
          v-for="(item, index) in suggestions" 
          :key="index"
          @click="selectSuggestion(item)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      suggestions: [],
      timer: null
    }
  },
  methods: {
    handleInput() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.fetchSuggestions()
      }, 300)
    },
    fetchSuggestions() {
      if(this.searchQuery.trim()) {
        // 调用API获取搜索建议
        this.$http.get('/api/suggestions', {
          params: { q: this.searchQuery }
        }).then(response => {
          this.suggestions = response.data
        })
      } else {
        this.suggestions = []
      }
    },
    selectSuggestion(item) {
      this.searchQuery = item
      this.suggestions = []
      this.search()
    },
    search() {
      this.$router.push({
        path: '/search',
        query: { q: this.searchQuery }
      })
    }
  }
}
</script>

<style scoped>
.search-container {
  position: relative;
}
.suggestions {
  position: absolute;
  width: 100%;
  background: white;
  border: 1px solid #ddd;
  z-index: 1000;
}
.suggestions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.suggestions li {
  padding: 8px 12px;
  cursor: pointer;
}
.suggestions li:hover {
  background-color: #f5f5f5;
}
</style>

后端API实现

创建搜索建议API端点：

// Node.js Express示例
const express = require('express')
const app = express()

app.get('/api/suggestions', (req, res) => {
  const { q } = req.query
  // 实际项目中这里应该查询数据库
  const mockSuggestions = [
    `${q}手机`,
    `${q}充电器`,
    `${q}保护套`,
    `${q}无线耳机`
  ]
  res.json(mockSuggestions)
})

app.get('/api/search', (req, res) => {
  const { q } = req.query
  // 实际项目中这里应该查询数据库
  const mockResults = [
    { id: 1, name: `${q}手机`, price: 1999 },
    { id: 2, name: `${q}充电器`, price: 59 },
    { id: 3, name: `${q}保护套`, price: 39 }
  ]
  res.json(mockResults)
})

app.listen(3000)

搜索结果页面

创建搜索结果组件 SearchResults.vue：

<template>
  <div class="search-results">
    <h2>搜索结果: "{{ $route.query.q }}"</h2>
    <div v-if="loading">加载中...</div>
    <div v-else>
      <div v-for="item in results" :key="item.id" class="product-item">
        <h3>{{ item.name }}</h3>
        <p>价格: ¥{{ item.price }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      results: [],
      loading: false
    }
  },
  watch: {
    '$route.query.q': {
      immediate: true,
      handler() {
        this.fetchResults()
      }
    }
  },
  methods: {
    fetchResults() {
      this.loading = true
      this.$http.get('/api/search', {
        params: { q: this.$route.query.q }
      }).then(response => {
        this.results = response.data
        this.loading = false
      })
    }
  }
}
</script>

路由配置

在 Vue Router 中配置搜索路由：

import Vue from 'vue'
import Router from 'vue-router'
import SearchResults from './components/SearchResults.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/search',
      component: SearchResults
    }
  ]
})

优化建议

vue实现淘宝搜索