使用 CouchDB 和 Bootstrap 设计 Web 应用程序原型（2）入门

look_w

入门填充页面的容器原型页面使用 jQuery 从 CouchDB 将文档加载到目标 div 中。我直接使用了 jQuery 的 Ajax 特性，而不是通过 CouchDB 和 CouchApp 提供的 jQuery 插件。该插件很方便，但它依赖于 CouchDB 与网站之间的紧密耦合，使用站点的页面作为数据库附件。我希望将这些方面分开，尤其是在开发期间。除此之外，该插件使您能够在需要时替换另一个后端。我用于加载页面的 JavaScript 非常简单；它包含在本文的代码  中，文件名为 poquotes.js。

我会提供一个简单的 Web 应用程序演示：一个提供诗歌引语的站点。要获取安装 CouchDB 的帮助，请参阅 。在服务器上运行 CouchDB 之后，下载精简的 Twitter Bootstrap（它只是一个 CSS 和 JavaScript 代码包）或完整的项目包。本文使用的是完整的项目包。
我首先从 Twitter Bootstrap 包中的 fluid.html 示例开始。我对该文件进行了删减，修复了 CSS 和 JavaScript 脚本，以删除 ../assets/ 路径信息，还更新了实例站点的一些静态内容。结果（我保存为 index.html）位于本文的代码包中（参见 ）。HTML 页标题的大部分代码如清单 1 所示：
清单 1. index.html 页标题的一部分

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<!-- Styles --> <link href="css/bootstrap.css" rel="stylesheet"> <style type="text/css">   body {     padding-top: 60px;     padding-bottom: 40px;   }   .sidebar-nav {     padding: 9px 0;   } </style> <link href="css/bootstrap-responsive.css" rel="stylesheet"> <!-- HTML5 shim, for IE6-8 support of HTML5 elements --> <!--[if lt IE 9]>   <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head>

清单 2 是 index.html 表的一部分，特色引语会从 CouchDB 加载到该表中：
清单 2. 将特色引语加载到 index.html 表的某一部分

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div class="row-fluid">   <div class="span4 featured-quote">     <h2>Poet's name</h2>     <p>Body of quote here.</p>     <p><a class="btn" href="#">View details &raquo;</a></p>   </div><!--/span-->   <div class="span4 featured-quote">     <h2>Poet's name</h2>     <p>Body of quote here.</p>     <p><a class="btn" href="#">View details &raquo;</a></p>   </div><!--/span-->   <div class="span4 featured-quote">     <h2>Poet's name</h2>     <p>Body of quote here.</p>     <p><a class="btn" href="#">View details &raquo;</a></p>   </div><!--/span--> </div><!--/row-->

该页面还包含一种与数据库交互的机制。具体来讲，边栏包含一个表单，用户可使用它创建新的引语记录。用户单击一个链接来访问该表单，这会触发 jQuery 显示该表单。清单 3 给出了表单标记。（前两个 <input> 行被拆分，以适合本文的页宽限制。）
清单 3. 来自 index.html 的创建新引语记录的表单

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<a href="#popup" id="popup">Click to create a new quote</a> <div>   <form id="newquote" action="index.html">     <fieldset>       <legend>The quote</legend>       <label for="author">Author's Name</label>       <input id="author" name="author" type="text" placeholder="First and last name"           required="required" autofocus="autofocus">       <label for="text">Text of the quotation</label>       <input id="text" name="text" type="textarea" placeholder="Text of the quote here"           required="required">     </fieldset>     <fieldset>       <legend>The work</legend>       <label for="title">Title of the work</label>       <input id="title" name="title" type="text" required="required">       <label for="link">Link to the work</label>       <input id="link" name="link" type="text" required="required">       <label for="year">Year of the work</label>       <input id="year" name="year" type="text" required="required">     </fieldset>     <input id="donewquote" type="submit" value="Add quote" />   </form> </div>

清单 4 是接近 index.html 页面正文结尾的一段代码，用于加载必要的 JavaScript。最后的 script 行包含处理 CouchDB 中的 poquotes 数据库的具体代码。
清单 4. 在接近 index.html 页面正文末尾的地方加载 JavaScript

1 2 3 4 5 6 7

<!-- Placed at the end of the document so the pages load faster -->   <script src="js/jquery-1.7.1.js"></script>   <script src="js/bootstrap.js"></script>   <script src="js/poquotes.js"></script> </body>

在不到 5 分钟的时间内，Bootstrap 就让我完成了提供大部分现代特性的网站的基本设置，包括对旧版浏览器和移动设备的适当支持。对于您自己的网站，您可以更新颜色、字体、图像和其他细节以适合您的设计。您还可以访问 Bootstrap 图库来获得足够的灵感（参阅 ）。