玩转spring boot 结合jQuery和AngularJs(3)

在上篇的基础上

准备工作:

修改pom.xml

 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.github.carter659</groupId>
  <artifactId>spring03</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>jar</packaging>

  <name>spring03</name>
  <url>http://maven.apache.org</url>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>1.4.2.RELEASE</version>
  </parent>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <java.version>1.8</java.version>
  </properties>

  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-devtools</artifactId>
      <optional>true</optional>
    </dependency>
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>

</project>

修改App.java

package com.github.carter659.spring03;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class App {

  public static void main(String[] args) {
    SpringApplication.run(App.class, args);
  }

}

新建“Order.java”类文件:

package com.github.carter659.spring03;
import java.util.Date;
public class Order {

  public String no;

  public Date date;

  public int quantity;
}

说明一下:这里我直接使用public字段了,get/set方法就不写了。

新建控制器“MainController”:

package com.github.carter659.spring03;

import java.time.ZoneId;
import java.util.HashMap;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class MainController {

  @GetMapping("/")
  public String index() {
    return "index";
  }

  @GetMapping("/jquery")
  public String jquery() {
    return "jquery";
  }

  @GetMapping("/angularjs")
  public String angularjs() {
    return "angularjs";
  }

  @PostMapping("/postData")
  public @ResponseBody Map<String, Object> postData(String no, int quantity, String date) {
    System.out.println("no:" + no);
    System.out.println("quantity:" + quantity);
    System.out.println("date:" + date);
    Map<String, Object> map = new HashMap<>();
    map.put("msg", "ok");
    map.put("quantity", quantity);
    map.put("no", no);
    map.put("date", date);
    return map;
  }

  @PostMapping("/postJson")
  public @ResponseBody Map<String, Object> postJson(@RequestBody Order order) {
    System.out.println("order no:" + order.no);
    System.out.println("order quantity:" + order.quantity);
    System.out.println("order date:" + order.date.toInstant().atZone(ZoneId.systemDefault()).toLocalDate());
    Map<String, Object> map = new HashMap<>();
    map.put("msg", "ok");
    map.put("value", order);
    return map;
  }
}

新建jquery.html文件:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
  /*<![CDATA[*/
  function postData() {
    var data = 'no=' + $('#no').val() + '&quantity=' + $('#quantity').val()
        + '&date=' + $('#date').val();

    $.ajax({
      type : 'POST',
      url : '/postData',
      data : data,
      success : function(r) {
        console.log(r);
      },
      error : function() {
        alert('error!')
      }
    });
  }

  function postJson() {
    var data = {
      no : $('#no').val(),
      quantity : $('#quantity').val(),
      date : $('#date').val()
    };
    $.ajax({
      type : 'POST',
      contentType : 'application/json',
      url : '/postJson',
      data : JSON.stringify(data),
      success : function(r) {
        console.log(r);
      },
      error : function() {
        alert('error!')
      }
    });
  }
  /*]]>*/
</script>
</head>
<body>
  no:
  <input id="no" value="No.1234567890" />
  <br /> quantity:
  <input id="quantity" value="100" />
  <br /> date:
  <input id="date" value="2016-12-20" />
  <br />
  <input value="postData" type="button" onclick="postData()" />
  <br />
  <input value="postJson" type="button" onclick="postJson()" />
</body>
</html>

新建“angularjs.html”文件:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>angularjs</title>
<script src="https://cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script type="text/javascript">
  var app = angular.module('app', []);
  app.controller('MainController', function($rootScope, $scope, $http) {

    $scope.data = {
      no : 'No.1234567890',
      quantity : 100,
      'date' : '2016-12-20'
    };

    $scope.postJson = function() {
      $http({
        url : '/postJson',
        method : 'POST',
        data : $scope.data
      }).success(function(r) {
        $scope.responseBody = r;
      });

    }
  });
</script>
</head>
<body ng-app="app" ng-controller="MainController">
  no:
  <input id="no" ng-model="data.no" />
  <br /> quantity:
  <input id="quantity" ng-model="data.quantity" />
  <br /> date:
  <input id="date" ng-model="data.date" />
  <br />
  <input value="postJson" type="button" ng-click="postJson()" />
  <br />
  <br />
  <div>{{responseBody}}</div>
</body>
</html>

项目结构如下图:

一、结合jquery

运行App.java后进去“http://localhost:8080/jquery”页面

点击“postData”按钮:

jquery成功的调用了spring mvc的后台方法“public @ResponseBody Map<String, Object> postData(String no, int quantity, String date)”

这里,“date”参数我使用的是String类型,而并不是Date类型。因为大多数情况是使用对象形式来接收ajax客户端的值,所以我这里偷懒了,就直接使用String类型。如果想使用Date类型,则需要使用@InitBinder注解,后面的篇幅中会讲到,在这里就不再赘述。

另外,使用“thymeleaf”模板引擎在编写js时,“&”关键字要特别注意,因为“thymeleaf”模板引擎使用的是xml语法。因此,在<script>标签的开始——结束的位置要加“/*<![CDATA[*/ ...../*]]>*/”

例如:

<script type="text/javascript">
  /*<![CDATA[*/

    // javascript code ...

  /*]]>*/
</script>

否则,运行“thymeleaf”模板引擎时就会出现错误“org.xml.sax.SAXParseException:...”

点击“postJson”按钮:

jquery则成功调用了后台“public @ResponseBody Map<String, Object> postJson(@RequestBody Order order)”方法,

并且参数“order”中的属性或字段也能被自动赋值,而Date类一样会被赋值。

注意的是:在使用jquery的$.ajax方法时,contentType参数需要使用“application/json”,而后台spring mvc的“postJson”方法中的“order”参数也需要使用@RequestBody注解。

二、结合angularjs

进入“后进去http://localhost:8080/angularjs”页面

点击“postJson”按钮:

使用angularjs后,依然能调用“public @ResponseBody Map<String, Object> postJson(@RequestBody Order order)”方法。

代码:https://github.com/carter659/spring-boot-03.git

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-01-03

Spring Boot统一异常处理详解

Spring Boot中默认带了error的映射,但是这个错误页面显示给用户并不是很友好. 统一异常处理 通过使用@ControllerAdvice定义统一异常处理的类,而不是在每个Controller中逐个定义. @ExceptionHandler用来定义函数针对的函数类型,最后将Exception对象和请求URL映射到URL中. @ControllerAdvice class ExceptionTranslator { public static final String DEFAULT_E

玩转spring boot 快速开始(1)

开发环境: IED环境:Eclipse JDK版本:1.8 maven版本:3.3.9 一.创建一个spring boot的mcv web应用程序 打开Eclipse,新建Maven项目 选择quickstart模板 完成Maven项目的创建 参照spring的官方例子:http://spring.io/guides/gs/testing-web/ 在pom.xml增加maven依赖 <project xmlns="http://maven.apache.org/POM/4.0.0&quo

玩转spring boot MVC应用(2)

如何快速搭建一个MCV程序? 参照spring官方例子:https://spring.io/guides/gs/serving-web-content/ 一.spring mvc结合thymeleaf模板 创建maven project后,修改pom.xml文件 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance&q

深入理解Spring Boot的日志管理

前言 Spring Boot在所有内部日志中使用Commons Logging,但是默认配置也提供了对常用日志的支持, 如:Java Util Logging,Log4J, Log4J2和Logback.每种Logger都可以通过配置使用控制台或者文件输出日志内容. 日志输出格式 2016-08-19 10:22:04.233 INFO 7368 --- [ main] com.juzi.AsyncTest : Started AsyncTest in 10.084 seconds (JVM r

spring-boot使用AOP统一处理日志

AOP我想大家都很清楚,有时候我们需要处理一些请求日志,或者对某些方法进行一些监控,如果出现例外情况应该进行怎么样的处理,现在,我们从spring-boot中引入AOP. [开发环境:jdk版本号为1.8,spring boot的版本号为1.4.1]{style="background-color:#FF0000"} 首先,我们先引入jar包, POM文件添加如下内容: <!--引用AOP--> <dependency> <groupId>org.s

在Spring Boot中如何使用log4j记录日志

前言 Spring Boot在所有内部日志中使用Commons Logging,但是默认配置也提供了对常用日志的支持,如:Java Util Logging,Log4J, Log4J2和Logback.每种Logger都可以通过配置使用控制台或者文件输出日志内容.本文主要介绍了在Spring Boot中如何使用log4j记录日志,感兴趣的来一起学习学习. 引入log4j依赖 在创建Spring Boot工程时,我们引入了spring-boot-starter,其中包含了spring-boot-s

Dubbo在Spring和Spring Boot中的使用详解

一.在Spring中使用Dubbo 1.Maven依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>dubbo</artifactId> <version>2.5.3.6</version> <exclusions> <exclusion> <groupId>log4j</groupId> <artif

Spring Boot中配置文件application.properties使用

一.配置文档配置项的调用 启动后在浏览器直接输入http://localhost:18080/user/test,就直接打印出配置文件中的配置内容. 二.绑定对象bean调用 有时候属性太多了,一个个绑定到属性字段上太累,官方提倡绑定一个对象的bean,这里我们建一个ConfigBean.java类,顶部需要使用注解@ConfigurationProperties(prefix = "com")来指明使用哪个 @ConfigurationProperties(prefix = &quo

Spring Boot中实现定时任务应用实践

前言 在Spring Boot中实现定时任务功能,可以通过Spring自带的定时任务调度,也可以通过集成经典开源组件Quartz实现任务调度. 本文将详细介绍关于Spring Boot实现定时任务应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.Spring定时器 1.cron表达式方式 使用自带的定时任务,非常简单,只需要像下面这样,加上注解就好,不需要像普通定时任务框架那样继承任何定时处理接口 ,简单示例代码如下: package com.power.de

详解在Spring MVC或Spring Boot中使用Filter打印请求参数问题

使用Spring MVC或Spring Boot中打印或记录日志一般使用AOP记录Request请求和Response响应参数,在不使用AOP的前提下,如果在Filter中打印日志,在打印或消费请求类型为Content-Type:application/json的请求时,会出现严重的问题. 在Spring体系中,过滤器的定义我们一般采用继承OncePerRequestFilter的方式,当然也可以使用原始的Filter. 错误写法一: 如果不对request和response进行处理,使用伪代码

Spring Boot中使用Actuator的/info端点输出Git版本信息

对于Spring Boot的Actuator模块相信大家已经不陌生了,尤其对于其中的/health./metrics等强大端点已经不陌生(如您还不了解Actuator模块,建议先阅读<Spring Boot Actuator监控端点小结>).但是,其中还有一个比较特殊的端点/info经常被大家所忽视,因为从最初的理解,它主要用来输出application.properties配置文件中通过info前缀来定义的一些属性,由于乍看之下可能想不到太多应用场景,只是被用来暴露一些应用的基本信息,而基本

spring boot中的properties参数配置详解

application.properties application.properties是spring boot默认的配置文件,spring boot默认会在以下两个路径搜索并加载这个文件 src\main\resources src\main\resources\config 配置系统参数 在application.properties中可配置一些系统参数,spring boot会自动加载这个参数到相应的功能,如下 #端口,默认为8080 server.port=80 #访问路径,默认为/

spring boot中的静态资源加载处理方式

1.spring boot默认资源处理 Spring Boot 默认为我们提供了静态资源处理,使用 WebMvcAutoConfiguration 中的配置各种属性. spring boot默认加载文件的路径是: /META-INF/resources/ /resources/ /static/ /public/ 这些目录下面, 当然我们也可以从spring boot源码也可以看到Java代码: private static final String[] CLASSPATH_RESOURCE_L

在Spring Boot中如何使用数据缓存

在实际开发中,对于要反复读写的数据,最好的处理方式是将之在内存中缓存一份,频繁的数据库访问会造成程序效率低下,同时内存的读写速度本身就要强于硬盘.Spring在这一方面给我们提供了诸多的处理手段,而Spring Boot又将这些处理方式进一步简化,接下来我们就来看看如何在Spring Boot中解决数据缓存问题. 创建Project并添加数据库驱动 Spring Boot的创建方式还是和我们前文提到的创建方式一样,不同的是这里选择添加的依赖不同,这里我们添加Web.Cache和JPA依赖,如下图

spring boot(三)之Spring Boot中Redis的使用

spring boot对常用的数据库支持外,对nosql 数据库也进行了封装自动化. redis介绍 Redis是目前业界使用最广泛的内存数据存储.相比memcached,Redis支持更丰富的数据结构,例如hashes, lists, sets等,同时支持数据持久化.除此之外,Redis还提供一些类数据库的特性,比如事务,HA,主从库.可以说Redis兼具了缓存系统和数据库的一些特性,因此有着丰富的应用场景.本文介绍Redis在Spring Boot中两个典型的应用场景. 如何使用 1.引入