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. 面试突击75:SpringBoot 有几种读取配置文件的方法?

    Spring Boot 中读取配置文件有以下 5 种方法: 使用 @Value 读取配置文件. 使用 @ConfigurationProperties 读取配置文件. 使用 Environment 读 ...

  2. 记录第一次给开源项目提 PR

    本文是深入浅出 ahooks 源码系列文章的第八篇,该系列已整理成文档-地址.觉得还不错,给个 star 支持一下哈,Thanks. 本篇文章算是该系列的一个彩蛋篇,记录一下第一次给开源项目提 PR ...

  3. Python代码用在这些地方,其实1行就够了!

    摘要:都说 Python 简单快捷,那本篇博客就为大家带来一些实用的 Python 技巧,而且仅需要 1 行代码,就可以解决一些小问题. 本文分享自华为云社区<你猜 1 行Python代码能干什 ...

  4. Haproxy部署及控制台使用手册

    一.介绍 1.简介 HAProxy是一个使用C语言编写开源软件,提供高可用,负载均衡,以及基于TCP(四层)和HTTP(七层)的应用程序代理: HAProxy特别适用于那些负载特大的web站点,这些站 ...

  5. KingbaseES R6 集群修改ssh端口执行sys_backup.sh备份案例

    数据库环境:** test=# select version(); version ---------------------------------------------------------- ...

  6. 银河麒麟v4_sp4安装英伟达驱动

    bios设置视频输出为auto模式 视频线插独立显卡上 先dpkg 安装两个deb包 1.禁用开源驱动:sudo vim /etc/modprobe.d/blacklist.conf,在里面添加 bl ...

  7. Java Socket底层实现浅析

    最近在学Java的socket编程,发现Java可以很简单的通过socketAPI实现网络通信,但是我一直有个疑问,Java的socket的底层是怎么实现的? 如果没记错的话Java的底层是C和C++ ...

  8. Servlet小结

    1.sevlet的生命周期 用户在发送第一次请求的时候Servlet对象被实例化(AServlet的构造方法被执行了.并且执行的是无参数构造方法.) AServlet对象被创建出来之后,Tomcat服 ...

  9. Traefik2.3.x 使用大全(更新版)

    文章转载自:https://mp.weixin.qq.com/s?__biz=MzU4MjQ0MTU4Ng==&mid=2247488793&idx=1&sn=bb2b0ad1 ...

  10. 第一个Django应用 - 第四部分:表单和类视图

    一.表单form 为了接收用户的投票选择,我们需要在前端页面显示一个投票界面.让我们重写先前的polls/detail.html文件,代码如下: <h1>{{ question.quest ...