以下是一个简化的例子,展示了如何在Spring Boot后端使用MyBatis和Vue前端之间传递数据。
后端(Spring Boot + MyBatis):
- 创建一个Spring Boot项目,并添加MyBatis和数据库驱动的依赖。
- 配置数据库连接。
- 创建一个Mapper接口和对应的XML文件,定义数据库操作。
- 创建一个Service,使用Mapper进行数据库操作。
- 创建一个Controller,提供API接口供Vue前端调用。
前端(Vue + ElementUI):
- 创建一个Vue项目,并添加ElementUI依赖。
- 使用Vue的组件,创建页面布局。
- 使用Vue的HTTP客户端(例如axios),调用后端API接口获取或提交数据。
- 使用Vue的响应式机制,将获取到的数据绑定到页面组件上。
示例代码:
后端Controller:
@RestController
@RequestMapping("/api/data")
public class DataController {
@Autowired
private DataService dataService;
@GetMapping
public List<DataModel> getAllData() {
return dataService.getAllData();
}
// 其他CRUD操作
}
前端Vue组件:
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="value" label="Value"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: []
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
this.axios.get('/api/data')
.then(response => {
this.tableData = response.data;
})
.catch(error => {
console.error('There was an error!', error);
});
}
}
};
</script>
这个例子展示了后端提供了一个简单的API接口,前端通过axios在created钩子函数中调用这个接口,获取数据后将其绑定到ElementUI的表格组件上显示。这个过程是前后端分离开发的典型场景。