[ 登录注册 ]

语言

8.1:SportsStore:Orders and Administration

2017-07-14 09:42:23 admin 返回上一页

标签:des   style   class   blog   code   java   

本章,作者将通过收集和验证购物明细,来完成SportsStore应用,并在Deployd服务器上存储该订单。作者也构建了一个管理应用,允许认证用户查看订单,和管理产品分类。

1、准备实例项目

2、获取产品明细

在给用户显示购物车中的产品汇总后,作者将购物明细用于订单。这需要使用AngularJS的表单特性,你会在大多数web应用中需要。作者已经创建Views/placeOrder.html文件,捕获用户的购物明细。作者将介绍一些与表单相关度的特性,来避免重复大量相似的代码。作者首先添加一组数据属性(用户的名字和街道地址),然后再其他添加的属性。下面是placeOrder.html文件。

<h2>Check out now</h2><p>Please enter your details and we‘ll ship your goods right away!</p><div class="well"><h3>Ship to</h3><div class="form-group"><label>Name</label><input class="form-control" ng-model="data.shipping.name" /></div><h3>Address</h3><div class="form-group"><label>Street Address</label><input class="form-control" ng-model="data.shipping.street" /></div><div class="text-center"><button class="btn btn-primary">Complete order</button></div></div>

第一件事情,是作者没有使用ng-controller指令,来为视图指定一个控制器。这意味着视图会被顶级controller ,sportsStoreCtrl支持,该控制器管理包含ng-view指令的视图。当视图不需要任何额外控制器行为时,不用为部分视图定义控制器。

这里,AngularJS的一个重要特性是,在input元素上,使用ng-model指令。

<input class="form-control" ng-model="data.shipping.name"/>

该ng-model指令,设置了一个双向数据绑定。作者会在第10章深入解释数据绑定,但这里简短介绍。它使用{{}},是单向绑定,意味着简单地从scope显示一个值。该单向绑定的值可以被过滤,它可以是一个表达式,而不仅仅是一个数据值,单他是一个只读关系。如果scope改变,显示的值也会变。它只能从scope到binding。

双向数据绑定用于表单元素,允许用户输入值,改变scope。更新流在scope和data binding之间。通过一个JavaScript功能,执行更新scope数据属性。这里只要知道,如果用户在input元素中输入了一个值,该值被指派到通过ng-model指令指定的scope属性上,在本例中是,data.shipping.name属性和data.shipping.street属性。

提示:注意作者没有必要更新控制器,让他在scope上定义一个data.shipping对象,或单独的name或street属性。如果该属性不存在,AngularJS scopes会假设你想动态地定义一个属性。作者将在第13章深入讲。

 

2.1、添加表单校验

如果你写过任何种类的web应用,使用表单元素,你会知道用户会在input字段中输入任何东西。要确保你得到预期的数据,AngularJS支持form validation,允许检查值。

AngularJS表单校验,基于标准HTML属性,应用到表单元素,例如type和required。表达那校验会自动执行,但必须显示校验feedback给用户。

提示:HTML5在input元素上定义了一组新的type属性的值,能被用于该值是一个e-mail地址或一个数字。作者会在第12章解释。

 

2.1.1、准备校验

设置表单校验的第一步,是添加一个form元素到视图,并添加校验属性到作者的input元素。下面是placeOrder.html文件。

<h2>Check out now</h2><p>Please enter your details and we‘ll ship your goods right away!</p><form name="shippingForm" novalidate><div class="well"><h3>Ship to</h3><div class="form-group"><label>Name</label><input class="form-control" ng-model="data.shipping.name" required /></div><h3>Address</h3><div class="form-group"><label>Street Address</label><input class="form-control" ng-model="data.shipping.street" required /></div><div class="text-center"><button class="btn btn-primary">Complete order</button></div></div></form>

form元素有三个目的,作者没有使用浏览器为提交表单提供的内建支持的。

第一个目的,是启用校验。AngularJS使用自定义的指令,重定义了一些HTML元素,来启用制定特性,例如form。没有form元素,AngularJS不验证元素的内容,如inputselecttextarea等。

第二个谜底,form元素禁用浏览器可能会尝试执行的任何校验,它通过novalidate属性。该属性是标准的HTML5特性,它确保只有AngularJS检查数据。如果你忽略了novalidate属性,那么用户可能会得到冲突,或多次校验feedback,基于浏览器的会被使用。

最后的目的,form元素会定义一个变量,用于报告表单校验。它是通过name属性做的,作者将它设为shippingForm。当用户点击button按钮,用户表单的内容被验证时,该值用于显示feedback。

 

2.1.2、显示验证Feedback

一旦form元素和校验属性放置好,AngularJS开始校验用户提供的数据,作者要为用户显示feedback。作者将在第12章详细讲解,但这里作者会用两种类型的feedback:定义CSS样式给AngularJS通过验证或没有通过验证的表单元素。可以使用scope变量控制feedback消息显示的元素的可见性。placeOrder.html文件:

<style>.ng-invalid { background-color: lightpink; }.ng-valid { background-color: lightgreen; }span.error { color: red; font-weight: bold; }</style><h2>Check out now</h2><p>Please enter your details and we‘ll ship your goods right away!</p><form name="shippingForm" novalidate><div class="well"><h3>Ship to</h3><div class="form-group"><label>Name</label><input name="name" class="form-control"ng-model="data.shipping.name" required /><span class="error" ng-show="shippingForm.name.$error.required">Please enter a name</span></div><h3>Address</h3><div class="form-group"><label>Street Address</label><input name="street" class="form-control"ng-model="data.shipping.street" required /><span class="error" ng-show="shippingForm.street.$error.required">Please enter a street address</span></div><div class="text-center"><button class="btn btn-primary">Complete order</button></div></div></form>

AngularJS会给表单元素制定ng-valid和ng-invalid classes。Form元素总是会持有这些样式中的一个。

该CSS样式表明校验的效果。所以作者必须给每个元素添加一个name属性,使用AngularJS添加到scope的校验数据,控制error消息的可见性。

<input name="street"class="form-control" ng-model="
data.shipping.street" required /><span class="error" ng-show="
shippingForm.street.$error.required">Please enter a street address</span>

input元素,用于捕获用户的街道,将name属性指派为street。AngularJS在scope上创建一个shippingForm.street对象(它是form元素的name和input元素的name的结合)。该对象定义一个$error属性,该属性是一个对象,为每个校验属性提供一个属性,表示input元素失败的原因。如果shippingForm.street.$error.required属性为真,知道street input元素通过没有校验通过,用于显示error消息给用户的空间,会执行ng-show指令。

记住:作者用的简单,但AngularJS可以用于创建更复杂的校验。

 

2.1.3、将按钮链接到校验

在多数web应用,用户在提供所有表单数据,并校验通过后,才能进入下一步。当表单没有通过校验,作者想禁用Complete order按钮,并在用户完成表单属性后,自动启用它。

要做到这点,作者要改进AngularJS添加到scope的校验信息。作者可以得到整个表单的状态。当input元素为没有通过校验,shippingForm.$invalid属性为true,作者将基于此,使用ng-disabled指令,管理按钮元素的状态。作者将在第11章描述ng-disable指令。

<div class="text-center"><button ng-disabled="shippingForm.$invalid"class="btn btn-primary">Complete order</button></div>

 

2.2、添加剩下的表单字段

现在你知道AngularJS是怎么进行表单校验的了,作者要将剩下的input元素添加到表单。

<style>.ng-invalid { background-color: lightpink; }.ng-valid { background-color: lightgreen; }span.error { color: red; font-weight: bold; }</style><h2>Check out now</h2><p>Please enter your details and we‘ll ship your goods right away!</p><form name="shippingForm" novalidate><div class="well"><h3>Ship to</h3><div class="form-group"><label>Name</label><input name="name" class="form-control"ng-model="data.shipping.name" required /><span class="error" ng-show="shippingForm.name.$error.required">Please enter a name</span></div><h3>Address</h3><div class="form-group"><label>Street Address</label><input name="street" class="form-control"ng-model="data.shipping.street" required /><span class="error" ng-show="shippingForm.street.$error.required">Please enter a street address</span></div><div class="form-group"><label>City</label><input name="city" class="form-control"ng-model="data.shipping.city" required /><span class="error" ng-show="shippingForm.city.$error.required">Please enter a city</span></div><div class="form-group"><label>State</label><input name="state" class="form-control"ng-model="data.shipping.state" required /><span class="error" ng-show="shippingForm.state.$error.required">Please enter a state</span></div><div class="form-group"><label>Zip</label><input name="zip" class="form-control"ng-model="data.shipping.zip" required /><span class="error" ng-show="shippingForm.zip.$error.required">Please enter a zip code</span></div><div class="form-group"><label>Country</label><input name="country" class="form-control"ng-model="data.shipping.country" required /><span class="error" ng-show="shippingForm.country.$error.required">Please enter a country</span></div><h3>Options</h3><div class="checkbox"><label><input name="giftwrap" type="checkbox"ng-model="data.shipping.giftwrap" />Gift wrap these items</label></div><div class="text-center"><button ng-disabled="shippingForm.$invalid"class="btn btn-primary">Complete order</button></div></div></form>

提示:你可能会尝试使用ng-repeat指令,来生成input元素。这样生成的,不能很好滴工作,因为有些指令属性值,如ng-modelng-show,是计算过的。作者建议这样做,单你想用更先进的技术,看第15-17章,作者会描述创建自定义指令的方式。

 

3、存储订单

本节,我们会扩展Deployd服务器提供的数据库,使用Ajax请求发送订单数据给服务器,在流程的最后,播放一个感谢信息。

 

3.1、扩展Deployd服务器

使用dashboard,选择collection,将集合的名字设为/orders,点击创建按钮。定义如下属性:

Name Type Required
name string Yes
street string Yes
city string Yes
state string Yes
zip string Yes
country string Yes
giftwrap boolean No
products array Yes

 

多花点注意,在gifwrap和products属性的类型上。

 

3.2、定义控制器行为

下一步要定义使用Ajax请求,发送订单给Deployd服务器的控制器行为。我可以以很多不同的方式定义该功能——创建一个服务或创建一个新的控制器。你可以以你喜欢的方式,构建,没有绝对的对与错。作者将保持一切都很简单,添加行为到顶级sportsStore控制器上,该控制器已经包含用Ajax请求加载产品数据的代码。

angular.module("sportsStore").constant("dataUrl" "http://localhost:5500/products").constant("orderUrl" "http://localhost:5500/orders").controller("sportsStoreCtrl" function ($scope $http $locationdataUrl orderUrl cart) {$scope.data = {};$http.get(dataUrl).success(function (data) {$scope.data.products = data;}).error(function (error) {$scope.data.error = error;});$scope.sendOrder = function (shippingDetails) {var order = angular.copy(shippingDetails);order.products = cart.getProducts();$http.post(orderUrl order).success(function (data) {$scope.data.orderId = data.id;cart.getProducts().length = 0;}).error(function (error) {$scope.data.orderError = error;}).finally(function () {$location.path("/complete");});}});

Depolyd会在数据库中创建一个新的对象,来相应POST请求,并返回刚刚创建的对象,包括id属性。

作者定义了一个新的constant,制定URL,你会用于POST请求,并添加一个cart服务的依赖,以得到产品明细。作者添加到控制器的行为叫做sendOrder,它将用户的购物明细,作为参数。

作者使用angular.copy工具方法,他在第5章描述过,用来创建shipping details对象的拷贝,所以他可以安全地操作它,而不影响应用的其他部分。该shipping details对象的属性,通过ng-model指令创建,代表作者的orders Deployd集合。左右要做的,就是定义一个products属性,来引用购物车中的products数组。

作者使用$http.post方法,创建一个Ajax POST请求指定URL和数据,他使用success和error方法,在第5章介绍过,来相应请求的结果。

作者也使用在$http.post方法返回的promise上,使用then方法。该then方法,持有一个功能,无论Ajax请求的结果如何,都会被调用。无论发生什么,他都想要显示相同的视图给用户,所以他使用then方法,调用$location.path方法。这是编程的方式设置URL的path组建,它将会通过第7章创建的URL配置,触发视图改变。

 

3.3、调用控制器行为

要调用心控制器行为,必须添加ng-click指令到shipping details视图的button元素。

<div class="text-center"><button ng-disabled="shippingForm.$invalid"ng-click="sendOrder(data.shipping)"class="btn btn-primary">Complete order</button></div

 

3.4、定义视图

作者定义的Ajax请求完成后的URL路径是/complete,该URL路由配置映射到/views/thankYou.html文件:

<div class="alert alert-danger" ng-show="data.orderError">Error ({{data.orderError.status}}). The order could not be placed.<a href="#/placeorder" class="alert-link">Click here to try again</a></div><div class="well" ng-hide="data.orderError"><h2>Thanks!</h2>Thanks for placing your order. We‘ll ship your goods as soon as possible.If you need to contact us use reference {{data.orderId}}.</div>

该视图定义了两个不同的内容块,来处理Ajax请求的success和unsuccessful。如果发生error,error的明细会显示,通过一个a链接,让用户返回到shipping details视图,让他可以再试一次。如果请求成功,为用户显示thank-you消息,包含新订单对象的id。

4、做改进

以后会做改进的地方:

第一,当你加载app.html文件到浏览器,你可能注意到一个小的延迟,在视图显示和products的元素和分类被生成。这是因为Ajax请求在后台获取数据,在等待服务器返回数据旗舰,AngularJS继续执行应用,并显示视图,当数据抵达后,在更新。在第22章,作者将描述如何使用URL路由特性,让AngularJS在Ajax请求已经完成后,再显示视图。

第二,作者将产品数据中的分类,提取出来,用于导航和分页特性。在一个真实的项目中,作者会考虑,在产品数据第一次抵达时,生成该信息。在第20章,作者描述如何使用promises,来构建行为链。

最后,作者使用$animate服务,在第23章介绍,当URL路径改变时,在视图切换时使用过度动画。

4.1、避免优化陷阱

你注意到,作者说要考虑重用分类和分页数据。这是因为任何类型的优化,都要十分小心,来确保它是明智的,并避免两个主要的陷阱。

第一个陷阱是,过早地优化。

第二个陷阱是,translation优化。

 

5、管理产品分类

要完成SportsStore应用,作者要创建一个应用,来允许管理员管理产品分类的内容,和订单队列。这回允许作者,演示AngularJS如何用于执行createreadupdatedelete操作。

记住:每个后端服务实现认证有不同的方式,但基本的前提是相同的:将用户的凭证,通过请求发送给制定URL,如果请求成功,浏览器会返回一个cookie,浏览器会在随后的请求中,自动发送该cookie,用以标识用户。本例中使用Deployd。

 

5.1、准备Deployd

给数据库做一些改变,有些事情只能管理员做。在这里,我们会使用Deployd定义一个管理员用户,并穿件访问策略。

CollectionAdminUser
productscreatereadupdatedeleteread
orderscreatereadupdatedeletecreate

总之,管理员能在任何集合上执行任何操作。一般用户可以read产品集合,并创建orders集合中的新对象。

在dashboard上创建Users Collection ,设置新容器的名字为/users。

用户集合,定义了idusernamepassword属性,是作者需要的。创建一个新对象,用户名密码为adminsecret。

 

5.1.1、集合的安全

作者喜欢Deployd的一个特性,是他定义一个简单的JavaScript API,可以用于实现服务端功能。当在一个集合上执行操作时,一系列的事件会被触发。点击products集合的Events,你会看到一系列的tab,代表不同的集合事件:On GetOn ValidateOn PostOn PutOn Delete。所有的集合都有这些事件,你可以使用JavaScript,来加强认证策略。填入一下代码到On Put和On Delete tabs:

if (me === undefined || me.username != "admin") {cancel("No authorization" 401);}

在Deployd API中,变量me,代表当前用户,cancel功能,使用制定消息和HTTP状态吗,结束一个请求。该代码,允许有权限的用户,和管理员用户访问,单其他请求都会用401状态吗结束,这代表客户端是没有权限做请求。

提示:不要担心这些事件是什么,作者会在后面说。

重复这些步骤,在orders集合的事件里,处理On Post和On Validate。强制执行认证控制的事件:

Collection Description
products On Put On Delete
orders On Get On Put On Delete
users None

 

5.2、创建管理应用

作者要为管理任务,创建一个分隔的AngularJS应用。作者可以在主应用中集成这些特性,但这将意味着所有用户都将下载admin功能的代码,即使他们永远用不上。作者添加一个新文件,叫admin.html,放到angularjs文件夹:

<!DOCTYPE html><html ng-app="sportsStoreAdmin"><head><title>Administration</title><script src="angular.js"></script><script src="ngmodules/angular-route.js"></script><link href="bootstrap.css" rel="stylesheet" /><link href="bootstrap-theme.css" rel="stylesheet" /><script>angular.module("sportsStoreAdmin" ["ngRoute"]).config(function ($routeProvider) {$routeProvider.when("/login" {templateUrl: "/views/adminLogin.html"});$routeProvider.when("/main" {templateUrl: "/views/adminMain.html"});$routeProvider.otherwise({redirectTo: "/login"});});</script></head><body><ng-view /></body></html>

作者使用Module.config方法,创建了三个路由,让ng-view指令显示body元素。

URL Path View
/login /views/adminLogin.html
/main /views/adminMain.html
All others Redirects to /login

otherwise方法定义的路由,作者使用redirectTo选项,将URL路径改变到其他路由。这将让浏览器到/login路径,用于认证用户。作者将在第22章描述。

 

5.2.1、添加占位符视图

作者要实现认证特性,需要为/views/adminMain.html视图文件创建一些占位符内容,当认证成功时会显示。下面是adminMain.html文件的内容:

<div class="well">This is the main view</div>

作者将在后面替换它。

 

5.3、实现认证

Deployd认证用户,使用标准HTTP请求。该应用发送一个POST请求到/users/login URL,包含username和password值。如果认证成功,服务器响应状态吗200,如果失败,返回401。要实现认证,作者要定义一个控制器,发起Ajax调用,并处理响应。下面是controllers/adminControllers.js文件的内容:

angular.module("sportsStoreAdmin").constant("authUrl" "http://localhost:5500/users/login").controller("authCtrl" function($scope $http $location authUrl) {$scope.authenticate = function (user pass) {$http.post(authUrl {username: userpassword: pass} {withCredentials: true}).success(function (data) {$location.path("/main");}).error(function (error) {$scope.authenticationError = error;});}});

 

5.3.1、定义视图认证

5.4、定义主视图和控制器

5.5、实现订单特性

5.6、实现产品特性

5.6.1、定义RESTful控制器

5.6.2、定义视图

5.6.3、添加对HTML文件的引用

8.1:SportsStore:Orders and Administration布布扣bubuko.com

8.1:SportsStore:Orders and Administration

标签:des   style   class   blog   code   java   


文章来源:http://www.bozhiyue.com/yuyan/2017/0714/1484246.html
返回上一页    返回分类 上一篇:   下一篇:
相关