快捷導(dǎo)航

SpringBoot分頁的實(shí)現(xiàn)與long型id精度丟失問題的解決方案介紹

更新時間：2022年10月12日 14:09:01 作者：懶羊羊.java

在以后的開發(fā)中，當(dāng)全局唯一id的生成策略生成很長的Long型數(shù)值id之后會超過JS對Long型數(shù)據(jù)處理的能力范圍，可能發(fā)生精度丟失而造成后端方法失效，我們要學(xué)會解決。分頁功能雖然簡單但是非常重要，對于剛接觸項目的人一定要重點(diǎn)注意

一.分頁查詢的實(shí)現(xiàn)

在做分頁查詢時流程如下：

頁面發(fā)送ajax請求，將分頁查詢參數(shù)(page、pageSize、name)提交到服務(wù)端，服務(wù)端Controller層接收頁面提交的數(shù)據(jù)并調(diào)用Service層查詢數(shù)據(jù)，Service調(diào)用Mapper操作數(shù)據(jù)庫，查詢分頁數(shù)據(jù)，Controller層將查詢到的分頁數(shù)據(jù)響應(yīng)給頁面

具體實(shí)現(xiàn)：

1.設(shè)置分頁攔截器，拿到對象當(dāng)作Bean交給Spring管理

@Configuration
public class MyBatisPlusConfig {
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor(){
        MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
        mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
        return mybatisPlusInterceptor;
    }
}

2.Controller層中創(chuàng)建分頁對象，編寫分頁條件

    @GetMapping("/page")
    public R<Page> page(int page,int pageSize,String name){
        log.info("page={}, pageSize={}, name={}",page,pageSize,name);
        //構(gòu)造分頁構(gòu)造器
        Page page1 = new Page(page, pageSize);
        //構(gòu)造條件構(gòu)造器
        LambdaQueryWrapper<Employee> lqw = new LambdaQueryWrapper<>();
        //分頁條件
        lqw.like(StringUtils.isNotEmpty(name),Employee::getName,name);
        //添加排序
        lqw.orderByDesc(Employee::getUpdateTime);
        //執(zhí)行查詢
        employeeService.page(page1,lqw);
        //返回分頁頁面信息
        return R.success(page1);
    }

返回的分頁信息響應(yīng)結(jié)果（response）如下：

推薦一個json格式轉(zhuǎn)換神器：JSON轉(zhuǎn)換神器

{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->"code":1,"msg":null,"data":{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->"records":[{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->"id":"1576900298836086785","username":"15072564960","name":"懶羊羊","passsword":"e10adc3949ba59abbe56e057f20f883e","phone":"15072564960","sex":"1","idNumber":"420528200201151015","status":0,"createTime":"2022-10-03 19:41:43","updateTime":"2022-10-06 23:01:27","createUser":"1","updateUser":"1"},{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->"id":"1576934844579266561","username":"24553880","name":"懶羊羊","passsword":"e10adc3949ba59abbe56e057f20f883e","phone":"15072564960","sex":"1","idNumber":"420528200201151015","status":1,"createTime":"2022-10-03 21:59:00","updateTime":"2022-10-06 23:01:17","createUser":"1","updateUser":"1"}],"total":4,"size":2,"current":1,"orders":[],"optimizeCountSql":true,"hitCount":false,"countId":null,"maxLimit":null,"searchCount":true,"pages":2},"map":{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->}}

二.禁/啟用員工賬號

在員工管理列表頁面，可以對某個員工賬號進(jìn)行啟用或者禁用操作。賬號禁用的員工不能登錄系統(tǒng)，啟用后的員工可以正常登錄，只有管理員（admin用戶）可以對其他普通用戶進(jìn)行啟用、禁用操作，所以普通用戶登錄系統(tǒng)后啟用、禁用按鈕不顯示。

分析流程不難發(fā)現(xiàn)，修改員工狀態(tài)是管理員的權(quán)限，對狀態(tài)的操作實(shí)際就是對employee表中的status字段進(jìn)行update操作，在Controller層中我們需要編寫相關(guān)的方法來處理來自前端的這一請求，就像這樣：

    @PutMapping
    public R<String> update(HttpServletRequest request, @RequestBody Employee employee) {
        log.info(employee.toString());
        employee.setUpdateTime(LocalDateTime.now());
        Long empID=(Long) request.getSession().getAttribute("employee");
        employee.setUpdateUser(empID);
        employeeService.updateById(employee);
        return R.success("員工信息修改成功");
    }

Controller層中的update方法處理了請求，但是當(dāng)我再次刷新頁面發(fā)現(xiàn)其狀態(tài)并沒有改變！

通過Debug一步一步調(diào)試時，發(fā)現(xiàn)從Session里拿到的empID和數(shù)據(jù)庫里的字段id并不對應(yīng)分別是（1576934844579266561–1576934844579266600），而二者對應(yīng)起來才是能夠準(zhǔn)確執(zhí)行update方法的關(guān)鍵

于是，進(jìn)行排查，查看后端給頁面響應(yīng)的數(shù)據(jù)（response），發(fā)現(xiàn)與表中的id是對應(yīng)的，這說明后端沒問題

總的來說，后端傳給前端的id沒問題且與表中對應(yīng)，但是前端返回給后端的id卻與之不一致了，問題出在哪？肯定是前端啊

原來啊我們傳提的是一個Long型的數(shù)值（19位），JS接收數(shù)據(jù)并進(jìn)行處理后發(fā)生了精度丟失！JS只能精確處理前16位，后面的數(shù)字做了四舍五入處理

而把后端響應(yīng)的數(shù)值轉(zhuǎn)換成字符串即可避免這種現(xiàn)象，具體則是通過數(shù)值轉(zhuǎn)換器來實(shí)現(xiàn)！

三.數(shù)值轉(zhuǎn)換器的使用

提供對象轉(zhuǎn)換器JacksonobjectMapper，基于Jackson進(jìn)行Java對象到j(luò)son數(shù)據(jù)的轉(zhuǎn)換，在此消息轉(zhuǎn)換器中使用提供的對象轉(zhuǎn)換器進(jìn)行java對象到j(luò)son數(shù)據(jù)之間的相互轉(zhuǎn)換（序列化與反序列化）

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)//將Long轉(zhuǎn)換成String
                .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);
    }
}

而我們要做的就是要把他寫到配置類里，擴(kuò)展mvc框架的消息轉(zhuǎn)換器組件，用來將方法中返回的R對象結(jié)果轉(zhuǎn)換成字符串，以輸出流的方式返回給頁面

在配置類中確定好自己使用的轉(zhuǎn)換器類型并設(shè)置順序:

   /**
     * 擴(kuò)展mvc框架的消息轉(zhuǎn)換器組件
     */
    @Override
    protected void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
        //創(chuàng)建消息轉(zhuǎn)換器對象
        MappingJackson2HttpMessageConverter mj2mc = new MappingJackson2HttpMessageConverter();
        //設(shè)置對象轉(zhuǎn)換器，底層使用Jackson將Java對象轉(zhuǎn)為json
        mj2mc.setObjectMapper(new JacksonObjectMapper());
        //將上述的消息轉(zhuǎn)換器對象追加到mvc框架的轉(zhuǎn)換器集合中
        converters.add(0,mj2mc);//確定順序，將自己使用的轉(zhuǎn)換器放在最前面來優(yōu)先使用
    }

當(dāng)我們再次啟動項目調(diào)試頁面發(fā)現(xiàn)后端響應(yīng)的數(shù)據(jù)變成了以字符串的形式