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>

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>

我们点一下这个

就看到了这句话：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>

<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();

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>

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

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 + "]";}}

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();}}

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"/>

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

@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) {}
});

现在我们打开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'])

$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();
};

$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: *

ionic serve, ionic run, or ionic run -l

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

跨域怎么配置呢

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

{"name": "workitem","app_id": "","proxies": [{"path": "/rest","proxyUrl": "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");

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();

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

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