Spring MVC 的JSON 数据交互和RESTful支持

秒速五厘米 2023-02-13 03:51 107阅读 0赞

JSON数据交互

JSON概述

JSON与 XML 非常相似，都是用于存储数据的，但是JSON 相对于XML来说，解析速度更快，占用空间更小，因此在实际开发中，使用 JSON式的数据进行前后台的数据交互是很常见的。

JSON（JavaScript Object Notation，JS对象标记）是一种轻量级的数据交换格式。它是基于JavaScript的一个子集，使用了C、C++、C\#、Java、JavaScript、Perl、Python等其他语言的约定，采用完全独立于编程语言的文本格式来存储和表示数据。

JSON数据转换

Spring提供了一个HttpMessageConverter接口来实现浏览器与控制器类（Controller）之间的数据交互。该接口主要用于将请求信息中的数据转换为一个类型为T的对象，并将类型为T的对象绑定到请求方法的参数中，或者将对象转换为响应信息传递给浏览器显示。

HttpMessageConverter接口有很多实现类，这些实现类可以对不同类型的数据进行信息转换。其中MappingJackson2HttpMessageConverter是Spring MVC默认处理JSON格式请求响应的实现类。该实现类利用Jackson开源包读写JSON数据，将Java对象转换为JSON对象和XML文档，同时也可以将JSON对象和XML文档转换为Java对象。

要使用MappingJackson2HttpMessageConverter对数据进行转换，就需要使用Jackson的开源包，下载地址：[http://mvnrepository.com/artifact/com.fasterxml.jackson.core  
][http_mvnrepository.com_artifact_com.fasterxml.jackson.core]需要使用到下面三个包  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]  
在使用注解式开发时，需要用到2个重要的JSON格式转换注解，分别为@RequestBody和@ResponseBody，关于这两个注解的说明如下表所示：

<table> 
 <thead> 
  <tr> 
   <th>注解</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>@RequestBody</td> 
   <td>用于将请求体中的数据绑定到方法的形参中。该注解用在方法的形参上</td> 
  </tr> 
  <tr> 
   <td>@ResponseBody</td> 
   <td>用于直接返回return对象。该注解用在方法上。</td> 
  </tr> 
 </tbody> 
</table>

案例实现：

先进行配置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">
    	 	<welcome-file-list>
    	 		<welcome-file>index.jsp</welcome-file>
    	 	</welcome-file-list>
      <servlet>
      
        <servlet-name>springmvc</servlet-name>
        <servlet-class>
                  org.springframework.web.servlet.DispatcherServlet
             </servlet-class>
             
        <init-param>
          <param-name>contextConfigLocation</param-name>
          <param-value>classpath:springmvc-config.xml</param-value>
        </init-param>
        
        <load-on-startup>1</load-on-startup>
      </servlet>
      <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
      </servlet-mapping>
    </web-app>

随后对spring-mvc.xml文件进行配置

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
    	xmlns:mvc="http://www.springframework.org/schema/mvc"
    	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    	xmlns:context="http://www.springframework.org/schema/context"
    	xsi:schemaLocation="http://www.springframework.org/schema/beans
    	   http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
    	   http://www.springframework.org/schema/mvc
    	   http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
    	   http://www.springframework.org/schema/context 
      http://www.springframework.org/schema/context/spring-context-4.3.xsd">
    	
    	<context:component-scan
    		base-package="com.lzq.controller" />
    		
    		<mvc:annotation-driven></mvc:annotation-driven>
    		
    		<mvc:resources location="/js/" mapping="/js/**"></mvc:resources>
    	
    	<bean id="viewResolver"
    		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    		
    		<property name="prefix" value="/WEB-INF/jsp/" />
    		
    		<property name="suffix" value=".jsp" />
    	</bean>	
    </beans>

在文件14-2中，不仅配置了组件扫描器和视图解析器，还配置了SpringMVC的注解驱动`<mvc:annotation-drivern />`和静态资源访问映射`<mvc:resources>`.其中`<mvc:annotation-drivern/>`配置会自动注册RequestMappingHandlerMapping和RequestMappingHandlerAdapter，两个Bean并提供对读写XML和读写JSON等功能的支持。`<mvc:resources... />`元素用于配置静态资源的访问路径。由于在web.xml中配置的“/”会将页面中引入的静态文件也进行拦截，而拦截后页面中将找不到这些静态资源文件，这样就会引起页面报错。而增加了静态资源的访问映射配置后，程序会自动地去配置路径下找静态的内容。  
`<mvc:resources>`中有两个重要属性location 和 mapping，如下表所示：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>location</td> 
   <td>用于定位需要访问的本地静态资源文件，具体到某个文件夹</td> 
  </tr> 
  <tr> 
   <td>mapping</td> 
   <td>匹配静态资源的全路径，其中" /** " 表示文件夹及其子文件夹下的某个具体文件</td> 
  </tr> 
 </tbody> 
</table>

新建一个com.lzq.po包，在里面添加一个class类。对属性进行封装以及重写getter/setter方法。

public class User {
    
    	 String username;
    	 Integer password;
    
    	public String getUsername() {
    		return username;
    	}
    
    	public void setUsername(String username) {
    		this.username = username;
    	}
    
    	public Integer getPassword() {
    		return password;
    	}
    
    	public void setPassword(Integer password) {
    		this.password = password;
    	}
    	
    	@Override
    	public String toString() {
    		return "User[ username = "+username +" , password = "+password+"]";
    	}
    }

再在 WebContent 目录下，创建页面文件 index.jsp 来测试JSON 数据交互，

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>测试JSON交互</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" 
          src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js">
    </script>
    <script type="text/javascript">
    function testJson(){ 
        // 获取输入的用户名和密码
    	var username = $("#username").val();
    	var password = $("#password").val();
    	$.ajax({ 
    		url : "${pageContext.request.contextPath }/testJson",
    		type : "POST", 
    		// data表示发送的数据
    		data :JSON.stringify({ username:username,password:password}),
    		// 定义发送请求的数据格式为JSON字符串
    		contentType : "application/json;charset=UTF-8",
    		//定义回调响应的数据格式为JSON字符串,该属性可以省略
    		dataType : "json",
    		}
    	});
    }
    </script>
    </head>
    <body>
        <form>
            用户名：<input type="text" name="username" id="username"><br />
            密   码：
              <input type="password" name="password" id="password"><br />
    	     <input type="button" value="测试JSON交互" onclick=" testJson()" />
        </form> 
    </body>
    </html>

编写了一个测试 JSON 交互的表单，当单击 “测试 JSON 交互” 按钮时，会执行页面中的 testJson() 函数 在函数中使用了 jQuery AJAX 方式将 JSON 格式的用户名和密码传递到以 “/testJson” 结尾的请求中。  
需要注意的是，在 AJAX 中包含了 个特别重要的属性，其说明如下：

*  data: 即请求时携带的数据，当使用 JSON 格式时，要注意编写规范
 *  contentType: 当请求数据为JSON 格式时，值必须为application/json
 *  dataType: 当响应数据为 JSON 时，可以定义 dataType 属性，并且值必须为 json 其中dataType: "json"也可以省略不写 ，页面会自动识别响应的数据格式。

创建一个com.lzq.controller的包，在里面进行添加控制器类。

package com.lzq.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;
    import com.lzq.po.User;
    
    @Controller
    public class UserController { 
    	@RequestMapping(value = "/testJson")
    	public User testJson(@RequestBody User user) { 
    		System.out.println(user);
    		return user;
    	}

方法中的@RequestBody 注解用于将前端请求体中的JSON 格式数据绑定到形参 user 上，@ResponseBody 注解用于直接返回 User 对象(当返回 POJO 对象时，会默认转换为 JSON式数据进行响应)。运行项目查看效果：  
![在这里插入图片描述][20200527140730711.gif]

RESTful支持

Spring MVC 除了支持 JSON 数据交互外，还支持 RESTf ul 风格的编程。

什么是RESTful ？

RESTful也称之为REST，是英文“Representational State Transfer”的简称。可以将他理解为一种软件架构风格或设计风格，而不是一个标准。 简单来说，RESTful风格就是把请求参数变成请求路径的一种风格。

传统的URL请求格式为：使用问号传递参数

http://.../queryItems?id=1

采用RESTful风格后，其URL请求为：

http://.../items/1

案例实现：

在上面的代码当中进行添加，首先在控制器类当中添加一个新的方法

@RequestMapping(value="/user/{id}", method=RequestMethod.GET)
    	//value="/user/{id}" 表示可以匹配以 "/user/{id}"尾的请求， 
    	//id 为请求中的动态参数; method=RequestMethod.GET 表示只接收 GET 方式的请求.
    @ResponseBody
    public User getUser(@PathVariable("id") String id) { 
    	//@PathVariable("id")注解则用于接收并绑定请求参数，它可以将请求 URL 中的变量映射到方法的形参上，
    	//如果请求路径为 "/user/{id}" ，即请求参数中的 id 和方法形参名称 id 一样，则@PathVariable 后面的"(id)"可以省略
    	System.out.println("id =" +id);
    	User user= new User();
    	if (id.equals("1234")) { 
    		user.setUsername("huangyueyue");
    	}
    	return user;
    }

添加一个restful.jsp文件:

<%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>restful</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" 
          src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js">
    </script>
    <script type="text/javascript">
    function search(){ 
        // 获取输入的用户名和密码
    	var id = $("#number").val();
    	$.ajax({ 
    		url : "${pageContext.request.contextPath }/user/"+id,
    		type : "GET", 
    		// data表示发送的数据
    		dataType : "json",
    		//成功响应的结果
    		success : function(data){ 
    			if(data.username != null){ 					
    			  alert("你查询的是："+data.username);
    			}else{ 
    				alert("没有找到id ="+id+"的用户")
    			}
    		}
    	});
    }
    </script>
    </head>
    <body>
        <form>
            <input type="text" name="number" id="number"><br />
    	     <input type="button" value="搜索" onclick=" search()" />
        </form> 
    </body>
    </html>

运行项目输入网址：`http://localhost:8080/JsonDataInteraction/restful.jsp`  
![在这里插入图片描述][20200527144350445.gif]  
整体项目  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]  
在这里的js文件夹下的jquery-1.11.3.min.js文件：也就是jquery的脚本：可自行百度下载。或者在下方链接下载：[http://www.worlduc.com/blog2012.aspx?bid=62801236][http_www.worlduc.com_blog2012.aspx_bid_62801236]

[http_mvnrepository.com_artifact_com.fasterxml.jackson.core]: http://mvnrepository.com/artifact/com.fasterxml.jackson.core
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200527113725600.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70
[20200527140730711.gif]: https://img-blog.csdnimg.cn/20200527140730711.gif
[20200527144350445.gif]: https://img-blog.csdnimg.cn/20200527144350445.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200527144623563.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTczMTU5,size_16,color_FFFFFF,t_70
[http_www.worlduc.com_blog2012.aspx_bid_62801236]: http://www.worlduc.com/blog2012.aspx?bid=62801236