动态表单设计

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

实现思路:
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');

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值