SpringBoot在控制器中处理json数组集合，并映射到html页面遍历方法

迷南。 2024-04-18 10:55 15阅读 0赞

**上次处理这种数据使用的js，但在使用的时很多时候都需要在后台进行处理，在后台处理数据也比较安全，想了好久终于有解决方法了**

{ "code": 0, "data": [{ "create_time": "2019-09-05 17:33:22", "lib_id": 7, "lib_name": "asdf", 
      "lib_type": 2, "picture_no": 0, "update_time": "2019-09-05 17:33:22"}, { "create_time": 
      "2019-09-05 17:08:20", "lib_id": 6, "lib_name": "abc", "lib_type": 1, "picture_no": 0, 
      "update_time": "2019-09-05 17:08:20"}, { "create_time": "2019-09-05 17:08:20", "lib_id": 5, 
      "lib_name": "abc", "lib_type": 1, "picture_no": 0, "update_time": "2019-09-05 17:08:20"}, 
      { "create_time": "2019-08-21 10:24:23", "lib_id": 1, "lib_name": "test", "lib_type": 1, 
      "picture_no": 4, "update_time": "2019-08-21 10:24:23"}, { "create_time": "2019-08-22 
      10:22:27", "lib_id": 2, "lib_name": "111", "lib_type": 2, "picture_no": 1, "update_time": 
      "2019-08-22 10:22:27"}, { "create_time": "2019-09-05 17:02:12", "lib_id": 3, "lib_name": "132", "lib_type": 2, "picture_no": 0, "update_time": "2019-09-05 17:02:12"}, { "create_time": 
      "2019-09-05 17:08:20", "lib_id": 4, "lib_name": "abc", "lib_type": 1, "picture_no": 0, "update_time": "2019-09-05 17:08:20"}], "msg": ""}

我先说一下方法思路：我需要date里边的数据，**可以先去取出data中数据，使用循环把最里层的数据都以键值对的形式存放在map集合中，在循环将map集合存放在list集合中，只需要映射list集合到前台页面根据map集合中的key遍历集合就可以了**。

**控制器处理代码：**

@RequestMapping(value="/target")
        public String targetUpdate(Model model) throws IOException { 
            String postUrl = "http://Ip地址:端口号/api/json";
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("msg_id", "123");
    
            JSONObject jsonMap = JSONObject.fromObject(map);
            String jsn = FaceDemo.sendPost(postUrl, jsonMap, "utf-8");
            ObjectMapper mapper = new ObjectMapper();
            JsonNode node = mapper.readTree(jsn);
            //String resultJson = node.get("data").toString();
            String lib_type;
            int i;
            List list = new ArrayList();
            for(i=0;i<node.get("data").size();i++){ 
                Map map1 = new HashMap();
                if(1==Integer.parseInt(node.get("data").get(i).get("lib_type").toString())){ 
                    lib_type = "黑名单";
                }else{ 
                    lib_type = "白名单";            }
                map1.put("create_time",node.get("data").get(i).get("create_time"));
                map1.put("lib_id",node.get("data").get(i).get("lib_id"));
                map1.put("lib_name",node.get("data").get(i).get("lib_name"));
                map1.put("lib_type",lib_type);
                map1.put("picture_no",node.get("data").get(i).get("picture_no"));
                map1.put("update_time",node.get("data").get(i).get("update_time"));
                list.add(map1);
            }
            model.addAttribute("targetLibrary", list);
            //System.out.println("打印数据 ： "+PostDemo.sendPost(postUrl, jsonMap, "utf-8"));
            return "targetLibrary";
        }

**html页面遍历集合的代码：**  
这个代码只看处理了th:each遍历操作就好。很多都是模块自带的

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:form="http://www.w3.org/1999/html">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="renderer" content="webkit">
        <title></title>
        <link rel="stylesheet" href="css/pintuer.css">
        <link rel="stylesheet" href="css/admin.css">
        <script src="js/jquery.js"></script>
        <script src="js/pintuer.js"></script>
        
        <script src="./js/jquery-1.11.3.min.js"></script>
        <script src="js/layer/layer.js"></script>
        
    </head>
    <body>
    <div class="panel admin-panel">
        <div class="panel-head"><strong class="icon-reorder"> 内容列表</strong></div>
        <div class="padding border-bottom">
            <button type="button" class="button border-yellow" onclick="window.location.href='targetAdd'"><span class="icon-plus-square-o"></span> 添加目标库</button>
        </div>
        <form th:action="@{/targetUpdate}">
        <table class="table table-hover text-center">
            <tr>
                <th width="10%">字段2</th>
                <th width="10%">字段3</th>
                <th width="15%">字段4</th>
                <th width="10%">字段5</th>
                <th width="20%">字段6</th>
                <th width="20%">字段7</th>
                <th width="15%">操作</th>
            </tr>
    
            <tr th:each="targetLibrary:${targetLibrary}">
                <td><span th:text="${targetLibrary[lib_id]}"></span></td>
                <td><span th:text="${targetLibrary[lib_name]}"></span></td>
                <td><span th:text="${targetLibrary[lib_type]}"></span></td>
                <td><span th:text="${targetLibrary[picture_no]}"></span></td>
                <td><span th:text="${targetLibrary[create_time]}"></span></td>
                <td><span th:text="${targetLibrary[update_time]}"></span></td>
                <td><div class="button-group">
                    <a class="button border-main" th:href="@{targetUpdate?(id=${targetLibrary[lib_id]})}"><span class="icon-edit"></span> 修改</a>
                    <a class="button border-red" href="javascript:void(0)" onclick="return del(1,1)"><span class="icon-trash-o"></span> 删除</a>
                </div></td>
                <td><a th:href="@{/targetUpdate?id==(${targetLibrary[lib_id]})}">修改</a> </td>
            </tr>
        </table>
        </form>
    </div>
    </body>
    </html>

遍历结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70]  
SpringBoot映射html页面别忘了添加pom依赖包,

//启动的依赖包
      <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>
    //映射html需要的依赖包
    <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQxMTU2OQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/7a662e11fc3f42bb87b9cef24961ec86.png