hbase和couchdb_使用CouchDB在移动和固定设备上创建脱机Web应用程序

最新推荐文章于 2022-09-07 16:33:29 发布

cuyi7076

最新推荐文章于 2022-09-07 16:33:29 发布

阅读量247

点赞数

文章标签：数据库 python java js 大数据 ViewUI

原文链接：https://www.ibm.com/developerworks/web/library/wa-couchdb/index.html

版权

hbase和couchdb

一种基于分布式数据库（例如HTML5浏览器中嵌入的数据库）SQL同步机制会导致复杂的工作。 Apache CouchDB具有固有的同步基础。（请参阅相关主题的更多信息CouchDB的同步。）在这篇文章中，通过一个典型的使用场景学会走路CouchDB的概念和技术细节。您将创建并部署一个简单的库存管理应用程序的原型。

在我之前的developerWorks文章“ 使用HTML5在移动设备上创建离线Web应用程序 ”中介绍了一个基于HTML5概念的类似应用程序，但是未解决同步问题。对于本文，我使用CouchDB环境的存储和标准同步工具迁移了应用程序。您可以从下面的“ 下载”表中下载本文中使用的源代码。

总览

图1概述了CouchDB的示例应用程序体系结构的主要组件以及上一篇文章中HTML5 / SQL解决方案。两种解决方案都包含HTML，JavaScript，本地数据存储和远程数据存储。

图1.离线CouchDB应用程序的核心元素

该图显示了离线CouchDB应用程序的核心元素，同时显示了本地和远程元素。这些元素在以下文本中进行描述。

HTML页面

HTML5和CouchDB应用程序的核心。它具有模型角色，并包含显示的数据和（默认）渲染信息。页面HTML元素以HTML文档对象模型（DOM）树的层次结构进行组织。

用户启动的事件会导致常规的请求-响应周期，以及页面加载和相关JavaScript函数的执行。值得注意的是，这些应用程序由单个HTML页面组成，而无需通过请求-响应周期加载其他HTML页面。整个动作在一页上。

JavaScript

包含HTML5和CouchDB应用程序的控制器功能。 HTML元素通过事件处理程序绑定到JavaScript函数。 JavaScript可以使用所有用户界面元素访问应用程序HTML DOM树，并将其用作计算的数据输入。通过修改HTML页面，可以将处理结果呈现给用户。

本地数据存储

HTML5应用程序SQL数据库基于模式，并使用联接组合来自多个表的数据。 CouchDB应用程序的数据存储没有模式-文档以JSON文档的形式存储和检索。无需使用联接来组装数据。

为了管理数据，SQL数据库使用SQL查询。 CouchDB具有RESTful方法：每个文档都是RESTful资源，具有用于请求的HTTP方法。

远程数据存储

应用程序基础结构由相互复制的数据存储节点网络组成。在关系SQL数据库的世界中，有必要编写或管理复杂的复制基础结构。

在NoSQL CouchDB体系结构中，提供了默认的复制框架。实际执行冲突文档的合并是特定于应用程序的功能（请参阅参考资料）。这是CouchDB最强大的功能之一。

应用范例

本节概述了示例应用程序MyHomeStuff ，该应用程序提供了简单的库存管理来跟踪您拥有的物品。它在功能上等效于HTML5版本。图2显示了Windows®上Firefox®浏览器中的应用程序。

图2. Windows上的Firefox浏览器中的库存管理系统

库存管理系统的屏幕快照，显示“概述”部分，“用于输入更多项目的详细信息”和“复制”部分。以下文字有更多信息。

Android™Web浏览器上的应用程序如下所示。

图3. Android上的库存管理系统

该应用程序使您可以跟踪拥有的物品。屏幕上部的列表提供了所有输入项目的概览，例如书籍。通过选择列表中的一个项目，该项目的详细信息（数量和名称）将以中间形式显示。可以使用“更新”按钮更改所选项目的详细信息，或者可以使用“删除”按钮从应用程序中删除所选项目。可以通过在表单中输入商品的数量和名称并选择创建来创建新商品。

用户可以在屏幕下部启动复制过程。通过输入源CouchDB和目标CouchDB的URL并激活“复制”按钮来操作该过程。目标CouchDB可以是现有的远程或本地数据库。

HTML详细资料

HTML页面包含声明，对外部JavaScript文件的引用以及构成应用程序基本结构的基本HTML元素。清单1显示了代码。

清单1. HTML代码

<!DOCTYPE html>
<html>
  <head>
  	<title>MyHomeStuff2</title>
  	<script src="/_utils/script/jquery.js"></script>
  	<script src="/_utils/script/jquery.couch.js"></script>
  	<script src="script.js"></script>
  </head>
  <body>
  
    <h3>Overview</h3>
    <ul id="itemData" ></ul>

    <h3>Details</h3>
    <form name="itemForm">
        <input type="hidden" name="id" id="idId" />
        <input type="hidden" name="rev" id="revId"/>
        <label for="amount">Qty: </label>
        <input type="text" name="amount" id="amountId" size = 3/>
        <label for="name">Name: </label>
        <input type="text" name="name" id="nameId" size=12 />
        <br><br>
        <input type="button" id="createId" value="create" />
        <input type="button" id="updateId" value="update" />
        <input type="button" id="deleteId" value="delete" />
    </form>
   
    <h3>Replicate</h3>
    <form>
        <label for="sourceDBId">Source: </label>
        <input id="sourceDBId" type="text"></input>
        <br><br>
        <label for="targetDBId">Target: </label>
        <input id="targetDBId" type="text"></input>
        <br><br>
        <input id="replicateId" type="button" value="replicate"></input>
   </form>
   
  </body>
</html>

由于在JavaScript部分中使用了jQuery库，因此HTML页不包含事件处理程序属性。（单击）事件处理程序从JavaScript代码绑定到HTML表单操作。

JavaScript库jquery.couch.js用于与CouchDB进行交互。它使用简单JavaScript简化了通信。例如，您使用db.saveDoc(aTask)而不是必须为RESTful CRUD操作建立通信（例如， PUT /tutorial/task/4 ...）。

为了开发更高级的应用程序，您应该使用CouchApp框架。 CouchApp由一组脚本组成，这些脚本简化了CouchDB应用程序的开发（有关更多信息，请参见参考资料）。

JavaScript详细信息

JavaScript代码包含三个主要块：

初始化功能
db（crud）和视图刷新功能
复制功能

第一块包含用于数据存储和视图的初始化代码，如清单2所示。

清单2. JavaScript `refreshItems`代码

var db = $.couch.db(getCurrentDBName());

function getCurrentDBName() {
    return window.location.pathname.split("/")[1];
}

$(document).ready(function() {
    //1. init stuff
    refreshItems();
    $('#sourceDBId').val(db.name);
    $('#targetDBId').val(db.name + "-copy");
    
    //2. event handler crud stuff
    ...
});

function refreshItems() {
    $("ul#itemData").empty();
      
    db.view("myDesign/myView", {
        success: function(data){
            data.rows.map(function(row) {
            $('ul#itemData').append('<li id="'+row.value._id+'">'
                +row.value.amount
                +" x "
                +row.value.name
                +'</li>');
                     
            $('#'+row.value._id).click(function() {
                $('#idId').val(row.value._id);
                $('#revId').val(row.value._rev);
                $('#amountId').val(row.value.amount);
                $('#nameId').val(row.value.name);
                return false;
            });
            });
        },
        error: function(req, textStatus, errorThrown){alert('Error '+ textStatus);}
        });
}

在上面的代码中：

CouchDB的实例已创建。数据库名称是从当前URL中提取的。
DOM初始化后，将调用文档ready功能。但是，首先，它调用refreshItems函数，并使用源数据库和目标数据库的名称填充复制表单的字段。
refreshItems函数查询现有记录，并使用数据填充HTML页面，如下所示：
- 旧数据已从DOM树中删除。
- 查询CouchDB。查询和报告CouchDB的主要工具是视图。
  使用成功处理程序和错误处理程序函数执行查询。视图功能使用HTTP GET进行RESTful查询。该视图由一个映射函数组成，该映射函数将具有名称和金额字段的每个文档转换为以ID为键和文档为值的键值对（请参见View myView的map函数的Deployment部分）。
- 成功处理程序为每个值创建一个HTML列表元素，并将其附加到列表中。将为每个列表元素添加一个事件单击处理程序，以通过使用选择填充字段来响应单击。
- 错误处理程序通过警报对话框显示问题。

事件处理程序在refreshItems函数的第二部分中，该函数包含按钮栏的事件处理程序以及带有更新，删除和创建的列表。清单3显示了update的代码。（ Create和delete具有类似的结构，因此此处未显示。您可以从下面的“ 下载”表中下载示例应用程序的所有源代码。）

清单3. JavaScript `update`代码

...
    //event handler crud stuff
...
    $('input#updateId').click(function(e) {
         
       if ($('#idId').val().length == 0) {
           return;
       }
       
       var aTask = {
           _id: $('#idId').val(),
           _rev: $('#revId').val(),
           amount: $('#amountId').val(),
           name:$('#nameId').val()
       }
       db.saveDoc(aTask, { success: function(resp) {
           refreshItems();
       }});
    });
...

在上面的代码中：

读取并验证表单的字段值。
如果值有效，则创建JSON对象，并使用HTTP PUT执行更新调用以进行更新。
查询的结果通过成功处理程序显示在刷新HTML页面中。

复制功能的代码非常密集，如清单4所示。

清单4. JavaScript复制代码

$('#replicateId').click(function() {
    var sourceDB = $('#sourceDBId').val();
    var targetDB = $('#targetDBId').val();
    $.couch.replicate(sourceDB, targetDB, {
        success: function(data){alert('Replication was performed');},
        error: function(req, textStatus, errorThrown){alert('Error '+ textStatus);}
    });
});

在上面的代码中：

读取复制表单的字段值。
复制调用将被执行。
复制的结果显示为一个警报框，通过成功或错误处理程序激活。

部署方式

如果您的计算机上安装了CouchDB，则可以运行该示例。 CouchDB具有适用于Linux®，Windows，Mac®和Android（2.1或更高版本；在本文撰写时，Android端口的版本为0.50 alpha版本）的不同安装程序。或者，您可以使用托管服务。我成功尝试CouchOne的免费托管（参见相关主题）。

在安装CouchDB之后，容器可以通过几个步骤准备好进入下载的应用程序。

为应用程序和数据创建数据库。
- 单击创建数据库...
- 在“创建新数据库”对话框中，填写“数据库名称”字段（例如，stuff_db），然后单击“ 创建” 。
创建包含数据的文档（用于测试）。
- 点击新建文档 。
- 点击添加字段 。
- 在字段中输入name ，在值中输入table 。
  用绿色的对号或Tab键确认。
- 点击添加字段 。
- 在字段中输入amount ，在值中输入3 。确认它。
- 点击保存文档 。
  现在，第一个数据已准备好进行查询。
创建一个视图并将其另存为设计文档。
- 选择概述 -> stuff_db 。
- 选择视图：临时视图... （从左上方的下拉列表中）。
- 输入地图功能：
```
function(doc) {
  if (doc.name && doc.amount)
  {
    emit(doc._id, doc);
  }}
```
  对于数据库中具有名称和数量字段且具有非空值的每个文档，将在视图中创建结果行。该行的关键字是文档的ID；该值是文档本身。
- 单击运行以进行测试。结果是输入文档的键值对。
- 点击另存为...
- 在保存视图为...对话框中，填写的设计文档场_design/myDesign ，视图名称：与现场myView ，然后点击保存。
  现在，您有了一个设计文档，可以在其中存储CouchDB应用程序。

查询视图。

在浏览器中输入以下内容：

http://127.0.0.1:5984/stuff_db/_design/myDesign/_view/myView

它以输入的数据作为响应，如下所示：

{"total_rows":1,"offset":0,"rows":[
{"id":"c9938dc172b31a34ef4f0d7f3f000d5d",
"key":"c9938dc172b31a34ef4f0d7f3f000d5d",
"value":{"_id":"c9938dc172b31a34ef4f0d7f3f000d5d",
"_rev":"3-d107f491d254b01c0135fd1e8dd13e0a",
"table":null,"name":"table","amount":3}}
]}

（人为折断行以进行格式化。）

使用打开新的设计文档
```
http://127.0.0.1:5984/_utils/document.html?stuff_db/_design/myDesign
```
并将附件上传到设计文档（用于添加应用程序功能）。
- 选择带有文件的上载附件， index.html ，然后单击上载。
- 选择带有文件的上载附件 script.js ，然后点击上传。
- 点击保存文档 。
通过使用以下命令从设计文档的_attachments字段中选择index.html值，以打开应用程序
```
http://127.0.0.1:5984/stuff_db/_design/myDesign/index.html
```
输入并更改应用程序中的某些数据。

成功安装应用程序后，可以使用复制机制将其部署到其他CouchDB数据库。

为了简化事务，请在同一CouchDB节点中创建一个新数据库（例如，new-stuff-db）。
输入现有CouchDB数据库的URL。在“源”字段中，输入源数据库的名称（stuff_db），在“目标”字段中，输入目标URL（new-stuff-db）。
单击复制。具有数据和程序代码的整个数据库将被复制。
可以使用相同的方法将新输入的数据简单地从复制传输回原始数据库。
尝试将CouchDB数据库复制到远程CouchDB节点。
例如，如果您在CouchOne Hosting上注册一个子域mysubdomain ，并创建一个名为mydatabase的数据库，则将使用的目标URL为：
```
http://mysubdomain.couchone.com/mydatabase
```

摘要

在本文中，您了解了CouchDB脱机应用程序的技术观点。一个简单的库存管理应用程序的原型演示了具有JSON存储和标准同步功能的CouchDB技术。

翻译自: https://www.ibm.com/developerworks/web/library/wa-couchdb/index.html

hbase和couchdb

cuyi7076

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hbase和couchdb_使用CouchDB在移动和固定设备上创建脱机Web应用程序

一种基于分布式数据库（例如HTML5浏览器中嵌入的数据库）SQL同步机制会导致复杂的工作。 Apache CouchDB具有固有的同步基础。（请参阅相关主题的更多信息CouchDB的同步。）在这篇文章中，通过一个典型的使用场景学会走路CouchDB的概念和技术细节。您将创建并部署一个简单的库存管理应用程序的原型。在我之前的developerWorks文章“ 使用HTML5在移动设备上...
复制链接

扫一扫

hbase和couchdb_使用CouchDB在移动和固定设备上创建脱机Web应用程序

总览

图1.离线CouchDB应用程序的核心元素

应用范例

图2. Windows上的Firefox浏览器中的库存管理系统

图3. Android上的库存管理系统

HTML详细资料

清单1. HTML代码

JavaScript详细信息

清单2. JavaScript refreshItems代码

清单3. JavaScript update代码

清单4. JavaScript复制代码

部署方式

摘要

清单2. JavaScript `refreshItems`代码

清单3. JavaScript `update`代码