使用Breeze.js编写更好的查询

最新推荐文章于 2024-04-16 09:55:19 发布

dingshi7798

最新推荐文章于 2024-04-16 09:55:19 发布

阅读量269

点赞数

文章标签：数据库 git javascript ViewUI

Agbonghama Collins对这篇文章进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

数据量正在迅速增长，并且维护变得越来越复杂。许多开发人员希望避免在工作过程中由于数据问题引起的问题和头痛。

Breeze.js是使我们的工作更轻松的库之一。在本文中，我们将讨论如何使用Breeze.js编写更好的查询。但是首先，我们应该知道什么是Breeze.js以及为什么创建它。

什么是Breeze.js？

Breeze.js是一个JavaScript库，可以帮助我们管理富客户端应用程序中的数据。 Breeze本机运行在每种浏览器中，并支持客户端查询，缓存和动态对象图。

Breeze.js的最好之处在于它不镜像服务器端模型，而是动态创建的。使用Breeze，缓存的数据位于客户端。它不需要查询服务器，因为它可以查询缓存。它在本地和离线保存缓存。重新连接后，它会同步更改。

Breeze.js的两个优点是丰富的查询和更改跟踪。四种强大的查询方式是过滤器，排序，分页和投影。查询需要帮助来执行，这是Breeze EntityManager进入的地方。每个实体都跟踪其自己的更改状态。我们将在后面讨论。

Breeze.js在许多框架（包括AngularJS，Backbone.js，Knockout，Node.js等）中都可以很好地工作。

现在让我们看一下如何设置环境并进行编码。

如何安装

可以从GitHub上的存储库下载Breeze。 Breeze最常见的版本是：

breeze.debug.js —这是我建议使用的标准客户端库。它支持第三方数据库，包括Backbone和Knockout。
breeze.min.js — Breeze.min.js是缩小的breeze.debug.js，与breeze.debug.js的大小602 KB相比，其大小为175 KB。

还有两种获取微风的方法：通过Bower和npm 。我更喜欢使用Bower，因为我对它更加熟悉。打开终端，然后转到客户端目录并运行以下两个命令以获取Breeze：

bower install breeze-client
bower install breeze-client-labs

为了将Breeze包含到项目中，应在页面的<body>中包含以下脚本标记：

<script src="bower_components/breeze-client/build/breeze.debug.js"></script>

不支持ECMAScript 5的旧版浏览器可能会导致Breeze出现问题。必须具备填充程序库才能在这些浏览器上启用ES5语法。对于Internet Explorer用户，建议在<head>标记内输入此代码，以避免兼容性模式问题。

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>

Breeze还需要一些扩展才能正常工作：

数据服务
一个执行AJAX请求的JavaScript组件
用于数据绑定的模型库（例如Knockout）
一个承诺库

为了演示Breeze的实际作用，在下一部分中，我将向您展示如何启动和运行Breeze的示例应用程序之一。这将包括所有这些现成的东西。

示例应用程序的先决条件

为了运行示例应用程序，您将需要在计算机上安装Node.js和MongoDB。

Node.js是免费使用的，可以从项目的主页下载。如果您的计算机上装有Bower或npm，则还需要安装Node。如果您在安装Node时遇到问题，请查看有关npm的教程（包括有关此内容的部分）： npm入门指南

可以从其下载页面下载MongoDB。他们提供了有关如何在所有主要操作系统上进行安装的指南。

设置示例应用

首先要做的是获取Breeze JavaScript Client示例应用程序的副本。最简单的方法是使用Git：

git clone https://github.com/Breeze/breeze.js.samples.git

在项目内，导航到node/zza-node-mongo文件夹：

cd breeze.js.samples/node/zza-node-mongo

在这里，您将看到三个文件夹： client ， database和server 。在database文件夹中，解压缩zza-mongo-database.zip 。

cd database
unzip zza-mongo-database.zip

现在我们需要找出MongoDB用于读取和写入其数据的目录的名称。默认情况下，在Linux和OS X上为/data/db ，在Windows上为\data\db 。但是，如果您使用软件包管理器安装了MongoDB，请检查软件包提供的/etc/mongod.conf文件以查看指定的目录。对我来说（在Linux上）是/var/lib/mongodb 。

现在将文件移动到该目录：

sudo mv zza.0 zza.1 zza.ns /var/lib/mongodb/

并将文件的所有权更改为mongodb:nogroup ：

sudo chown mongodb:nogroup /var/lib/mongodb/zza.*

如果mongodb服务器未运行，请在指向此数据库目录的同时启动它：

sudo service mongod start

返回客户端文件夹/node/zza-node-mongo/client安装Bower软件包：

bower install

安装Bower组件后，您需要导航到服务器文件夹/node/zza-node-mongo/server并安装Node模块：

npm install

然后，从同一文件夹中启动应用服务器：

node server.js

最后一步是打开浏览器并导航到http：// localhost：3000 。如果您看到下图，则已按照所有正确的步骤进行操作。如果不是，请返回上述步骤以确保您正确完成了所有操作，并查阅此页面以获取更多信息。

zza应用程序欢迎屏幕

编写更好的查询

在检查CRUD应用程序体系结构之前，最好了解一些Breeze组件，这些组件可以帮助我们编写更好的查询。首先要了解的是Breeze EntityManager 。 EntityManager是持久性服务的网关，并保存应用程序正在使用的实体的缓存。这些包括已被查询，添加，更新和标记为删除的实体。

var serviceName = 'breeze/todos';
var manager = new breeze.EntityManager(serviceName);

serviceName用于查找服务端点和到Web API控制器的路由。

筛选器

使用Breeze编写查询非常简单明了。例如，查看此查询，该查询显示2010年2月1日之后下的订单。

var query = EntityQuery.from('Orders')
    .where('OrderDate', '>', new Date(2010, 1, 1))

使用Breeze编写查询的另一种好方法是通过带谓词的复合条件。谓词是对或错的条件。让我们将两个谓词与.and() （ AND运算符）结合起来AND以创建一个对两个条件都成立的表达式。

在下面的示例中，第一个谓词选择所有价格超过60美元的披萨。第二个选择所有在2015年1月15日之后下的订单。当它们与.and()结合使用时，它们将创建一个查询，该查询将选择所有价格超过60美元且在2015年1月15日之后订购的比萨。

var q1 = new Predicate('Pizza', '>;', 60);
var q2 = new Predicate('OrderDate', '>', new Date(2015, 0, 15));
var query = baseQuery.where(q1.and(q2));

排序

另一种查询类型是排序。用于按名称降序对产品进行排序的Breeze代码如下所示。其代码非常易读。

var query = EntityQuery.from('Products')
    .orderBy('ProductName desc');

微风分为三种类型。这些是单属性排序，多属性排序和相关属性排序。

分页

分页是在较小的数据子集（即页面）中返回查询结果的过程。 Breeze中的分页可以通过两种方式完成，即skip()和take() 。

为了获得以字母“ E”开头的前五个产品，我们可以执行以下操作：

var query = EntityQuery.from('Products')
    .where('ProductName', 'startsWith', 'E')
    .take(5)

当您不想获取指定数量的对象，而是返回剩余的对象时，将使用“跳过”。下面的代码跳过前五个产品，并返回其余的产品。必须将.orderBy()与.skip()因为许多服务器端数据服务都需.skip() 。

var query = EntityQuery.from('Products')
    .orderBy('ProductName')
    .skip(5);

投影

投影查询使您可以精确查询实际需要的实体的那些属性。让我们看一个示例，该示例在Breeze中显示一个简单的投影，该投影返回以字母“ C”开头的客户名称。

var query = EntityQuery.from('Customers')
     .where('CompanyName', 'startsWith', 'C')
     .select('CompanyName');

属性投影有四种类型：单个数据，单个导航，多个属性和相关的属性投影。

如果您需要有关Breeze查询的更多信息，可以查阅其大量文档。

简单的应用架构

现在，让我们回到上一部分中已启动并运行的应用程序（如果一切顺利，则仍可以在http：// localhost：3000上找到该应用程序）。

za！是一个CRUD应用程序，用于订购比萨饼，沙拉和饮料。它使用BMEAN堆栈（代表Breeze + MEAN）。

如前所述，我们感兴趣的应用程序部分（ breeze.js.samples/node/zza-node-mongo ）包含代表客户端，服务器和数据库的文件夹。 database文件夹包含数据库（顾名思义）。 server文件夹包含相关的Node和Express文件。现在，让我们专注于客户端，查看client folder 。

客户端文件夹结构

这些是最重要的组件：

index.html该文件的大部分被CSS和JavaScript文件加载占用。
app -该文件夹包含AngularJS应用模块，它的指令，服务和意见。
bower在此文件夹中，您可以找到我们通过命令行在客户端安装的所有组件。
css应用程序的所有样式表都位于此处。
images -在该文件夹中可以找到该应用程序的图像和字形。

在index.html （这是应用程序的大门）的内部，加载了许多CSS和JavaScript文件。在index.html的正文中有一些布局，但是大多数<script>标签会导致Angular组件，应用程序脚本，控制器和服务。

<body class="ng-cloak" data-ng-app="app">

  <!--  Shell of the Sample App  -->
  <div data-ui-view="header"></div>

  <div id="shell-content" data-ui-view="content"></div>

  <div data-ui-view="footer"></div>

  <!--  Vendor Scripts  -->
  ...

  <!--  Application scripts  -->
  <script src="app/app.js"></script>  <!-- must load first -->
  <script src="app/appStart.js"></script>

  <!-- Feature Areas: controllers -->
  ...

  <!-- Directives & Routing -->
  ...

  <!-- Services -->
  <script src="app/services/config.js"></script>
  ...
</body>

AngularJS是应用程序的强大力量。它动态加载模板视图以及页眉和页脚。您可能会注意到三个div标签，每个标签都有一个data-ui-view属性。模板视图就是在这里加载的。大多数应用程序活动都在具有id shell-content的div标签内进行。这显示了订单页面，产品页面以及我们看到的大部分内容。

微风控制所有应用程序的数据动作和移动。 Breeze EntityManager专注于查询，缓存，更改跟踪，验证和保存实体数据。在此应用程序中，控制器通过dataservice发出数据请求，该请求可在client/app/services/dataservice 。