一、问题
在做vue项目分页功能中，出现了Invalid prop: type check failed for prop “total”. Expected Number with value x, got String with value “x”的类型转换问题。
———————————————————————————————
二、原代码展示
1、前端代码如下：
<template> <div> <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage" :page-size="pageSize" :total="total" > </el-pagination> </div></template>export default { data() { return { //分页参数 currentPage: 1, pageSize: 5, total: 0, //省略其他 } }, methods: { // 分页查询 page() { let params = { currentPage: this.currentPage, pageSize: this.pageSize }; // let config = { headers: { token: sessionStorage.getItem("token") } }; this.$axios .get("http://localhost:8888/policy/page", { params: params }) .then((response) => { if (response.status === 200) { if (response.data.code === 200) { console.log(response.data.data); this.datas = response.data.data.records;//数据列表 this.total = response.data.data.total;//总页数 } else { this.$message.error(response.data.data.message); } } }).catch((error) => { console.log(error); this.$message.error("查询失败,请重新尝试"); }) }, //省略其他}2、后端代码如下：
/** * 统一返回通用类 * 包含 records、total、size、pages、current */
@Data public static class CommonPage<DTO> { private List<DTO> records = new ArrayList<>(); private Long total; private Long size; private Long pages; private Long current; }后端total定义为Long类型，前端接收的total也是number类型，为什么会报错？
后来发现，后端发送的参数都是string类型，并不是number类型。
{ "records": "Array(5)", "total": "6", "size": "5", "pages": "2", "current": "1"}———————————————————————————————
三、解决方案
1、前端接收参数时，进行类型转换，代码如下：
this.$axios.get("http://localhost:8888/policy/page", { params: params }).then((response) => { if (response.status === 200) { if (response.data.code === 200) { console.log(response.data.data); this.datas = response.data.data.records;//数据列表//修改此处即可 this.total = response.data.data.total - 0;//总页数 } else { this.$message.error(response.data.data.message); } } }2、后端修改数据类型，代码如下：
/** * 统一返回通用类 * 包含 records、total、size、pages、current */
@Data public static class CommonPage<DTO> { private List<DTO> records = new ArrayList<>();//修改 Long -> long 即可 private long total; private long size; private long pages; private long current; }———————————————————————————————
四、反思
做个简单测试，查看后端所有数据类型返回的json格式是什么类型
1、演示代码如下：
@Datapublic class R { public Double aDouble = 1.10; private double bDouble = 1.10;; private Float aFloat = 1.10f; private float bFloat = 1.10f;; private Long aLong = 10L; private long bLong = 10L; private Integer AInteger = 10; private int bInteger = 10; private Boolean aBoolean = false; private boolean bBoolean = false; private String str = "a"; private char aChar = 'a';}@CrossOrigin@RestControllerpublic class TestController { @GetMapping("/test") public R test(){ return new R(); }}2、发送请求
http://localhost:8888/test3、实际返回结果如下：
{ "aDouble": 1.1, "str": "a", "aboolean": false, "along": "10", "bfloat": 1.1, "ainteger": 10, "bboolean": false, "bdouble": 1.1, "adouble": 1.1, "achar": "a", "blong": 10, "afloat": 1.1, "binteger": 10}