SpringBoot + MyBaits+ Vue + ElementUi简单的数据流传递(从0开始搭建)

以下是一个简化的例子，展示了如何在Spring Boot后端使用MyBatis和Vue前端之间传递数据。

后端（Spring Boot + MyBatis）:

1. 创建一个Spring Boot项目，并添加MyBatis和数据库驱动的依赖。
2. 配置数据库连接。
3. 创建一个Mapper接口和对应的XML文件，定义数据库操作。
4. 创建一个Service，使用Mapper进行数据库操作。
5. 创建一个Controller，提供API接口供Vue前端调用。

前端（Vue + ElementUI）:

1. 创建一个Vue项目，并添加ElementUI依赖。
2. 使用Vue的组件，创建页面布局。
3. 使用Vue的HTTP客户端（例如axios），调用后端API接口获取或提交数据。
4. 使用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的表格组件上显示。这个过程是前后端分离开发的典型场景。