基于同页结果筛选记录：多表关联产品配料引用可行性问询

嘿，这个需求完全可以实现的，我来给你捋捋具体的实现思路～

先理清楚你的表结构与需求核心 #

首先先明确下你的两张核心表的信息：

ProductCodes（产品基础信息表） #

注：medium字段为Raw的是可作为子配料的产品，Other则是作为主产品的条目

IngredientProductList（主产品-配料关联表） #

你的核心需求是：在同一个页面内，基于当前展示的主产品-配料关联结果，实现筛选功能（比如筛选特定主产品、特定配料，或者按配料占比范围筛选等）

具体实现思路 #

1. 后端先做好数据关联与动态查询支持 #

首先要把两张表的数据关联起来，拿到完整的主产品+配料的组合数据，用SQL的话基础查询语句可以这么写：

SELECT 
    pc.id AS main_product_id,
    pc.name AS main_product_name,
    ip.IngredientBACode AS ingredient_id,
    pc_raw.name AS ingredient_name,
    ip.Percentage
FROM ProductCodes pc
JOIN IngredientProductList ip ON pc.id = ip.BACode
JOIN ProductCodes pc_raw ON ip.IngredientBACode = pc_raw.id
WHERE pc.medium = 'Other' -- 只筛选主产品相关的关联记录

接下来要支持动态筛选，后端需要接收前端传过来的筛选参数（比如主产品ID、配料ID、占比区间），然后动态拼接查询条件：

• 筛选特定主产品：AND pc.id = '00001'
• 筛选包含某配料的主产品：AND pc_raw.id = '00002'
• 筛选配料占比≥80%的记录：AND ip.Percentage >= 80

2. 前端实现同页无刷新筛选 #

在页面顶部加几个筛选控件（比如下拉选主产品、下拉选配料、输入框填占比范围），然后通过异步请求（比如axios、fetch）把筛选参数传给后端，拿到筛选后的结果后直接更新页面上的结果列表，不用跳转页面。

给你个简单的前端伪代码参考：

// 监听主产品下拉框的变化
document.getElementById('mainProductSelect').addEventListener('change', filterProducts);
// 监听配料下拉框的变化
document.getElementById('ingredientSelect').addEventListener('change', filterProducts);

function filterProducts() {
    const mainProductId = document.getElementById('mainProductSelect').value;
    const ingredientId = document.getElementById('ingredientSelect').value;
    const minPercentage = document.getElementById('minPercentInput').value;

    // 拼接筛选参数
    const params = new URLSearchParams();
    if (mainProductId) params.append('mainProductId', mainProductId);
    if (ingredientId) params.append('ingredientId', ingredientId);
    if (minPercentage) params.append('minPercentage', minPercentage);

    // 发送请求到后端接口
    fetch(`/api/get-product-ingredients?${params}`)
        .then(res => res.json())
        .then(data => {
            // 更新页面上的结果表格
            renderResultTable(data);
        });
}

function renderResultTable(data) {
    const tableBody = document.getElementById('resultTableBody');
    tableBody.innerHTML = '';
    data.forEach(item => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${item.main_product_id}</td>
            <td>${item.main_product_name}</td>
            <td>${item.ingredient_id}</td>
            <td>${item.ingredient_name}</td>
            <td>${item.Percentage}%</td>
        `;
        tableBody.appendChild(row);
    });
}

3. 进阶优化小技巧 #

• 如果数据量不大，可以一次性把所有关联数据加载到前端，直接在本地做筛选，减少后端请求
• 支持多条件组合筛选，让用户可以同时选主产品+配料+占比范围
• 给筛选结果的匹配字段加个高亮样式，用户体验更好

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