使用Spring Boot React (Webflux)和MySql构建现代化的Web应用

java
@Entity
@Table(name = "tasks")
public class Task {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String title;
    private String description;
    private boolean completed;
    // getters and setters
}

java
@Repository
public interface TaskRepository extends CrudRepository {
}

java
@RestController
@RequestMapping("/api/tasks")
public class TaskController {
    private final TaskRepository taskRepository;
    public TaskController(TaskRepository taskRepository) {
        this.taskRepository = taskRepository;
    }
    @GetMapping
    public Iterable getAllTasks() {
        return taskRepository.findAll();
    }
    @PostMapping
    public Task createTask(@RequestBody Task task) {
        return taskRepository.save(task);
    }
    @PutMapping("/{id}")
    public ResponseEntity updateTask(@PathVariable Long id, @RequestBody Task task) {
        Optional optionalTask = taskRepository.findById(id);
        if (optionalTask.isPresent()) {
            Task updatedTask = optionalTask.get();
            updatedTask.setTitle(task.getTitle());
            updatedTask.setDescription(task.getDescription());
            updatedTask.setCompleted(task.isCompleted());
            taskRepository.save(updatedTask);
            return ResponseEntity.ok(updatedTask);
        } else {
            return ResponseEntity.notFound().build();
        }
    }
    @DeleteMapping("/{id}")
    public ResponseEntity deleteTask(@PathVariable Long id) {
        taskRepository.deleteById(id);
        return ResponseEntity.noContent().build();
    }
}

javascript
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const TaskList = () => {
  const [tasks, setTasks] = useState([]);
  useEffect(() => {
    fetchTasks();
  }, []);
  const fetchTasks = async () => {
    const response = await axios.get('/api/tasks');
    setTasks(response.data);
  };
  const createTask = async (task) => {
    await axios.post('/api/tasks', task);
    fetchTasks();
  };
  const updateTask = async (id, task) => {
    await axios.put(`/api/tasks/${id}`, task);
    fetchTasks();
  };
  const deleteTask = async (id) => {
    await axios.delete(`/api/tasks/${id}`);
    fetchTasks();
  };
  return (
    
      
任务列表
      
        {tasks.map((task) => (
          
            {task.title}
             deleteTask(task.id)}>删除
          
        ))}
      
      
 {
        e.preventDefault();
        const title = e.target.elements.title.value;
        createTask({ title });
        e.target.reset();
      }}>
        
        创建
      
    
  );
};
export default TaskList;

java
@SpringBootApplication
public class Application {
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

javascript
import React from 'react';
import ReactDOM from 'react-dom';
import TaskList from './TaskList';
ReactDOM.render(, document.getElementById('root'));