monaco-editor编辑器实现数据提示功能

先上图看效果

 输入 "." 的时候编辑器会提示出下一段的数据

我们前台的项目技术：vue + element UI

本质：本质上就是在一个集合中过滤出符合条件的数据

注：以下内容有参照其他博主

这一套用来实现最终效果对传入的数据是有格式要求的!!!

//将json解析生成符合结构的数据
String json = "[{
	"id": 217,
	"class_id": "10",
	"uniq_id": "689f57ce-4acd-424d-a321-a2d617986c42",
	"child_url": "FETCH_API_BLFD3002API_ASYNC",
	"api_name": "1",
	"request_method": "get",
	"request": [{
		"tranName": false,
		"tranValue": false,
		"name": "",
		"value": ""
	}],
	"api_notes": "FETCH_API_BLFD3002API_ASYNC",
	"insert_time": "2022-05-05 19:43:41.0",
	"insert_user": "xusg",
	"update_time": "2022-05-05 19:43:41.0",
	"update_user": "xusg",
	"del_flg": "0"
}]";

解析类：

package com.linkstec.tad.rakuraku.common.utils;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.linkstec.tad.rakuraku.mapper.entity.DataCenterEntity;
import com.linkstec.tad.rakuraku.mapper.entity.FrtgCodesEntity;
import org.apache.commons.lang.StringUtils;
import org.springframework.stereotype.Component;
import org.springframework.util.CollectionUtils;

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

@Component
public class FormatSQLJSONUtil {

    public List getDataCenter(List codesList) {
        List dataCenter = new ArrayList<>();
        if(CollectionUtils.isEmpty(codesList)) return dataCenter;
        for (FrtgCodesEntity codesEntity : codesList) {
            String codeContent = codesEntity.getCodeContent();
            String codeNm = codesEntity.getCodeNm();
            if (StringUtils.isBlank(codeContent)) continue;
            JSONArray ja = JSON.parseArray(codeContent);
            String dataName = codeNm.substring(0, codeNm.lastIndexOf("."));
            parseJSONArray(ja,dataCenter,dataName);
        }
        return dataCenter;
    }

    private void parseJSONArray(JSONArray ja,List dataCenter,String item){
        for(int i = 0; i < ja.size(); i++){
            DataCenterEntity entity = new DataCenterEntity();
            String caption = item + "[" + i + "]";
            entity.setCaption(caption).setValue(caption).setMeta("sqlData").setScore(1);
            dataCenter.add(entity);
            JSONObject jo = (JSONObject) ja.get(i);
            parseJSONObject(jo,dataCenter,caption);
        }
    }

    private void parseJSONObject(JSONObject jo,List dataCenter,String item){
        for(String key : jo.keySet()){
            DataCenterEntity entity = new DataCenterEntity();
            String caption =  item + "." + key;
            entity.setCaption(caption).setValue(caption).setMeta("sqlData").setScore(1);
            dataCenter.add(entity);
            Object value = jo.get(key);
            boolean objFlag = value instanceof JSONObject;
            boolean arrFlag = value instanceof JSONArray;
            if(objFlag){
                JSONObject nextJo = (JSONObject) value;
                parseJSONObject(nextJo,dataCenter,caption);
            }else if(arrFlag){
                JSONArray nextJa = (JSONArray) value;
                parseJSONArray(nextJa,dataCenter,caption);
            }
        }
    }
}

最后得到的数据结构（供参考）：

createCgButton11SQLData[40].uniq_id
createCgButton11SQLData[40].update_user
createCgButton11SQLData[40].child_url
createCgButton11SQLData[40].class_id
createCgButton11SQLData[40].insert_time
createCgButton11SQLData[40].del_flg
createCgButton11SQLData[40].id
createCgButton11SQLData[40].request_method
createCgButton11SQLData[40].insert_user
createCgButton11SQLData[41]
createCgButton11SQLData[41].request
createCgButton11SQLData[41].update_time
createCgButton11SQLData[41].uniq_id
createCgButton11SQLData[41].update_user
createCgButton11SQLData[41].child_url
createCgButton11SQLData[41].class_id
createCgButton11SQLData[41].insert_time
createCgButton11SQLData[41].del_flg
createCgButton11SQLData[41].id
createCgButton11SQLData[41].request_method
createCgButton11SQLData[41].insert_user
createCgButton11SQLData[42]
createCgButton11SQLData[42].update_time
createCgButton11SQLData[42].uniq_id
createCgButton11SQLData[42].update_user
createCgButton11SQLData[42].child_url
createCgButton11SQLData[42].class_id
createCgButton11SQLData[42].insert_time
createCgButton11SQLData[42].del_flg
createCgButton11SQLData[42].id
createCgButton11SQLData[42].request_method
createCgButton11SQLData[42].insert_user
createCgButton11SQLData[43]

 以上数据存在list里传给前台即可