对接股票交易所数据接口-Java后端+Elementui前端=树形JSON数据+级联选择器

对接股票交易所数据接口,对接股票交易所数据接口,前端测试

1响应数据

{
  "code": 1,
  "msg": null,
  "data": [
    {
      "id": 2,
      "typeId": "1-5",
      "typeName": "功能装",
      "typePid": "1",
      "typeLevel": 1,
      "children": [
        {
          "id": 3,
          "typeId": "1-5-1",
          "typeName": "家居服",
          "typePid": "1-5",
          "typeLevel": 2,
          "children": [
            {
              "id": 4,
              "typeId": "1-5-1-1",
              "typeName": "睡衣套装",
              "typePid": "1-5-1",
              "typeLevel": 3,
              "children": []
            },
            {
              "id": 5,
              "typeId": "1-5-1-2",
              "typeName": "睡裙",
              "typePid": "1-5-1",
              "typeLevel": 3,
              "children": []
            }
          ]
        }
      ]
    }
  ],
  "map": {}
}

解决方法：使用递归，当children数组为空时，设为undefined

			getTree(data) {
				for (let i = 0; i < data.length; i++) {
					// 判断当前节点的 children 属性是否包含子节点
					if (data[i].children.length > 0) {
						this.getTree(data[i].children);
					} else {
						data[i].children = undefined;
					}
				}
				return data;
			},

1级联选择器需要的数据格式

3服务实现类

@Service
public class ClothesTypeServiceImpl extends ServiceImpl<ClothesTypeMapper, ClothesType> implements ClothesTypeService {
    /**
     * 查询一颗树
     * @return dto列表
     */
    @Override
    public List<ClothesTypeDto> getTree() {
        List<ClothesType> list = this.list();
        List<ClothesTypeDto> treeList = ClothesTypeTreeUtils.convertToTree(list, "1");
        return treeList;
    }
}

级联选择器的使用

2编写树工具类

package com.example.clothes.utils;

import com.example.clothes.domain.dto.ClothesTypeDto;
import com.example.clothes.domain.entity.ClothesType;
import org.springframework.beans.BeanUtils;

import java.util.ArrayList;
import java.util.List;

public class ClothesTypeTreeUtils {
    /**
     * 将查询结果转换成树形结构。
     *
     * @param dataList 查询结果列表
     * @param rootId   根节点ID
     * @return List<ClothesTypeDto> 树形结构数据列表
     */
    public static List<ClothesTypeDto> convertToTree(List<ClothesType> dataList, String rootId) {
        // 定义树形结构数据列表
        List<ClothesTypeDto> treeList = new ArrayList<>();

        // 遍历查询结果列表，将每个节点添加到对应的父节点下面
        for (ClothesType data : dataList) {
            // 找到当前节点的父节点ID
            String parentId = data.getTypePid();

            // 如果当前节点是根节点或者其父节点ID等于根节点ID，则将其添加到树形结构数据列表中
            if (rootId.equals(parentId)) {
                ClothesTypeDto node = new ClothesTypeDto();
                BeanUtils.copyProperties(data, node);
                node.setChildren(new ArrayList<>());
                treeList.add(node);
            } else {
                // 在已有的树形结构数据列表中查找父节点
                ClothesTypeDto parentNode = findNode(treeList, parentId);
                if (parentNode != null) {
                    // 创建子节点，并将其添加到父节点的子节点列表中
                    ClothesTypeDto node = new ClothesTypeDto();
                    BeanUtils.copyProperties(data, node);
                    node.setChildren(new ArrayList<>());
                    parentNode.getChildren().add(node);
                }
            }
        }

        return treeList;
    }

    /**
     * 在树形数据列表中查找指定节点。
     *
     * @param treeList 树形结构数据列表
     * @param nodeId   要查找的节点ID
     * @return ClothesTypeDto 查找到的节点对象，如果未找到则返回null
     */
    private static ClothesTypeDto findNode(List<ClothesTypeDto> treeList, String nodeId) {
        for (ClothesTypeDto node : treeList) {
            if (node.getTypeId().equals(nodeId)) {
                return node;
            } else {
                ClothesTypeDto foundNode = findNode(node.getChildren(), nodeId);
                if (foundNode != null) {
                    return foundNode;
                }
            }
        }
        return null;
    }
}

**结构示例：**一个一级分类，该分类下面有一个二级分类，二级分类下面又包含了两个三级分类

[
  {
    "typeId": "C1",
    "typeName": "一级分类1",
    "typeLevel": 1,
    "children": [
      {
        "typeId": "C11",
        "typeName": "二级分类1-1",
        "typeLevel": 2,
        "typePid": 1,
        "children": [
          {
            "typeId": "C111",
            "typeName": "三级分类1-1-1",
            "typeLevel": 3,
            "typePid": 2
          },
          {
            "typeId": "C112",
            "typeName": "三级分类1-1-2",
            "typeLevel": 3,
            "typePid": 2
          }
        ]
      }
    ]
  }
]

2模版代码

  <el-cascader
    v-model="queryParams.clothesType"
    :options="typeList"
    :props="casProps"
    collapse-tags
    @change="selectKeysChanged"           
    clearable>
  </el-cascader>

v-model	双向绑定值，即选中的值，用于传入后台，数组类型	Array
options	级联选择器的数据源	Array
props	配置级联选择器的属性，多选、选项属性等	Object
collapse-tags	折叠显示标签	Boolean
change	选中节点触发的事件	Function
clearable	是否支持清空选项	Boolean

定义Dto类，用于数据传输

注：ClothesType和ClothesTypeDto的区别只是多了children属性，后续会使用BeanUtils工具类进行对象属性拷贝

Java后端+Elementui对接股票交易所数据接口,对接股票交易所数据接口,前端=树形JSON数据+级联选择器

数据库表设计

1定义Dto

value：当前选项的值，通常是一个字符串或者数字，用于前后端交互label：当前选项的文本标签，通常是一个字符串，用于页面展示children：当前选项的子选项，是一个可选的子数组，代表当前选项的下一级分类。如果当前选项没有子选项，则该属性可以省略

Java后端+Elementui前端=树形JSON数据+级联选择器

2递归解决暂无数据的问题

级联选择器需要的数据格式是一个嵌套的层级结构，每一层代表一个分类，它的子节点是下一层级的分类，最后一层是最终的选项，通常使用一个数组来表示整个层级结构。该数组中的每个元素都是一个对象，包含以下属性：

添加Listchildren属性,用于存储子节点

@Data
public class ClothesTypeDto {
    private Integer id;

    private String typeId;

    private String typeName;

    private String typePid;

    private Integer typeLevel;

    private List<ClothesTypeDto> children;
}

3JS代码

data() {
  return {
  	selectKeys:[],
      typeList:[],
      casProps: {
      	multiple: true,
          value: "typeId",
          label: "typeName",
          children: "children"
      }
  }
},

multiple	设置多选	Boolean
value	选项实际值	String / Number
label	选项文本值	String
children	选择子节点	Array

	methods: {
		async getTypeList() {
			let res = await cloTypeApi.getTree();
			cosole.log(res);
			this.typeList = res
		},
		// 当用户在级联菜单中选择内容改变时触发    
		selectKeysChanged() {
			// 回调参数：当前选中节点
			console.log(selectkeys);
		}
	}

后端实现

文章为作者独立观点，不代表股票交易接口观点

对接股票交易所数据接口-量化交易之HFT篇 long beach SigLastTradedQuantity.h