基于Bootstrap框架的动态表单设计与实现
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
随着互联 网的日益 发展， 基于浏览器／ 服务器 （ Ｂ ／ Ｓ ）
合适位置上 ， 最后保存生成动态表单 ， 表单保存成 功后会
的开发模式已成为如今 的应用系统开发的主流 ， 表单作为 在关系数据库中自动新建对应的数据表 ， 表名为该表单的 业务 的枢纽和信息的承载体也越来越重要， 然而传统的表 拼音， 用于存储用户填 写表单信息。 动态表单实现 原理如 单操 作存 在着操作 不灵活， 实现复 杂， 功能简单等缺 点。 随着用户对于表单需求 的发展变化， 固定格 式 的表单结构和单一 的表单元素 已经无法
图１ 动 态 表单 实 现 原理
系统所涉及的关系数表包括表单表 （ Ｆ ｏ ｒ ｍ ） ， 表单组件
成。 Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ ￣经推 出后颇 受欢迎 ， 一直是Ｇ ｉ ｔ Ｈ ｕ ｂ 上 的 表 （ Ｅ ｌ ｅ ｍ ｅ ｎ ｔ ） ， 组件值表 （ Ｅ ｌ ｅ ｍ ｅ ｎ ｔ Ｖ ａ ｌ ｕ ｅ ） 。 表单表中的字段 热 门开源项 目， 包 括Ｎ Ａ Ｓ Ａ 的Ｍ Ｓ Ｎ Ｂ Ｃ（ 微软全 国广播 公司） 的 有 Ｉ ｄ ， Ｆ ｏ ｒ ｍ Ｎ ａ ｍ ｅ ， Ｄ ｅ ｓ ｃ ｒ ｉ ｐ ｔ ｉ ｏ ｎ ， Ｏ ｗ ｎ ｅ ｒ Ｉ ｄ ， Ｃ ｒ ｅ ａ ｔ ｅ Ｄ ａ ｔ ｅ 。 Ｂ ｒ ｅ ａ ｋ ｉ ｎ ｇ Ｎ ｅ ｗ ｓ 都使用了该项目。 Ｆ ｏ ｒ ｍ Ｎ ａ ｍ ｅ 表示创建表 单的中文名称 ， Ｄ ｅ ｓ ｃ ｒ ｉ ｐ ｔ ｉ ｏ ｎ 字段
Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 中包含了丰富的Ｗ ｅ ｂ 组件， 根据这些组件，
对欲创建 的表单进行描述说明， Ｏ ｗ ｎ ｅ ｒ Ｉ ｄ 表 示创建表单 的
可 以快速 的搭建一 个漂 亮、 功能完备的网站 。 并且可 以对 用户Ｉ ｄ ， Ｃ ｒ ｅ ａ ｔ ｅ Ｄ ａ ｔ ｅ 表 示创建表单 的当前 时间 表单组
黄石 ４ ３ ５ ０ ０ ０ ） （ 湖北师范学院计算机科 学与技术 学院， 湖北
摘 要： 通过分析动态表单的实现原理， 采￣Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 前端框 架设计并实现 了 在 线表单设计器。 动态表单设计器是将用 户待填 写表单中的各种数据项组成特 定格 式的字符 串， 再 将字符 串 存 储到数据库相应的字段中以实现表单结构信 息保 存的功能。 从数据库中读取 字段 ， 再拼接成指定格 式的字符 串， 并对其读取解析还原成表单 的样式， 即简单的置换型模 板 引擎。 关键词 ： Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ ； 动态表单； 模板 引擎
实现 表单设计器 ， 可以像可视化编程环境 中的控件 拖放一 值 ， Ｅ ｌ ｅ ｍ ｅ ｎ ｔ Ｖ ａ ｌ ｕ ｅ 表示表单中组件 的ｖ ａ ｌ ｕ ｅ 属性值。 用户在 样将已设计好的表单组件从组件库 中取 出放在系统界面的 表单的设计过程 中将填 写的动态表单 中元 素添加到表单
基金项 目： 湖北师范学院２ ０ １ ４ 年本科生科研 立项项 目， 项目编号： ２ ０ １ ３ Ｚ Ｄ ５ ０ 。 作 者简介： 谈华 宇 （ １ ９ ９ ２ － ） ， 男ｊ 湖北孝 昌人 ， 本 科， 研 究方向： 前端开发 ； 吴昶 成 （ １ ９ ９ ３ － ） ， 男， 江西南昌人 ， 本 科， 研 究方向： 系
类 型Ｉ ｄ ， 如： Ｔ ｅ ｘ ｔ ， Ｒ ａ ｄ ｉ ｏ 或Ｃ ｈ ｅ ｃ ｋ ｂ ｏ ｘ 。 组件值表中包括 的
ｄ ， Ｅ ｌ ｅ ｍ ｅ ｎ ｔ Ｉ ｄ ， Ｅ ｌ ｅ ｍ ｅ ｎ ｔ Ｎ ａ ｍ ｅ ， Ｅ ｌ ｅ ｍ ｅ ｎ ｔ Ｖ ａ ｌ ｕ ｅ 。 其中 由于表单中元素的不确 定性 ， 动态表单设计器 必须能 字段有 Ｉ 根据用户的需要， 自由的添加或删 除表单 中的元素， 并能 Ｅ ｌ ｅ ｍ ｅ ｎ ｔ ｌ ｄ 表 示组件Ｉ ｄ ， 记录值为表单组件表 （ Ｅ ｌ ｅ ｍ ｅ ｎ ｔ ） ｄ 值， Ｅ ｌ ｅ ｍ ｅ ｎ ｔ Ｎ ａ ｍ ｅ 表 示表单 中组件的ｎ ａ ｍ ｅ 属性 通过发布给用户填写的表单来收集所 需要 的信息 。 想要 中的主键Ｉ
第３ 期 ２ ０ ｌ ５ 年２ 月
无 线互联 科技
Ｗｉ ｒｅ ｌ ｅ Ｓ Ｓ Ｉ ｎｔ ｅ ｒ ｎｅ ｔ Ｔ ｅ ｃｈ ｎ ｏ ｌ ｏ ｇ ｙ
Ｎｏ ． ３ Ｆｅ ｂｒ ｕ ａｒ ｙ ，２ ０１ ５
基于Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 框架 的动态表单设计与实现
谈华 宇 吴昶成 ｌ ￣ ］ ｌ ， Ｊ ｘ 平
满足用户的需求， 用户对 动态表单生成的功 能需求迫在眉睫 “ 。 因此， 文章提 出了利用 Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 前 端框 架实现设计动态表单， 用 图１ 所示。
户填写表单内容等功能的技术实现。
１ Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 框架 Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 是Ｔ ｗ ｉ ｔ ｔ ｅ ｒ 推 出的一个开源 的用于前端 开发 的工具包 。 它 由Ｔ ｗ ｉ ｔ ｔ ｅ ｒ 的 设计 Ｊ ￣ Ｓ Ｍ ａ ｒ ｋ Ｏ ｔ ｔ ｏ 和Ｊ ａ ｃ ｏ ｂ Ｔ ｈ ｏ ｒ ｎ ｔ ｏ ｎ 合作 开发， 是一个Ｃ Ｓ Ｓ ／ Ｈ Ｔ Ｍ Ｌ 框架。 Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 提 供了优雅的Ｈ Ｔ Ｍ Ｌ 和Ｃ Ｓ Ｓ 规范 ， 它即是由动态Ｃ Ｓ Ｓ 语言Ｌ ｅ ｓ ｓ 写
ｄ ， Ｆ ｏ ｒ ｍ Ｉ ｄ 和Ｔ ｙ ｐ ｅ Ｉ ｄ 。 其中Ｆ ｏ ｒ ｍ Ｉ ｄ 表 Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 中所有的Ｃ Ｓ Ｓ 变量进行修改 ， 依据 自己的需求定 件表 中的字段包括Ｉ
制代码来自百度文库。
２ 动态表单设计思路
示 该组件所属的表单Ｉ ｄ ， Ｔ ｙ ｐ ｅ Ｉ ｄ 表 示表单 中当前组件 的
合适位置上 ， 最后保存生成动态表单 ， 表单保存成 功后会
的开发模式已成为如今 的应用系统开发的主流 ， 表单作为 在关系数据库中自动新建对应的数据表 ， 表名为该表单的 业务 的枢纽和信息的承载体也越来越重要， 然而传统的表 拼音， 用于存储用户填 写表单信息。 动态表单实现 原理如 单操 作存 在着操作 不灵活， 实现复 杂， 功能简单等缺 点。 随着用户对于表单需求 的发展变化， 固定格 式 的表单结构和单一 的表单元素 已经无法
图１ 动 态 表单 实 现 原理
系统所涉及的关系数表包括表单表 （ Ｆ ｏ ｒ ｍ ） ， 表单组件
成。 Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ ￣经推 出后颇 受欢迎 ， 一直是Ｇ ｉ ｔ Ｈ ｕ ｂ 上 的 表 （ Ｅ ｌ ｅ ｍ ｅ ｎ ｔ ） ， 组件值表 （ Ｅ ｌ ｅ ｍ ｅ ｎ ｔ Ｖ ａ ｌ ｕ ｅ ） 。 表单表中的字段 热 门开源项 目， 包 括Ｎ Ａ Ｓ Ａ 的Ｍ Ｓ Ｎ Ｂ Ｃ（ 微软全 国广播 公司） 的 有 Ｉ ｄ ， Ｆ ｏ ｒ ｍ Ｎ ａ ｍ ｅ ， Ｄ ｅ ｓ ｃ ｒ ｉ ｐ ｔ ｉ ｏ ｎ ， Ｏ ｗ ｎ ｅ ｒ Ｉ ｄ ， Ｃ ｒ ｅ ａ ｔ ｅ Ｄ ａ ｔ ｅ 。 Ｂ ｒ ｅ ａ ｋ ｉ ｎ ｇ Ｎ ｅ ｗ ｓ 都使用了该项目。 Ｆ ｏ ｒ ｍ Ｎ ａ ｍ ｅ 表示创建表 单的中文名称 ， Ｄ ｅ ｓ ｃ ｒ ｉ ｐ ｔ ｉ ｏ ｎ 字段
Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 中包含了丰富的Ｗ ｅ ｂ 组件， 根据这些组件，
对欲创建 的表单进行描述说明， Ｏ ｗ ｎ ｅ ｒ Ｉ ｄ 表 示创建表单 的
可 以快速 的搭建一 个漂 亮、 功能完备的网站 。 并且可 以对 用户Ｉ ｄ ， Ｃ ｒ ｅ ａ ｔ ｅ Ｄ ａ ｔ ｅ 表 示创建表单 的当前 时间 表单组
黄石 ４ ３ ５ ０ ０ ０ ） （ 湖北师范学院计算机科 学与技术 学院， 湖北
摘 要： 通过分析动态表单的实现原理， 采￣Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 前端框 架设计并实现 了 在 线表单设计器。 动态表单设计器是将用 户待填 写表单中的各种数据项组成特 定格 式的字符 串， 再 将字符 串 存 储到数据库相应的字段中以实现表单结构信 息保 存的功能。 从数据库中读取 字段 ， 再拼接成指定格 式的字符 串， 并对其读取解析还原成表单 的样式， 即简单的置换型模 板 引擎。 关键词 ： Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ ； 动态表单； 模板 引擎
实现 表单设计器 ， 可以像可视化编程环境 中的控件 拖放一 值 ， Ｅ ｌ ｅ ｍ ｅ ｎ ｔ Ｖ ａ ｌ ｕ ｅ 表示表单中组件 的ｖ ａ ｌ ｕ ｅ 属性值。 用户在 样将已设计好的表单组件从组件库 中取 出放在系统界面的 表单的设计过程 中将填 写的动态表单 中元 素添加到表单
基金项 目： 湖北师范学院２ ０ １ ４ 年本科生科研 立项项 目， 项目编号： ２ ０ １ ３ Ｚ Ｄ ５ ０ 。 作 者简介： 谈华 宇 （ １ ９ ９ ２ － ） ， 男ｊ 湖北孝 昌人 ， 本 科， 研 究方向： 前端开发 ； 吴昶 成 （ １ ９ ９ ３ － ） ， 男， 江西南昌人 ， 本 科， 研 究方向： 系
类 型Ｉ ｄ ， 如： Ｔ ｅ ｘ ｔ ， Ｒ ａ ｄ ｉ ｏ 或Ｃ ｈ ｅ ｃ ｋ ｂ ｏ ｘ 。 组件值表中包括 的
ｄ ， Ｅ ｌ ｅ ｍ ｅ ｎ ｔ Ｉ ｄ ， Ｅ ｌ ｅ ｍ ｅ ｎ ｔ Ｎ ａ ｍ ｅ ， Ｅ ｌ ｅ ｍ ｅ ｎ ｔ Ｖ ａ ｌ ｕ ｅ 。 其中 由于表单中元素的不确 定性 ， 动态表单设计器 必须能 字段有 Ｉ 根据用户的需要， 自由的添加或删 除表单 中的元素， 并能 Ｅ ｌ ｅ ｍ ｅ ｎ ｔ ｌ ｄ 表 示组件Ｉ ｄ ， 记录值为表单组件表 （ Ｅ ｌ ｅ ｍ ｅ ｎ ｔ ） ｄ 值， Ｅ ｌ ｅ ｍ ｅ ｎ ｔ Ｎ ａ ｍ ｅ 表 示表单 中组件的ｎ ａ ｍ ｅ 属性 通过发布给用户填写的表单来收集所 需要 的信息 。 想要 中的主键Ｉ
第３ 期 ２ ０ ｌ ５ 年２ 月
无 线互联 科技
Ｗｉ ｒｅ ｌ ｅ Ｓ Ｓ Ｉ ｎｔ ｅ ｒ ｎｅ ｔ Ｔ ｅ ｃｈ ｎ ｏ ｌ ｏ ｇ ｙ
Ｎｏ ． ３ Ｆｅ ｂｒ ｕ ａｒ ｙ ，２ ０１ ５
基于Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 框架 的动态表单设计与实现
谈华 宇 吴昶成 ｌ ￣ ］ ｌ ， Ｊ ｘ 平
满足用户的需求， 用户对 动态表单生成的功 能需求迫在眉睫 “ 。 因此， 文章提 出了利用 Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 前 端框 架实现设计动态表单， 用 图１ 所示。
户填写表单内容等功能的技术实现。
１ Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 框架 Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 是Ｔ ｗ ｉ ｔ ｔ ｅ ｒ 推 出的一个开源 的用于前端 开发 的工具包 。 它 由Ｔ ｗ ｉ ｔ ｔ ｅ ｒ 的 设计 Ｊ ￣ Ｓ Ｍ ａ ｒ ｋ Ｏ ｔ ｔ ｏ 和Ｊ ａ ｃ ｏ ｂ Ｔ ｈ ｏ ｒ ｎ ｔ ｏ ｎ 合作 开发， 是一个Ｃ Ｓ Ｓ ／ Ｈ Ｔ Ｍ Ｌ 框架。 Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 提 供了优雅的Ｈ Ｔ Ｍ Ｌ 和Ｃ Ｓ Ｓ 规范 ， 它即是由动态Ｃ Ｓ Ｓ 语言Ｌ ｅ ｓ ｓ 写
ｄ ， Ｆ ｏ ｒ ｍ Ｉ ｄ 和Ｔ ｙ ｐ ｅ Ｉ ｄ 。 其中Ｆ ｏ ｒ ｍ Ｉ ｄ 表 Ｂ ｏ ｏ ｔ ｓ ｔ ｒ ａ ｐ 中所有的Ｃ Ｓ Ｓ 变量进行修改 ， 依据 自己的需求定 件表 中的字段包括Ｉ
制代码来自百度文库。
２ 动态表单设计思路
示 该组件所属的表单Ｉ ｄ ， Ｔ ｙ ｐ ｅ Ｉ ｄ 表 示表单 中当前组件 的