前后端分离开发的项目，通常需要前端（Vue+Element UI）和后端（Spring Boot+MyBatis）的协同工作。以下是一个简单的前后端分离项目的代码示例。
后端（Spring Boot + MyBatis）:
- 创建Spring Boot项目，并添加MyBatis和MySQL依赖。
- 配置application.properties或application.yml文件，连接MySQL数据库。
- 创建实体类和Mapper接口。
- 创建Service层和Controller层。
前端（Vue+Element UI）:
- 创建Vue项目，并添加Element UI。
- 配置Vue路由。
- 创建API请求模块。
- 编写组件，发送API请求并展示数据。
示例代码：
后端代码（Spring Boot + MyBatis）:
pom.xml（依赖）:
<!-- 省略其他依赖 -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.4</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.19</version>
</dependency>
application.properties（配置文件）:
spring.datasource.url=jdbc:mysql://localhost:3306/your_database?useSSL=false
spring.datasource.username=root
spring.datasource.password=yourpassword
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
User.java（实体类）:
public class User {
private Integer id;
private String name;
private String email;
// 省略getter和setter
}
UserMapper.java（Mapper接口）:
@Mapper
public interface UserMapper {
User selectUserById(Integer id);
// 省略其他方法
}
UserService.java（Service层）:
@Service
public class UserService {
@Autowired
private UserMapper userMapper;
public User getUserById(Integer id) {
return userMapper.selectUserById(id);
}
// 省略其他方法
}
UserController.java（Controller层）:
@RestController
@RequestMapping("/api")
public class UserController {
@Autowired
private UserService userService;
@GetMapping("/users/{id}")
public User getUser(@PathVariable Integer id) {
return userService.getUserById(id);
}
// 省略其他方法
}
前端代码（Vue+Element UI）:
main.js（API请求）:
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:8080/api';
export default {
getUser(id) {
return axios.get(`/users/${id}`);
}
// 省略其他方法
}
UserProfile.vue（组件）:
<t