如何基于React+Laravel API实现VFI表格的搜索过滤功能

前端React实现（Navbar.js） #

修改导航栏搜索表单，添加状态管理和搜索请求逻辑：

import { useState, useEffect, useCallback } from 'react';

function Navbar() {
  const [searchTerm, setSearchTerm] = useState('');

  // 防抖函数：避免输入时频繁发起API请求
  const debouncedSearch = useCallback(
    (term) => {
      // 调用全局挂载的VFI数据获取函数（也可通过状态提升/Context传递）
      window.fetchVfiData(term);
    },
    []
  );

  // 监听搜索词变化，触发防抖搜索
  useEffect(() => {
    const timeout = setTimeout(() => {
      debouncedSearch(searchTerm);
    }, 300);
    return () => clearTimeout(timeout);
  }, [searchTerm, debouncedSearch]);

  return (
    <nav className="navbar">
      <div className="search-box">
        <input
          type="text"
          placeholder="搜索VFI数据..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>
    </nav>
  );
}

export default Navbar;

在展示VFI数据的组件中，定义支持搜索参数的fetchVfiData函数：

import { useState, useEffect } from 'react';

function VfiTable() {
  const [vfiData, setVfiData] = useState([]);

  // 获取VFI数据，支持传入搜索关键词
  const fetchVfiData = async (search = '') => {
    try {
      const url = `/api/vfi?search=${encodeURIComponent(search)}`;
      const response = await fetch(url);
      const data = await response.json();
      setVfiData(data);
    } catch (err) {
      console.error('加载VFI数据失败:', err);
    }
  };

  // 初始化加载全量数据
  useEffect(() => {
    fetchVfiData();
  }, []);

  // 将函数挂载到全局，供Navbar调用
  useEffect(() => {
    window.fetchVfiData = fetchVfiData;
    return () => delete window.fetchVfiData;
  }, []);

  // 渲染数据表
  return (
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th>编码</th>
          <th>描述</th>
        </tr>
      </thead>
      <tbody>
        {vfiData.map(item => (
          <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.code}</td>
            <td>{item.description}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default VfiTable;

后端Laravel实现 #

1. 修改VFiController.php #

在数据查询方法中添加搜索过滤逻辑：

<?php

namespace App\Http\Controllers;

use App\Models\VFI;
use Illuminate\Http\Request;

class VFiController extends Controller
{
    public function index(Request $request)
    {
        // 验证搜索参数（可选但推荐）
        $request->validate([
            'search' => 'nullable|string|max:255'
        ]);

        // 构建基础查询
        $query = VFI::query();

        // 若存在搜索参数，添加模糊匹配条件
        if ($searchTerm = $request->input('search')) {
            // 根据你的数据表字段调整匹配规则，示例匹配名称、编码、描述
            $query->where(function ($q) use ($searchTerm) {
                $q->where('name', 'LIKE', "%{$searchTerm}%")
                  ->orWhere('code', 'LIKE', "%{$searchTerm}%")
                  ->orWhere('description', 'LIKE', "%{$searchTerm}%");
            });
        }

        // 返回过滤后的JSON数据
        return response()->json($query->get());
    }
}

2. 确认api.php路由 #

确保API路由指向上述控制器方法：

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\VFiController;

// VFI数据接口，支持搜索参数
Route::get('/vfi', [VFiController::class, 'index']);

关键注意事项 #

• 前端用encodeURIComponent处理搜索词，避免特殊字符导致URL解析错误
• 后端模糊匹配时，注意数据库的大小写敏感性（如MySQL默认不区分，PostgreSQL需额外配置）
• 防抖逻辑可减少不必要的API请求，优化用户体验
• 若需多字段精确过滤，可扩展前端表单和后端查询条件

内容的提问来源于stack exchange，提问作者Brian Mweu