使用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

智能推荐

RIP/DHCP/ACL综合实验

组播: 加入组的组成员才会接受到消息,只需要将流量发送一次到组播地址 减少控制面流量,减少头部复制, RIP1  广播   有类  不支持认证 RIP2  组播   无类  (支持VLAN)、支持认证 所有距离矢量路由协议:具有距离矢量特征的协议,都会在边界自动汇总 控制平面  路由的产生是控制平面的流量 数据平面  ...

【Sublime】使用 Sublime 工具时运行python文件

使用 Sublime 工具时报Decode error - output not utf-8解决办法   在菜单中tools中第四项编译系统 内最后一项增添新的编译系统 自动新建 Python.sublime-build文件,并添加"encoding":"cp936"这一行,保存即可 使用python2 则注释encoding改为utf-8 ctr...

java乐观锁和悲观锁最底层的实现

1. CAS实现的乐观锁 CAS(Compare And Swap 比较并且替换)是乐观锁的一种实现方式,是一种轻量级锁,JUC 中很多工具类的实现就是基于 CAS 的,也可以理解为自旋锁 JUC是指import java.util.concurrent下面的包, 比如:import java.util.concurrent.atomic.AtomicInteger; 最终实现是汇编指令:lock...

Python 中各种imread函数的区别与联系

  原博客:https://blog.csdn.net/renelian1572/article/details/78761278 最近一直在用python做图像处理相关的东西,被各种imread函数搞得很头疼,因此今天决定将这些imread总结一下,以免以后因此犯些愚蠢的错误。如果你正好也对此感到困惑可以看下这篇总结。当然,要了解具体的细节,还是应该 read the fuc...

用栈判断一个字符串是否平衡

注: (1)本文定义:左符号:‘(’、‘[’、‘{’…… 右符号:‘)’、‘]’、‘}’……. (2)所谓的字符串的符号平衡,是指字符串中的左符号与右符号对应且相等,如字符串中的如‘(&r...

猜你喜欢

JAVA环境变量配置

位置 计算机->属性->高级系统设置->环境变量 方式一 用户变量新建path 系统变量新建classpath 方式二 系统变量 新建JAVA_HOME,值为JDK路径 编辑path,前加 方式三 用户变量新建JAVA_HOME 此路径含lib、bin、jre等文件夹。后运行tomcat,eclipse等需此变量,故最好设。 用户变量编辑Path,前加 系统可在任何路径识别jav...

常用的伪类选择器

CSS选择器众多 CSS选择器及权重计算 最常用的莫过于类选择器,其它的相对用的就不会那么多了,当然属性选择器和为类选择器用的也会比较多,这里我们就常用的伪类选择器来讲一讲。 什么是伪类选择器? CSS伪类是用来添加一些选择器的特殊效果。 常用的为类选择器 状态伪类 我们中最常见的为类选择器就是a标签(链接)上的为类选择器。 当我们使用它们的时候,需要遵循一定的顺序问题,否则将可能出现bug 注意...

ButterKnife的使用介绍及原理探究(六)

前面分析了ButterKnife的源码,了解其实现原理,那么就将原理运用于实践吧。 github地址:       点击打开链接 一、自定义注解 这里为了便于理解,只提供BindView注解。 二、添加注解处理器 添加ViewInjectProcessor注解处理器,看代码, 这里分别实现了init、getSupportedAnnotationTypes、g...

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。考试复习题库1|要求:只能使用单字符比较操作。

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。 要求只能使用单字符比较操作。 参考代码: 实验结果截图:...

小demo:slideDown()实现二级菜单栏下拉效果

效果如下,鼠标经过显示隐藏的二级菜单栏 但是这样的时候会存在一个问题,就是鼠标快速不停移入移出会导致二级菜单栏闪屏现象,一般需要使用stop()来清除事件  ...