前端使用JSON编辑器、java编辑器、浏览器中使用eslint

m0_45127388

已于 2023-12-28 17:42:02 修改

阅读量1.2k

点赞数

文章标签：前端

于 2023-04-14 17:58:11 首次发布

本文链接：https://blog.csdn.net/m0_45127388/article/details/130159305

版权

本文介绍了在Vue3和React项目中使用Json编辑器和代码编辑器的方法，如Vue3JsonEditor的安装与使用，以及MonacoEditor的集成，提供了编辑、语法高亮和校验等功能。同时，提到了基于eslint和codemirror实现的在线代码编辑器，并讲解了WebSocket的连接与封装。

摘要由CSDN通过智能技术生成

一、vue3中使用Json 编辑器

// 安装
npm install vue3-json-editor --save        npm install vue3-json-editor@latest --save 
// 项目中使用（两种导入方式本质上一致，区别在于模块的默认导出方式不同）
import { Vue3JsonEditor } from 'vue3-json-editor/dist/vue3-json-editor.cjs.js' // 使用了ES6的解构赋值语法，从CommonJS规范导出的模块中，显式地导入了名称为Vue3JsonEditor的变量。这样的话，您需要在代码中显式地使用该变量来创建组件
import Vue3JsonEditor from 'vue3-json-editor' // 直接导入了默认导出的组件，可以直接使用Vue3JsonEditor变量来创建组件(已经配置了Webpack或Vite等构建工具使其能够识别.vue文件，并通过单文件组件的方式进行开发)

import { Vue3JsonEditor } from 'vue3-json-editor/dist/vue3-json-editor.cjs.js';
<Vue3JsonEditor 
	v-model="debugInput"  // 双向绑定数据
	@json-change="jsonChange"   // 改变调用事件
	@json-save="onJsonSave"  // 保存调用事件
	@has-error="onError" 
	key="1" 
	:mode="'text'"   // 默认模式tree(tree,code,form,text,view)  text文本结构，比较好添加和编辑内容.树结构看数据比较直观，还可以添加你想要的类型的数据
	ref="editor" 
	:showBtns="false"  // 是否展示保存按钮
	:expandedOnStart="true"  // 是否展开JSON编辑器模式
	v-if="form.method==2" c
	lass="command-issuing-script-json" 
	@@blur="validate" 如果需要校验json是否正确，可以监测@blur事件，使用editor.validate()来校验json数据
/>

 const jsonChange = (val) => {
      state.debugInput = val
      state.hasJsonFlag = true
 }
  const onError = (err) => {
      state.hasJsonFlag = false
  }
	// 在组件中增加 exportJson 方法
    const exportJson = () => {
      const data = editor.value.getJSON()  // 在组件实例上获取
      const jsonDataStr = JSON.stringify(data, null, 2) // 拿到json字符串
      // 注意也可以直接拿动态绑定的字段
      const blob = new Blob([jsonDataStr], { type: 'application/json' })
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = 'data.json'
      link.click()
      URL.revokeObjectURL(url)
    }

// 主要功能点
（1）支持双向绑定：您可以使用 v-model 指令将 Vue3JsonEditor 组件与父组件中的数据进行双向绑定。并自动格式化

二、react中使用（也可用在vue项目中）可用于java、js、json等
Monaco Editor 是一个浏览器端的代码编辑器，它是 VS Code 编辑器的核心部分，可以提供强大的代码编辑能力，它是 VSCode 的浏览器版本Monaco Editor 的特点包括：
（1）支持多种编程语言
（2）支持语法高亮、智能提示、自动补全等编辑器功能
（3）可以集成到 Web 应用程序中，支持在线代码编辑
https://zhuanlan.zhihu.com/p/88828576

// 安装
npm install monaco-editor --save 
// 使用
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
// 创建一个编辑器容器 div，并设置其大小和位置
const editorContainer = document.createElement('div');
editorContainer.style.width = '800px';
editorContainer.style.height = '600px';
document.body.appendChild(editorContainer);
// 初始化编辑器
const editor = monaco.editor.create(editorContainer, {
  value: 'console.log("Hello, world")',
  language: 'javascript'  // 是什么语言 'json'
  readOnly: readOnly || false, // 只读
});

// 导出（借助ioJSON包，IOJSON是一种扩展了JSON格式的数据交换协议，支持更多的数据类型并且允许通过URL引用数据以方便传输大量数据。iojson库提供了一系列API来解析和序列化IOJSON格式的数据，使得Javascript开发者可以方便地使用这种数据交换格式）
npm install iojson
import iojson from 'iojson';
const ioJsonData = '{"name": "Alice", "age": 25}';
const jsObject = iojson.parse(ioJsonData);
console.log(jsObject);
// Output: { name: 'Alice', age: 25 }
iojson.exportJSON(physicModel, `${physicModel.name}`)  // 导出.json文件

三、浏览器中使用eslint: vue3+codemirror6实现简易在线代码编辑器
在这里插入图片描述
https://www.jb51.net/article/272037.htm

// 项目中使用
npm install eslint-linter-browserify --save-dev(会在package及package-lock引入)
npm i vue-codemirror
npm i codemirror   // 在线编辑器
npm i @codemirror/lang-javascript
npm i @codemirror/lint
npm i @codemirror/autocomplete // 自动补全功能
npm i @codemirror/theme-one-dark  // 主题
// 实现弹框中js脚本
import { javascript, esLint } from '@codemirror/lang-javascript'
import { linter, lintGutter } from '@codemirror/lint';
import * as eslint from 'eslint-linter-browserify'
import { basicSetup, EditorView } from 'codemirror'
import { EditorState } from "@codemirror/state";

 <div class="codemirror-script" ref="scriptRef"></div>
 const state = reactive({
            code:
                `function filter(inputData) {
  					var outputData=inputData
 				 	return outputData
				  }`,
            config: {
                parserOptions: {
                    ecmaVersion: 6,
                    sourceType: "module",
                },
                env: {
                    browser: true,
                    node: true,
                },
                rules: ESLINT_RULES,  // 校验规则
            },
            editView: {}
	});
const scriptRef = ref(null)
const openDialog = (row: any) => {
                state.code = `function filter(inputData) {
  					var outputData=inputData
  					return outputData
				}`;
            setTimeout(() => {
                state.editView = new EditorView({
                    state: EditorState.create({
                        doc: state.code,
                        extensions: [
                            basicSetup,
                            javascript(),
                            lintGutter(),
                            linter(esLint(new eslint.Linter(), state.config))
                        ],
                    }),
                    parent: scriptRef.value as any,
                })
            }, 0)
        }

        const onConfirm = () => {
            refForm.value.validate(async (valid: boolean) => {
                if (valid) {
                    let param = { ...form.value }
                    param.script = state.editView.state.doc.text.join("\n") || ''   // 获取当前编辑器的内容字符串
                    // 验证js脚本  是否包含function filter
                    if (!param.script.includes('function filter')) {
                        ElMessage.warning('js脚本必须包含filter过滤函数')
                        return
                    }
                }
            })
        }

三、websocket连接
1、配url连接路径：在这里插入图片描述
2、代码

		state.ws = new ReconnectingWebSocket({ url: state.row.sourceUrl }, (type: string, message: any) => {
						let newMessage = message;
						try {
							newMessage = JSON.parse(message);
						} catch (error) {
							console.log(error);
						}
						state.responseJSON = newMessage;
					});

// 以下是websocket类封装
interface Props {
	url: string;
	reconnectInterval: number; // 重连间隔时间
	heartBeatInterval: number; // 心跳间隔时间
	isOpenHeartbeatMonitore: boolean; // 是否开启心跳监测
	heartMeesage: string; // 心跳发送信息
	maxReconnectAttempts: number; // 最大重连次数
}

export default class ReconnectingWebSocket {
	url: string;
	reconnectInterval: number;
	heartBeatInterval: number;
	ws: any;
	heartMeesage: string;
	isOpenHeartbeatMonitore: boolean;
	data: any;
	maxReconnectAttempts: number;
	private reconnectAttempts: number;
	private isClosed: boolean;
	private heartBeatTimer: any;
	callback: Function;
	constructor(
		{ url, reconnectInterval, heartBeatInterval, heartMeesage, isOpenHeartbeatMonitore = true, maxReconnectAttempts = 3 }: Props,
		callback: Function
	) {
		this.url = url;
		this.reconnectInterval = reconnectInterval || 1000; // 重连间隔时间
		this.heartBeatInterval = heartBeatInterval || 30000; // 心跳间隔时间
		this.ws = null;
		this.isClosed = false;
		this.heartBeatTimer = null;
		this.heartMeesage = heartMeesage;
		this.isOpenHeartbeatMonitore = isOpenHeartbeatMonitore;
		this.maxReconnectAttempts = maxReconnectAttempts;
		this.reconnectAttempts = 0;
		this.connect();
		this.callback = callback;
	}

	connect() {
		if (this.ws) {
			this.ws.close();
			this.ws = null;
		}
		this.ws = new WebSocket(this.url);
		this.ws.onopen = () => {
			this.isOpenHeartbeatMonitore && this.startHeartBeat();
			this.callback('open', 'WebSocket连接成功');
		};
		this.ws.onmessage = (event: { data: string }) => {
			this.callback('message', event.data);
			this.data = event.data;
		};
		this.ws.onclose = () => {
			// 正常和异常关闭
			this.data = null;
			this.stopHeartBeat();
			if (!this.isClosed) {
				// 异常关闭 重连
				if (this.reconnectAttempts < this.maxReconnectAttempts) {
					setTimeout(() => {
						this.reconnectAttempts++;
						this.callback('close', `WebSocket第${this.reconnectAttempts}次重连`);
						this.connect();
					}, this.reconnectInterval);
				} else {
					this.callback('close', `已达到最大重连次数，停止重连`);
				}
			} else {
				this.callback('close', 'WebSocket连接关闭');
			}
		};
	}

	send(data: string) {
		if (this.ws.readyState === WebSocket.OPEN) {
			this.ws.send(data);
		}
	}

	startHeartBeat() {
		this.heartBeatTimer = setInterval(() => {
			this.send(this.heartMeesage); // 发送心跳消息
		}, this.heartBeatInterval);
	}

	stopHeartBeat() {
		this.isOpenHeartbeatMonitore && clearInterval(this.heartBeatTimer);
	}

	close() {
		this.isClosed = true;
		this.ws.close();
	}
}