springboot vue前后端分离crud如何写

在Spring Boot和Vue.js项目中实现前后端分离的CRUD操作，通常会涉及以下几个步骤：

1. **设置前端项目**:
- 使用Vue CLI创建一个新的Vue项目，安装axios库用于发送HTTP请求。

   npm install create-vue-app axios

创建组件如`list.vue`, `detail.vue`, `create.vue`, `edit.vue`等。

2. **配置后端API**:
- 在Spring Boot应用中创建RESTful API，使用Spring Data JPA处理数据库交互。例如，对于用户管理，可以有`UserController`，包含`@GetMapping("/users")`获取所有用户的列表，`@PostMapping("/users")`创建用户等方法。

@RestController
@RequestMapping("/api/users")
public class UserController {
    @Autowired
    private UserService userService;

    // 获取所有用户
    @GetMapping
    public List<User> getAllUsers() {
        return userService.findAll();
    }

    // 新增用户
    @PostMapping
    public ResponseEntity<?> createUser(@RequestBody User user) {
        User savedUser = userService.save(user);
        return new ResponseEntity<>(savedUser, HttpStatus.CREATED);
    }
}

3. **编写前端路由和请求**:
- 在Vue中，通过`axios`向后端API发起GET、POST、PUT和DELETE请求，比如在`list.vue`中展示数据，`create.vue`中处理表单提交。

// list.vue
axios.get('/api/users')
    .then(response => (this.users = response.data))
    .catch(error => console.error(error));

// create.vue
methods: {
    createUser() {
        axios.post('/api/users', this.newUser)
            .then(response => {
                // 更新状态或重定向到列表页面
            })
            .catch(error => console.error(error));
    }
}

4. **处理错误**:
- 在前后端都要处理可能出现的网络错误，例如使用try-catch块或设置axios的全局拦截器。

5. **部署**:
- 配置前端静态资源的托管，比如使用Nginx反向代理，以及部署Spring Boot应用。