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: '[e-mail]'            },            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跨域访问。