手拉手springboot+vue2+Element实现分页
原创
环境介绍
技术栈 | springboot+mybatis-plus+mysql+vue2+Element |
|---|---|
软件 | 版本 |
mysql | 8 |
IDEA | IntelliJ IDEA 2022.2.1 |
JDK | 1.8 |
Spring Boot | 2.7.13 |
mybatis-plus | 3.5.3.2 |
后端
实体类、持久层、服务层使用Mybatis-Plus逆向工程生成
实体类
@TableName是mybatis-plus中的注解，主要是实现实体类型和数据库中的表实现映射。
@TableId注解是专门用在主键上的注解，如果数据库中的主键字段名和实体中的属性名，不一样且不是驼峰之类的对应关系，可以在实体中表示主键的属性上加@Tableid注解，并指定@Tableid注解的value属性值为表中主键的字段名既可以对应上。
@TableField（select = "false"）查询时不想被查询出来该字段，可以使用@TableField注解来隐藏该字段的查询结果。
@TableName(value ="t_address")
@Data
public class TAddress implements Serializable {
/**
*
*/
@TableId(type = IdType.AUTO)
private Integer id;
/**
*
*/
private String address;
@TableField(exist = false)
private static final long serialVersionUID = 1L;
}持久层(mapper)
@Mapper
public interface TAddressMapper extends BaseMapper<TAddress> {
Integer getTotal();
}TAddressMapper.xml
<select id="getTotal">
SELECT count(*) FROM `t_address`
</select>
服务层
public interface TAddressService extends IService<TAddress> {
Integer getTotal();
}@Service
@DS("sys2")
public class TAddressServiceImpl extends ServiceImpl<TAddressMapper, TAddress>
implements TAddressService {
@Autowired
private TAddressMapper tAddressMapper;
@Override
public Integer getTotal() {
return tAddressMapper.getTotal();
}
}控制层
@RequestParam注解：用于将指定的请求参数赋值给方法中的形参。
三个属性：
（1）value：请求参数名（必须配置）
（2）required：是否必需，默认为 true，即 请求中必须包含该参数，如果没有包含，将会抛出异常（可选配置）
（3）defaultValue：设置默认值，如果设置了该值，required 将自动设为 false，无论你是否配置了required，配置了什么值，都是 false（可选配置）
@GetMapping("/getpage")
public Map<String,Object> getPageTAddress(@RequestParam(defaultValue = "1") int pageNum,
@RequestParam(defaultValue = "10") int pageSize) {
PageHelper.startPage(pageNum,pageSize);
List<TAddress> data = tAddressService.list();
Integer total= tAddressService.getTotal();
HashMap<String, Object> res = new HashMap<>();
res.put("data",data);
res.put("total",total);
return res;
}前端
Pagination.vue
<template>
<div class="block">
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
<!-- <el-table-column
prop="date"
label="日期"
width="180">
</el-table-column> -->
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[10,20,30,40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</template>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
<script>
export default {
data() {
return {
tableData: [],
total: 0,
pageNum: 1,
pageSize: 10
}
},
created() {
this.load()
},
methods: {
load() {
this.$add.get("/getpage?"+"pageNum="+this.pageNum+"&pageSize="+this.pageSize).then((response)=>{
console.log(response)
this.tableData = response.data.data
this.total = response.data.total
})
},
handleSizeChange(pageSize) {
console.log(pageSize)
this.pageSize = pageSize
this.load()
},
handleCurrentChange(pageNum) {
console.log(pageNum)
this.pageNum = pageNum
this.load()
}
}
}
</script>效果
Element特性：
一致性 Consistency
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
反馈 Feedback
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
效率 Efficiency
简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
可控 Controllability
用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
