Spring Boot + MyBatis + Vue.js + ElementUI：分页实例与代码(二)

本文将深入探讨如何在Spring Boot、MyBatis、Vue.js和Element UI的框架下，实现数据的增删改查功能，并在此基础上加入分页功能。上文已经概述了基础的集成过程，包括项目结构的设置和引入必要的依赖。在Spring Boot的1.4.3.RELEASE版本中，我们使用了`spring-boot-starter-parent`作为父项目，以简化项目配置。 首先，确保在Maven项目的`pom.xml`文件中添加了分页功能的相关依赖。这可能包括`spring-boot-starter-data-jpa`或者`spring-boot-starter-data-rest`，因为它们包含了对JPA和Spring Data的支持，有助于处理数据库操作。例如： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> ``` 在引入这些依赖后，可以配置数据源和数据库连接，如使用H2内存数据库： ```xml <dependency> <groupId>com.h2database</groupId> <artifactId>h2</artifactId> <scope>runtime</scope> </dependency> ``` 接下来，我们需要在Spring Boot的配置类（如`Application.java`）中进行数据源和事务管理的配置： ```java @Configuration @EnableTransactionManagement public class AppConfig { @Bean public DataSource dataSource() { DriverManagerDataSource dataSource = new DriverManagerDataSource(); dataSource.setDriverClassName("com.h2.Driver"); dataSource.setUrl("jdbc:h2:mem:test;DB_CLOSE_DELAY=-1"); dataSource.setUsername("sa"); dataSource.setPassword(""); return dataSource; } } ``` 在MyBatis的配置中，确保`mybatis-spring-boot-starter`已被包含，并配置MapperScannerConfigurer来扫描Mapper接口： ```java @Configuration public class MyBatisConfig { @Autowired private SqlSessionFactory sqlSessionFactory; @Bean public SqlSessionFactoryBean sqlSessionFactoryBean() { SqlSessionFactoryBean factoryBean = new SqlSessionFactoryBean(); factoryBean.setDataSource(dataSource()); return factoryBean; } @Bean public MapperScannerConfigurer mapperScannerConfigurer() { MapperScannerConfigurer configurer = new MapperScannerConfigurer(); configurer.setBasePackage("com.imooc.demo.mapper"); configurer.setSqlSessionFactoryBeanName("sqlSessionFactoryBean"); return configurer; } } ``` 在Vue.js部分，我们将使用Element UI库构建前端界面。通过`axios`或Spring Boot的内置RESTful API来与后端交互。创建一个`store.js`文件来管理状态，包括分页参数： ```javascript import axios from 'axios'; export const state = { currentPage: 1, pageSize: 10, }; export const mutations = { setCurrentPage(state, page) { state.currentPage = page; }, setPageSize(state, size) { state.pageSize = size; }, }; export const actions = { fetchData({ commit }, params) { axios.get('/api/data', { params }) .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }); }, }; ``` 在Vue组件中，通过`actions`调用`fetchData`方法并传递分页参数： ```html <template> <!-- ... --> <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" ></el-pagination> <!-- ... --> </template> <script> // ... export default { methods: { handleCurrentChange(page) { this.$store.commit('setCurrentPage', page); }, }, }; </script> ``` 这部分代码展示了如何在Spring Boot + MyBatis + Vue.js + Element UI的架构中实现数据的增删改查功能，并且加入了分页功能。完整的开发过程中，还需要编写相应的Controller层API，Mapper接口以及Vue组件的视图层，以便用户可以直观地进行操作。整体而言，这个例子提供了一个实用的基础框架，开发者可以根据实际需求对其进行扩展和定制。