当前位置：首页 > VUE

vue实现搜索下载

2026-03-10 07:44:20VUE

Vue 实现搜索下载功能

要实现一个基于 Vue 的搜索下载功能，需要结合前端和后端逻辑。以下是一个完整的实现方案，包括前端 Vue 组件和后端 API 设计。

前端 Vue 组件

创建一个搜索框和下载按钮的组件，用于用户输入搜索关键词并触发下载操作。

vue实现搜索下载

<template>
  <div>
    <input v-model="searchQuery" placeholder="输入搜索关键词" />
    <button @click="search">搜索</button>
    <button @click="download" :disabled="!downloadUrl">下载</button>
    <div v-if="searchResults.length > 0">
      <ul>
        <li v-for="(result, index) in searchResults" :key="index">
          {{ result.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [],
      downloadUrl: ''
    };
  },
  methods: {
    async search() {
      try {
        const response = await fetch(`/api/search?q=${this.searchQuery}`);
        this.searchResults = await response.json();
      } catch (error) {
        console.error('搜索失败:', error);
      }
    },
    async download() {
      if (!this.downloadUrl) return;
      try {
        const response = await fetch(this.downloadUrl);
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'download';
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        document.body.removeChild(a);
      } catch (error) {
        console.error('下载失败:', error);
      }
    }
  }
};
</script>

后端 API 设计

后端需要提供两个 API 端点：一个用于搜索，一个用于生成下载链接。

const express = require('express');
const app = express();
const fs = require('fs');
const path = require('path');

app.get('/api/search', (req, res) => {
  const query = req.query.q;
  // 模拟搜索逻辑
  const results = [
    { name: '文件1', url: '/api/download/file1' },
    { name: '文件2', url: '/api/download/file2' }
  ].filter(item => item.name.includes(query));
  res.json(results);
});

app.get('/api/download/:file', (req, res) => {
  const file = req.params.file;
  const filePath = path.join(__dirname, 'downloads', file);
  if (fs.existsSync(filePath)) {
    res.download(filePath);
  } else {
    res.status(404).send('文件不存在');
  }
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

文件存储结构

确保后端有一个 downloads 文件夹用于存储可供下载的文件。

vue实现搜索下载

project/
├── server.js
├── downloads/
│   ├── file1
│   └── file2

前端与后端交互流程

用户在前端输入搜索关键词并点击搜索按钮，Vue 组件会向后端发送搜索请求。后端返回匹配的文件列表，前端展示这些结果。用户点击下载按钮时，前端会请求后端生成的文件下载链接，并通过创建临时 URL 的方式触发浏览器下载。

安全性考虑

在实际应用中，需要对下载文件进行权限验证，避免未授权访问。可以在后端添加中间件来验证用户身份。

function authMiddleware(req, res, next) {
  const token = req.headers.authorization;
  if (token === 'valid-token') {
    next();
  } else {
    res.status(401).send('未授权');
  }
}

app.get('/api/download/:file', authMiddleware, (req, res) => {
  // 下载逻辑
});