Oracle JET 和 Oracle Database – 黄金搭档

作者：Yuli Vasiliev

利用强大的 Oracle JET 框架构建 Oracle Database 应用前端。

2017 年 7 月

引言

近年来，JavaScript 日益成为 Web 开发领域的流行前端语言，其热门程度已超过此领域中其他大多数主要编程语言。根据 Stack Overflow 发布的 2016 年开发人员调查结果，JavaScript 的排名超过了 Python、PHP 甚至是 Java，已然成为全体系 Web 开发人员喜欢使用的技术。

无怪乎从业人员纷纷加入 JavaScript 生态系统的开发，以致于广大用户能够从各种来源下载大量 JavaScript 框架、库和工具，满足自己独特的开发需求。当然，Oracle 软件的现有用户可能希望首先了解 Oracle 在此领域提供的产品。他们在搜索过程中必然会遇到 Oracle JavaScript Extension Toolkit (JET) — 一个专为致力于构建客户端应用的 JavaScript 开发人员设计的模块化开源工具包。

在这篇文章中，我们将通过一个简单的示例应用向您介绍如何构建能够与 Oracle 数据库交互的 Oracle JET 应用。

工作原理 

让我们首先快速了解一下 Oracle JET，以及 Oracle JET 应用与 Oracle 数据库的交互方式。

如果您曾阅读过相关文章，那么应该知道 Oracle JET 是基于一系列流行的开源 JavaScript 库（例如 Knockout.js 和 jQuery）以及 Oracle 开发的 JavaScript 库。然而值得一提的是，借助 Oracle JET 这个模块化工具包，您可以只将确有必要的组件纳入应用中。换言之，许多可用于 Oracle JET 开发的库都并非必要库，您可以根据需要加以选择。这一方法有助于降低应用代码的复杂性，进而改善应用的性能。

另外一个需要强调的重要方面是，Oracle JET 完全是一种客户端工具包，因此不支持在数据交互时采用直接绑定方法，从而您必须通过 REST、WebSocket 以及服务器发送的事件 (SSE) 等 Web 服务才能与 Oracle 数据库等数据源交互。

下图以图形方式概述了此架构：

图 1：Oracle JET 应用与 Oracle 数据库的交互流程。

如上图所示，在与 Oracle 数据库交互时，Oracle JET 应用将调用 Web 服务，以向数据库发出 HTTP 请求。Web 服务将 URL 转换为 SQL 查询，并在数据库中执行。然后，返回的结果数据集将转换为 JSON 数据并发送至发起调用的应用。

如前所述，您可以使用多种 Web 服务来实现 Oracle JET 数据交互。然而，在构建与 Oracle 数据库交互的 Oracle JET 应用时，使用 Oracle REST Data Services (ORDS) 作为中间层 Web 服务似乎是自然而然的选择，因为 ORDS 就是专为配合 Oracle Database、Oracle Database 12c JSON 文档库以及 Oracle NoSQL Database 而设计的。它能够将传入的 HTTP 请求映射到数据库事务，并返回 JSON 格式的检索结果数据集。

从架构上看，Oracle JET 应用采用的是“模型-视图-视图模型”(MVVM) 设计模式，因此用户界面与底层后端逻辑泾渭分明。“模型”处理与数据源的交互，而“视图”负责呈现数据。“视图模型”用于协调“视图”和“模型”之间的通信，在这两层之间提供双向数据绑定。双向数据绑定可确保将影响“模型”的任何数据变更发送至“视图”中，同时将用户在“视图”的 UI 组件中对数据执行的任何更改传递至“模型”中。

根据 MVVM 设计原理，我们可用下图来描述 Oracle JET 应用。图中还显示了 Oracle JET 用于实施 MVVM 设计模式各个层的库和组件。

图 2：基于 MVVM 设计原理的 Oracle JET 应用图示。

如图所示，Oracle JET 应用的 MVVM 层是在客户端 JavaScript 中实现的，因此应用代码将在用户浏览器中运行。在服务器端，您可能部署了一个数据源和一个 Web 服务，这个 Web 服务访问该数据库并将数据作为 JSON 对象返回。从物理角度看，Web 服务和数据源可能位于相同或不同的计算机中，通过 HTTP 等标准化接口进行交互。数据源类型没有限制，可以是平面文件，也可以是关系数据库。

我们将在下面几节中讨论的示例应用将使用 Oracle 数据库作为数据源，使用 ORDS 作为 Web 服务。

准备工作环境

在继续操作之前，您需要确保系统中已具备如下软件组件：

Oracle Database

Oracle SQL Developer

Oracle REST Data Services (ORDS)

Oracle JET

如果还没有 Oracle 数据库，您可以通过以下方式获取一个。获取方法包括：

从 OTN 下载 Oracle Database 软件并安装到您的系统中

下载并安装适用于 Oracle VM VirtualBox 的 VM，确保其中包含预配置的 Oracle Database 软件

利用云端的 Oracle 数据库，选择一种 Oracle 数据库云服务

如果选择数据库 Virtual Box 软件设备，您同时还将获得包括 Oracle SQL Developer 在内的数据库应用开发特性。否则，要操作云端或内部部署的 Oracle 数据库实例，您可能需要下载 Oracle SQL Developer 并在本地计算机上安装。

Oracle Database 云服务通常预配置了 Oracle REST Data Services (ORDS)。如果使用内部部署的数据库，您可能需要在系统中安装 Oracle REST Data Services (ORDS)。如需了解具体操作，请参阅 REST Data Services 安装、配置和开发指南中的安装 Oracle REST Data Services 章节。安装之前，请确保您的系统满足该指南中系统要求章节中规定的相关要求。

您可以使用 Oracle SQL Developer 安装和管理 ORDS，并使用 Oracle SQL Developer 中捆绑的 ORDS 分发版本或者其他 ORDS 分发版本。如需详细了解如何在 Oracle SQL Developer 中配置 RESTful 服务特性，请参阅使用 SQL Developer 安装和管理 REST Data Services 上机操作。本文后面的“针对数据库表配置 RESTful 服务”章节将介绍如何在 Oracle SQL Developer 中为模式或表等数据库对象启用 REST 访问权限。

如该文档中所述，您可以通过多种方法开始 Oracle JET 应用的开发。例如，您可以使用 oraclejet.zip 下载中的文件新建 Oracle JET 应用。您也可以利用 Oracle JET QuickStart 模板来简化开发流程。另外，您还可以将 Oracle JET 添加至现有的 JavaScript 应用中，并将 oraclejet.zip 文件解压缩到应用的站点根目录中，然后添加所需 Oracle JET 库的链接。

然而，快捷的入门方法是修改现有 Oracle JET 应用，根据需要增强或更改其功能。本文后面探讨的示例应用基于 OracleJET-CommonModel-CRUD 示例。如需了解该示例的详细信息，请参阅 JavaScript Extension Toolkit (JET)：使用 Oracle JET 开发应用指南中的使用 Oracle JET 创建 CRUD 应用章节。

快速入门

Oracle JET 入门指南中介绍了有关开始使用 Oracle JET 的几个常规步骤。当然，要想充分利用 Oracle JET 的特性，您需要深入了解所使用的主要库，例如 Knockout.js 和 RequireJS。不过本文中的示例应用是针对新手设计的，不要求您具有丰富的 JavaScript 知识。如前所述，它基于文档中提供的一个现成的示例应用。

在详细讲解之前，我们先来了解一下整体流程。您需要完成以下操作：

下载 OracleJET-CommonModel-CRUD.zip 并将其解压缩到您的系统中

安装 ORDS 并配置一个 RESTful 服务以便检索数据库表中的行 

修改示例应用以使用上一步中定义的 RESTful 服务

解压缩 OracleJET-CommonModel-CRUD.zip 后，您的系统中应该会生成以下应用文件和文件夹：

图 3：OracleJET-CommonModel-CRUD 示例应用的文件结构。

在后续几节中，您将修改上述某些文件的内容，并根据需要更改现有应用功能。但是在此之前，您需要配置一个 RESTful 服务，以便示例应用从底层数据库中检索数据。

针对数据库表配置 RESTful 服务

REST（表述性状态转移）正在快速成为 Web 上重要的数据访问标准。为了简化为关系数据开发 REST 接口的过程，Oracle 提供了 Oracle REST Data Services (ORDS)。由于我们主要通过 Oracle SQL Developer 工具来管理 Oracle REST Data Services，所以本节中的步骤将向您说明如何使用 Oracle SQL Developer 中的 ORDS 特性针对数据库表配置 RESTful 服务。

虽然如上文所述，Oracle SQL Developer 中捆绑了 ORDS，但仍然需要先安装才能正常使用。如需详细了解如何使用 SQL Developer 的 ORDS 安装向导安装 ORDS，请参阅使用 SQL Developer 安装和管理 REST Data Services 上机操作。完成上机操作中的相关步骤后，您可以检查是否能够通过 Web 浏览器连接自己刚才通过 SQL Developer 安装的 ORDS。为此，请在浏览器地址栏中输入 http://localhost:9090/ords/（若您将 9090 指定为 ORDS 监听的 HTTP 端口）。

图 4：检查能否通过浏览器连接 ORDS。

当然，您将看到 ORDS 404 Not Found 页面，然而这并不代表您的操作有误。这只是表示 ORDS 正在运行，但目前无法建立连接。

接下来，您需要让 ORDS 查询能够访问必要的数据库模式对象。在这个示例中，您需要让 ORDS 访问 HR 示例模式中的 departments 数据库表。我们可以通过 Oracle SQL Developer 的 RESTful Services Wizard 轻松实现此目的。具体操作步骤如下：

-在 Oracle SQL Developer 中，转至 Connections 导航器，然后展开 HR 模式。如果列表中没有 HR 模式，则为此模式新建一个连接。

-在 Connections 导航器中，展开 HR 下的 Tables(Filtered)。然后右键点击 DEPARTMENTS，并从弹出窗口中选择 Enable REST Service…，以启动 RESTful Services Wizard。

-在向导的第 1 步中，选中 Enable object 复选框并取消选中 Authorization required 复选框，同时保持 Object alias 的值不变（在本示例中应为 departments）。

-在向导的下一页中查看摘要信息，然后点击 Finish。最后，您应该看到 Successfully processed SQL command 信息页面。

完成上述步骤后，您将能够使用以下 URL 访问 departments 数据库表中的数据：http://localhost:9090/ords/hr/departments/。

图 5：您刚才创建的 REST 服务的输出。

现在已经能够通过 REST 服务访问 departments 表的数据。您可以转到已解压缩至系统中的 OracleJET-CommonModel-CRUD 示例应用，修改其代码以便使用此 REST 服务。

调整现有代码

实际上，您只需要修改 OracleJET-CommonModel-CRUD 示例中的两个文件：main.js 和 app.js，对其现有代码做一些微小调整。

让我们转到系统中解压缩 OracleJET-CommonModel-CRUD.zip 的文件夹，展开 js 文件夹。在此文件夹中，找到并打开 main.js 文件。您只需要在此文件中做两处调整。这是您必须修改的第一个 getJSON 函数参数。我们必须将它更改为您在之前一节中创建的 REST 服务的 URL。另外，这是将传递给在这里创建的模拟 REST 服务器的 id 参数的值：

…

$(document).ready(function() {

$.getJSON("http://localhost:9090/ords/hr/departments/",

function (data) {

 new MockRESTServer(data, {collProp:data 


responseTime:1000, id:"department_id", 

url:/^http:\/\/mockrest\/stable\/rest\/Departments(\?limit=([\d]*))?$/i,

idUrl:/^http:\/\/mockrest\/stable\/rest\/Departments\/([\d]+)$/i});  

…

保存更改，关闭 main.js 文件。

现在，让我们打开同样位于 js 文件夹下的 app.js 文件，找到 viewModel 函数中的 parseDept(response) 函数。按如下所示更改 parseDept 函数的代码：

function parseDept(response) {

  if (response['items']) {

 var innerResponse = response['items'][0];

return {DepartmentId: innerResponse['department_id'], 

DepartmentName: innerResponse['department_name']};

}

return {DepartmentId: response['department_id'], DepartmentName: 

 response['department_name'], LocationId:response['location_id'], 

ManagerId:response['manager_id']};

}

您可以看到，相比于原始版本，修改后的 parseDept 函数不再包含与 Employees 链接相关的代码。这是因为通过我们的 REST 服务（返回图 5）检索到的 JSON 文档中的部门对象不包含这种链接。

接下来，我们转到 parseSaveDept 函数，按如下所示更改其代码：

function parseSaveDept(response) {

return {DepartmentId: response['department_id'], 

DepartmentName: response['department_name'],
LocationId:response['location_id'], ManagerId:response['manager_id']};

}

好了，不再需要做其他更改了。保存并关闭 app.js 文件。

在测试应用之前，请确保 Oracle REST Data Services 正在运行。如果使用 Oracle SQL Developer，您可以在 Processes 窗格中看到正在运行的 Oracle REST Data Services 进程。如果该窗格中没有显示 ORDS 进程，那么您可以转到 Tools/REST Data Services/Run… 菜单，通过 ORDS Run Wizard 启动该进程。

要测试应用，您可以直接双击 index.html 文件，在浏览器中调用它：

图 6：文中示例应用页面（片段）。

总结

在这篇文章中，我们通过示例向您介绍了如何构建能够通过 ORDS 服务与 Oracle 数据库交互的 Oracle JET 应用。为了简化开发，您使用了一个经全面预配置的示例应用作为模板来创建文中的示例应用。

另请参见：

Oracle JET 入门
甲骨文全球大会 2016 上机操作
使用 Oracle JET 构建基于浏览器的 UI
Oracle REST Data Services OTN 网站
JET Site 简明手册

关于作者

Yuli Vasiliev 是一名软件开发人员、自由撰稿人和顾问，目前专攻开源开发、数据库、商务智能 (BI)、机器学习和虚拟化。他著有一系列有关 Oracle 技术的图书，包括《Oracle Business Intelligence:An introduction to Business Analysis and Reporting》 (Packt Publishing) 以及 《PHP Oracle Web Development:Data processing, Security, Caching, XML, Web Services, and Ajax》(Packt Publishing)。