解決頁面js接受Long型損失精度問題(最新解決方案)

更新時間：2023年03月09日 10:27:25 作者：zoeil

這篇文章主要介紹了解決頁面js接受Long型損失精度問題,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、場景描述

在下面這個后臺管理中，當我們點擊禁用后，會向服務器發(fā)送一個請求，同時攜帶這個員工的19位數(shù)字的id。

請求方式為PUT

這里的禁用對應employee表中的status字段，1為啟用，0為禁用。controller中對應的方法如下：

    @PutMapping
    public R<String> update(HttpServletRequest request,@RequestBody Employee employee) {
        log.info("修改的用戶id為{}", employee.getId());
        Long empId = (Long)request.getSession().getAttribute("employee");
        employee.setUpdateTime(LocalDateTime.now());
        employee.setUpdateUser(empId);
 
        employeeService.updateById(employee);
        return R.success("更新員工成功");
    }

當點擊后發(fā)現(xiàn)并沒有被禁用，數(shù)據(jù)庫中該用戶的status字段也沒有更新成功。通過debug發(fā)現(xiàn)請求發(fā)送時攜帶id與數(shù)據(jù)庫中的不同

而頁面展示的時候返回的數(shù)據(jù)id也是正常的

二、問題分析

這是因為頁面js處理Long型數(shù)據(jù)只能精確到前16位，所以最終ajax提交到服務器的請求中id后幾位被四舍五入了

三、解決方法

我們可以在服務端給頁面響應json數(shù)據(jù)時進行處理，將long型數(shù)據(jù)統(tǒng)一轉為String字符串，效果如下:

具體實現(xiàn)步驟:

提供對象轉換器Jackson0bjectMapper，基于Jackson進行Java對象到json數(shù)據(jù)的轉換
在WebMvcConfig配置類中擴展Spring mvc的消息轉換器，在此消息轉換器中使用提供的對象轉換器進行java對象到json數(shù)據(jù)的轉換

/**
 * 對象映射器:基于jackson將Java對象轉為json，或者將json轉為Java對象
 * 將JSON解析為Java對象的過程稱為 [從JSON反序列化Java對象]
 * 從Java對象生成JSON的過程稱為 [序列化Java對象到JSON]
 */
public class JacksonObjectMapper extends ObjectMapper {
 
    public static final String DEFAULT_DATE_FORMAT = "yyyy-MM-dd";
    public static final String DEFAULT_DATE_TIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
    public static final String DEFAULT_TIME_FORMAT = "HH:mm:ss";
 
    public JacksonObjectMapper() {
        super();
        //收到未知屬性時不報異常
        this.configure(FAIL_ON_UNKNOWN_PROPERTIES, false);
 
        //反序列化時，屬性不存在的兼容處理
        this.getDeserializationConfig().withoutFeatures(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES);
 
 
        SimpleModule simpleModule = new SimpleModule()
                .addDeserializer(LocalDateTime.class, new LocalDateTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
                .addDeserializer(LocalDate.class, new LocalDateDeserializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
                .addDeserializer(LocalTime.class, new LocalTimeDeserializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)))
 
                .addSerializer(BigInteger.class, ToStringSerializer.instance)
                .addSerializer(Long.class, ToStringSerializer.instance)
                .addSerializer(LocalDateTime.class, new LocalDateTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_TIME_FORMAT)))
                .addSerializer(LocalDate.class, new LocalDateSerializer(DateTimeFormatter.ofPattern(DEFAULT_DATE_FORMAT)))
                .addSerializer(LocalTime.class, new LocalTimeSerializer(DateTimeFormatter.ofPattern(DEFAULT_TIME_FORMAT)));
 
        //注冊功能模塊 例如，可以添加自定義序列化器和反序列化器
        this.registerModule(simpleModule);
    }
}

webmvc配置類

@Configuration
@Slf4j
public class WebMvcConfig extends WebMvcConfigurationSupport {
 
 
    /*
     * 擴展MVC框架的消息轉換器
     */
 
    @Override
    protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
        log.info("消息轉化器添加成功");
        // 創(chuàng)建消息轉換器
        MappingJackson2HttpMessageConverter converter = new MappingJackson2HttpMessageConverter();
 
        // 設置對象轉換器，底層使用jackson將java對象轉換為json
        converter.setObjectMapper(new JacksonObjectMapper());
        // 將上面的消息轉換器添加到mvc框架的轉換器集合中
        converters.add(0, converter);
 
    }
}

到此這篇關于解決頁面js接受Long型損失精度問題的文章就介紹到這了,更多相關js接受Long型損失精度內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

javascript實現(xiàn)div浮動在網頁最頂上并帶關閉按鈕效果實例
我們有時會看到有些網站最頂部一直會跟著我們滾動而滾動了，這種方法其實很簡單，下面我來給大推薦一個javascript實現(xiàn)div浮動在網頁最頂上并帶關閉按鈕效果
2013-08-08
手把手教你uniapp和小程序分包(圖文)
本文主要介紹了手把手教你uniapp和小程序分包，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
《javascript設計模式》學習筆記七：Javascript面向對象程序設計組合模式詳解
這篇文章主要介紹了Javascript面向對象程序設計組合模式,結合實例形式分析了《javascript設計模式》中Javascript面向對象組合模式相關概念、原理、定義、用法及操作注意事項,需要的朋友可以參考下
2020-04-04
JS控制圖片等比例縮放的示例代碼
本篇文章主要是對JS控制圖片等比例縮放的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
js 調用百度地圖api并在地圖上進行打點添加標注
上邊有一個標題，下邊分成兩塊，左邊是地圖。并且地圖上有兩個點，點擊兩個點有相應的提示信息，具體實現(xiàn)如下
2014-05-05
js遍歷添加欄目類添加css 再點擊其它刪除css【推薦】
這篇文章主要介紹了js遍歷添加欄目類添加css 再點擊其它刪除css的實例代碼,非常不錯，具有一定的參考借鑒借鑒價值，需要的朋友可以參考下
2018-06-06
在DWR中實現(xiàn)直接獲取一個JAVA類的返回值的兩種方法
本文主要介紹了在DWR中實現(xiàn)直接獲取一個JAVA類的返回值的兩種方法，具有一定的參考價值，下面跟著小編一起來看下吧
2016-12-12
使用webpack打包ts代碼的實現(xiàn)
本文主要介紹了使用webpack打包ts代碼的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
javascript計算對象長度的方法
這篇文章主要為大家詳細介紹了javascript計算對象長度的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
JavaScript判斷數(shù)組是否包含指定元素的方法
這篇文章主要介紹了JavaScript判斷數(shù)組是否包含指定元素的方法,涉及javascript中contains方法的使用技巧,需要的朋友可以參考下
2015-07-07