客户管理系统开发定制Invalid prop: type check failed for prop “total“. Expected Number with value x, got String with valu

一、问题

在做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>
1
2
3
4
5
6
7
8
9
10

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("查询失败,请重新尝试");                })        },        //省略其他}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

2、后端代码如下：

    /**     * 统一返回通用类     * <p>包含 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;    }
1
2
3
4
5
6
7
8
9
10
11
12

后端total定义为Long类型，前端接收的total也是number类型，为什么会报错？

后来发现，后端发送的参数都是string类型，并不是number类型。

{    "records": "Array(5)",    "total": "6",    "size": "5",    "pages": "2",    "current": "1"}
1
2
3
4
5
6
7

———————————————————————————————

三、解决方案

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);                        }                    }                }
1
2
3
4
5
6
7
8
9
10
11
12
13

2、后端修改数据类型，代码如下：

    /**     * 统一返回通用类     * <p>包含 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;    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

———————————————————————————————

四、反思

做个简单测试，查看后端所有数据类型返回的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';}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

@CrossOrigin@RestControllerpublic class TestController {    @GetMapping("/test")    public R test(){        return new R();    }}
1
2
3
4
5
6
7
8

2、发送请求

http://localhost:8888/test
1

3、实际返回结果如下：

{    "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}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

可以发现只有String、char、Long类型返回给前端的json格式是string类型，所以想要number类型的以后不要定义为Long类型就好了。