SpringBoot+VUE+Element UI实现分页操作（附源码）

public interface ClassInfoMapper {

public List findAllClass();

}

2.3 mapping的实现

---

SELECT * FROM tb_classinfo

3.3 service层的实现

---

/**

• Created by Kak

*/

public interface ClassInfoService {

public PageInfo findByPageService(int pageCode, int pageSize);

}

/**

• Created by Kak

*/

@Service

public class ClassInfoServiceImpl implements ClassInfoService{

@Autowired(required = false)

private ClassInfoMapper classInfoMapper;

@Override

public PageInfo findByPageService(int pageCode, int pageSize) {

//使用Mybatis分页插件

PageHelper.startPage(pageCode,pageSize);

//调用分页查询方法，其实就是查询所有数据，mybatis自动帮我们进行分页计算

List classInfos = classInfoMapper.findAllClass();

return new PageInfo<>(classInfos);

}

}

3.4 Controller层的实现

---

/**

• @author by kak

*/

@RestController

public class ClassInfoController {

@Autowired(required = false)

private ClassInfoService classInfoService;

@CrossOrigin

@RequestMapping(value = “/pagehelper/{pageCode}/{pageSize}”,method = RequestMethod.GET)

//分页

public PageInfo findByPage(@PathVariable(value = “pageCode”) int pageCode, @PathVariable(value = “pageSize”) int pageSize) {

System.out.println(pageCode+“…”+pageSize);

PageInfo pageInfo = classInfoService.findByPageService(pageCode, pageSize);

return pageInfo;

}

}

3. 前端实现

===========================================================================

前端使用了Element UI的分页实现，代码如下：

<el-pagination

@size-change=“handleSizeChange”

@current-change=“handleCurrentChange”

:current-page=“this.params.page”

:page-sizes=“[1, 2, 3, 4]”

:page-size=“this.params.size”

layout=“total, sizes, prev, pager, next, jumper”

:total=“this.total”