springboot vue前后端分离源码
时间: 2023-08-31 08:09:12 浏览: 58
很抱歉,我不能提供完整的源代码。但是,我可以为你提供一个简单的示例,展示如何使用Spring Boot和Vue.js进行前后端分离开发。
首先,创建一个Spring Boot项目,可以使用Spring Initializr(https://start.spring.io/)进行快速启动。确保选择适当的依赖项,如Web和JPA。
在Spring Boot项目中创建一个RestController类来处理后端请求。例如,创建一个UserController类来管理用户信息:
```java
@RestController
@RequestMapping("/api/users")
public class UserController {
@Autowired
private UserRepository userRepository;
@GetMapping
public List<User> getUsers() {
return userRepository.findAll();
}
// 添加其他的RESTful API,例如创建、更新和删除用户
}
```
接下来,创建一个Vue.js项目。你可以使用Vue CLI(https://cli.vuejs.org/)来快速创建一个项目。
在Vue.js项目中,创建一个UserService来处理与后端的通信。使用Axios(https://axios-http.com/)库发送HTTP请求:
```javascript
import axios from 'axios';
const BASE_URL = '/api/users';
export default {
getUsers() {
return axios.get(BASE_URL);
}
// 添加其他的HTTP请求方法,例如创建、更新和删除用户
};
```
在Vue.js的组件中,使用UserService来获取数据并进行展示。例如,创建一个UserList组件来显示用户列表:
```vue
<template>
<div>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
</div>
</template>
<script>
import UserService from '@/services/UserService';
export default {
data() {
return {
users: []
};
},
mounted() {
this.fetchUsers();
},
methods: {
fetchUsers() {
UserService.getUsers()
.then(response => {
this.users = response.data;
})
.catch(error => {
console.log(error);
});
}
}
};
</script>
```
以上是一个简单的示例,展示了如何在Spring Boot和Vue.js中进行前后端分离开发。你可以根据自己的需求进行扩展和修改。希望对你有所帮助!