根据文本的json数据使用io缓冲流读取出以树形结构显示在页面中

最新推荐文章于 2024-09-08 10:40:56 发布

UK你好咯家里

最新推荐文章于 2024-09-08 10:40:56 发布

阅读量272

点赞数 1

分类专栏： springboot 文章标签： java

本文链接：https://blog.csdn.net/weixin_44805174/article/details/107880878

版权

springboot 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

次项目树形是使用ztree插件显示的需要准备ztree插件

链接：https://pan.baidu.com/s/1Joi36-mlKmUiuyATN61nSQ
提取码：awn4
---------------------------------------分割线---------------------------------------

项目结构

在这里插入图片描述

0.pom文件

 <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.28</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <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>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>

1.准备json格式文本

[
    {
        "id": 1,
        "pId": 0,
        "name": "文件001"
    },
    {
        "id": 11,
        "pId": 1,
        "name": "接口版本001"
    },
    {
        "id": 111,
        "pId": 11,
        "name": "系统名称-后管"
    },
    {
        "id": 112,
        "pId": 11,
        "name": "系统名称-微信"
    },
    {
        "id": 113,
        "pId": 111,
        "name": "接口名称-adminLogin"
    },
    {
        "id": 114,
        "pId": 111,
        "name": "接口名称-showCompany"
    },
    {
        "id": 115,
        "pId": 113,
        "name": "点击查看结果集与参数",
        "res": [
            {
                "seccess": "true",
                "code": "200",
                "msg": "登录成功"
            }
        ],
        "param": [
            {
                "uname": "zs",
                "upass": "123"
            }
        ]
    },
    {
        "id": 116,
        "pId": 114,
        "name": "点击查看结果集与参数",
        "res": [
            {
                "cid": "c202008040000",
                "cname": "一个公司"
            }
        ],
        "param": [
            {
                "cid": "c202008040000",
                "type": "String"
            }
        ]
    },
    {
        "id": 12,
        "pId": 1,
        "name": "接口版本002"
    },
    {
        "id": 121,
        "pId": 12,
        "name": "系统名称-后管"
    },
    {
        "id": 122,
        "pId": 12,
        "name": "系统名称-微信"
    },
    {
        "id": 123,
        "pId": 121,
        "name": "接口名称-adminLogin"
    },
    {
        "id": 124,
        "pId": 121,
        "name": "接口名称-showInfo"
    }
]

2.前端树形页面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-1.4.4.min.js"
            th:src="@{/js/jquery-1.4.4.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/metroStyle/metroStyle.css}"
          href="/css/metroStyle/metroStyle.css" />
    <script src="/js/jquery.ztree.core.js"
            th:src="@{/js/jquery.ztree.core.js}"></script>
    <script src="/js/jquery.ztree.excheck.js"
            th:src="@{/js/jquery.ztree.excheck.js}"></script>
</head>
<script type="text/javascript">
    var settingss = {
        callback:{
            onClick: zTreeOnClick
        },
        data: {
            simpleData: {
                enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
                idKey: "id",   //节点数据中保存唯一标识的属性名称
                pIdKey: "pId",    //节点数据中保存其父节点唯一标识的属性名称
                rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
            },
            key: {
                name: "name"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
            }
        },
        check:{
            enable:false,  //true 、 false 分别表示 显示 、不显示 复选框或单选框
            nocheckInherit:false   //当父节点设置 nocheck = true 时，设置子节点是否自动继承 nocheck = true
        },
        edit: {
            enable: true,
            editNameSelectAll: true
        }

    };
    $(document).ready(function(){
        $.ajax({
            type:"post",
            url:"onlineDoc",
            async:true,
            success:function(res){
                var json = eval('(' + res + ')');
                zTreeObj = $.fn.zTree.init($("#treeDemo"), settingss, json); //初始化树
                zTreeObj.expandAll(true);   //true 节点全部展开、false节点收缩
            }
        });
    });
    // 单击事件
    function zTreeOnClick(event, treeId, treeNode) {
        if (treeNode.id == "1") {
            return;
        }else if (treeNode.param != null && treeNode.res != null) {
            $("#param").empty();
            var jsonData2 = JSON.stringify(treeNode.param);// 转成JSON格式
            $("#param").append(jsonData2);
            $("#res").empty();
            var jsonData = JSON.stringify(treeNode.res);// 转成JSON格式
            $("#res").append(jsonData)
        }
    }
</script>
<body>
<!-- 创建ztree容器  -->
<div style="border: 1px solid red;width: 300px;">
    <ul id="treeDemo" class="ztree"></ul>
</div>
<div id="param" style="margin-left: 301px;margin-top: -285px;border: 1px solid blue;width: 300px;height: 141px;">
    参数
</div>
<div id="res" style="margin-left: 301px;border: 1px solid green;width: 300px;height: 140px;">
    结果集
</div>
</body>
</html>

3.准备后端方法

package com.mchen.onlinedoc.controller;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import java.io.*;

@RestController
public class OnlineDocController {

    @RequestMapping("/onlineDoc")
    public String onlineDoc() throws Exception {
        //读取json文本放到本地的地方
        File file =new File("C:/Users/lenovo/Desktop/在线文档2.txt");
        StringBuilder sb = new StringBuilder();
        try {
            //读取文本文件
            FileReader fr = new FileReader(file);
            //使用缓冲流解析
            BufferedReader br = new BufferedReader(fr);
            String line = null;
            //循环然后将每个字节拼接起来
            while ((line =  br.readLine())!=null) {
                sb.append(line);
            }
            //关闭缓冲流
            br.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }
        //返回文本信息
        return sb.toString();
    }
    //访问这个方法就可以运行了
    @RequestMapping("/toTest")
    public ModelAndView toTest(){
        ModelAndView mv = new ModelAndView();
        //前端页面html文件名
        mv.setViewName("test");
        return mv;
    }
}