给我一个spring boot+vue前端分离项目
时间: 2023-11-25 16:06:14 浏览: 78
在线考试系统,springboot+vue前后端分离的一个项目..zip
好的,这是一个简单的Spring Boot + Vue前端分离项目,供您参考:
后端(Spring Boot):
1. 创建一个Spring Boot项目,添加Web和JPA依赖
2. 配置数据库连接信息
3. 创建实体类和对应的Repository接口
4. 创建Controller类,实现对应的API接口
前端(Vue):
1. 安装Vue CLI,创建一个Vue项目
2. 安装Axios,用于发送HTTP请求
3. 创建Vue组件,实现对应的页面功能
4. 在组件中使用Axios发送请求,获取后端数据
具体可以参考以下代码:
后端代码:
实体类:
```
@Entity
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String name;
private String email;
// getter和setter方法省略
}
```
Repository接口:
```
public interface UserRepository extends JpaRepository<User, Long> {
}
```
Controller类:
```
@RestController
@RequestMapping("/api")
public class UserController {
@Autowired
private UserRepository userRepository;
@GetMapping("/users")
public List<User> getUsers() {
return userRepository.findAll();
}
}
```
前端代码:
安装Axios:
```
npm install axios
```
Vue组件:
```
<template>
<div>
<h2>用户列表</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
users: [],
};
},
mounted() {
axios.get('/api/users').then((response) => {
this.users = response.data;
});
},
};
</script>
```
以上代码仅供参考,具体实现可以根据自己的实际情况进行调整。
阅读全文