vue+srpingboot项目 如何使用restful api
时间: 2023-12-12 17:01:58 浏览: 33
RESTful API 是一种基于 HTTP 协议的 API 设计风格,它使用 HTTP 请求的不同方法(比如 GET、POST、PUT、DELETE 等)来实现对资源的增删改查操作。使用 RESTful API 可以使得前端和后端的通信更加简洁和高效。
在 Vue + Spring Boot 项目中,你可以使用 Axios 库来发送 HTTP 请求,并使用 Spring Boot 的 @RestController 注解来处理请求。
以下是一个简单的例子:
1. 前端使用 Axios 发送 GET 请求获取用户列表
```vue
<template>
<div>
<h1>用户列表</h1>
<ul>
<li v-for="user in userList" :key="user.id">{{ user.name }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
userList: []
}
},
mounted() {
axios.get('/api/users')
.then(response => {
this.userList = response.data
})
.catch(error => {
console.log(error)
})
}
}
</script>
```
2. 后端使用 @RestController 注解处理请求
```java
@RestController
@RequestMapping("/api/users")
public class UserController {
@Autowired
private UserService userService;
@GetMapping
public List<User> getUsers() {
return userService.findAll();
}
@PostMapping
public User createUser(@RequestBody User user) {
return userService.save(user);
}
@PutMapping("/{id}")
public User updateUser(@PathVariable Long id, @RequestBody User user) {
return userService.update(id, user);
}
@DeleteMapping("/{id}")
public void deleteUser(@PathVariable Long id) {
userService.delete(id);
}
}
```
上面的代码中,@GetMapping 注解用来处理 GET 请求,@PostMapping 注解用来处理 POST 请求,@PutMapping 注解用来处理 PUT 请求,@DeleteMapping 注解用来处理 DELETE 请求。
在这个例子中,我们使用 GET 请求获取用户列表,使用 POST 请求创建用户,使用 PUT 请求更新用户,使用 DELETE 请求删除用户。
当你使用 Axios 发送请求时,它会将请求发送到 /api/users 路径,这个路径会被后端的 UserController 类中对应的方法处理。
当然,这只是一个简单的例子。在实际项目中,你需要考虑更多的问题,比如请求参数的校验、异常处理、权限控制等等。但是,使用 RESTful API 可以让你的项目更加规范和易于维护。