Cordova+jQuery Mobile+Spring REST
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>
Cordova+jQuery Mobile+Spring REST的更多相关文章
- JQuery Mobile + Cordova 实战一
好的,今天给大家继续讲解 JQM 和 Cordova 的结合吧.Cordova 和 Phonegap 反正是一个东西,大家就当做一个是旧版(Phonegap)的一个是新版(Cordova)的就行.不同 ...
- JQuery Mobile+cordova构建一个Android项目
1.安装Android开发环境 Android开发环境的安装,现在主要是由于不能访问谷歌站点,在windows下在host文件中添加一个对应的74.125.195.190 dl-ssl.goo ...
- jQuery Mobile学习日记之HelloWorld
这里是本人学习jQuery Mobile的过程,主要用于记录,过程中有不对的地方或不严谨的地方,欢予以指出纠正,非常感谢! 1.首先是下载安装以下文件: [Opera Mobile Emulator] ...
- PhoneGap与Jquery Mobile组合开发android应用的配置
PhoneGap与Jquery Mobile结合开发android应用的配置 由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接 ...
- 小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）
作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...
- PhoneGap与Jquery Mobile结合开发android应用配置
由于工作需要,用到phonegap与jquery moblie搭配,开发android应用程序. 这些技术自己之前也都没接触过,可以说是压根没听说过,真是感慨,在开发领域,技术日新月异,知识真是永远学 ...
- jQuery Mobile和PhoneGap混合开发
其实二者并不影响,PhoneGap负责调用系统的接口,jQuery Mobile实现一些网页效果.PhoneGap开发请看上一篇文章,jQuery Mobile开发环境搭建如下:[请先阅读上一篇文章, ...
- PhoneGap+jQuery Mobile+Rest 访问远程数据
最近研究Mobile Web技术.发现了一个好东西-PhoneGap! 发现用PhoneGap+jQuery Mobile是一个很完美的组合! 本实例通俗易懂.适合广大开发人群:高富帅.白富美.矮穷戳 ...
- JQuery Mobile 实战一
今天我们来使用JQuery Mobile来开发一个web mobile app. 要实现的如下所示效果: 开始: 第一步:添加JS包等引用,直接去官网下载最新的JQuery Mobile 包,http ...
随机推荐
- 个基于TensorFlow的简单故事生成案例：带你了解LSTM
https://medium.com/towards-data-science/lstm-by-example-using-tensorflow-feb0c1968537 在深度学习中,循环神经网络( ...
- 条件随机场 (CRF) 分词序列谈之一(转)
http://langiner.blog.51cto.com/1989264/379166 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.ht ...
- sql server2008R2 无法连接到WMI提供程序。你没有权限或者该服务器无法访问
在自己的Win8.1的系统在安装了Vs2013和Sqlserver2008R2 今天在打开ssms的时候发现连接不上数据库,且出现了以下问题 然后打开Sqlserver配置管理器准备看看sqlserv ...
- Pandas DataFrame笔记
1.属性方式,可以用于列,不能用于行 2.可以用整数切片选择行,但不能用单个整数索引(当索引不是整数时) 3.直接索引可以使用列.列集合,但不能用索引名索引行 用iloc取行,得到的series: d ...
- sourceTree 基础使用
https://www.cnblogs.com/tian-xie/p/6264104.html
- Android7.0新特性，及Android N适配
新特性部分 Android 7.0 Nougat 提供新功能以提升性能.生产效率和安全性,主要新增了下面的新特性和优化: 一.新的Notification Android N 添加了很多新的notif ...
- 【python】bytes与字符串的相互转化
代码: # bytes转字符串方式一 b=b'\xe9\x80\x86\xe7\x81\xab' string=str(b,'utf-8') print(string) # bytes转字符串方式二 ...
- Mybatis源码分析之Mapper执行SQL过程（三）
上两篇已经讲解了SqlSessionFactory的创建和SqlSession创建过程.今天我们来分析myabtis的sql是如何一步一步走到Excutor. 还是之前的demo public ...
- SuperMap入门3——Hello World
Hello World程序很重要,对于入门来说,它可以检测我们的环境.配置是否正确,感受程序的易用性等. 添加工具 由于我是使用的VS2017+ SuperMap iObject绿色免安装版,所以新建 ...
- iOS9中找不到XXX.dylib 与 is unavailable no availabel on ios (app extension) - use view controller 的解决办法
在 iOS9 中现在找不到 XXX.dylib 了,比如libz.tbd 如果要用到 libz.dylib,可以用下面的办法,来自 Stack Overflow. Go to Build Phase ...