Solve the problem of java background ID using Snowflake ID, JSONbig handles the last four digits of 19-bit Vue as 0

First, use the database mysql id field type as bigint;

Problem scenario: Use IdWork.uuid(); to obtain a random 20-digit long integer number; when querying based on id on the vue page, the data cannot be found; because the id does not correspond to the original record id; the last few digits are all 0;

The previous method was to modify the string type of the returned vo entity id in the background Java program; this can be solved;

@TableId(value = "id",type = IdType.ID_WORKER)
@JsonSerialize(using = ToStringSerializer.class)
private Long id;

I encountered this problem again recently. Can't it be solved on the front end? So I looked up a solution in a document by introducing the plug-in jsonbigint, and after trying it, it worked;

I made the adjustment based on the Ruoyi (ruoyi.vip) platform. Here I changed the original self-increasing ID to Snowflake ID;

Modify the front-end configuration as follows:

First find request.js on the vue side and add the following when axios handles it uniformly:

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
import JSONbig from 'json-bigint'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function(data) {
    try {
      // 作用1：把json字符串转为js对象
      // 作用2：把里面的大数字做安全处理
        return JSONbig.parse(data)
      } catch (e) {
        return data
      }
  }],
  // 超时
  timeout: 10000
})

Specific reference link: https://blog.csdn.net/wz5208/article/details/111479717

Replenish:

Recently, I encountered a big pitfall when using this; after generating the ID, it is processed in segments; it is stored as a bignumber array; if the second segment starts with 0, one bit will be lost; what a fool; a verification method was added later;

The method is as follows (discarded) :

/**
 * 解决JSONbig插件第二段为0开头丢失一位问题
 * @param {*} data JSONbig 数组
 */
export function repairJSONbigBug(data) {
  let val=String(data.join(""))
  if(val.length<19){
    val=val.slice(0, 5) + '0' + val.slice(5);
  }
	return val;
}

 Complete:

Because when processing data, if the second paragraph contains multiple zeros at the beginning, it will be ignored, resulting in a mismatch between the stored ID and the real ID, so special processing is required:

export function repairJSONbigBug(data) {
  let val=String(data.join(""))
  if(val.length<19){
    let count=19-val.length;
    // 0的填充
    let zeroCount='';
    for(let a=0;a<count;a++){
      zeroCount=zeroCount+'0'
    }
    val=val.slice(0, 5) + zeroCount + val.slice(5);
  }
	return val;
}

Pass this value in on the application side and re-receive it:

        that.messageAuthList.filter(item=>{
          console.log("item.authId.c::"+item.authId.c)
          let jsoNbigBug = repairJSONbigBug(item.authId.c)
          console.log("jsoNbigBug::"+jsoNbigBug)
          item.authId=jsoNbigBug 
        })