动态表单设计

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

实现思路:
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 Transfer

Source Server         : localhost
Source Server Version : 50539
Source Host           : localhost:3306
Source Database       : dynamic_form_system

Target Server Type    : MYSQL
Target Server Version : 50539
File Encoding         : 65001

Date: 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');

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