springboot 以及mybatis-plus 整合 Element-admin 实现分页效果。

mybatis-plus 的使用！

1.引入pom文件

<dependency>
    <groupId>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.0.5</version>
</dependency>

 

 

2.记得修改application.yml文件。

3.

对于 User表 可能要进行表的对应。

@TableName ( value = "t_user" )

写在类的上面。

@TableField ( value = "phonecode" )

字段对应。

4.在dao 文件中 要继承 BaseMapper

 

1后端代码 

 controller层 

@Autowired
private UserDao userDao;
@GetMapping("getList")
public IPage<User> getList(@RequestBody @RequestParam(value = "page") int page,@RequestBody @RequestParam(value = "limit")int limit){
    IPage<User> page1 = new Page<>(page,limit);
    IPage<User> userIPage = userdao.selectPage(page1,null);
    return userIPage;
}

 

2.前端代码

 

首先在表格之下加入分页条。

<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

 

然后 在scrpit

import Pagination from '@/components/Pagination' // secondary package based on el-pagination

 

然后再 element-admin-master中的components 下找到 Pagination 

导入到本项目 的 components  下。

然后 因为Pagination 中缺少这个js文件。

所以要在 element-admin-master 的 config 中找到这个js文件到如到该项目的config中。

接下来就可以开始使用了！

 

在index 中添加以下代码

components: { Pagination },
total: 0,
listQuery: {
page: 1,
limit: 10,   //limit注意 一定要为10
},

},

然后 

 

 

getList(){

  var _this = this;

  this.$http.get("http://localhost:8989/users/user/getList?page="+_this.listQuery.page+"&limit="+_this.listQuery.limit).then((res) => {

      this.users = res.data.records

      this.total = res.data.total

    })

},

//这样就完成了分页的效果！