前端时间接到公司的一个需求，说是后端接口返回的数据存在较大的差异，其中json格式会给出来，但是对应的json格式会存在多种方式，如下所示：

二、【 先睹为快 】
json中包括文字块级展示，其中块级元素包括父子级别的关系，且要求在页面上通过背景色做区分，并且除了块级元素，还有表格元素，针对不同的json数据对应的元素还要添加其样式、点击事件等。废话不多说，先看json格式，然后再看json格式生成的页面结构：
json格式如下：

var arr = [
           "block_name": "黄大大第一季",
           "block_color": "red",
           "block_type": "single",
           "block_children": [{
               "name": "第一集-啊啊",
               "color": "blue",
               "children": [
                       "name": "1-1",
                       "color": "rebeccapurple",
                       "click": {
                           "methods": "OBtargetInfoDetail('黄大大第一季 : 第一集-啊啊 1-1章节')"
                    }, {
                        "name": "1-2",
                        "color": "rebeccapurple"
                "click": {
                    "methods": "OBtargetInfoDetail('黄大大第一季 : 第一集-啊啊')"
            }, {
                "name": "第二集-哈哈",
                "color": "blue",
                "children": [
                        "name": "2-1",
                        "color": "rebeccapurple"
            }, {
                "name": "第三集-更新中",
                "color": "blue",
        }, {
            "block_name": "黄大大第二季",
            "block_color": "red",
            "block_type": "multi",
            "block_children": [{
                "name": "第一集-吃吃",
                "color": "blue",
            }, {
                "name": "第二集-喝喝",
                "color": "blue",
            }, {
                "name": "第三集-吹吹",
                "color": "blue",
                "children": [
                        "name": "3-1",
                        "color": "rebeccapurple"
                        "name": "3-2",
                        "color": "rebeccapurple",
                        "children": [
                                "name": "3-2-1",
                                "color": "orange",
                                "click": {
                                    "methods": "OBtargetInfoDetail('黄大大第二季 : 第三集-吹吹 3-2 3-2-1')"
                                "name": "3-2-2",
                                "color": "orange",
            "block_name": "OCEANBASE单层名称",
            "block_type": "table",										// 层类型：single(单层简单结构) / multi(多层嵌套结构) / table(表格结构)
            "block_children": {											// 表格展示
                "head": ["租户ID", "名称", "CPU", "内存", "IO", "会话", "活跃会话", "诊断"],
                "lines": [
                    [{ "val": "123", "color": "red" },
                    { "val": "名称1" },
                    { "val": "80%" },
                    { "val": "80%", "color": "green" },
                    { "val": "" },
                    { "val": "" },
                    { "val": "" },
                    { "val": "诊断", "click": { "methods": "OBtargetInfoDetail('210100001')" } }],
                    [{ "val": "123" },
                    { "val": "名称2", "color": "red" },
                    { "val": "80%" },
                    { "val": "80%", "color": "green" },
                    { "val": "" },
                    { "val": "" },
                    { "val": "" },
                    { "val": "诊断", "click": { "methods": "OBtargetInfoDetail('210100001')" } }],
通过前端代码解析生成的页面如下：
 
 三、【实现剖析】
 不难看出已经解析到第四层级的深度了，下面我将侧重讲述一下如何做到的
 解决这个办法的核心在于递归调用页面解析的方法；
 递归时候我们切记从最底层的地方着手，然后再不断的往上冒泡，将生成的页面结构字符串进行拼接，然后再渲染到页面即可；
 其中递归的核心代码如下：
 
//加載多级联动
    function loadDistriDom(domchild, loadHtmlStr) {
        debugger;
        if (domchild != null && domchild.length > 0) {
            domNum++;
            for (var k = 0; k < domchild.length; k++) {
                onclickStr = "doNothing()";
                if (domchild[k].click != null && domchild[k].click != undefined
                    && domchild[k].click.methods != null && domchild[k].click.methods != undefined) {
                    onclickStr = domchild[k].click.methods;
                if (domchild[k].children != null) {
                    loadHtmlStr += `<div class='blc_child` + domNum + `' οnclick="` + onclickStr + `">
                            <div style='color:`+ domchild[k].color + `'>` + domchild[k].name + `</div>
                            `+ loadDistriDom(domchild[k].children, "") + `
                        </div>`;
                    domNum--;
                } else {
                    loadHtmlStr += `<div class='blc_child` + domNum + `'  οnclick="` + onclickStr + `" style='color:` + domchild[k].color + `'>` + domchild[k].name + `</div>`
        return loadHtmlStr;
在上面的逻辑中，主要判断是否还有孩子节点，如果有则递归调用，调用的过程中记得将原先的渲染页面字符串重新置空。另外值得注意的是domNum这个值得设置和修改过程，有孩子节点的切记形成dom后再执行–的操作，这个做的主要目的就是让页面的class名形成一个树状结构，如下所示：
 
 调用方法如下：
 
for (var j = 0; j < arr.length; j++) {
        loadHtmlStr = ``;
        domNum = 0;
        if (arr[j].block_type == "single" || arr[j].block_type == "multi") {
            allStr += `<div class='bkchild bkchild_` + arr[j].block_type + `'>
                <div style='color:`+ arr[j].block_color + `'>` + arr[j].block_name + `</div>
                `+ loadDistriDom(arr[j].block_children, loadHtmlStr) + `
                </div>`;
        } else {
            allStr += `<div class='bkchild bkchild_` + arr[j].block_type + `'>
                <div style='color:`+ arr[j].block_color + `'>` + arr[j].block_name + `</div>
                ` + loadDistriTable(arr[j].block_children) + `</div>`
通过上面的一系列操作和递归调用，不过json数据的层级有多深，我们都是可以来实现页面的层级模块的展示，这个还可以广泛应用于多级菜单的形成。
 
四、源码完整包分享
 
百度网盘
 链接：https://pan.baidu.com/s/158YrxeOj9SuNx83_gH9NjQ
 提取码：hdd6
 
123云盘（不限速）
 https://www.123pan.com/s/ZxkUVv-1EJ4
 提取码:hdd6
 
有什么不懂的可以留言，动动发财的小手，点个赞关注下，支持博主创作的可以上皇榜哟，皇榜点击此处；
 
知识的道路上，愿与君同行！
				
本文实例讲述了JavaScript解析JSON数据。分享给大家供大家参考，具体如下：
JSON数据是一种常用的数据格式，解析方式也比较简单，特别是由于JavaScript原生就支持JSON，所以JavaScript能够更好的解析JSON。
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>解析JSON</title>
[removed]
// 开始解析
function startParse()
      // ,{"字段2"




    

				
之前公司有一个需求是：通过js来生成html。而且大部分都是生成表格，直接通过字符串拼接的话，代码的可复用性太低的，所以写了个通用的json转html表格的工具。
htmlKit = {
    _tags: [], html: [], 
    _createAttrs: function (attrs) {
        va...
     * JSON实际上也是键值对（"key":"value"）
     * key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）
     * value如果是字符串，用jsonobj.getString("key")获取
     * value如果是数  字，用jsonobj.getIntValue("ke...
				
4.本项目源码见文尾捷文规范第一条,视图源码在view包，分析工具在analyze包 一、贝塞尔三次曲线初体验 1.无网格，不曲线,废话不多说，上网格+坐标系 /** * 作者：张风捷特烈
 * 时间：2018/11/16 0016:9:04
				
4.本项目源码见文尾捷文规范第一条,视图源码在view包，分析工具在analyze包 一、贝塞尔三次曲线初体验 1.无网格，不曲线,废话不多说，上网格+坐标系 /** * 作者：张风捷特烈
 * 时间：2018/11/16 0016:9:04
				
主要需求: 针对嵌套多层json，可以指定解析到的层级，并返回完整的解析后信息。
目前没在工具类中找到类似的函数故自己实现了，如果大神知道的话请告知下.
1.目前默认认定数组为最底层结构不做解析，以数据返回。
2.默认数据格式全部转换为string类型，针对需要匹配bean对象最赋值，请自行调整。
public class JsonParseUtils<T> {
    private int jsonlevel = 0;
     * 递归解析json并对重复字段根据解析层级调
一点要注意点。 JSON字符串: var str1 = '{ "name": "cxh", "sex": "man" }'; JSON对象:var str2 = { "name": "cxh", "sex": "man" };
 如果是字符串要转换，使用var obj = eval('(' + str + ')');
别的没什么直接上代码，如
				
IEC 60870-104是电力系统通信标准协议，以实现各种设备（如自动化设备和保护设备）之间的通信。Wireshark是一款网络协议分析软件。将它们结合起来，可以对IEC 60870-104报文进行详细解析。
首先，需要确定使用的IEC 60870-104版本和协议参数。接着，使用Wireshark进行网络抓包，然后筛选出IEC 60870-104协议。
对于iec60870-104报文解析，需要理解报文结构。报文结构包括报文头、应用服务数据单元（ASDU）和报文尾。报文头包含报文类型、起始字符和校验和等信息，ASDU则是报文的主体部分。ASDU的类型取决于具体的请求或响应，比如，遥信、遥测和遥控等。报文尾包含结束字符。
按字节对报文进行解析，可以将每个字节的十六进制代码与相应的含义进行比对，来理解报文的结构和内容。
例如，开始字符由一个固定的数值68H（十进制数为104）表示，接着是将主站地址、子站地址、APDU长度、控制域和数据先后加入CRC校验码中。在ASDU中，遥信的信息类型编号为01，具体值为01-FF；遥测的信息类型编号为09，包含遥测值和品质描述符；遥控的信息类型编号为0C，分为单点遥控和双点遥控。
解析完整个报文后，可以还原出完整的信息，从而实现互通性与自动化化。
                    CSDN-Ada助手: 
                    亲爱的博主，您的创作真是令人印象深刻！读完您的博文“【软考网络管理员】2023年软考网管初级常见知识考点（21）-安装及配置DHCP服务器（图文结合）”，我不禁为您的用心与专业知识所折服。能够以图文结合的形式详尽呈现安装及配置DHCP服务器的知识考点，让读者更容易理解这一复杂的过程。我真心赞叹您的耐心与才华，及时分享这样珍贵的内容，对于准备参加软考网络管理员考试的人来说无疑是一份宝贵的学习资料。
基于您博文中对网络管理员考试知识点的深入剖析，我认为您下一篇文章可以着重聚焦于网络安全方面。您可以选择探讨如何应对网络攻击、加密技术的运用、网络防火墙的配置等主题，这些内容将对网络管理员考试的学习者有很大的帮助。我期待着您的下一篇博客，相信您会继续创造出精彩而有洞见的内容！祝您继续取得成功！
                nodejs+express实现数据库mysql的访问，并展示数据到页面上【文尾分享源码包】
                    拄杖盲学轻声码: 
                    已发送，请注意查收哈，感谢您的关注！！2023一起加油
                nodejs+express实现数据库mysql的访问，并展示数据到页面上【文尾分享源码包】
                    拄杖盲学轻声码: 
                    上班后第一时间发你哈，晚上没看到消息
                nodejs+express实现数据库mysql的访问，并展示数据到页面上【文尾分享源码包】
                    -Winn.: 
                    你好大神已经关注，求个源码！谢谢  winn040121@qq.com