请用代码完善vue+springboot前后端分离分页
时间: 2023-07-30 21:12:06 浏览: 135
好的,下面将为你提供一个简单的示例代码,来完善vue+springboot前后端分离分页功能。
前端代码(Vue+ElementUI):
```html
<template>
<div>
<el-table :data="tableData" border>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
:total="total">
</el-pagination>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
tableData: [],
currentPage: 1,
pageSize: 10,
total: 0
};
},
mounted() {
this.getTableData();
},
methods: {
getTableData() {
axios.get('/api/user', {
params: {
page: this.currentPage,
size: this.pageSize
}
}).then(response => {
this.tableData = response.data.content;
this.total = response.data.totalElements;
});
},
handleSizeChange(val) {
this.pageSize = val;
this.getTableData();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getTableData();
}
}
};
</script>
```
后端代码(Spring Boot + MyBatis):
```java
@RestController
@RequestMapping("/api/user")
public class UserController {
@Autowired
private UserService userService;
@GetMapping
public Page<User> getUserList(@RequestParam(defaultValue = "1") int page,
@RequestParam(defaultValue = "10") int size) {
Pageable pageable = PageRequest.of(page - 1, size);
return userService.getUserList(pageable);
}
}
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public Page<User> getUserList(Pageable pageable) {
return userMapper.getUserList(pageable);
}
}
@Mapper
public interface UserMapper {
Page<User> getUserList(Pageable pageable);
}
```
以上代码仅供参考,具体实现方式可能因具体业务需求而异。
阅读全文