BootStrap-SpringBoot的使用过程中前端table表格无法加载出数据。

慕斯-ing

已于 2022-09-09 14:07:10 修改

阅读量2.6k

点赞数 1

分类专栏： SpringBoot（二）文章标签：前端 bootstrap spring boot 经验分享 bug

于 2022-08-31 14:58:36 首次发布

本文链接：https://blog.csdn.net/blbyu/article/details/126624043

版权

SpringBoot（二）专栏收录该内容

26 篇文章 7 订阅

订阅专栏

报错内容：
jquery.min.js:4 POST http://localhost:8080/user/findAllSimplePage 500
Referrer Policy: strict-origin-when-cross-origin
在这里插入图片描述

误区分析：
对这个BUG，我真的是无语了，快吐了，也怪目前能力有限，一开始太过专注于表面的信息，先看一个对比图：
（1）运行正常的调试分析界面
在这里插入图片描述
（2）运行失败的调试分析界面

误区：仔细观察两图可以发现，均有信息：Referrer Policy: strict-origin-when-cross-origin，这说明，对于这个BUG的解决不能一味地想着如何解决 Referrer Policy: strict-origin-when-cross-origin。一开始我就一直为了解决这个问题尝试了各种办法，但还是不可以，浪费了很多时间，当然在成功之前我们也不知道是不是真的不是这个原因导致的，所以还是需要尝试的，只是如果一直不行的话，可以换一条思路试一试。

解决办法：
①方法一：更换浏览器。
我遇到的这种情况是因为在谷歌浏览器中由于某种原因无法建立安全连接，导致访问受限制，于是我测试了使用QQ浏览器是否也会存在类似的问题，结果显示在QQ浏览器中运行正常。
在这里插入图片描述
②方法二：每进行一些操作变更后，记得清除缓存，防止影响我们的判断。

③方法三，利用模块化思想进行调试，一步一步来。
（1）先用postman调试以下接口，看看到底是前端的跨域问题，还是接口本身的逻辑、规范就存在不妥。通过下面结果反馈可得知，这个接口本身就有问题，那么就先不考虑前端的故事了。
在这里插入图片描述
（2）回归代码，这里我请求的接口是findAllSimplePage。

@RequestMapping("/query")  
@ResponseBody  
public Map<String,Object> query(@RequestBody(required = false) Map<String,Object> requestMap){
    return requestMap;
}

@RequestMapping("findAllSimplePage")
@ResponseBody
public String findAllSimplePage(Map<String,Object> requestMap){
    int page = 0;  
    int size = 5;
    System.out.println(requestMap);

    if (requestMap != null){
        if (requestMap.get("page").toString() != null){
            page = Integer.parseInt(requestMap.get("page").toString());  
            page = page-1; 
        }
        if (requestMap.get("size").toString() != null){
            size = Integer.parseInt(requestMap.get("size").toString());
        }
    }

    PageInfo<User> pageInfo = csi.findAllSimplePage(page,size);
    List<User> users = pageInfo.getList();   
    long total = pageInfo.getTotal();        
    JSONObject result = new JSONObject();    
    result.put("rows",users);
    result.put("total",(int)total);
    return result.toJSONString();  
}

（3）一部分代码一部分删去，看看哪里出了问题，经测试发现，问题代码如下：

if (requestMap != null){
    if (requestMap.get("page").toString() != null){
        page = Integer.parseInt(requestMap.get("page").toString());  
        page = page-1; 
    }
    if (requestMap.get("size").toString() != null){
        size = Integer.parseInt(requestMap.get("size").toString());
    }
}

删去上去的if判断代码后，再次运行，发现可以调通了，页面数据也加载出来了，说明就是这里出了问题。
在这里插入图片描述
（4）分析这部分代码哪里错了，对症下药。
首先，我们可以看到判断的条件涉及到了requestMap，但是这个从哪里来？–来源于步骤②中展示的代码query接口。
经测试发现，jquery接口运行正常。

然后，我们会发现，在findAllSimplePage接口中我们传入的是page和size???那么requestMap在哪？再一次测试，我们传入page和size后，findAllSimplePage接口中能否有requestMap。

System.out.println(111);
System.out.println(requestMap);
System.out.println(222);

结果显示为null，
在这里插入图片描述
（可能会觉得我这里已经写过if判断其不为空的时候才执行，为什么还要在意这个，哎，代码的玄学之处有时就在这体现了）
修改后的代码如下：

@RequestMapping("findAllSimplePage")
    @ResponseBody
    public String findAllSimplePage(@RequestParam(value = "page", defaultValue = "3") Integer page,
                                    @RequestParam(value = "size", defaultValue = "5") Integer size){
        Map<String, Object> requestMap  = new HashMap<String, Object>();
        requestMap .put("page", page);
        requestMap .put("size", size);

        if (requestMap != null){
            if (requestMap.get("page").toString() != null){
                page = Integer.parseInt(requestMap.get("page").toString());  
                page = page-1;
            }
            if (requestMap.get("size").toString() != null){
                size = Integer.parseInt(requestMap.get("size").toString());
            }
        }

        PageInfo<User> pageInfo = csi.findAllSimplePage(page,size);
        List<User> users = pageInfo.getList();   
        long total = pageInfo.getTotal();      
        JSONObject result = new JSONObject();    
        result.put("rows",users);                
        result.put("total",(int)total);       
        return result.toJSONString();  
    }