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 {

@Override
public 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;
}

@Override
public 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添加[b]Authorization的方式测试一下, 选中Headers页签, key=[b]Authorization, value=Basic dG9tY2F0OnRvbWNhdA==,value是从这里输入username:password([b]请自行用自己在tomcat配置的用户名密码代入)然后换算出来的,
如果看到Status: 403 Forbidden, 说明你在tomcat-users.xml  web.xml HelloWorldService配置的role不一致,请检查, 一般是Status:200 OK[/b][/b][/b]

那么好,我们怎么在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去访问服务器就不用每次从数据库校验是否登录了, 只要设置一个过期时间就行了.点击这里进入下一节