Vue-typescript Long类型失去精度

Vue typescript项目Long类型数据失去精度如何解决

一、后台解决方案

将 Long 类型转换成 String 类型然后传给前端

Springboot 代码示例

代码示例：

import com.fasterxml.jackson.databind.annotation.JsonSerialize;
import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;

@JsonSerialize(using = ToStringSerializer.class)

二、前端解决方案

通过 json-bigint 进行将 Long 类型转换成 String

1. 添加依赖 "json-bigint": "^1.0.0" ,此处我使用的是 1.0.0 版本

• yarn 安装

yarn add json-bigint

• npm 安装

npm i json-bigint

2. 编写json-bigint.d.ts 文件，放入项目中 scr/typings 目录下

此步骤是为了让 ts 可以使用 js 插件，不是使用 ts，开发的可以略过

declare module 'json-bigint'

3. 在你需要转换的地方使用 json-bigint

此处我是在 axios 中，从后台获取值转换为json前，先使用 json-bigint

• 在文件中引入 json-bigint

import JSONBig from 'json-bigint'

• 修改 axios 中的 transformResponse

this.axios.defaults.transformResponse = [(data: any) => {
  // 此处是使用json-bigint进行json格式化
  return JSONBig.parse(data)
}]

• 为方便理解，附上封装的 axios 部分代码

import axios from 'axios'

class LocalAxios {
   public axios: any;
   constructor(url: string) {
     // 创建axios实例
     this.axios = axios.create({
       baseURL: process.env.VUE_APP_BASE_API,
       timeout: 100000,
       withCredentials: true
     })
     this.transResponse()
   }
   private transResponse() {
     // 将数据格式化成json
     this.axios.defaults.transformResponse = [(data: any) => {
       return JSONBig.parse(data)
     }]
   }
}

#