ionic云开发系列二之调用webservice

Part 1:怎么访问后台呢

在上一篇文章 ionic云开发系列一 已经介绍了在云上搭建ionic框架了，如果你还不知道怎么搭建ionic本地开发环境, 请移步ionic Getting Started

接下来讲一下怎么调用webservice获取数据吧，这里将为大家介绍的是JAX-RS，就是Java API for RESTful Web Services，不要问我为什么用它，如果你知道它有多么方便就不会问了。

1. 新建一个maven项目，项目依赖如下（pom.xml）：

<project ...><repositories><repository><id>maven2-repository.java.net</id><name>Java.net Repository for Maven</name><url>http://download.java.net/maven/2/</url><layout>default</layout></repository></repositories><dependencies><dependency><groupId>com.sun.jersey</groupId><artifactId>jersey-server</artifactId><version>1.8</version></dependency></dependencies></project>

对，你没有看错，只依赖了一个jersey-server包，是不是很神奇, 接下来就来写实际暴露给外部访问的实现类吧

2. 建一个普通的java类当作我们的webservice类，代码如下：

package com.ndh.rest;import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.core.Response;@Path("/hello")
public class HelloWorldService {@GET@Path("/{param}")public Response getMsg(@PathParam("param") String msg) {String output = "Jersey say : " + msg;return Response.status(200).entity(output).build();}}

熟悉RESTful开发的你看到这样的代码肯定不会陌生吧

3. 再来配置一下web.xml，加上jersey的ServletContainer容器和指定你的webservice文件夹：

<web-app id="WebApp_ID" version="2.4"xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"><display-name>Restful Web Application</display-name><servlet><servlet-name>jersey-serlvet</servlet-name><servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class><init-param><param-name>com.sun.jersey.config.property.packages</param-name><param-value>com.ndh.rest</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>jersey-serlvet</servlet-name><url-pattern>/rest/*</url-pattern></servlet-mapping></web-app>

4. 配置完了就来运行吧，呵呵

5. 细心的同学可能会问了，这不是javaweb编程吗，好像不是webservice吧，这也难怪，简单的不像是webservice，那我们用js调用一下吧我们启动我们上一篇文章已经建好的ionic项目 : ionic serve 然后就会跳出默认登录页面

默认页面在云上是可以预先设置的

好了, 现在我们要做这么一件事: 点击登录按钮后, 从webservice校验登录, 返回登录是否成功的相关信息, 当然是调用刚才我们的HelloWorldService了

我们打开${项目名称}/www/templates下查找登录页面, 因为在云上构建界面, 暂时是不能自定义页面名称的, 我这里的是page4.html

然后进入到${项目名称}/www/js下, 打开controllers.js, 修改page4Ctrl, 添加一个登录方法

.controller('page4Ctrl', function($scope) {$scope.login = function() {var xhr = new XMLHttpRequest();xhr.open("GET", "http://127.0.0.1:8080/RESTfulExample/rest/hello/svygh123", true);xhr.onreadystatechange = function() {if (xhr.readyState == 4) {alert(xhr.responseText);}}xhr.send();};
})

接着在按钮上调用这个方法

<ion-view title="工程项目" id="page4"><ion-content overflow-scroll="true" padding="false" class="has-header"><form class="list"><ion-list><label class="item item-input" name="username"><span class="input-label">用户：</span><input type="text" placeholder="您的用户名" ng-model="data.username"></label><label class="item item-input" name="password"><span class="input-label">密码：</span><input type="password" placeholder="您的密码" ng-model="data.password"></label></ion-list><a ui-sref="side-menu21.page1" id="page4-button5" class="button button-positive button-block" ng-click="login(data)">登录</a></form></ion-content>
</ion-view>

然后出现了什么？是的，弹了个空白的alert框

不要惊慌, 意外随时可能发生, bug无处不在, 我们就是为了修复bug而存在的, 那怎么办呢

我用的是google浏览器，按一下F12，看到了红色的提示：

这提示，一看就猜了个大概，跨域访问的问题，那怎么解决呢，网上搜了一下，解决方法如下：

Response加上允许跨域的请求头：

return Response.status(200).header("Access-Control-Allow-Origin", "*").entity(output).build();

OK，再试试，这回能看到了吧：

细心的同学就会发问了，不能每个返回都加这玩意儿吧，我也是这么想的，程序员总是想方设法偷懒，继续网上搜呀搜，终于找到了，一个是自己动手写过滤器：

package your.package;public class CORSFilter implements ContainerResponseFilter {@Overridepublic ContainerResponse filter(ContainerRequest creq, ContainerResponse cresp) {cresp.getHttpHeaders().putSingle("Access-Control-Allow-Origin", "*");cresp.getHttpHeaders().putSingle("Access-Control-Allow-Credentials", "true");cresp.getHttpHeaders().putSingle("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS, HEAD");cresp.getHttpHeaders().putSingle("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With");return cresp;}
}

然后web.xml再配置一下：

<servlet>
<servlet-name>CORS Filter</servlet-name>
<servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class><init-param><param-name>com.sun.jersey.spi.container.ContainerResponseFilters</param-name><param-value>your.package.CORSFilter</param-value></init-param>
</servlet>
<servlet-mapping><servlet-name>CORS Filter</servlet-name><url-pattern>/webservices/*</url-pattern>
</servlet-mapping>

好像挺麻烦的，再找一下有没有更好的方法，终于找到了这个网站： cros

我们点一下这个

就看到了这句话：Access-Control-Allow-Origin: *

点一下下方的tomcat，终于找到了，原来tomcat已经帮我们写好了，就等我们配置了：

<filter><filter-name>CorsFilter</filter-name><filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping><filter-name>CorsFilter</filter-name><url-pattern>/*</url-pattern>
</filter-mapping>

修改一下加上我们的初始化参数和允许的url正则表达式：

<filter><filter-name>CorsFilter</filter-name><filter-class>org.apache.catalina.filters.CorsFilter</filter-class><init-param><param-name>cors.allowed.origins</param-name><param-value>*</param-value></init-param>
</filter>
<filter-mapping><filter-name>CorsFilter</filter-name><url-pattern>/rest/*</url-pattern>
</filter-mapping>

OK，重启一下Tomcat, 继续访问, 然后又是空白页面

这是哪一出, 难道又是一次意外? 再这时你会用力按F12看浏览器控制台, 然后显示是这样

这是什么意思呢, The 'Access-Control-Allow-Origin' header contains multiple values 翻译一下就是Access-Control-Allow-Origin包含多个值, 为什么有多个呢

我们找一下, 看代码和web.xml, 终于恍然, 原来配置里有

<init-param><param-name>cors.allowed.origins</param-name><param-value>*</param-value>
</init-param>

而且代码里也有

return Response.status(200).header("Access-Control-Allow-Origin", "*").entity(output).build();

好吧, 原来是我们配置了web.xml的过滤器, 而忘记把代码的移除了, 那就把代码里的移除了, 我们换一种更加RESTful的写法：

return Response.ok(output).build();

再继续访问，弹出框显示Jersey say : svygh123，OK, ionic访问webservice, get it。

Part 2 : 怎么传回json呢

很简单, 已经有现成的jar包了, 我们接着在pom.xml中引用一下依赖包

<dependency><groupId>com.sun.jersey</groupId><artifactId>jersey-json</artifactId><version>1.8</version>
</dependency>

然后在web.xml里面配置一下映射

<init-param><param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name><param-value>true</param-value>
</init-param>

ok, 我们写个类来测试一下,

package com.ndh;import java.io.Serializable;public class Track implements Serializable {private static final long serialVersionUID = 1L;String title;String singer;public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public String getSinger() {return singer;}public void setSinger(String singer) {this.singer = singer;}@Overridepublic String toString() {return "Track [title=" + title + ", singer=" + singer + "]";}}

新建另一个JSONService

package com.ndh.rest;import javax.ws.rs.Consumes;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;import com.ndh.Track;@Path("/json/metallica")
public class JSONService {@GET@Path("/get")@Produces(MediaType.APPLICATION_JSON)public Response getTrackInJSON() {Track track = new Track();track.setTitle("Enter Sandman");track.setSinger("Metallica");return Response.ok(track).build();}@POST@Path("/post")@Consumes(MediaType.APPLICATION_JSON)public Response createTrackInJSON(Track track) {String result = "Track saved : " + track;return Response.status(201).entity(result).build();}}

然后修改一下js里面的url路径为

http://127.0.0.1:8080/RESTfulExample/rest/json/metallica/get

单击一下登录按钮, 如无意外, 会显示是这样

OK, 知道怎么在ionic从服务器获取json数据了, get it.

本节就到这里.

ok demo 到此结束 : 服务器JAX-RS的webservice代码 ionic代码

Part 3 : 怎么加上客户端验证呢

如果需要加上客户端验证,需要做如下工作:

1. 添加依赖包

<dependency><!-- Annotations for role management --><groupId>javax.annotation</groupId><artifactId>jsr250-api</artifactId><version>1.0</version>
</dependency>

2. 打开${TOMCAT_HOME}/conf/tomcat-users.xml加上角色和用户:

<role rolename="admin"/>
<user username="ndh" password="ndh" roles="admin"/>

3. web.xml加入以下安全限制

<security-constraint><web-resource-collection><web-resource-name>customer creation</web-resource-name><url-pattern>/rest/hello/*</url-pattern><http-method>GET</http-method></web-resource-collection><auth-constraint><role-name>admin</role-name></auth-constraint>
</security-constraint>
<login-config><auth-method>BASIC</auth-method><realm-name>jaxrs</realm-name>
</login-config>
<security-role><role-name>admin</role-name>
</security-role>

4. 在HelloWorldService添加注解

@RolesAllowed({"admin"})

然后打开Postman测试一下,选择GET,输入http://127.0.0.1:8080/workitem_service/rest/hello/ndh, Send一下

在Send下方会显示这样 Status: 401 Unauthorized

就是客户端未认证的意思, 我们选择一下Type右边的下拉框选择Basic Auth(对应web.xml里面配置的auth-method),

然后输入用户名和密码, 再点Send, Status是200 OK的, 然而下方的方框中是: Unexpected 'J', 是错误的吗, 不是的,

选择一下右边JSON下拉框, 选择Text, 你就会看到显示成Jersey say : ndh了, 这样客户端就认证成功了,

什么是BASIC认证呢, 就是HTTP基本认证(Basic Authentication), 在上面的<auth-method>BASIC</auth-method>就是我们配置的基本认证, 一般把 "用户名+冒号+密码"用BASE64编码(源码 , 源码解析)的字符串放在http request 中的header Authorization中发送给服务端, ajax一般是这样写的

var auth = toBase64('username:password');
$.ajax({type: 'GET',url: 'http://blog.csdn.net/svygh123',headers: {"Authorization": "Basic " + auth},success : function(data) {}
});

当浏览器访问使用基本认证的网站的时候，浏览器会提示你输入用户名和密码,假如用户名密码错误的话，服务器会返回401, 就像上面的postman无认证请求结果一样.

现在我们打开postman, 在header添加Authorization的方式测试一下, 选中Headers页签, key=Authorization, value=Basic dG9tY2F0OnRvbWNhdA==,value是从这里输入username:password(请自行用自己在tomcat配置的用户名密码代入)然后换算出来的, 如果看到Status: 403 Forbidden, 说明你在tomcat-users.xml web.xml HelloWorldService配置的role不一致,请检查, 一般是Status:200 OK

那么好,我们怎么在ionic中使用base64验证呢?

1. cmd命令进入ionic项目路径中安装一下 :

bower install angular-base64 --save-dev

然后会在${项目}/www/lib下看到angular-base64文件夹

2. index.html引入它的js :

<script src="lib/angular-base64/angular-base64.js"></script>

3. 在app.js模块加入它的模块 :

angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives', 'base64'])

js代码

$scope.login = function() {var xhr = new XMLHttpRequest();xhr.open("GET", "http://127.0.0.1:8080/workitem_service/rest/hello/svygh123", true);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.setRequestHeader("Accept", "application/json");xhr.setRequestHeader("Access-Control-Allow-Origin", "*");xhr.setRequestHeader("Access-Control-Allow-Headers", "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With");xhr.setRequestHeader("Access-Control-Allow-Methods", "GET, PUT, POST");xhr.setRequestHeader("Authorization", "Basic " + $base64.encode("tomcat" + ':' + "tomcat"));xhr.onreadystatechange = function() {if (xhr.readyState == 4) {alert(xhr.responseText);}}xhr.send();
};

angularjs代码

$scope.login = function() {var user = "username=" + $scope.username + "&password=" + $scope.password;$http.get('http://127.0.0.1:8080/workitem_service/rest/hello/svygh123', user, {headers: {"Content-Type": "application/x-www-form-urlencoded","Accept": "application/json","Access-Control-Allow-Origin": "*","Access-Control-Allow-Headers": "Cache-Control, Pragma, Origin, Authorization,   Content-Type, X-Requested-With","Access-Control-Allow-Methods": "GET, PUT, POST","Authorization": "Basic " + $base64.encode("tomcat" + ':' + "tomcat")} }).success(function (response) {alert(angular.toJson(response));}).error(function(data, status, headers, config){         alert("登录出错" + data + "  " + status);});
};

但是无论用哪段代码都会报异常

XMLHttpRequest cannot load http://127.0.0.1:8080/workitem_service/rest/hello/svygh123. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 403.

网上说要在请求环境加上

Access-Control-Allow-Origin: *

但是已经加了还是没有效果, 只能用另一种解决方案了, 叫代理, 而且这个代理只是在我们pc上才会有效果,而且只有pc才会提示跨域, 移动端则不会,

ionic serve, ionic run, or ionic run -l

我们用了这个启动了nodejs的服务器才用代理来解决跨域, 跨域的意思呢, 比如我们刚才的这个异常, 在谷歌浏览器的F12调试模式下, 点Network, 然后点刚才我们的请求, 错误请求是红色的名字标记起来的, 我们会看到这样

General
Request URL:http://127.0.0.1:8080/workitem_service/rest/hello/svygh123
Request Method:OPTIONS
Status Code:403 Forbidden
Remote Address:127.0.0.1:8080
Response Headers
Content-Length:0
Content-Type:text/plain
Date:Tue, 05 Apr 2016 02:13:22 GMT
Server:Apache-Coyote/1.1
Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
Access-Control-Request-Headers:accept, access-control-allow-headers, access-control-allow-methods, access-control-allow-origin, authorization, content-type
Access-Control-Request-Method:GET
Connection:keep-alive
Host:127.0.0.1:8080
Origin:http://localhost:8100
Referer:http://localhost:8100/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36

其中Origin:http://localhost:8100就是我们的本地服务器地址, Remote Address:127.0.0.1:8080就是我们的远程访问的地址, 所以就形成了跨域(CROS)访问

跨域怎么配置呢

打开ionic.project文件,修改内容如下

{"name": "workitem","app_id": "","proxies": [{"path": "/rest","proxyUrl": "http://127.0.0.1:8080/workitem_service/rest"}]
}

现在, 如果你访问http://localhost:8100/rest, 就会访问到http://127.0.0.1:8080/workitem_service/rest

好的, 现在我们来配置本地访问吧, 我们加入一个常量

.constant('ApiEndpoint', {url: 'http://localhost:8100/rest'
})

然后修改一下我们的代码

$scope.login = function() {var user = "username=" + $scope.username + "&password=" + $scope.password;$http.get(ApiEndpoint.url + '/hello/svygh123', user, {headers: {"Content-Type": "application/x-www-form-urlencoded","Accept": "application/json","Access-Control-Allow-Origin": "*","Access-Control-Allow-Headers": "Cache-Control, Pragma, Origin, Authorization,   Content-Type, X-Requested-With","Access-Control-Allow-Methods": "GET, PUT, POST","Authorization": "Basic " + $base64.encode("tomcat" + ':' + "tomcat")} }).success(function (response) {alert(angular.toJson(response));}).error(function(data, status, headers, config){alert("登录出错" + data + "  " + status);});
};

运行一下, 随便输入用户名密码, 点登录, 会弹出 需要进行身份验证 的提示输入框, 这不符合我们的要求, 我们是不想输入的, 那我们把代码移到公共区域,

在app.js里面的run方法添加这么一段跨域请求头

  $http.defaults.headers.common['Access-Control-Allow-Headers'] = "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With";$http.defaults.headers.common['Access-Control-Allow-Origin'] = "*";$http.defaults.headers.common['Access-Control-Allow-Credentials'] = "true";$http.defaults.headers.common['Access-Control-Allow-Methods'] = "POST, GET, OPTIONS, HEAD";  $http.defaults.headers.common['Content-Type'] = "application/x-www-form-urlencoded";$http.defaults.headers.common['Accept'] = "application/json";$http.defaults.headers.common['Authorization'] = "Basic " + $base64.encode("tomcat" + ':' + "tomcat");

js代码把它的请求头删掉, 然后再访问, 会弹出 登录出错undefined undefined 的提示框, 看看浏览器控制台会出现提示

SyntaxError: Unexpected token J ionic.bundle.js:25642
at Object.parse (native)
at fromJson (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14543:14)
at defaultHttpResponseTransform (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22560:16)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:22651:12
at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13648:20)
at transformData (http://localhost:8100/lib/ionic/js/ionic.bundle.js:22650:3)
at transformResponse (http://localhost:8100/lib/ionic/js/ionic.bundle.js:23406:23)
at processQueue (http://localhost:8100/lib/ionic/js/ionic.bundle.js:27879:28)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:27895:27
at Scope.$eval (http://localhost:8100/lib/ionic/js/ionic.bundle.js:29158:28)

怀疑是 alert(angular.toJson(response)); 转换了json格式, 改一下 alert(response); 还是一样的错误

那么既然前台没错, 就是后台数据的问题了, 那么我们构造一个json类型的返回试试

String json = "{'Jersey say':'" + msg + "'}";
JSONObject output = new JSONObject(json);
return Response.ok(output).build();

然后再运行, 果然弹出框提示正确的内容了 : "Jersey say":"svygh123"

OK, 这样就能解决跨域(CROS)问题了,具体解决跨域原文跨域有时间看这里 : Handling CORS issues in Ionic

下节更新怎么让服务器生成token, 然后返回客户端, 然后客户端第一次获得token后, 每次带着token去访问服务器就不用每次从数据库校验是否登录了, 只要设置一个过期时间就行了.点击这里进入下一节

ionic云开发系列二之调用webservice相关推荐

ionic云开发系列一
虽然ionic现在开发还有一些不是很如意,但是用来做简单的功能还是妥妥的,而且最近官网推出了Creator云端开发,LAB等东东,还是让人惊艳了一把,首先来体验一下Creator吧. 点这里打开ion ...
系统开发系列之MyEclipse创建WebService详细教程和调用教程（spring框架+maven+CXF框架）
1 回顾 [系统开发系列之MyEclipse创建WebService详细教程和调用教程]介绍了使用JWS实现WebService接口的发布和调用,主要涉及的点有: (1)MyEclipse点击Fil ...
云开发系列课程让你从入门到精通快速上手Serverless和云开发技术
简介:云开发系列课程主要介绍了从入门到精通快速上手Serverless和云开发技术.学习内容涵盖云开发协同.云函数.云数据库.多媒体托管.前后端一体化框架等Serverless Web开发必备知识.希 ...
android 原生开发 3d地图下载_arcgis api 3.x for js 入门开发系列二不同地图服务展示（附源码下载）...
前言关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
短信开发系列(二)：GSM手机短信开发之短信解码
短信开发系列目录: 短信开发系列(一):GSM手机短信开发初探短信开发系列(二):GSM手机短信开发之短信解码短信开发系列(三):短信接收引擎昨天写了短信的发送,今天我们在来谈谈如果读取SIM卡 ...
微信小程序开发系列二：微信小程序的视图设计
大家如果跟着我第一篇文章微信小程序开发系列一:微信小程序的申请和开发环境的搭建一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...
小程序·云开发的HTTP API调用丨实战
小程序云开发之httpApi调用. 小程序云开发之httpApi调用(返回"47001处理") 技术栈采用 nodejs + express 搭建web服务器,采用 axios ...
BizTalk开发系列(二十二) 开发自定义Map Functoid
更多内容请查看:BizTalk动手实验系列目录 BizTalk 开发系列尽管 BizTalk Server 提供许多Functoid以支持一系列不同的操作 ...
云开发系列课程 | FaaS场景下的SSR框架
本篇内容主要介绍FaaS场景下的SSR框架,也就是在FaaS场景下怎么开发服务端渲染页面.服务端渲染是指前后端同构的服务端渲染,即React SSR.在介绍SSR框架之前,首先简单介绍一下Server ...

ionic云开发系列二之调用webservice

ionic云开发系列二之调用webservice相关推荐

最新文章

热门文章