Lake's Blog Lake's Blog
首页
HCFrame
  • 博客搭建

    • 搜索引擎
    • SEO优化
    • 问题记录
  • Vue

    • 问题记录
  • uni-app
  • 开发

    • Spring
  • 数据库及中间件

    • Elasticsearch
    • SQL
  • 杂谈

    • 杂谈
  • 微服务

    • nacos
    • CAS
  • 算法说明

    • algorithm
  • leetCode

    • leetCode
  • 代理

    • Nginx
  • Linux

    • ubuntu
  • Docker
  • 数据库
  • 消息队列
  • openwrt
  • 友情链接
关于
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub

Lake Liu

很菜的程序员
首页
HCFrame
  • 博客搭建

    • 搜索引擎
    • SEO优化
    • 问题记录
  • Vue

    • 问题记录
  • uni-app
  • 开发

    • Spring
  • 数据库及中间件

    • Elasticsearch
    • SQL
  • 杂谈

    • 杂谈
  • 微服务

    • nacos
    • CAS
  • 算法说明

    • algorithm
  • leetCode

    • leetCode
  • 代理

    • Nginx
  • Linux

    • ubuntu
  • Docker
  • 数据库
  • 消息队列
  • openwrt
  • 友情链接
关于
  • 网站
  • 资源
  • 分类
  • 标签
  • 归档
GitHub
  • 博客搭建

  • VUE

    • 问题记录

      • 前端传值不能带中括号???
      • Vue中使用debounce防抖基于Typescript
      • Vue-typescript项目兼容IE浏览器
      • Vue-typescript Long类型失去精度
        • 一、后台解决方案
        • 二、前端解决方案
          • 1. 添加依赖 "json-bigint": "^1.0.0" ,此处我使用的是 1.0.0 版本
          • 2. 编写json-bigint.d.ts 文件,放入项目中 scr/typings 目录下
          • 3. 在你需要转换的地方使用 json-bigint
      • Vue-typescript 打包成app后如何自动更新
      • Vue typescript 如何极限压缩编译静态资源
  • UNIAPP

Vue-typescript Long类型失去精度

# 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)
1
2
3
4

# 二、前端解决方案

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

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

  • yarn 安装
yarn add json-bigint
1
  • npm 安装
npm i json-bigint
1

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

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

declare module 'json-bigint'
1

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

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

  • 在文件中引入 json-bigint
import JSONBig from 'json-bigint'
1
  • 修改 axios 中的 transformResponse
this.axios.defaults.transformResponse = [(data: any) => {
  // 此处是使用json-bigint进行json格式化
  return JSONBig.parse(data)
}]
1
2
3
4
  • 为方便理解,附上封装的 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)
     }]
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#

编辑
#Typescript#Vue
上次更新: 2023/03/24, 08:53:10
Vue-typescript项目兼容IE浏览器
Vue-typescript 打包成app后如何自动更新

← Vue-typescript项目兼容IE浏览器 Vue-typescript 打包成app后如何自动更新→

最近更新
01
IDEA行号太宽
03-11
02
uniapp中实现h5扫码功能(微信版)
08-12
03
Docker安装Rabbitmq
07-22
更多文章>
本站总访问量次 | 您是本站第位访问者
Theme by Vdoing | Copyright © 2020-2024 Lake Liu | MIT License | 背景图、Logo、头像设计@Drrizzee
  • 跟随系统
  • 深色模式
  • 浅色模式
  • 阅读模式