Java前后端分离CRUD

引言

随着互联网的快速发展，越来越多的应用程序采用了前后端分离的架构，这种架构能够提升开发效率、提供更好的用户体验和更高的可扩展性。

在前后端分离的架构中，前端负责展示页面和用户交互，后端负责处理业务逻辑和数据存储。前后端之间通过API进行通信，前端发送请求给后端，后端根据请求的类型和参数进行相应的处理，然后返回结果给前端。

本文将介绍如何使用Java实现前后端分离的CRUD（增删改查）功能。我们将使用Spring Boot作为后端框架，Vue.js作为前端框架。

后端实现

数据库设计

首先，我们需要设计数据库模型。在本示例中，我们将使用一个简单的User实体，包含id、name和email字段。

@Entity
@Table(name = "users")
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String name;

    private String email;

    // 省略getter和setter方法
}

控制器层

接下来，我们需要创建控制器类来处理前端发送的请求。在本示例中，我们将创建一个UserController类。

@RestController
@RequestMapping("/users")
public class UserController {
    @Autowired
    private UserRepository userRepository;

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

    @PostMapping
    public User createUser(@RequestBody User user) {
        return userRepository.save(user);
    }

    @PutMapping("/{id}")
    public User updateUser(@PathVariable Long id, @RequestBody User userData) {
        User user = userRepository.findById(id)
                .orElseThrow(() -> new ResourceNotFoundException("User not found with id: " + id));

        user.setName(userData.getName());
        user.setEmail(userData.getEmail());

        return userRepository.save(user);
    }

    @DeleteMapping("/{id}")
    public ResponseEntity<?> deleteUser(@PathVariable Long id) {
        User user = userRepository.findById(id)
                .orElseThrow(() -> new ResourceNotFoundException("User not found with id: " + id));

        userRepository.delete(user);

        return ResponseEntity.ok().build();
    }
}

在上述代码中，我们使用@RequestMapping注解指定了对应的URL路径。@GetMapping、@PostMapping、@PutMapping和@DeleteMapping注解分别对应HTTP的GET、POST、PUT和DELETE请求。

数据访问层

为了实现数据库的CRUD操作，我们需要创建一个UserRepository接口。

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}

JpaRepository接口提供了一些常用的数据库操作方法，例如findAll()、save()、findById()和delete()等。

前端实现

创建Vue项目

首先，我们需要安装Vue的脚手架工具vue-cli。打开命令行界面，执行以下命令：

npm install -g @vue/cli

安装完成后，执行以下命令创建Vue项目：

vue create frontend

然后，选择默认配置并等待项目创建完成。

编写前端代码

在frontend目录中，我们可以找到一个名为src/App.vue的文件。这是我们的根组件，我们可以在其中编写前端代码。

首先，我们需要使用axios库发送HTTP请求。在<script>标签中添加以下代码：

import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      newUser: {
        name: '',
        email: '',
      },
    };
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    getUsers() {
      axios.get('/users')
        .then(response => {
          this.users = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    createUser() {
      axios.post('/users', this.newUser)
        .then(response => {
          this.getUsers();
          this.newUser = {
            name: '',
            email: '',
          };
        })
        .catch(error => {
          console.error(error);
        });
    },
    updateUser(user) {
      axios.put(`/users/${user.id}`, user)
        .then(response => {
          this.getUsers();
        })
        .catch(error => {
          console.error(error);
        });