使用Breeze.js编写更好的查询
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 。 如果您看到下图,则已按照所有正确的步骤进行操作。 如果不是,请返回上述步骤以确保您正确完成了所有操作,并查阅此页面以获取更多信息。
编写更好的查询
在检查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
。
结论
在本文中,我们讨论了Breeze.js,其功能以及一些示例查询,以演示Breeze如何简化我们作为开发人员的工作。 希望您现在对如何设置Breeze和了解示例应用程序的体系结构有了一个想法。
Breeze是一个很好的使用工具,因为它减少了我们需要编写的代码量,从而节省了时间并提高了工作效率。 如果你们正在处理有关项目的大量数据,我强烈建议学习Breeze。 我希望在下面的评论中听到您对Breeze.js的想法。
From: https://www.sitepoint.com/better-queries-with-breeze-js/
使用Breeze.js编写更好的查询相关推荐
- breeze.linalg_使用Breeze.js编写更好的查询
breeze.linalg Agbonghama Collins对这篇文章进行了同行评审. 感谢所有SitePoint的同行评审员使SitePoint内容达到最佳状态! 数据量正在Swift增长,并且 ...
- filter vue 循环_详解在Vue.js编写更好的v-for循环的6种技巧
在vuejs中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环. 在最基本的用法中,它们的用法如下. {{ product.name }} 但是,在本文中,我将介绍六种方法 ...
- 如何编写更好的SQL查询:终极指南-第二部分
上一篇文章中,我们学习了 SQL 查询是如何执行的以及在编写 SQL 查询语句时需要注意的地方. 下面,我进一步学习查询方法以及查询优化. 基于集合和程序的方法进行查询 反向模型中隐含的事实是,建立查 ...
- 如何编写更好的SQL查询:终极指南-第三部分
本次我们学习<如何编写更好的SQL查询>系列的最后一篇文章. 时间复杂度和大O符号 通过前两篇文章,我们已经对查询计划有了一定了解.接下来,我们还可以借助计算复杂度理论,来进一步深入地挖掘 ...
- 一个能够编写、运行SQL查询并可视化结果的Web应用:SqlPad
SqlPad 是一个能够用于编写.运行SQL查询并可视化结果的Web应用.支持 PostgreSQL.MySQL 和 SQL Server.SqlPad 目前仅适合单个团队在内网中使用,它直接通过网络 ...
- 使用自定义DelegatingHandler编写更整洁的Typed HttpClient
使用自定义DelegatingHandler编写更整洁的Typed HttpClient 简介 我写了很多HttpClient[1],包括类型化的客户端.自从我发现Refit[2]以来,我只使用了那 ...
- 使用 ES6 编写更好的 JavaScript Part II:深入探究 [类]
本文讲的是使用 ES6 编写更好的 JavaScript Part II:深入探究 [类], 在本文的开始,我们要说明一件事: 从本质上说,ES6 的 classes 主要是给创建老式构造函数提供了一 ...
- 用p5.js编写简单的动态图形——波纹扩散
用p5.js编写简单的动态图形--波纹扩散 第一次使用p5.js写程序,如有错误请指出,多多指教. 没有下载p5.js的小伙伴可以直接使用网页版的,简单注册一个账号之后就可以保存代码啦. 网站:htt ...
- js array formdata_开源软件分享:一个免ROOT支持用JS编写自动化脚本的神器
最近在逛github时发现一个不错的安卓开源项目,支持用javascript编写自动化脚本,可以模拟人工点击.滑动等一系列操作. auto.js Auto.js 简介 一个支持无障碍服务的Androi ...
最新文章
- Paddle内置的网络模型
- 【Tyvj - 1305】最大子序和(单调队列优化dp)
- 微信气泡主题设置_微信猫和老鼠主题怎么弄?猫和老鼠聊天气泡主题设置教程...
- 适用于各种连锁企业15寸多点触摸android收款机消费机pos机
- Struts2 s:iterator 用法
- 练字和平时写字完全不一样怎么办?
- 设备\Device\Harddisk1\DR1 有一个不对的区块
- 计算机图形学红绿蓝组合颜色,二、颜色_计算机图形学(部分章节二)_ppt_大学课件预览_高等教育资讯网...
- 《马克思主义基本原理》复习整理
- 天创速盈电商:拼多多用户群体分析
- mounted和created的区别
- 【Linux】僵尸进程(Z状态)和孤儿进程
- MySQL-语句块-循环语句
- SpringBoot + Shiro 实现微博登录
- word方案基本结构格式记录
- oppo服务器暂时不可用,oppo手机网络连接不可用是怎么回事
- 关于myeclipse10.7破解的问题(破解不成功显示只有五天可用可激活)
- 离散题目10(判断是否为满射函数 )
- element-plus打包报错/vue3.0+vite+ts别名引入ts文件报错
- 软件 黑苹果盒盖不休眠_如何设置mac盖上盖子不休眠