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代码判断; 弊端: 代码可读性差扩展性差难以维护 策略模式简介 策略模式是一种行为型模式,它将对象和行为分开,将行…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
RNN避坑指南:从数学推导到LSTM/GRU工业级部署实战流程
本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在聚客AI学院。 本文全面剖析RNN核心原理,深入讲解梯度消失/爆炸问题,并通过LSTM/GRU结构实现解决方案,提供时间序列预测和文本生成…...
短视频矩阵系统文案创作功能开发实践,定制化开发
在短视频行业迅猛发展的当下,企业和个人创作者为了扩大影响力、提升传播效果,纷纷采用短视频矩阵运营策略,同时管理多个平台、多个账号的内容发布。然而,频繁的文案创作需求让运营者疲于应对,如何高效产出高质量文案成…...
2025.6.9总结(利与弊)
凡事都有两面性。在大厂上班也不例外。今天找开发定位问题,从一个接口人不断溯源到另一个 接口人。有时候,不知道是谁的责任填。将工作内容分的很细,每个人负责其中的一小块。我清楚的意识到,自己就是个可以随时替换的螺丝钉&…...
如何做好一份技术文档?从规划到实践的完整指南
如何做好一份技术文档?从规划到实践的完整指南 🌟 嗨,我是IRpickstars! 🌌 总有一行代码,能点亮万千星辰。 🔍 在技术的宇宙中,我愿做永不停歇的探索者。 ✨ 用代码丈量世界&…...
验证redis数据结构
一、功能验证 1.验证redis的数据结构(如字符串、列表、哈希、集合、有序集合等)是否按照预期工作。 2、常见的数据结构验证方法: ①字符串(string) 测试基本操作 set、get、incr、decr 验证字符串的长度和内容是否正…...
Java中HashMap底层原理深度解析:从数据结构到红黑树优化
一、HashMap概述与核心特性 HashMap作为Java集合框架中最常用的数据结构之一,是基于哈希表的Map接口非同步实现。它允许使用null键和null值(但只能有一个null键),并且不保证映射顺序的恒久不变。与Hashtable相比,Hash…...
Copilot for Xcode (iOS的 AI辅助编程)
Copilot for Xcode 简介Copilot下载与安装 体验环境要求下载最新的安装包安装登录系统权限设置 AI辅助编程生成注释代码补全简单需求代码生成辅助编程行间代码生成注释联想 代码生成 总结 简介 尝试使用了Copilot,它能根据上下文补全代码,快速生成常用…...
OpenGL-什么是软OpenGL/软渲染/软光栅?
软OpenGL(Software OpenGL)或者软渲染指完全通过CPU模拟实现的OpenGL渲染方式(包括几何处理、光栅化、着色等),不依赖GPU硬件加速。这种模式通常性能较低,但兼容性极强,常用于不支持硬件加速…...
mcts蒙特卡洛模拟树思想
您这个观察非常敏锐,而且在很大程度上是正确的!您已经洞察到了MCTS算法在不同阶段的两种不同行为模式。我们来把这个关系理得更清楚一些,您的理解其实离真相只有一步之遥。 您说的“select是在二次选择的时候起作用”,这个观察非…...
