在现代的Web应用开发中，Spring Boot因其简化配置和快速开发的特点而广受欢迎。本文将介绍如何使用Spring Boot构建后端服务，以及如何与前端进行交互。我们将通过必要的代码和注释来展示这一过程。

1. Spring Boot项目搭建

首先，我们需要搭建一个Spring Boot项目。可以通过Spring Initializr（https://start.spring.io/）快速生成项目结构。

1.1 创建项目

在Spring Initializr中，选择以下选项：

• Project: Maven Project
• Language: Java
• Spring Boot: 2.5.0 或更高版本
• Group: com.example
• Artifact: springboot-database-frontend-interaction
• Name: Spring Boot Database Frontend Interaction
• Description: A project to demonstrate database and frontend interaction with Spring Boot
• Package name: com.example.interaction

在"Dependencies"部分，确保选中"Web"（Spring Web）和"JPA"（Spring Data JPA）。

2. 后端数据库交互

2.1 创建实体类

在src/main/java/com/example/interaction/model目录下创建一个实体类User.java：

package com.example.interaction.model;

import javax.persistence.*;

@Entity
@Table(name = "users")
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(name = "username", nullable = false)
    private String username;

    @Column(name = "email", nullable = false)
    private String email;

    // 省略构造函数、getter和setter
}

2.2 创建仓库接口

在src/main/java/com/example/interaction/repository目录下创建一个仓库接口UserRepository.java：

package com.example.interaction.repository;

import com.example.interaction.model.User;
import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Long> {
    // 这里可以添加自定义的查询方法
}

2.3 创建服务类

在src/main/java/com/example/interaction/service目录下创建一个服务类UserService.java：

package com.example.interaction.service;

import com.example.interaction.model.User;
import com.example.interaction.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Optional;

@Service
public class UserService {

    private final UserRepository userRepository;

    @Autowired
    public UserService(UserRepository userRepository) {
        this.userRepository = userRepository;
    }

    public List<User> findAll() {
        return userRepository.findAll();
    }

    public User save(User user) {
        return userRepository.save(user);
    }

    // 其他业务逻辑方法...
}

2.4 创建控制器类

在src/main/java/com/example/interaction/controller目录下创建一个控制器类UserController.java：

package com.example.interaction.controller;

import com.example.interaction.model.User;
import com.example.interaction.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/users")
public class UserController {

    private final UserService userService;

    @Autowired
    public UserController(UserService userService) {
        this.userService = userService;
    }

    @GetMapping
    public List<User> getAllUsers() {
        return userService.findAll();
    }

    @PostMapping
    public ResponseEntity<User> createUser(@RequestBody User user) {
        return ResponseEntity.ok(userService.save(user));
    }

    // 其他API方法...
}

3. 前端与后端交互

3.1 前端请求示例

使用JavaScript和Fetch API发送请求到后端API：

// 获取所有用户
function getAllUsers() {
  fetch('/api/users')
    .then(response => response.json())
    .then(users => console.log(users))
    .catch(error => console.error('Error:', error));
}

// 创建新用户
function createUser(username, email) {
  const user = { username, email };
  fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(user)
  })
  .then(response => response.json())
  .then(user => console.log(user))
  .catch(error => console.error('Error:', error));
}

4. 总结

本文介绍了如何使用Spring Boot构建后端服务，并与前端进行交互。通过创建实体类、仓库接口、服务类和控制器类，我们定义了后端的业务逻辑和API接口。然后，我们展示了如何使用JavaScript和Fetch API从前端发送请求到这些API。 通过这个示例，开发者可以了解和实践基于Spring Boot的后端数据库与前端的交互。开发者可以根据实际需求，扩展和优化这个示例，构建更加复杂和功能丰富的Web应用。