Ruoyi表单构建通过拖动组件就能自动生成前端代码,很方便,所以本文简单通过上层函数源码来梳理一下大致流程,如有需要再自行仔细一行行分析底层代码。

组件拖动

实现组件拖动功能主要依赖第三方库:VueDragger。简单通过例子+注释介绍一下:

<draggable
class="components-draggable"
:list="inputComponents"
:group="{ name: 'componentsGroup', pull: 'clone', put: false }
:clone="cloneComponent"
draggable=".components-item"
:sort="false"
@end="onEnd"
>
<div
v-for="(element, index) in inputComponents" :key="index" class="components-item"
@click="addComponent(element)"
>
<div class="components-body">
<svg-icon :icon-class="element.tagIcon" />
{{ element.label }}
</div>
</div>
</draggable>

:list组件数据,:group group通过name来分组,pull和put设置拖出和拖入规则。

生成代码

点击导出vue文件或者是复制代码,可以将设计好的页面代码生成并且导出,这里我用复制代码功能作为例子来说明一下流程。

点击复制代码,显示弹窗

<code-type-dialog
:visible.sync="dialogVisible"
title="选择生成类型"
:show-file-name="showFileName"
@confirm="generate"
/>

这是一个自定义组件,子组件以el-dialog为主,当选择好弹窗类型并且点击确认时,子组件将 {fileName:null,type:'file'} 传出。然后调用generate。

      generate(data) {//data:{filename,type}
const func = this[`exec${titleCase(this.operationType)}`]//拼接方法名字,然后调用
this.generateConf = data
func && func(data)
},

this[ exec${titleCase(this.operationType)} ] 拼接出 execCopy,然后调用

execCopy(data) {
document.getElementById('copyNode').click()
},

点击该元素。在html部分我们可以看到,该id对应的是一个隐藏的input元素,本身无任何功能。

关键部分

看似点击一个隐藏元素没有任何意义,实际上它只是触发关键的“钥匙”。在mounted()中,ruoyi使用的第三方库ClipboardJS构建了一个对象。clipboardJS是复制粘贴包,所以该部分就是实现的真正原理。

  mounted() {
const clipboard = new ClipboardJS('#copyNode', {//当点击 id=copyNode的元素时,会触发复制
text: trigger => {
const codeStr = this.generateCode()//产生页面代码的关键方法
this.$notify({
title: '成功',
message: '代码已复制到剪切板,可粘贴。',
type: 'success'
})
return codeStr
}
})
clipboard.on('error', e => { //此处就是一个失败回调。
this.$message.error('代码复制失败')
})
},
...
}

该对象绑定了 "copyNode" 元素,点击该元素就会触发复制。text的值就是填充到粘贴版上的文本。

    generateCode() {
const { type } = this.generateConf //就是{filename,type}
this.AssembleFormData()//将drawingList和formConf组装成formData,方便之后使用。
const script = vueScript(makeUpJs(this.formData, type))
const html = vueTemplate(makeUpHtml(this.formData, type))
const css = cssStyle(makeUpCss(this.formData))//构建出vue三段式字符串
return beautifier.html(html + script + css, beautifierConf.html)
},

这就是大致流程,如果需要了解生成代码更多的细节,可以自行深入调试。

Ruoyi表单构建的更多相关文章

  1. [原创]react-vio-form 快速构建React表单应用

    react-vio-form 是一个react的快速轻量表单库,能快速实现表单构建.提供自定义表单格式.表单校验.表单信息反馈.表单信息隔离等功能.可采用组件声明或者API的形式来实现表单的功能 de ...

  2. jquery ajax异步提交表单数据

    使用jquery的ajax方法可以异步提交表单,成功后后台返回json数据,回调函数处理,可以不用刷新页面,达到异步的目的: 处理表单的数据可以用serialize()方法进行序列化,而如果提交的数据 ...

  3. [WPF自定义控件库]简单的表单布局控件

    1. WPF布局一个表单 <Grid Width="400" HorizontalAlignment="Center" VerticalAlignment ...

  4. Django--2、form表单

    django中定义form表单的优势 HTML中提交后,若数据出现错误,返回的页面中仍然可以保留之前输入的数据. 通过校验规则可以方便的限制字段条件并校验. 在Django中建个form表单 先要确定 ...

  5. C# Winform 通过FlowLayoutPanel及自定义的编辑控件,实现快速构建C/S版的编辑表单页面

    个人理解,开发应用程序的目的,不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景也最为复杂,包括但不限于:表格记录查询.报表查询.导出文件查询等等 ...

  6. Winform 通过FlowLayoutPanel及自定义的编辑控件,实现快速构建C/S版的编辑表单页面 z

    http://www.cnblogs.com/zuowj/p/4504130.html 不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景 也最为 ...

  7. 使用Visual Studio 2013 从头构建Web表单

    在这篇文章中,我将采取VS 2013中特定的模板,也就是没有身份验证的Web表单模板,并说明如何构建这个项目从头开始.在本教程的最后,你会最终有一个模板,内容几乎是一样的使用Web表单模板没有认证(文 ...

  8. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(44)-工作流设计-设计表单 系列目录 设计表单是比较复杂的一步,完成一个表单的设计其实很漫长,主要分为四 ...

  9. 如何利用启明星Portal门户系统的Page模块构建工作流表单

    启明星门户网站的Pages模块支持构建自定义表单系统.这使得对于使用表单收集用户数据的需求来说非常有用. 本文介绍如何构建一个简单的“出差系统”. 1.在页面里增加Pages模块,建立人事部部门,然后 ...

随机推荐

  1. 手把手教你怎么将linux的一个函数性能搞奔溃

    static struct fib_table *fib_empty_table(struct net *net){    u32 id;    for (id = 1; id <= RT_TA ...

  2. 年轻的樵夫哟,你掉的是这个免费 8 核 4G 公网Docker 服务器

    Play With Docker 直接打开 https://labs.ply-with-docker.com/ 即可访问 Play With Docker 平台. 注册一个 DockerHub 账号便 ...

  3. 从代码到发包,一个程序全搞定!Gitea 推出软件包自托管功能 Package Registry

    2022 年 7 月的最后一天,随着 Gitea 1.17.0 版本的正式发布,Gitea 开源社区推出了一项名为 Package Registry 的包管理功能,与 Gitea 代码仓库无缝集成,类 ...

  4. Gitea 1.17.1 正式发布 | 08 累积更新

    Gitea 1.17.1 已正式发布.在这个小的版本更新中我们合并了 35 个 PR,没有包含功能性的更改,但我们强烈建议用户升级到此版本以获得重要的修复补丁. 致谢:感谢报告问题的安全研究人员,同时 ...

  5. Java SE 2、抽象类

    抽象类 用abstract关键字来修饰一个类时,这个类就是抽象类 ​ 访问修饰符 abstract 类名 { ​ } 用abstract关键字来修饰一个方法时,这个方法就是抽象方法 ​ 访问修饰符 a ...

  6. synchronized锁详解

    synchronized的意义 解决了Java共享内存模型带来的线程安全问题: 如:两个线程对初始值为 0 的静态变量一个做自增,一个做自减,各做 5000 次,结果是 0 吗?(针对这个问题进行分析 ...

  7. 依赖项安全检测新利器:Scorecard API

    Scorecard 是 OpenSSF 旗下的开源项目,用于评估开源软件风险,本文由该项目的主要贡献者 Naveen 撰写. 现代软件是建立在数百个甚至数千个第三方开源组件之上的,这些通常被称为依赖项 ...

  8. Kubernetes 多租户:Pod 安全策略

    默认情况下,Kubernetes 允许创建一个有特权容器的 Pod,这些容器很可能会危机系统安全,而 Pod 安全策略(PSP)则通过确保请求者有权限按配置来创建 Pod,从而来保护集群免受特权 Po ...

  9. Security:如何安装 Elastic SIEM 和 EDR

    转载自:https://elasticstack.blog.csdn.net/article/details/114023944 需要学习的地方:生成SSL证书 图片结合最下方的代码文字使用 last ...

  10. Alertmanager高可用

    为了提升Promthues的服务可用性,通常用户会部署两个或者两个以上的Promthus Server,它们具有完全相同的配置包括Job配置,以及告警配置等.当某一个Prometheus Server ...