PhoneGap 跨平台应用：HealthWorking (二) 通过REST Service与服务器交互实现登陆

PhoneGap 跨平台应用：HealthWorking (2) 通过REST Service与服务器交互实现登陆

PhoneGap 跨平台应用：HealthWorking (2)  通过REST Service与服务器交互实现登陆

回顾： 在PhoneGap 跨平台应用：HealthWorking (1)链接 中介绍了通过jquery Mobile 编写的UI页面发布到Android 模拟器上。现在我们来讨论下如何通过REST SERVICE与外部服务器进行交互。

本节：服务端通过jersey+Hibernate来暴露REST服务接口，在Android端，通过Ajax来调用服务。【磨刀不误砍柴工】

一、 首先，准备开发环境。

1. Java 环境，地球人都知道，做Java开发，这个必须得配。计算机--->属性--->高级系统设置--->环境变量--->新建

JAVA_HOME = C:\Program Files\Java\jdk1.7.0_67

CLASSPATH = .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

在Path中添加：%JAVA_HOME%\bin;

验证：CMD--->java 和 javac命令

2. 安装MAVEN

安装MAVEN是为了通过mvn来管理项目的jar包和打包项目，首先下载zip包，解压，例如：apache-maven-3.2.3

同样，在上面的环境变量中，新建：

MAVEN_HOME = E:\Software\Maven\apache-maven-3.2.3

在Path中，新增：

%MAVEN_HOME%\bin;

验证：CMD--->mvn命令

3. Eclipse

进入 http://eclipse.org/ide/，选择Java EE的最新版本下载，解压。目前Eclipse已经集成了Maven的插件，所以不需要配置MAVEN插件。

4. 项目源码：链接

二、 导入项目

开发环境配置完毕后，开始准备开发，如果想直接跳过此步骤，可以直接下载github上最新的源码WalkService，下载加压后，通过Eclipse的导入功能，将项目导入，具体步骤为：

1. 文件--->导入--->输入“MAVEN”--->选择“已经有的Maven项目”

2. 导入项目后，需要进行几处修改，查看“Problem”中所列举的项目配置问题

a. 选择WalkService右键--->"Build Path"--->"Configure Build Path"，选择本机所安装的JDK；同时配置“Run Time”，本例选择的是Tomcat 6

这个时候，你还会发现，在“Problem”中，仍然会报很多错误，这些错误都是由于找不到Jar包引起的，Don't worry~ 因为我们的Maven依赖包没有导入，这个时候需要我们运行：

b. 选择WalkService右键--->"Run as"---"Maven Build"，这个时候会弹出一个对话框，在"Goals"中填入“package”即可。

点击“Apply”后，Maven会将项目依赖的jar包全部下载下来。

3. 导出War包

首先选出需要导出的jar包和其他的配置文件，如图：

配置完毕后，选中WalkService右键--->Export--->War file

4. 部署应用到容器中，本例是部署在Tomcat容器中。

http://localhost:8080/walkservice即可访问提供的服务

三、服务分析

1. 建表sql

<span style="font-size:14px;">DROP TABLE IF EXISTS  `users`;
CREATE TABLE `users` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `username` varchar(20) NOT NULL DEFAULT '',
  `password` varchar(20) NOT NULL,
  `first_name` varchar(20) DEFAULT NULL,
  `last_name` varchar(20) DEFAULT NULL,
  `email` varchar(20) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=20 DEFAULT CHARSET=utf8;

DROP TABLE IF EXISTS  `points`;
CREATE TABLE `points` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `longtitude` varchar(20) NOT NULL,
  `latitude` varchar(20) NOT NULL,
  `date` varchar(20) NOT NULL,
  `userid` int(10) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=14 DEFAULT CHARSET=utf8;
</span>

2. 注册服务接口

WalkService提供了一个REST风格的接口，通过该接口，可以实现注册服务：

接口名称	User Register Service
接口URL	/account/regist
方法	POST
参数	first_name last_name email username password
返回格式	JSON
返回样例	成功： { "status":"success" } 失败： { "status":"fail" }

<span style="font-size:14px;">package com.nzl.mobile.walkservice.bo;

import javax.ws.rs.Consumes;
import javax.ws.rs.FormParam;
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 com.nzl.mobile.walkservice.bean.Status;
import com.nzl.mobile.walkservice.dao.ManageUser;

@Path("/")
public class Account {

	@POST
	@Produces(MediaType.APPLICATION_JSON)
	@Path("account/validate")
	@Consumes(MediaType.APPLICATION_FORM_URLENCODED)
	public Status login(@FormParam("username") String username,
			@FormParam("password") String password) {
		ManageUser mu = new ManageUser();
		System.out.println(username + "\t" + password);
		if (mu.login(username, password)) {
			return new Status("success");
		}
		return new Status("fail");
	}

	@POST
	@Produces(MediaType.APPLICATION_JSON)
	@Path("account/regist")
	@Consumes(MediaType.APPLICATION_FORM_URLENCODED)
	public Status regist(@FormParam("username") String username,
			@FormParam("password") String password,
			@FormParam("firstname") String first_name,
			@FormParam("lastname") String last_name,
			@FormParam("email") String email) {
		ManageUser mu = new ManageUser();
		System.out.println(username + "\t" + password + "\t" + first_name
				+ "\t" + last_name + "\t" + email);
		if (mu.addUser(first_name, last_name, email, username, password)) {
			return new Status("success");
		}
		return new Status("fail");
	}

	@GET
	@Produces(MediaType.TEXT_PLAIN)
	public String helloMessage() {
		return "Hello, walk service!";

	}
}
</span>

3. 测试接口：在Chrome中，利用Postman插件进行测试

新增加了一个用户，测试成功！

3. 在登陆页面中实现登功能，在“注册”按钮中绑定click功能，我们通过http://localhost:8080/walkservice/account/regist来获取服务

<span style="font-size:14px;">    $("#regist-1").click(function(){
        var Uname = $('#text-1').val();
        var Pword = $('#password-1').val();
        $.ajax({
            url: 'http://localhost:8080/walkservice/account/regist',
            type: 'POST',
            data: {
                username: Uname,
                password: Pword,
                firstname: 'test',
                lastname: 'test',
                email: 'test@test.com'
            },
            success: function(data) {
                alert(data.status);
            },
            error: function(data) {
                alert("call service faild");
            }
        });
    });</span>

可是，结果并不是我们所预期的，返回的是“注册失败”

看看调试JS的错误：

XMLHttpRequest cannot load http://localhost:8080/walkservice/account/regist. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

原因很简单，我们跨域POST了一个请求，这是不允许的，因为JavaScript是不允许跨域访问的，解决方案总是有的。你可以在这里下载源码：链接

下节将分享：通过创建代理服务来解决Javascript跨域访问。