当前位置：首页 > VUE

vue实现搜索下载

2026-02-18 18:29:27VUE

实现搜索下载功能的Vue方案

前端搜索界面实现

使用Vue的响应式数据绑定和事件处理实现搜索框

<template>
  <div>
    <input v-model="searchQuery" @keyup.enter="search" placeholder="输入关键词"/>
    <button @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    search() {
      this.$emit('search', this.searchQuery)
    }
  }
}
</script>

搜索结果展示组件

展示从API获取的搜索结果列表

<template>
  <div>
    <div v-for="item in results" :key="item.id">
      <h3>{{ item.title }}</h3>
      <p>{{ item.description }}</p>
      <button @click="download(item.url)">下载</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['results'],
  methods: {
    download(url) {
      window.open(url, '_blank')
    }
  }
}
</script>

后端API交互

使用axios与后端API通信

import axios from 'axios'

export default {
  data() {
    return {
      results: []
    }
  },
  methods: {
    async fetchResults(query) {
      try {
        const response = await axios.get('/api/search', {
          params: { q: query }
        })
        this.results = response.data
      } catch (error) {
        console.error('搜索失败:', error)
      }
    }
  }
}

文件下载处理

对于需要认证的下载链接，可以使用以下方式

downloadFile(fileId) {
  axios({
    url: `/api/download/${fileId}`,
    method: 'GET',
    responseType: 'blob'
  }).then(response => {
    const url = window.URL.createObjectURL(new Blob([response.data]))
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', 'filename.ext')
    document.body.appendChild(link)
    link.click()
    link.remove()
  })
}

进度显示实现

对于大文件下载，可以显示进度条

axios({
  url: '/api/download',
  method: 'GET',
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    )
    this.downloadProgress = percentCompleted
  }
})

错误处理增强

添加更完善的错误处理逻辑

downloadError(error) {
  if (error.response) {
    switch(error.response.status) {
      case 404:
        alert('文件不存在')
        break
      case 403:
        alert('无权限下载')
        break
      default:
        alert('下载失败')
    }
  } else {
    alert('网络错误')
  }
}

组件整合

将各组件整合到主应用

<template>
  <div>
    <SearchBox @search="handleSearch"/>
    <ResultsList :results="searchResults"/>
  </div>
</template>

<script>
import SearchBox from './SearchBox.vue'
import ResultsList from './ResultsList.vue'

export default {
  components: {
    SearchBox,
    ResultsList
  },
  data() {
    return {
      searchResults: []
    }
  },
  methods: {
    handleSearch(query) {
      this.fetchResults(query)
    }
  }
}
</script>

vue实现搜索下载