什么是form-generator? form-generator开源框架
一：写在前面
1：传统的Web前端开发者，日常的开发语言都是基于HTML和CSS,JavaScript,或者使用一些像ElementUI,Bootstrap,Vue之类的UI框架去开发前端或者管理后台界面，开发时间长且重复繁琐,form-generator的作者意识到这个问题，于是开发了一款基于ElementUI，通过后台配置Json来快速生成表单的开源框架，该框架大大简化了开发者对于日常一些基本的重复组件的开发，省时省力。
2：下面我们就分别从前端框架搭建(ElementUI+Vue),后台接口(Springboot)和业务逻辑，数据库表(Mysql+Navicate)结构设计等不同的使用场景,结合项目需求来分析下form-generator是如何完成从后台数据库Json到前端表单渲染这一神奇的操作！
二：form-generator项目引入依赖的方式有两种
一种是使用npm导入方式:
CharlesdeMac-mini:~ charles$ cd /Users/charles/Desktop/formProject
CharlesdeMac-mini:formProject charles$ npm i form-generator
这种方式导入会有一点小问题，
另一种是通过手动下载拖入到项目的方式:
我们推荐去官网form-generator开源框架下载项目的包文件，然后在下载的项目的src目录中提取我们所需要的文件，
我们需要的文件一共有四个:如下图所示:
057956C0-C4E3-4D3B-8261-4F9A88A614BB.png
将这些文件分别放在自己项目中对应的components和assets目录下，
三：form-generator的项目引入和使用
1：引入关键的Parser.vue文件
a:在项目需要使用表单Json解析的Vue文件的script中导入相关组件:
<script>
import Parser from '@/components/parser/Parser'
import {dbDataConvertForItemJson} from '@/utils/convert'
</script>
b:然后注册组件：
<script>
export default {
components: {
Parser
}
}
</script>
c:使用组件:
<script>
<parser :form-conf="formConf" @submit="submitForm"/>
</script>
其中,formConf是后端返回给前端渲染界面的表单Json，他是根据前端手动拖拽控件及对表单控件个性化属性设置后产生的表单Json集合，存储在后台Mysql数据库对应的project_item表结构中，前端通过项目key调用Springboot接口可获取指定项目所有表单控件Json集合，
四：项目发布：
最后将后台接口项目打包成jar，通过命令行nohup java -jar formProject.jar & 将项目挂载在服务器后台永久运行，即可保证接口永久访问，
前端Vue项目打包成dist包后直接放在服务器Nginx Server映射的指定目录下即可访问！
五：效果展示：
1:后台管理系统界面：
3EE55338-E1A4-4DD2-A364-026CD2C69072.png
2：手机端项目发布地址
3：Nginx图片服务器地址
4：springboot后台接口地址
至此从后台表单Json到前端ElementUI基本表单界面渲染就完成了!是不是很easy，喜欢的话点个赞，关注下吧!
网友评论