1. 首页
  2. 编程与技术

玩转spring boot 结合jQuery和AngularJs（3）

发布于 2017-11-28 13:26:49 | 126 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

Spring Framework 开源j2ee框架

Spring是什么呢？首先它是一个开源的项目，而且目前非常活跃；它是一个基于IOC和AOP的构架多层j2ee系统的框架，但它不强迫你必须在每一层 中必须使用Spring，因为它模块化的很好，允许你根据自己的需要选择使用它的某一个模块；它实现了很优雅的MVC，对不同的数据访问技术提供了统一的接口，采用IOC使得可以很容易的实现bean的装配，提供了简洁的AOP并据此实现Transcation Managment，等等

玩转spring boot，这篇文章主要介绍了结合jQuery和AngularJs，玩转spring boot，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

在上篇的基础上

准备工作：

修改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="//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="//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

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



最新网友评论  共有(0)条评论 发布评论 返回顶部
推荐阅读
  • 终极炫富——2016 年 iOS 开发者收入调查报告
  • 年度大片：Stack Overflow 2017 开发者调查报告发布！
  • 开发者需要大学学位吗？
  • 程序员多大年纪算高龄，届时该何去何从？
  • 2017 年高薪编程语言排行榜，你的语言上榜没？
  • 各编程语言开发者最常使用的按键，中了没?
  • 伤不起的三十岁，干不动的程序员要何去何从？
  • 2016年中国加班最狠IT公司排行
  • 一句话"面试"漫画：黑了苹果、谷歌、三星
  • 拿代码量算 KPI ……跟程序员们来这套？
  • 程序员遇到 Bug 时的 30 个反应，你是哪一种？
  • 2016年收入最高的5个编程语言 Java和C没在前五?
  • 为什么很少见人傻钱多的程序员炫富？
  • 阿里月薪两万是什么体验？
  • 代码缩进时 程序员更喜欢空格键还是Tab键？
    • 最新资讯
  • Python获取系统所有进程PID及进程名称的方法示例
  • Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
  • Python实现的根据IP地址计算子网掩码位数功能示例
  • 好的Python培训机构应该具备哪些条件
  • 详解Pytorch 使用Pytorch拟合多项式(多项式回归)
  • Python加载带有注释的Json文件实例
  • 对python的文件内注释 help注释方法
  • Python实现判断一行代码是否为注释的方法
  • Oracle数据库表中字段顺序的修改方法
  • ASP.NET MVC 4使用PagedList.Mvc分页的实现代码
  • Oracle实例启动时报错：ORA-32004的解决方法
  • 解读ASP.NET 5 & MVC6系列教程（7）：依赖注入
  • 详解IDEA用maven创建springMVC项目和配置
  • ASP.NET MVC5网站开发之展示层架构（五）
  • SpringBoot创建maven多模块项目实战代码
    • 后端技术
    前端技术
    数据库
    热门框架
    常用IDE
    其他
    Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务