构建一个基于 Node.js 的表驱动存储容器应用(1)
 
- UID
- 1066743
|

构建一个基于 Node.js 的表驱动存储容器应用(1)
在本教程中,您将为键值对以及它们相关的元数据创建一个通用容器,以便提供一张表,从而使用内置的 功能,以通用的方式来收集、查阅、修改和删除数据。为了开发这个应用程序,需要使用 Node.js、Express、Apache CouchDB、Cloudant、Nano、jTable 和 IBM® Bluemix™。我还将说明如何定位已屏蔽或隐藏的表数据,然后通过 Ajax 代码将它们复制到剪贴板上。
完成应用程序的前提条件- 中级 Web 开发技巧
- 一个 Node.js 和 Express 环境
- 与您的 IBM ID 有关联的 帐号
- The Cloud Foundry
“我使用的是基于 jQuery 的 jTable Ajax 代码,我将它放在一个 Jade 模板中进行展示。”
步骤 1. 探讨应用程序的 UI我在这张屏幕截图上圈出的 UI 元素控制着表的各种特性:
从左上角按照顺时针顺序,这些元素依次是:
- Item 字段旁边的 Sort 按钮。单击该按钮将按照升序或降序对数据进行排序。
- Value 字段。此字段中如果显示一个 * 字符组成的字符串,则表示这个值不可见。只要编辑这一项并将它设置为可见,就可以让这个值变为可见。
- +Add new item 按钮。单击该按钮将会打开一个表单,可以在其中输入一个新内容项及其元数据。
- Edit Record 图标。单击该图标将会打开一个表单,在其中可以编辑当前项。
- Delete 图标。单击它将会打开一个对话框,用于确认内容项的删除。
- Table stats 字段。当表包含内容项时,表的右下角将会显示 Showing x-y of z。(x 和 y 值代表表中所显示内容项的高低索引,而 z 代表数据库中可用内容项的总数)。
- Row count 下拉列表:用于控制每页显示的内容项数量。
- Go to page 下拉列表:一个随机访问页面的选择器。
- <<、 <、> 和 >>:第一页、最后一页、下一页和前一页选择器。
这里是用于插入一个新内容项的 Add new item 表单:
这个表单中的字段包括:
- Item Name:内容项的名称。
- Value:内容项的值。
- Value is visible 单选按钮:默认值为 no。
- Expiration Date。内容项被自动删除的日期。(未实现。)
- Usage 下拉列表。选择项有 paste (默认值)和 launch。
- Command。(可选,示例应用程序中并未使用它。)
- Remarks。
这幅屏幕截图显示了被选中的一行。除了表代码中标记为不可编辑或不可创建的值,Add new item 表单中捕捉到的值都将会显示出来:

被选中行中的所有字段都将被突出显示和复制。当无字段突出显示时,可以使用 Ctrl+C 键将内容项的值放入剪贴板,然后将它粘贴到合适的文本区域内。 |
|
|
|
|
|