Cordova可以方便地建立跨平台的移动应用，使用jQuery Mobile做手机界面，后台使用rest提供数据交互。
首先，使用jQuery Mobile建立一个页面：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<script>
$.support.cors =true;
$.mobile.allowCrossDomainPages=true;
function onSuccess(data, status)
{
data = $.trim(data);
$("#info").text(data);
}
function onError(data, status)
{
// handle an error
}
$(document).ready(function() {
$("#submit").click(function(){
var formData = $("#callAjaxForm").serialize();
$.ajax({
type: "POST",
url: "http://192.168.1.218:8080/SpringMVC/rest/add",
cache: false,
data: formData,
dataType : ‘text‘,
success: onSuccess,
error: onError
});
return false;
});
});
</script>
<div data-role="page">
<div data-role="header" data-position="fixed">
<a href="#" data-role="button" data-icon="home">首页</a>
<h1>欢迎访问我的主页</h1>
<a href="#" data-role="button" data-icon="search">搜索</a>
</div>
<div data-role="content">
<form id="callAjaxForm">
<div data-role="fieldcontain">
<label for="name">name</label>
<input type="text" name="name" id="name" value="" />
<label for="age">age</label>
<input type="text" name="age" id="age" value="" />
<h3 id="info"></h3>
<button data-theme="b" id="submit" type="submit">Submit</button>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed" >
<div data-role="navbar" >
<ul>
<li><a href="#" data-icon="custom">功能1</a></li>
<li><a href="#" data-icon="custom">功能2</a></li>
<li><a href="#" data-icon="custom">功能3</a></li>
<li><a href="#" data-icon="custom">功能4</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
后台使用Spring REST：
package com.garfield.web.springmvc;
import java.io.IOException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;
import com.garfield.pojo.User;
@Controller
@RequestMapping("/rest")
public class HelloWorldControllerAnnotation {
@RequestMapping(value = "/helloworld")
public ModelAndView helloWorld() {
ModelAndView mv = new ModelAndView();
mv.addObject("message", "Hello Garfield !");
mv.setViewName("hello");
return mv;
}
@RequestMapping(value="/get/{id}",method=RequestMethod.GET)
public String get(@PathVariable String id,HttpServletRequest request ,HttpServletResponse response) throws IOException{
//request.setAttribute("message", "Hello,This is a example of Spring3 RESTful!<br/>ID:"+id+"");
//return "index.jsp";
User user=new User();
user.setName("garfield");
user.setAge("18");
JSONObject jsonObject = JSONObject.fromObject(user);
response.getWriter().write(jsonObject.toString());
return null;
}
@RequestMapping(value="/show",method=RequestMethod.GET)
public String show(HttpServletRequest request ,HttpServletResponse response) throws IOException{
response.getWriter().write("show users ....");
return null;
}
@RequestMapping(value="/edit/{id}",method=RequestMethod.PUT)
public String edit(@PathVariable String id,HttpServletRequest request ,HttpServletResponse response) throws IOException{
response.getWriter().write("edit user:"+id);
return null;
}
@RequestMapping(value="/remove/{id}",method=RequestMethod.DELETE)
public String remove(@PathVariable String id,HttpServletRequest request ,HttpServletResponse response) throws IOException{
response.getWriter().write("delete user:"+id);
return null;
}
@RequestMapping(value="/add",method=RequestMethod.POST)
public String add(HttpServletRequest request ,HttpServletResponse response) throws IOException{
User user = new User();
user.setName(request.getParameter("name"));
user.setAge(request.getParameter("age"));
JSONObject jsonObject = JSONObject.fromObject(user);
response.getWriter().write(jsonObject.toString());
return null;
}
//多参数传递
@RequestMapping(value="/test/{id}/{sql}",method=RequestMethod.GET)
public String test(@PathVariable String id,@PathVariable String sql,HttpServletRequest request ,HttpServletResponse response) throws IOException{
response.getWriter().write("test,id:"+id+",sql:"+sql);
return null;
}
}
然后就可以和后台进行数据交互了。
注意：
$.support.cors =true; $.mobile.allowCrossDomainPages=true; 是为了跨域调用。 运行界面示意：
附:web.xml配置：
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<servlet>
<servlet-name>springmvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springmvc</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
</web-app>
springmvc-servlet.xml配置：
<?xml version="1.0" encoding="UTF-8"?>
<!--看到下面的beans这个元素标签没有，必须有标签的声明-->
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-3.0.xsd">
<!-- 扫描定义的bean -->
<context:component-scan base-package="com.garfield.web.springmvc" />
<!-- 处理器 -->
<bean name="/hello" class="com.garfield.web.springmvc.HelloWorldController"/>
<!-- 下面的配置用于非注解 -->
<!-- HandlerMapping -->
<bean class="org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping"/>
<!-- HandlerAdapter -->
<bean class="org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter"/>
<!-- 注解配置 -->
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping"/>
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"/>
<!-- ViewResolver -->
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
时间： 2024-08-01 03:25:26