写一段前后端代码，后端用java语言，前端用react框架，实现数据库中的数据可根据时间段来选择展示，查询时间段，默认0:00~23:59:59，支持白天、夜间、自有选择模式，快速选择：白天（9:00~21:00）、夜间（21:00~8:00）、凌晨（23:00~5:00）

后端Java代码：

@RestController
@RequestMapping("/data")
public class DataController {

    @Autowired
    private DataRepository dataRepository;

    @GetMapping("/query")
    public List<Data> queryData(@RequestParam(required = false) String startTime,
                                @RequestParam(required = false) String endTime,
                                @RequestParam(required = false) String mode) {
        if (startTime == null) {
            startTime = "00:00:00";
        }
        if (endTime == null) {
            endTime = "23:59:59";
        }
        if (mode == null) {
            mode = "自由选择";
        }
        List<Data> dataList = new ArrayList<>();
        if (mode.equals("自由选择")) {
            dataList = dataRepository.findByTimeBetween(startTime, endTime);
        } else if (mode.equals("白天")) {
            dataList = dataRepository.findByTimeBetween("09:00:00", "21:00:00");
        } else if (mode.equals("夜间")) {
            dataList = dataRepository.findByTimeBetween("21:00:00", "08:00:00");
        } else if (mode.equals("凌晨")) {
            dataList = dataRepository.findByTimeBetween("23:00:00", "05:00:00");
        }
        return dataList;
    }
}

前端React代码：

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [startTime, setStartTime] = useState("");
  const [endTime, setEndTime] = useState("");
  const [mode, setMode] = useState("自由选择");
  const [dataList, setDataList] = useState([]);

  const handleQuery = () => {
    axios.get("/data/query", {
      params: {
        startTime: startTime,
        endTime: endTime,
        mode: mode,
      }
    }).then((response) => {
      setDataList(response.data);
    }).catch((error) => {
      console.log(error);
    });
  };

  return (
    <div>
      <div>
        <label>开始时间：</label>
        <input type="text" value={startTime} onChange={(e) => setStartTime(e.target.value)} />
      </div>
      <div>
        <label>结束时间：</label>
        <input type="text" value={endTime} onChange={(e) => setEndTime(e.target.value)} />
      </div>
      <div>
        <label>查询模式：</label>
        <select value={mode} onChange={(e) => setMode(e.target.value)}>
          <option value="自由选择">自由选择</option>
          <option value="白天">白天（9:00~21:00）</option>
          <option value="夜间">夜间（21:00~8:00）</option>
          <option value="凌晨">凌晨（23:00~5:00）</option>
        </select>
      </div>
      <button onClick={handleQuery}>查询</button>
      <table>
        <thead>
          <tr>
            <th>字段1</th>
            <th>字段2</th>
            <th>字段3</th>
          </tr>
        </thead>
        <tbody>
          {dataList.map((data, index) => (
            <tr key={index}>
              <td>{data.field1}</td>
              <td>{data.field2}</td>
              <td>{data.field3}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;