用springboot+vue+mybatis写一个前后端分离的代码
时间: 2023-12-25 22:04:22 浏览: 30
好的,下面是一个简单的示例:
1. 创建一个Spring Boot项目
使用Spring Initializr创建一个新的Spring Boot项目,选择Web和MyBatis作为依赖项。
2. 配置数据源
在application.properties文件中添加以下内容:
```
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test?useSSL=false
spring.datasource.username=root
spring.datasource.password=root
```
注意:这是一个示例,您需要将其替换为您自己的数据库配置。
3. 定义数据模型
创建一个Java类来表示数据库中的表。例如,如果您有一个名为“user”的表,则可以创建以下类:
```java
public class User {
private Long id;
private String username;
private String password;
// 省略 getter 和 setter 方法
}
```
4. 创建Mapper接口
创建一个Mapper接口来定义SQL操作。例如,如果您想查询用户,则可以创建以下接口:
```java
@Mapper
public interface UserMapper {
@Select("SELECT * FROM user WHERE id = #{id}")
User getUserById(@Param("id") Long id);
}
```
5. 创建RESTful API
创建一个控制器类来处理HTTP请求和响应。例如,如果您想获取用户,则可以创建以下控制器:
```java
@RestController
@RequestMapping("/api")
public class UserController {
@Autowired
private UserMapper userMapper;
@GetMapping("/users/{id}")
public User getUserById(@PathVariable Long id) {
return userMapper.getUserById(id);
}
}
```
6. 创建Vue.js应用程序
使用Vue CLI创建一个新的Vue.js应用程序。在Vue.js应用程序中,使用axios库从RESTful API获取数据。
7. 编写Vue组件
创建Vue组件来显示从API获取的数据。例如,如果您想显示用户的详细信息,则可以创建以下组件:
```vue
<template>
<div>
<h1>{{ user.username }}</h1>
<p>{{ user.password }}</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
user: {}
};
},
mounted() {
axios.get('/api/users/1')
.then(response => {
this.user = response.data;
});
}
};
</script>
```
8. 运行应用程序
运行Spring Boot应用程序和Vue.js应用程序,并访问Vue.js应用程序以查看结果。
以上是一个简单的前后端分离的代码示例,您可以根据自己的需求进行修改和扩展。