springboot和vue数据交互
时间: 2023-10-14 10:27:21 浏览: 37
在 Spring Boot 中,你可以使用 Spring MVC 的注解来实现 RESTful API。在 Vue 中,你可以使用 axios 或者 fetch 等工具来发起 HTTP 请求。
以下是一个基本的 Spring Boot 和 Vue 数据交互的示例:
1. 在 Spring Boot 中创建一个 RESTful API
```java
@RestController
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/users")
public List<User> getUsers() {
return userService.getAllUsers();
}
@PostMapping("/users")
public User createUser(@RequestBody User user) {
return userService.createUser(user);
}
}
```
2. 在 Vue 中使用 axios 发起 HTTP 请求
```javascript
<script>
import axios from 'axios'
export default {
data () {
return {
users: [],
newUser: {}
}
},
mounted () {
this.getUsers()
},
methods: {
getUsers () {
axios.get('/users')
.then(response => {
this.users = response.data
})
.catch(error => {
console.log(error)
})
},
createUser () {
axios.post('/users', this.newUser)
.then(response => {
this.users.push(response.data)
this.newUser = {}
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
```
在这个示例中,我们使用 axios 发起 GET 和 POST 请求,获取所有用户和创建一个新用户。注意,我们的请求 URL 是相对于当前的 Vue 组件路径的,因为我们使用了相对路径来发起请求。