1619069063414549

[源码分享]开源的自定义表单设计器源码

  • 时间:
  • 浏览:424
  • 来源:无双科技

自定义表单设计器,这是一个现代化应用中一个加分的模块,目前很多大型的系统都会存在很多表单,针对不同的客户,可能表单都会不一样,而且不够灵活,可能针对不同的场景都得去定制化的开发很多不一样的表单,因此现在很多大型应用程序都提供了自定义表单的功能,今天就为大家介绍一些在github上发现的比较符合需求的基本实现,需要自己配合后台,但是最难的部分,也就是前端设计器的部分基本上不需要动,一起来看一看!


开源项目首页

笔者在接到项目要求后,在github上找了很久,也有好几个版本,现在全部都贡献出来,以便于大家参考,其中包括了PC端和移动端(分开的并不是集成在一起的,有点遗憾),有一些虽然开源,但是收费这里就不介绍了,下面是相关地址:

1、https://github.com/wxjaa/ddvue(Vue+移动端)

2、https://github.com/xiedajian/dingding(jQuery+移动端)

3、https://github.com/chrunlee/formdesigner(jQuery+移动端)

4、https://github.com/wxjaa/dingding(jQuery+移动端)

5、https://github.com/mrabit/vue-formbuilder(Vue+PC)


笔者是在第一个Vue版本的基础上修改的,其实大部分代码不需要修改,不过需要自行整合金自己的项目,可以根据自己的需求进行整合


项目介绍

因为笔者使用的是第一个,因此就直接拿第一个进行简单的介绍,遗憾的是没有找到React和Angular版本的,可以根据需要自行选择。

  • 1、项目结构

大致的项目结构如下,这只是一个基础的脚手架项目,因为开源的时间较长,脚手架使用的不是最新版,不过这不是重点:

92bda2442cac4b1499b82839400fcf51.jpg

2、组件部分

b7f46e0556cb4c22a8411111ceb94f81.jpg

这部分主要就是自定义的一些控件部分,像文本框、下拉框等的渲染部分都在这里,对应如下部分

002594bf57454a53b6f4977141b69e16.jpg

  • 3、中间界面部分

也就是进行拖拽后的表单容器

2f8d1518d5d7495992f34207bec9e384.jpg

4、设置部分

92b6950a05d44f4684ff9d3d455faf93.jpgf093106bb0314193881312174af4bb44.jpg

整个项目也就分为大致这几个部分,由于笔者刚刚接触Vue不久,有些地方也可能存在理解不到位的地方,这里就不在过多介绍,另外还包括头部和按钮部分,整个界面的核心就是中间的设计器部分,有需要的朋友自行修改即可,其中控件当中包含的明细,相信是大家需要的!

  • 5、开发

首先先克隆或者下载下来源代码:

# 安装依赖
npm install

# 启动服务
npm run dev

# 构建打包
npm run build

PC版的大致预览

可实现自定义表单控件,可拖拽排序,自定义属性由于这部分笔者还没有用到,因此简单的一起来看看效果

141a83cfd1b641fd99c6470193beb2fc.gif

c1c0afa8f09b46d1b022a61b694f16ab.gif


总结

对于智能表单设计器,笔者目前也正在摸索如果能够实现的更好,以上的案例都提供了非常不错的思路,非常感谢开源的作者们,如果你也有同样的需求,可以参考以上几个!

猜你喜欢

百度竞价搜索推广怎么找到ip和屏蔽

百度竞价搜索推广怎么找到ip和屏蔽

在正常推广的时候,经常会早到恶意点击,虽然百度有机制不算到计费系统内,但还是会给客服接待人员造成大量困扰,为减少推广的成本,可以屏蔽一些恶意的点击IP,是最理智的选择,不过在国

2020-07-01

View UI(iView) Upload 自定义多图上传列表提交

View UI(iView) Upload 自定义多图上传列表提交

iViewUpload自定义多图上传列表提交可以自由控制上传列表,完成各种业务逻辑,示例是一个照片墙,可以查看大图和删除。设置属性 show-upload-list&

2020-06-29

iViewUpload上传

页面顶部空白行,源码显示&#65279解决方法

页面顶部空白行,源码显示&#65279解决方法

最近在做一个项目的时候,好几个页面都出现顶部莫名多出一定高度的空白,查看自己写的样式又没有添加这样的样式。查看源码后模板文件生成html文件之后会在body开头处加入一个可见的

2020-06-08

PHP反爬虫攻略禁止垃圾蜘蛛爬虫UserAgent频繁访问网站

PHP反爬虫攻略禁止垃圾蜘蛛爬虫UserAgent频繁访问网站

我们都知道网络上的爬虫非常多,有对网站收录有益的,比如百度蜘蛛(Baiduspider),也有不但不遵守robots规则对服务器造成压力,还不能为网站带来流量的无用爬虫,比如宜

2020-06-05

userAgent垃圾蜘蛛PHP反爬虫

各大中文网站蜘蛛userAgent及IP段

各大中文网站蜘蛛userAgent及IP段

UserAgent中文名为用户代理,简称UA,它是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件

2020-05-28

蜘蛛爬虫userAgent百度蜘蛛360蜘蛛google蜘蛛蜘蛛IP