React+Node.js+MySQL实现下拉菜单点击展示对应图片数据求助

实现方案 #

1. 前端React逻辑调整 #

新增选中数据集的状态，绑定下拉选项点击事件，触发对应数据拉取，修改后的完整代码如下：

import React,{useState,useEffect} from "react";
import "../Login.css";
import axios from 'axios'
import Dropdown from 'react-bootstrap/Dropdown'
import 'bootstrap'
export default function Inference() {
  // 存储对应数据集下的图片列表
  const [data,setData] = useState([]);
  // 存储所有可选的数据集列表
  const [folder,setFolder] = useState([]);
  // 存储用户当前选中的数据集
  const [selectedDataset, setSelectedDataset] = useState("请选择数据集");

  // 拉取所有可选数据集列表
  const fetchFolders = async () => {
    const res = await axios.get('http://localhost:5000/db')
    setFolder(res.data)
  }

  // 根据选中的数据集拉取对应图片
  const fetchImagesByDataset = async (datasetName) => {
    // 这里调用后端按数据集查询的接口，传选中的dataset作为参数
    const res = await axios.get(`http://localhost:5000/files?dataset=${encodeURIComponent(datasetName)}`)
    setData(res.data)
  }

  // 下拉选项点击触发函数
  const handleSelect = (datasetName) => {
    setSelectedDataset(datasetName)
    fetchImagesByDataset(datasetName)
  }

  useEffect(() => {
    // 页面加载只拉取一次数据集列表即可，不需要频繁刷新
    fetchFolders()
  }, [])

  return (
    <div className="container-fluid mt-5">
      <div className="row">
        <div className="col-12" style={{paddingBottom:"100px"}}>
          <Dropdown>
            <Dropdown.Toggle variant="success" id="dropdown-basic">
              {selectedDataset}
            </Dropdown.Toggle>
            <Dropdown.Menu>
              {folder.map(item =>
                <Dropdown.Item 
                  key={item.dataset} 
                  onClick={() => handleSelect(item.dataset)}
                >
                  {item.dataset}
                </Dropdown.Item>
              )}
            </Dropdown.Menu>
          </Dropdown>
        </div>
        {data.map(item => 
          <div className="col-2" key={item.id || item.path}>
            <div className="card mb-3 border-0 p-0">
              <img src={item.path} height="80" className="card-img-top img-responsive" alt="数据集图片"/>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

2. 后端Node.js接口调整 #

需要新增对/files接口的参数解析支持，根据传入的dataset参数过滤查询结果，基于Express的示例代码如下：

// mysql依赖引入、数据库连接初始化代码省略
app.get('/files', async (req, res) => {
  const dataset = req.query.dataset
  let sql, params
  if (dataset) {
    // 有传dataset参数时，只查询对应数据集的图片，参数化查询避免SQL注入
    sql = 'select path from new_schema.images where dataset = ?'
    params = [dataset]
  } else {
    // 无参数时返回全量数据，可根据需求选择是否保留该逻辑
    sql = 'select path from new_schema.images'
    params = []
  }
  // 执行SQL查询返回结果
  connection.query(sql, params, (error, results) => {
    if (error) throw error
    res.send(results)
  })
})

原有/db接口无需改动，保持现有逻辑即可。

可选优化点 #

• 新增加载状态，接口请求过程中展示加载提示
• 新增空状态提示，选中数据集无图片时给用户明确反馈
• 确认图片路径的可访问性，避免跨域、资源路径错误问题

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