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