Mr_HJ / form-generator项目文档学习与记录(续2)
更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio
演示地址:RuoYi-Nbcio后台管理系统
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码: https://gitee.com/nbacheng/nbcio-boot
前端代码:https://gitee.com/nbacheng/nbcio-vue.git
在线演示(包括H5) : http://122.227.135.243:9888
上面代码按钮显示相应的代码与界面
<el-button icon="el-icon-view" type="text" @click="Code">代码</el-button>
Code() {this.operationType = 'Code'let data = {fileName: undefined,type: 'file'}this.generate(data);},
generate(data) {const func = this[`exec${titleCase(this.operationType)}`]this.generateConf = datafunc && func(data)},
上面实现是调用了下面的方法,就是execCode方法
ƒ execCode(data) {
this.AssembleFormData();
this.drawerVisible = true;
}
其中AssembleFormData就把配置信息与要显示的字段放进去
AssembleFormData() {this.formData = {...this.formConf,fields: deepClone(this.drawingList)}},
通过开关显示这个下面的组件
<form-drawer:visible.sync="drawerVisible":form-data="formData"size="100%":generate-conf="generateConf"/>
这个页面主要用到了两个组件,样式优化组件beautifier和显示组件monaco-editor,在打开el-drawer的时候就进行初始化了
onOpen() {const { type } = this.generateConfthis.htmlCode = makeUpHtml(this.formData, type)this.jsCode = makeUpJs(this.formData, type)this.cssCode = makeUpCss(this.formData)this.key = +new Date()loadBeautifier(btf => {beautifier = btfthis.htmlCode = beautifier.html(this.htmlCode, beautifierConf.html)this.jsCode = beautifier.js(this.jsCode, beautifierConf.js)this.cssCode = beautifier.css(this.cssCode, beautifierConf.html)loadMonaco(val => {monaco = valthis.setEditorValue('editorHtml', 'html', this.htmlCode)this.setEditorValue('editorJs', 'js', this.jsCode)this.setEditorValue('editorCss', 'css', this.cssCode)if (!this.isInitcode) {this.isParser = truethis.isParser && (this.isInitcode = true) && this.runCode()}})})},
对于左边代码显示部分,主要是下面部分处理,为了避免一些问题,下面注释了一些没用的信息
setEditorValue(id, type, codeStr) {// if (editorObj[type]) {// editorObj[type].setValue(codeStr)// } else {editorObj[type] = monaco.editor.create(document.getElementById(id), {value: codeStr,theme: 'vs-dark',language: mode[type],automaticLayout: true})//}// ctrl + s 刷新editorObj[type].onKeyDown(e => {if (e.keyCode === 49 && (e.metaKey || e.ctrlKey)) {this.runCode()}})},
之前说过,原来模拟显示采用iframe 加载的是提前写好的 html,但这种方式对于新加的组件就不怎么友好了,所以修改成如下方式了
<div class="view-border"><parser v-show="isParser" :form-conf="formData" @submit="submitForm" :key="key" ref="previewForm" /></div>
效果图如下:

相关文章:
Mr_HJ / form-generator项目文档学习与记录(续2)
更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: https://gitee.com/nbacheng/n…...
React16源码: React中FiberRoot的源码实现
关于 FiberRoot 1 )概述 在 ReactDOM.render 过程当中,创建了一个 ReactRoot的对象这个 ReactRoot 对象最主要承担了创建 FiberRoot 对象这个对象它非常重要,在后期整个应用调度过程当中都会跟它有关关于 FiberRoot 对象 A. 它是整个应用的起…...
Linux第24步_安装windows下的VisualStudioCode软件
Visual Stuio Code是一个编辑器,简称 为 VSCode,它是微软出的一款免费编辑器。 VSCode有 Windows、 Linux和 macOS三个版本的,是一个跨平台的编辑器。VSCodeUserSetup-x64-1.50.1是Windows系统中的VSCode软件,而“code_1.50.1-160…...
Spring 注解 和SpringMVC注解
Spring和Spring MVC是两个紧密相关但又不同的框架,它们都使用一系列注解来简化开发。以下是Spring和Spring MVC中一些常用的注解: ### Spring 注解: 1. **Component:** - 用于将类标记为Spring容器中的组件,由Spr…...
iOS rootless无根越狱解决方案
据游戏工委数据统计,2023年国内游戏市场实际销售收入与用户规模双双创下新高,游戏普遍采用多端并发方式,成为收入增长的主因之一。 中国市场实际销售收入及增长率丨数据来源:游戏工委 多端互通既是机遇,也是挑战。从游…...
文件管理小技巧:如何高效整理多种格式的图片,图片分类的方法
随着数字时代的到来,每天都会处理到大量的图片,从个人照片到工作相关的图像资料。如何高效地整理多种格式的图片,常常让人感到困扰。下面看下云炫文件管理器如何对图片分类的方法。 jpg图片、png图片、tiff图片未归类前的缩略图。 jpg图片、…...
【c++】入门4
内联函数声明和定义不能分开 inline不建议声明和定义分离,分离会导致链接错误。因为inline被展开,就没有函数地址 了,链接就会找不到。 auto关键字 随着程序越来越复杂,程序中用到的类型也越来越复杂,经常体现在&…...
使用Web自动化测试工具显著好处
随着互联网技术的飞速发展,Web应用程序在企业中的重要性不断上升。为了确保Web应用程序的质量和稳定性,许多企业转向了Web自动化测试工具。下面是使用Web自动化测试工具的一些显著好处: 1. 提高测试覆盖率 Web自动化测试工具可以模拟用户与We…...
【性能】【算法】for循环,性能提高
目录 ■提高性能的方法 ・原理 1.1.java处理中,计算阶乘,为什么展开循环可以提高效率 1.2.从cpu的流水线角度,再说明一下 1.3.介绍一下 cup的指令流水线 ■实际运用 1.求和 代码 结果 2.求阶乘 (性能提高效果明显&…...
【入门】字符串对比(UPC)
题目描述 给定两个仅由大写字母或小写字母组成的字符串(长度介于1到100之间),它们之间的关系是以下4种情况之一: 1:两个字符串长度不等。比如 Beijing 和 Hebei 2:两个字符串不仅长度相等,而且相应位置上的字符完…...
thinkphp美容SPA管理系统源码带文字安装教程
thinkphp美容SPA管理系统源码带文字安装教程 运行环境 服务器宝塔面板 PHP 7.0 Mysql 5.5及以上版本 Linux Centos7以上 基于thinkphp3.23B-JUI1.2开发,权限运用了Auth类认证,权限可以细分到每个功能, 增删改查功能一应俱全,整合了…...
apache共享目录文件配置
httpd配置文件路径 /etc/httpd/conf/httpd.conf 配置单个节点 httpd中原本有一个配置 <Directory "/var/www">AllowOverride None# Allow open access:Require all granted </Directory># Further relax access to the default document root: <D…...
kotlin take 和 drop
kotlin take的作用 从头开始获取指定数量的元素 val numbers listOf("one", "two", "three", "four", "five", "six") // 取集合的4个集合 Log.d("take", numbers.take(3).toString()) // 打印结果[…...
SQL-DML增删改
🎉欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克🍹 ✨博客主页:小小恶斯法克的博客 🎈该系列文章专栏:重拾MySQL 🍹文章作者技术和水平很有限,如果文中出现错误&am…...
雷达信号处理——恒虚警检测(CFAR)
雷达信号处理的流程 雷达信号处理的一般流程:ADC数据——1D-FFT——2D-FFT——CFAR检测——测距、测速、测角。 雷达目标检测 首先要搞清楚什么是检测,检测就是判断有无。雷达在探测的时候,会出现很多峰值,这些峰值有可能是目标…...
k8s的yaml文件中的kind类型都有哪些?(详述版Part1/2)
目录 综述 分块详述 1、Pod 2、Deployment 3、Service 4、DaemonSet 5、ReplicaSet 6、ServiceAccount 7、PodDisruptionBudget 8、PersistentVolumeClaim 9、PersistentVolume 10、Job 11、CronJob 12、StatefulSet 综述 通过yaml文件中的kind可以大致了解kube…...
企业培训系统源码:构建智能、可扩展的学习平台
企业培训系统在现代企业中扮演着至关重要的角色。本文将通过深度解析企业培训系统的源码,介绍如何构建一个智能、可扩展的学习平台,涉及关键技术和代码实例。 1. 技术栈选择与项目初始化 在构建企业培训系统之前,选择适当的技术栈是至关重…...
设计模式—行为型模式之状态模式
设计模式—行为型模式之状态模式 状态(State)模式:对有状态的对象,把复杂的“判断逻辑”提取到不同的状态对象中,允许状态对象在其内部状态发生改变时改变其行为。 状态模式包含以下主要角色: 环境类&am…...
Linux习题3
解析: grep:查找文件内的内容 gzip:压缩文件,文件经压缩后会增加 gz:扩展名 find:在指定目录下查找文件 解析: A hosts文件是Linux系统上一个负责ip地址与域名快速解析的文件,以…...
SpringBoot+策略模式实现多种文件存储模式
一、策略模式 背景 针对某种业务可能存在多种实现方式;传统方式是通过传统if…else…或者switch代码判断; 弊端: 代码可读性差扩展性差难以维护 策略模式简介 策略模式是一种行为型模式,它将对象和行为分开,将行…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台(Launchpad)多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显,都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
EtherNet/IP转DeviceNet协议网关详解
一,设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络,本网关连接到EtherNet/IP总线中做为从站使用,连接到DeviceNet总线中做为从站使用。 在自动…...
IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
Spring AI与Spring Modulith核心技术解析
Spring AI核心架构解析 Spring AI(https://spring.io/projects/spring-ai)作为Spring生态中的AI集成框架,其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似,但特别为多语…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...
【Go语言基础【13】】函数、闭包、方法
文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数(函数作为参数、返回值) 三、匿名函数与闭包1. 匿名函数(Lambda函…...
【Go语言基础【12】】指针:声明、取地址、解引用
文章目录 零、概述:指针 vs. 引用(类比其他语言)一、指针基础概念二、指针声明与初始化三、指针操作符1. &:取地址(拿到内存地址)2. *:解引用(拿到值) 四、空指针&am…...
Java编程之桥接模式
定义 桥接模式(Bridge Pattern)属于结构型设计模式,它的核心意图是将抽象部分与实现部分分离,使它们可以独立地变化。这种模式通过组合关系来替代继承关系,从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
