动态表单设计

在前端系统，我们经常要使用各种表单，每个表单中的插件是不尽相同的。
面对这种场景，有什么好的方式可以通过在前端拖拽插件的方式自定义表单呢？

实现思路:
1. 创建如下表:
form_component表, 即支持的表单组件。
user_register_form_template表，即用户注册表单模板，这个表中的数据，是用户在界面拖拽以及填写数据生成的。
针对value字段，约定优于配置，如果是select字段，value是map集合，说明和上个元素时级联查询，如果是数组说明没有级联。
user表，即用户表。管理员创建好用户注册表模板后，用户可以在这个模板上填写数据进行注册。
这个表是利用面向列的思想，这样添加字段，即模板添加新的组件，不会影响数据结构。

1. 重要关系
   user_register_form_template中的form_component字段是外键。
   user表中的number字段是外键，注意: 这里的顺序和摸版表中的顺序是一致的。

2. 支持的功能
   管理员在界面可以随意添加新的组件，删除新的组件和更改组件的顺序。而无需更改数据库字段。
   ER图如下:
   

/*Navicat MySQL Data TransferSource Server         : localhostSource Server Version : 50539Source Host           : localhost:3306Source Database       : dynamic_form_systemTarget Server Type    : MYSQLTarget Server Version : 50539File Encoding         : 65001Date: 2017-08-10 15:07:42*/SET FOREIGN_KEY_CHECKS=0;-- ------------------------------ Table structure for form_component-- ----------------------------DROP TABLE IF EXISTS `form_component`;CREATE TABLE `form_component` (  `id` int(11) NOT NULL,  `name` varchar(20) NOT NULL,  `type` varchar(20) CHARACTER SET big5 NOT NULL,  `create_time` datetime NOT NULL,  PRIMARY KEY (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- ------------------------------ Records of form_component-- ----------------------------INSERT INTO `form_component` VALUES ('1', '文本框', 'text', '2017-08-10 14:37:08');INSERT INTO `form_component` VALUES ('2', '下拉框', 'select', '2017-08-10 14:37:40');INSERT INTO `form_component` VALUES ('3', '复选框', 'checkbox', '2017-08-10 14:39:22');INSERT INTO `form_component` VALUES ('4', '单选框', 'radio', '2017-08-10 14:39:41');INSERT INTO `form_component` VALUES ('5', '文本域', 'textarea', '2017-08-10 14:40:04');INSERT INTO `form_component` VALUES ('6', '日期', 'datetime', '2017-08-10 14:46:23');-- ------------------------------ Table structure for user-- ----------------------------DROP TABLE IF EXISTS `user`;CREATE TABLE `user` (  `id` int(11) NOT NULL,  `user` int(255) NOT NULL,  `number` int(11) NOT NULL COMMENT '用户注册表单模板组件对应的位置',  `value` varchar(255) COLLATE utf8_bin DEFAULT NULL,  `create_time` datetime DEFAULT NULL,  PRIMARY KEY (`user`,`number`),  KEY `number` (`number`),  CONSTRAINT `user_ibfk_1` FOREIGN KEY (`number`) REFERENCES `user_register_form_template` (`number`)) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin;-- ------------------------------ Records of user-- ----------------------------INSERT INTO `user` VALUES ('1', '1', '1', '司冬雪', '2017-08-10 14:54:08');INSERT INTO `user` VALUES ('2', '1', '2', '男', '2017-08-10 14:58:54');INSERT INTO `user` VALUES ('3', '1', '3', '2017-08-10', '2017-08-10 14:59:00');INSERT INTO `user` VALUES ('4', '1', '4', '河北', '2017-08-10 15:00:38');INSERT INTO `user` VALUES ('5', '1', '5', '保定', '2017-08-10 15:00:54');INSERT INTO `user` VALUES ('6', '1', '6', '[\"相声\", \"乒乓球\"]', '2017-08-10 15:01:27');INSERT INTO `user` VALUES ('7', '1', '7', '学习努力，工作积极，乐于分享，热爱生活', '2017-08-10 15:02:03');INSERT INTO `user` VALUES ('1', '2', '1', '张三', '2017-08-10 14:54:08');INSERT INTO `user` VALUES ('2', '2', '2', '男', '2017-08-10 14:58:54');INSERT INTO `user` VALUES ('3', '2', '3', '2017-08-10', '2017-08-10 14:59:00');INSERT INTO `user` VALUES ('4', '2', '4', '山东', '2017-08-10 15:00:38');INSERT INTO `user` VALUES ('5', '2', '5', '青岛', '2017-08-10 15:00:54');INSERT INTO `user` VALUES ('6', '2', '6', '[\"体育\", \"乒乓球\"]', '2017-08-10 15:01:27');INSERT INTO `user` VALUES ('7', '2', '7', '学习努力，工作积极', '2017-08-10 15:02:03');-- ------------------------------ Table structure for user_register_form_template-- ----------------------------DROP TABLE IF EXISTS `user_register_form_template`;CREATE TABLE `user_register_form_template` (  `id` int(11) NOT NULL,  `form_component` int(11) NOT NULL,  `number` int(2) NOT NULL COMMENT '组件在用户注册表单模板中的位置',  `label` varchar(20) DEFAULT NULL,  `value` varchar(120) DEFAULT NULL,  `create_time` datetime DEFAULT NULL,  PRIMARY KEY (`id`),  KEY `number` (`number`),  KEY `form_component` (`form_component`),  CONSTRAINT `user_register_form_template_ibfk_1` FOREIGN KEY (`form_component`) REFERENCES `form_component` (`id`)) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- ------------------------------ Records of user_register_form_template-- ----------------------------INSERT INTO `user_register_form_template` VALUES ('1', '1', '1', '姓名', null, '2017-08-10 14:42:46');INSERT INTO `user_register_form_template` VALUES ('2', '4', '2', '性别', null, '2017-08-10 14:44:17');INSERT INTO `user_register_form_template` VALUES ('3', '6', '3', '生日', null, '2017-08-10 14:50:59');INSERT INTO `user_register_form_template` VALUES ('4', '2', '4', '省', '[\"河北\",\"河南\",\"山东\",\"山西\"]', '2017-08-10 14:47:07');INSERT INTO `user_register_form_template` VALUES ('5', '2', '5', '市', '{\"河北\":[\"保定\",\"石家庄\"],\"河南\":[\"洛阳\",\"郑州\"],\"山东\":[\"济南\",\"青岛\"],\"山西\":[\"晋中\",\"太原\"]]', '2017-08-10 14:49:20');INSERT INTO `user_register_form_template` VALUES ('6', '3', '7', '业余爱好', null, '2017-08-10 14:52:46');INSERT INTO `user_register_form_template` VALUES ('7', '5', '6', '简介', null, '2017-08-10 14:51:35');

细节还需要打磨，如果谁有更好的设计方案，可以多提建议！