ionic云开发系列二之调用webservice

最新推荐文章于 2018-06-12 14:02:04 发布

原创最新推荐文章于 2018-06-12 14:02:04 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

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