Java后端开发者的福音，拖拽生成前端页面，前后端分离开发

程序员Bob 06-12 11089

前言：

目前姐妹们对“前端上传图片到七牛云”大约比较注重，你们都想要剖析一些“前端上传图片到七牛云”的相关文章。那么小编也在网络上汇集了一些对于“前端上传图片到七牛云””的相关文章，希望同学们能喜欢，我们一起来学习一下吧！

vue-form-makingvue-form-making 是gitbub上一款stars 2.2k的开源表单设计器，使用拖拽的方式直接生成HTML文件，可以绑定后端API，不用写前端代码就能和后端完成数据交互。

线上预览版本

最新更新内容

下拉框数据联动

多个下拉菜单之间可以实现数据联动，根据前置下拉菜单的选择内容动态加载后置下拉菜单的内容。

视频教程，实现省市区县的联动选择

视频加载中...

预览地址：

效果图

<template> <div> <fm-generate-form  :data="jsonData"  :remote="remoteFuncs"  :value="editData"  :remote-option="dynamicData" ref="generateForm" @on-province-change="onProvinceChange" @on-city-change="onCityChange" > </fm-generate-form> <el-button type="primary" @click="handleSubmit">Submit</el-button> </div></template>

export default { data () { return { jsonData: {"list":[{"type":"select","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"showLabel":false,"width":"","options":[{"value":"Option 1"},{"value":"Option 2"},{"value":"Option 3"}],"remote":true,"remoteType":"option","remoteOption":"optionProvince","filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1576064925417","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true},"name":"省","key":"1576064925417","model":"province","rules":[]},{"type":"select","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"showLabel":false,"width":"","options":[{"value":"Option 1"},{"value":"Option 2"},{"value":"Option 3"}],"remote":true,"remoteType":"option","remoteOption":"optionCity","filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1576064925610","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":true,"dataBind":true},"name":"市","key":"1576064925610","model":"city","rules":[]},{"type":"select","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"showLabel":false,"width":"","options":[{"value":"Option 1"},{"value":"Option 2"},{"value":"Option 3"}],"remote":true,"remoteType":"option","remoteOption":"optionDistrict","filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1576064925781","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":true,"dataBind":true},"name":"区","key":"1576064925781","model":"district","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}}, editData: {}, remoteFuncs: {  }, dynamicData: {  optionProvince : [], // 省 option data  optionCity : [], // 市 option data  optionDistrict : [], // 区 option data  }, data: null } }, mounted () { axios.get('/data.json').then(data => { this.data = data.data this.dynamicData.optionProvince = Object.keys(this.data[86]).map(item => ({ value: item, label: this.data[86][item] })) }) }, methods: { onProvinceChange (value) { if (value) { this.$refs.generateForm.display(['city']) this.$refs.generateForm.hide(['district']) this.$refs.generateForm.setData({ city: '', district: '' }) this.dynamicData.optionCity = Object.keys(this.data[value]).map(item => ({ value: item, label: this.data[value][item] })) } }, onCityChange (value) { if (value) { this.$refs.generateForm.display(['district']) this.$refs.generateForm.setData({ district: '' }) this.dynamicData.optionDistrict = Object.keys(this.data[value]).map(item => ({ value: item, label: this.data[value][item] })) } }, handleSubmit () { this.$refs.generateForm.getData().then(data => { alert(JSON.stringify(data)) }).catch(e => { }) } }}

图片上传功能

图片上传功能支持上传到七牛云，或是自己的服务器中，只需要在配置页面中配置相关信息即可。

拖拽一个图片上传组件，配置获取七牛Token的方法名，在方法中实现获取七牛Token，组件就能完成上传功能。

预览图片上传功能，选择一个本地图片后，组件自动上传到七牛云端，通过获取数据按钮，可难道图片上传的参数信息，下载展示图片时提供数据就能获取到图片数据。

新增HTML标签

你可以在页面中的任何位置添加HTML标签，标签内容可以默认指定，也可以通过字段标识动态更新。

更多功能，和高级版本获取方式在最下方

更新日志

1.2.7

2019-12-12

优化选项数据，暴露选项变量供用户自定义上传图片增加只读操作属性富文本编辑器采用插件形式引入增加HTML字段常规修复和优化

1.2.6