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跨域访问。