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

这篇文章是由同行评审Agbonghama柯林斯 感谢所有SitePoint的审稿作出SitePoint内容也可以是最好的!

数据量正在迅速发展,他们正在变得越来越复杂,维护。 许多开发人员希望避免由数据问题他们的工作过程中造成的问题和头痛。

一个使我们的工作更轻松的图书馆是Breeze.js 在这篇文章中,我们将讨论我们如何能够写出更好的查询与Breeze.js。 但是首先,我们应该知道什么是Breeze.js和创建它的原因。

什么是Breeze.js?

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

关于Breeze.js最好的事情是,它并没有反映在服务器端模型,但它动态地创建它。 随着微风,缓存的数据是在客户端。 它并不需要查询服务器,因为它可以查询缓存代替。 它在本地和离线保存缓存。 当它重新连接时,它同步的变化。

Breeze.js的最强点中有两个是丰富的查询和变更跟踪。 四种有效的方法来查询是过滤器排序分页预测 查询需要的帮助来执行,这就是清风的EntityManager进来。每个实体跟踪其自身改变的状态中。 我们将在后面讨论这个问题。

Breeze.js有很多框架,包括AngularJS,Backbone.js的,淘汰赛,Node.js和受其他许多行之有效的。

现在,让我们来看看如何设置环境并获得编码。

如何安装

微风可以从它在GitHub库中下载。 微风中最常见的版本是:

  • breeze.debug.js -这是标准的客户端库,我建议使用。 它有一个第三方库,包括骨干网和淘汰赛的支持。
  • breeze.min.js - Breeze.min.js是缩小的breeze.debug.js,其大小175 KB相比breeze.debug.js的大小,这是602 KB。

还有另外两种方式来获得微风:通过鲍尔NPM 我更喜欢使用鲍尔,因为我更熟悉它。 打开终端,然后进入客户端目录并运行这两个命令来获得微风:

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

为了包括微风入项目,则应该包括这里面的脚本标记<body>您的网页:

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

不支持的ECMAScript 5老的浏览器可能会导致微风问题。 薄垫片库要启用这些浏览器ES5语法。 对于Internet Explorer用户,建议输入验证码里面<head>标签,以避免兼容模式的问题。

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

微风也需要一些扩展正常工作

  • 数据服务
  • 一个JavaScript组件,其执行AJAX请求
  • 数据绑定的模型库(如敲除)
  • 一个承诺库

以行动证明微风,在下一节中,我将告诉你如何获得一个微风的样例应用程序启动和运行。 这将包括所有的这些东西开箱。

先决条件示例应用程序

以运行示例应用程序,你需要的Node.js和MongoDB您的计算机上安装。

Node.js的是免费使用,并且可以从下载项目的主页 如果你有凉亭或NPM您的计算机上,你也有安装节点。 如果您在安装节点故障,然后看看我们对NPM教程(包括在此一节): 初学者指南,以NPM

MongoDB的可以从他们的下载下载页面 他们如何安装指南对所有主要的操作系统。

设置样本应用程序

要做的第一件事就是抢副本微风JavaScript客户端示例应用程序 要做到这一点,最简单的方法是使用Git:

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

在该项目中,导航到node/zza-node-mongo文件夹:

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

这里你可以看到三个文件夹: clientdatabaseserver database文件夹解压zza-mongo-database.zip

 cd database
unzip zza-mongo-database.zip
 

现在,我们需要找出的名称MongoDB使用读取和写入其数据的目录 默认情况下,这是/data/db在Linux和OS X和\data\db上的Windows。 不过,如果你使用的软件包管理器安装的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 install
 

安装在鲍尔组件后,您需要导航到该服务器文件夹/node/zza-node-mongo/server和安装节点模块:

 npm install
 

然后,从同一个文件夹中启动应用程序服务器:

 node server.js
 

最后一步是打开浏览器,然后导航到HTTP://本地主机:3000 如果你看到下面的图中,您按照所有正确的步骤。 如果没有,回去经过以上,以确保您已经正确所做的一切步骤,并咨询此页面获取更多信息。

ZZA应用程序欢迎屏幕

写得更好查询

在我们审视的CRUD应用程序架构,这是很好的了解一些这有助于我们写出更好的查询微风组件。 要了解的第一件事是微风的EntityManager 实体管理器是通往持久化服务,并持有该应用程序正在与实体的高速缓存。 这些包括已查询,添加,更新,并标记为删除的实体。

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

serviceName用于查找服务端点和网络API控制器的路线。

过滤器

有微风编写查询是非常简单明了。 例如,看一下这个查询,显示订单放在2010年2月1日以后。

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

另一种好方法与微风编写查询是通过与谓词复合条件。 谓词是真或假的条件。 让我们结合两个谓语用.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));
 

排序

查询的另一种类型的排序。 用于分类产品降序名称顺序微风代码如下所示。 它的代码是非常具有可读性。

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

微风有三种类型的排序 这些都是单一属性的排序,多个属性排序和相关特性分类。

分页

寻呼是返回查询的结果在数据的较小的子集或,换言之,页的过程。 寻呼在微风可以通过两种方式来完成,用skip()take()

为了得到与字母“E”开头的第一个五年的产品,我们可以做到以下几点:

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

跳过使用,当你不希望采取对象的指定数量,而是返回了他们的剩余部分。 下面的代码跳过前五种产品,并返回休息。 有必要使用.orderBy().skip()因为这是由许多服务器端数据服务所需。

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

预测

投影查询,您可以查询这些人恰恰是你确实需要一个实体的属性。 让我们来看看显示微风简单推算其返回以字母“C”开头的客户名称的示例。

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

四种类型的物业预测的 :单数据,单导航,多个属性和相关属性的预测。

如果您想了解微风查询的详细信息可以咨询他们丰富的文档

简单的应用程序体系结构

现在,让我们回到应用程序,我们已经并在上一节中运行(如果一切顺利的话,应该还是可以在HTTP://本地主机:3000 )。

ZZA! 是一个CRUD应用程序的订购比萨,沙拉和饮料。 它使用的BMEAN堆 (其代表微风+ MEAN)。

正如我们前面所看到的,应用程序的一部分,我们感兴趣的是( breeze.js.samples/node/zza-node-mongo )包含代表客户机,服务器和数据库文件夹。 database文件夹包含数据库(顾名思义)。 server文件夹中包含了相关节点和Express文件。 现在,让我们专注于客户端,看看是在client folder

客户端文件夹结构

这是最重要的组成部分:

  • index.html -最该文件被占用CSS和JavaScript文件加载。
  • app -该文件夹包含AngularJS应用模块,它的指令,服务和意见。
  • bower -此文件夹中,你可以找到所有这些我们通过命令行客户端安装的组件。
  • css -这里所有的应用程序的样式表的位置。
  • images -图像和glyphicons的应用程序可以在此文件夹中找到。

里面index.html ,这是门应用,许多CSS和JavaScript文件被加载。 在身体index.html是有位布局的,但主要是<script>导致角组件,应用程序脚本,控制器和服务标记。

 <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是应用程序的肌肉。 它动态负载模板的意见,以及页眉和页脚。 您可能会注意到3个div标签,每一个data-ui-view属性。 正是在这里,模板化的观点被加载。 大多数的应用程序活动发生在内部div id为标签shell-content 这显示了订单页面,产品页面,大部分我们所看到的。

微风控制所有应用程序的数据的行为和活动。 微风EntityManager重点是查询,缓存,更改跟踪,验证和保存实体数据。 在这种应用中,控制器通过使数据请求dataservice ,这可以在这里找到client/app/services/dataservice

结论

在这篇文章中,我们讨论了Breeze.js,其功能和一些例子查询证明微风如何简化我们的工作,为开发者。 希望您现在对如何建立微风和理解一个示例应用程序的体系结构的想法。

微风使用,因为它降低了代码,我们需要编写量,从而节省了我们的时间,使我们更富有成效的好工具。 如果你们正在处理大量上你的项目的数据,我强烈建议学习微风。 我很想听听在下面的评论你对Breeze.js的想法。

From: https://www.sitepoint.com//better-queries-with-breeze-js/

版权声明:本文为dingshi7798原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dingshi7798/article/details/105818654

智能推荐

剑指offer 合并两个排序的链表

题目 链接:https://leetcode-cn.com/problems/he-bing-liang-ge-pai-xu-de-lian-biao-lcof/ 思路 我想的是,与合并两个有序数组一样的思维,新建一个链表,然后判断谁的值大,进而在新的链表上面进行插入。 看书思路 合并链表是一个递归问题:合并一个节点后可以转化为一个子问题。终止条件是其中一个链表为空 代码 链表反转也可以用递归解决...

Java编程思想 第三章:操作符

Java中的操作符和c/c++中的操作符基本一致,因为我之前学习过C语言和C++,所以本章的内容大部分都已熟知,下面只做简单的介绍。 Java操作符及优先级 Java中的操作符包括算术操作符,关系操作符,逻辑操作符,位运算符、自操作运算符、移位运算符、赋值运算符和其他运算符。 算术操作符:包括加减乘除和取余(%),优先级乘除取余高于加减,都是双元运算符,其中加法(+)可以用来连接两个字符串,比如:...

JetBrains 系列开发工具,如何配置 `SCSS` `File Watcher` ,相关输出配置参数详解:webStorm phpStorm IDEA

JetBrains 系列开发工具,如何配置 SCSS File Watcher ,相关输出配置参数详解:webStorm phpStorm IDEA 前言 你目前已经了解了如何使用 SCSS 进行开发,了解了该文章的内容:『 SCSS 日常用法 』 在 JetBrains 系列开发工具中通过 FileWatcher 进行编译的 SCSS 文件都是通过 sass 这个程序进行的。『 如何添加 Fil...

C语言小函数—二进制与十六进制

测试如下 “` int main() { long int num = 15; } “`...

仿微博或微信的文章多图显示(自定义MultiImageView)

按照一般的规矩,先上张图来供大伙看看 如果大致是大伙们需要实现的功能,不烦一观 自定义MultiImageView 工具类 具体使用 app.gradle中添加依赖 implementation 'com.github.bumptech.glide:glide:4.8.0' AndroidManifest.xml中配置联网权限 <uses-permission android:name=&q...

猜你喜欢

经典进程同步和互斥问题

经典进程同步与互斥问题 前言 一、生产者-消费者问题 1.问题描述 2.问题分析 3.代码 二、读者-写者问题 1.问题描述&&分析 2.代码 三、哲学家进餐问题 1.问题描述&&分析 2.代码 四、理发师问题 1.问题描述&&分析 2.代码 前言 在多道程序设计环境中,进程同步是一个非常重要的问题,下面讨论几个经典的进程同步问题。 一、生产者-消费...

java设计模式——ThreadLocal线程单例

1、定义一个ThreadLocal线程单例,代码如下: 2、定义一个多线程类,代码如下: 3、定义一个测试类,代码如下: 4、输出结果,如下图:...

【tensorflow】线性模型实战

线性模型:y = 1.477 * x + 0.089   1. 采样数据 采样噪声eps在均值0,方差0.01的高斯分布中,而后在均匀分布U(0,1)中,区间[-10,10]进行n=100次随机采样:   2. 计算误差 循环计算每个点的预测值与真是值之间差的平方并累加,从而获得训练集上的均芳误差损失值。   3. 计算梯度   4. 梯度更新 对权重w和偏...

常见损失函数和评价指标总结(附公式&代码)

网上看到一篇很实用的帖子关于常见损失函数和评价指标,收藏下来 本文转载于https://zhuanlan.zhihu.com/p/91511706 ------------------------------------------------------------------------------------------------------------------------------...

为什么 4G/5G 的直播延时依然很高

通信技术的发展促进了视频点播和直播业务的兴起,4G 和 5G 网络技术的进步也使得流媒体技术变得越来越重要,但是网络技术并不能解决流媒体直播的高延迟问题。 本文不会介绍网络对直播业务的影响,而是会分析直播中常见的现象 — 主播和观众之间能够感觉到的明显网络延迟。除了业务上要求的延迟直播之外,有哪些因素会导致视频直播的延迟这么高呢? live-streaming  图 1 - ...