MySQL 数据助力 Spring Boot 动态下拉菜单：一步步打造

java

2024-03-05 20:35:32

利用 MySQL 数据在 Spring Boot 中创建动态下拉菜单

在现代 Web 应用中，动态下拉菜单扮演着至关重要的角色，它允许用户从数据库中检索的数据中进行选择。本文将指导您使用 MySQL 数据库数据在 Spring Boot 应用程序中创建动态下拉菜单，涵盖后端和前端的步骤。

后端 (Spring Boot)

1. 数据库连接：

首先，建立与 MySQL 数据库的连接。使用 @SpringBootApplication 注解并配置 spring.datasource 属性来启用 Spring Boot 的自动配置。

2. 实体类：

创建实体类来表示数据库中的表。它应包含与表中列对应的字段，这将作为数据模型的基础。

3. 数据存储库：

定义数据存储库接口来访问实体类。这个接口应扩展 CrudRepository 并提供 CRUD（创建、读取、更新、删除）操作。

4. REST 控制器：

创建 REST 控制器来处理来自前端的请求。该控制器应包含一个方法来获取下拉菜单数据。

5. 服务层：

在服务层中，编写一个方法来从数据库中检索数据。这可以是简单的 CRUD 操作，也可以是更复杂的查询。

前端 (React)

1. 安装依赖项：

在 React 应用程序中，安装 axios 库来发送 HTTP 请求。

2. 创建组件：

创建一个 React 组件来显示下拉菜单。该组件应包含一个 useEffect 钩子来获取下拉菜单数据。

3. useEffect 钩子：

在 useEffect 钩子中，使用 axios 发送一个 GET 请求到 Spring Boot 控制器。

4. 更新状态：

当数据从后端返回时，使用 useState 钩子更新组件状态。这将触发 UI 更新，显示下拉菜单选项。

示例

后端 (Spring Boot)：

// 实体类
@Entity
public class Employee {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String department;
}

// 数据存储库接口
public interface EmployeeRepository extends CrudRepository<Employee, Long> {
}

// REST 控制器
@RestController
@RequestMapping("/api/employees")
public class EmployeeController {
    @Autowired
    private EmployeeService employeeService;

    @GetMapping
    public List<Employee> getAllEmployees() {
        return employeeService.getAllEmployees();
    }
}

// 服务层
public class EmployeeService {
    @Autowired
    private EmployeeRepository employeeRepository;

    public List<Employee> getAllEmployees() {
        return employeeRepository.findAll();
    }
}

前端 (React)：

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

const EmployeeDropdown = () => {
  const [employees, setEmployees] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:8080/api/employees')
      .then(res => setEmployees(res.data))
      .catch(err => console.log(err));
  }, []);

  return (
    <select>
      {employees.map(employee => (
        <option key={employee.id} value={employee.id}>{employee.name}</option>
      ))}
    </select>
  );
};

export default EmployeeDropdown;