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

上次处理这种数据使用的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>
    <!--<meta http-equiv="refresh" content="17">-->
    <script src="./js/jquery-1.11.3.min.js"></script>
    <script src="js/layer/layer.js"></script>
    <!--    <link rel="import" href="tanchuang"  id="page"/>
        <script type="text/javascript">
        document.write(page.import.body.innerHTML);
        </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>

遍历结果:
在这里插入图片描述
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>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值