1、创建springboot项目
2、pom.xml 里面添加 依赖
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--mysql 6-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.22</version>
</dependency>
<!--mybatis plus 依赖-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.2</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
</dependencies>3、pojo 实体类实现
@Data
@TableName("userinfo")
public class UserInfo {
@TableId(type = IdType.AUTO)
private Integer id;
private String username;
private String password;
}4、mapper 接口实现
@Mapper
public interface UserInfoMapper extends BaseMapper<UserInfo> {
//分页
public Page<User> findByPage(int pageCode, int pageSize);
}5、service 接口实现
public interface UserInfoService extends IService<UserInfo> {
//分页
public Page<UserInfo> findBy(int pageCode, int pageSize);
}service 下面impl 的业务实现类
@Service
public class UserInfoServiceImpl extends ServiceImpl<UserInfoMapper, UserInfo> implements UserInfoService {
@Autowired
private UserInfoMapper userInfoMapper;
@Override
public Page<UserInfo> findByPage(int pageCode, int pageSize) {
//1.创建Page对象，传入两个参数：当前页和每页显示记录数
Page<UserInfo> page = new Page<UserInfo>(pageCode,pageSize);
//2.将分页查询到的所有数据封装到Page对象中
userInfoMapper.selectPage(page,null);
return page;
}
}6、mybatis-plus 分页需要实现分页拦截器 config 包
@Configuration
@MapperScan("com.mapper")
public class MybatisPlusConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor(){
MybatisPlusInterceptor interceptor=new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return interceptor;
}
}7、controller 控制器的实现
@CrossOrigin //允许跨域 禁止ajax 访问
@RestController
@RequestMapping("/userinfo")
public class UserInfoController {
@Autowired
private UserInfoService userService;
// 分页
@GetMapping("/page/{pageCode}/{pageSize}")
public Page<UserInfo> findByPage(@PathVariable(value = "pageCode") int pageCode,
@PathVariable(value = "pageSize") int pageSize) {
Page<UserInfo> pageInfo = userService.findByPage(pageCode, pageSize);
return pageInfo;
}
}8、静态页面实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../css/index.css">
<script src="../js/vue.js"></script>
<script src="../index.js"></script>
<script src="../js/axios.min.js"></script>
</head>
<body>
<div id="root">
<!-- 表格 -->
<template>
<el-table :data="tableData" style="width: 100%;">
<el-table-column prop="id" label="编号" width="180"></el-table-column>
<el-table-column prop="username" label="账号" width="180"></el-table-column>
<el-table-column prop="password" label="密码" width="180"></el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button type="warning">修改</el-button>
<el-button type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<!-- element-ui分页组件-->
<div class="block">
<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">
</el-pagination>
</div>
</div>
<script>
const vm=new Vue({
el:'#root',
data(){
return{
tableData:[] ,//表格显示的数据
page:1,
size:'',
total:'',
params: {
page: 1,
size: 3,
},
}
},
created(){ //函数钩子 启动服务器时候运行的方法
//this.getAll();
this.pagehelper();
},
methods:{
getAll(){
//发送异步请求
axios.get("http://localhost:/userinfo").then((res)=>{
this.tableData=res.data;
})
},
// 分页
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.params.size = val;
this.pagehelper();
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.params.page = val;
this.pagehelper();
},
pagehelper:function(){
that = this;
axios.get("http://localhost:/userinfo/page/" + this.params.page + "/" +
this.params.size).then((res) => {
console.log("分页页面")
console.log(res.data);
console.log("分页后")
that.tableData = res.data.records;
that.total = res.data.total;
console.log(this.total)
});
}
}
})
</script>
</body>
</html>这里的index.js和index.css 是element 的js和css
标签：axios,springboot,pageSize,elementui,int,pageCode,Page,public,page From： https://blog.csdn.net/butterfly_onfly/article/details/144400213