mybatisplus page分页 layui,前端后台Controller完整代码
时间: 2023-10-04 11:11:38 浏览: 74
以下是使用 Mybatis-Plus 和 Layui 实现分页查询的完整代码:
**1. 后端代码**
(1)Controller
```java
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
/**
* 分页查询用户列表
* @param page 当前页码
* @param limit 每页显示数量
* @return
*/
@GetMapping("/list")
public Result list(@RequestParam(required = false, defaultValue = "1") Integer page,
@RequestParam(required = false, defaultValue = "10") Integer limit) {
Page<User> userPage = new Page<>(page, limit);
Page<User> result = userService.page(userPage);
return Result.success(result.getRecords(), result.getTotal());
}
}
```
(2)Service
```java
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
}
```
(3)Mapper
```java
@Mapper
public interface UserMapper extends BaseMapper<User> {
}
```
(4)Entity
```java
@Data
@TableName("user")
public class User implements Serializable {
@TableId(type = IdType.AUTO)
private Long id;
private String name;
private Integer age;
private String email;
}
```
(5)Result
```java
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result<T> implements Serializable {
private Integer code;
private String msg;
private T data;
private Long count;
public static <T> Result<T> success(T data, Long count) {
return new Result<>(0, "成功", data, count);
}
public static <T> Result<T> success(T data) {
return success(data, null);
}
public static <T> Result<T> fail(Integer code, String msg) {
return new Result<>(code, msg, null, null);
}
}
```
**2. 前端代码**
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.css">
</head>
<body>
<table id="userTable" lay-filter="userTable"></table>
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.js"></script>
<script>
layui.use(['table', 'layer'], function () {
var table = layui.table;
var layer = layui.layer;
table.render({
elem: '#userTable',
url: '/user/list',
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
{field: 'email', title: '邮箱'}
]],
page: true,
limit: 10,
limits: [10, 20, 30],
response: {
statusName: 'code',
statusCode: 0,
countName: 'count',
dataName: 'data'
},
parseData: function (res) {
return {
'code': res.code,
'msg': res.msg,
'count': res.count,
'data': res.data
}
},
done: function (res) {
if (res.code !== 0) {
layer.msg(res.msg, {icon: 5});
}
}
});
});
</script>
</body>
</html>
```
希望能对你有所帮助!