Spring MVC JSON数据交互

1年前 (2024-04-27)

我们知道，Spring MVC 在传递数据时，通常都需要对数据的类型和格式进行转换。而这些数据不仅可以常见的 String 类型，还可以是 JSON 等其他类型。

JSON 是近些年一种比较流行的数据格式，它与 XML 相似，也是用来存储数据的。但相较于 XML，JSON 数据占用的空间更小，解析速度更快。因此，使用 JSON 数据进行前后台的数据交互也是一种十分常见的手段。

本节将针对 Spring MVC 的 JSON 类型数据交互进行讲解。

JSON 概述

JSON（JavaScript Object Notation，JS 对象标记）是一种轻量级的数据交互格式。与 XML 一样，JSON 也是一种基于纯文本的数据格式。通过它，我们不仅能够传递 String、Number、Boolean 等简单类型的数据，还可以传递数组、Object 对象等复杂类型的数据。

JSON 支持 2 种数据结构，它们分别是对象结构和数组结构。

1. 对象结构

JSON 的对象结构以“{”开始，以“}”结束，中间则由 0 个或多个以英文的逗号（即“,”）分隔的 key/value 对构成。

对象结构的语法结构如下。

{
key1:value1,
key2:value2,
...
}

其中，key 必须为 String 类型，value 可以是 String、Number、Object、Array 等数据类型。

例如，一个 person 对象包含姓名、密码、年龄等信息，使用 JSON 的表示形式如下：

{
"pname":"张三",
"password":"123456",
"page":40
}

2. 数组结构

JSON 的数组结构以“[”开始、以“]”结束，中间部分由 0 个或多个以英文的逗号（即“,”）分隔的值列表组成。

数组结构的语法结构如下：

{
value1,
value2,
...
}

例如，一个数组中包含了 String、Number、Boolean、null 多种类型的数据，使用 JSON 的数组结构表示形式如下。

[
"c语言中文网",
123456789,
true,
null
]

上述两种（对象、数组）数据结构也可以分别组构成更加复杂的数据结构。

例如，一个 student 对象包含 sno、sname、hobby 和 college 等多个属性，其 JSON 表示形式如下。

{
"sno":"201802228888",
"sname":"张三",
"hobby":[
"篮球",
"足球"
],
"college":{
"cname":"清华大学",
"city":"北京",
"code":100000
}
}

JSON 数据转换

为了实现浏览器与控制器类之间的 JSON 数据交互，Spring MVC 提供了一个默认的 MappingJackson2HttpMessageConverter 类，来处理 JSON 格式请求和响应。通过它，我们既可以将 Java 对象转换为 JSON 数据，也可以将 JSON 数据转换为 Java 对象。

引入依赖包

想要使用 MappingJackson2HttpMessageConverter 对 JSON 数据进行转换，步就是要将 Jackson 的依赖包引入到 Spring MVC 项目中。

jackson-annotations-x.x.x.jar：JSON 转换的注解包

jackson-core-x.x.x.jar：JSON 转换的核心包

jackson-databind-x.x.x.jar：JSON 转换的数据绑定包

以上这些 Jackson 的开源依赖包都可以通过“https://mvnrepositor网站站点" rel="nofollow" /> 并将 Spring MVC 和 Jackson 的依赖包引入到项目中，其 web.xml 配置如下。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp网站站点" rel="nofollow"  />    
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework网站站点" rel="nofollow"  />          
<mvc:default-servlet-handler />

<mvc:resources /> 和 <mvc:default-servlet-handler /> 这两个标签配置都可以实现静态资源的映射，我们可以根据自身的需求自行选择。

3. 在 net.biancheng.c.bean 包下，创建一个名为 Product 的实体类，代码如下。

package net.biancheng.c.bean;
import java.math.BigDecimal;
public class Product {
private String productId;
private String productName;
private BigDecimal price;
private Integer stock;
private String introduction;
public String getIntroduction() {
return introduction;
}
public void setIntroduction(String introduction) {
this.introduction = introduction;
}
public String getProductId() {
return productId;
}
public void setProductId(String productId) {
this.productId = productId;
}
public String getProductName() {
return productName;
}
public void setProductName(String productName) {
this.productName = productName;
}
public BigDecimal getPrice() {
return price;
}
public void setPrice(BigDecimal price) {
this.price = price;
}
public Integer getStock() {
return stock;
}
public void setStock(Integer stock) {
this.stock = stock;
}
@Override
public String toString() {
return "Product{" +
"productId=" + productId +
", productName='" + productName + '\'' +
", price=" + price +
", stock=" + stock +
", introduction='" + introduction + '\'' +
'}';
}
}

4. 在 net.biancheng.c.controller 包下，创建一个名为 ProductController 的 Controller 类，代码如下。

package net.biancheng.c.controller;
import net.biancheng.c.bean.Product;
import net.biancheng.c.dao.ProductDao;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
/**
* @author C语言中文网
*/
@Controller
public class ProductController {
@Resource
private ProductDao productDao;
/**
* 查看或回显商品信息，get：查看商品信息  update:为修改页回显的商品信息
*/
@ResponseBody
@RequestMapping("/product/{productId}")
public Product getProduct(@PathVariable("productId") String productId) {
Product product = productDao.getProductById(productId);
return product;
}
/**
* 新增商品
*
* @param product
* @return
*/
@ResponseBody
@RequestMapping(value = "/product", method = RequestMethod.POST)
public Product addProduct(@RequestBody Product product) {
productDao.addProduct(product);
return product;
}
/**
* 删除指定的商品
*
* @param productId
* @return
*/
@RequestMapping(value = "/product", method = RequestMethod.DELETE)
public String deleteProduct(String productId) {
productDao.deleteProduct(productId);
return "redirect:/products";
}
/**
* 获取商品列表
*
* @return
*/
@ResponseBody
@RequestMapping("/getProductList1")
public List<Product> getProductList1() {
List productList = productDao.getProductList();
return productList;
}
/**
* 修改商品信息
*
* @param product
* @return
*/
@RequestMapping(value = "/edit-product")
public String updateProduct(Product product) {
productDao.updateProduct(product);
return "redirect:/products";
}
}

5. 在 net.biancheng.c.dao 包下，创建一个名为 ProductDao 的类，代码如下。

package net.biancheng.c.dao;
import net.biancheng.c.bean.Product;
import org.springframework.stereotype.Repository;
import java.math.BigDecimal;
import java.util.*;
@Repository
public class ProductDao {
private static Map<String, Product> products = null;
static {
products = new HashMap<String, Product>();
Product product = new Product();
product.setProductId("1");
product.setProductName("茅台");
product.setPrice(new BigDecimal(9999));
product.setStock(1000);
product.setIntroduction("茅台酒是大曲酱香型酒的鼻祖。");
Product product1 = new Product();
product1.setProductId("2");
product1.setProductName("五粮液");
product1.setPrice(new BigDecimal(8888));
product1.setStock(1000);
product1.setIntroduction("五粮液，四川省宜宾市特产，中国国家地理标志产品。");
Product product2 = new Product();
product2.setProductId("3");
product2.setProductName("信阳毛尖");
product2.setPrice(new BigDecimal(7777));
product2.setStock(1000);
product2.setIntroduction("信阳毛尖又称豫毛峰，属绿茶类，是中国十大名茶之一，也是河南省著名特产之一；");
Product product3 = new Product();
product3.setProductId("4");
product3.setProductName("深州大蜜桃");
product3.setPrice(new BigDecimal(6666));
product3.setStock(1000);
product3.setIntroduction("深州蜜桃，河北省深州市特产，中国国家地理标志产品。");
products.put(product.getProductId(), product);
products.put(product1.getProductId(), product1);
products.put(product2.getProductId(), product2);
products.put(product3.getProductId(), product3);
}
/**
* 获取商品列表
*
* @return
*/
public List getProductList() {
List productList = new ArrayList();
Set<String> keys = products.keySet();
for (String key : keys) {
Product product = products.get(key);
productList.add(product);
}
return productList;
}
/**
* 根据商品 id 获取商品信息
*
* @param productId
* @return
*/
public Product getProductById(String productId) {
return products.get(productId);
}
/**
* 新增商品
*
* @param product
*/
public void addProduct(Product product) {
products.put(product.getProductId(), product);
}
/**
* 修改商品
*
* @param product
*/
public void updateProduct(Product product) {
products.put(product.getProductId(), product);
}
/**
* 删除商品
*
* @param productId
*/
public void deleteProduct(String productId) {
products.remove(productId);
}
}

6. 在 webapp 下新建一个 js 目录，并将 jquery-3.6.0.min.js 存放到该目录下。

7. 在 webapp/WEB-INF 下新建一个 templates 目录，并在该目录下创建一个 product_list.html，代码如下。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf网站站点" rel="nofollow"  /> 
图1：商品列表

9. 点击下方的“新增商品”按钮，在弹出的新增商品页中填写商品信息，如下图。

图2：新增商品页

10. 在新增商品页点击“新增商品”按钮，返回商品列表页，结果如下图。

图3：商品列表页-2

11. 点击商品“衡水老白干”右侧的“查看商品”按钮，在弹出的商品详情页中查看商品详情，如下图。

图4：商品详情页

12. 返回“商品列表页”点击商品右侧的“修改商品”按钮，在弹出的“修改商品页”对商品进行修改，如下图。

图5：修改商品页

13. 点击下方的“修改商品信息”按钮，返回商品列表页，结果如下图。

图6：商品列表

14. 点击商品列表页的“删除商品”按钮，删除商品“衡水老白干-修改”，如下图。

图7：删除商品

15. 点击“确定”按钮，删除商品，返回查看商品列表，如下图。

图8：商品列表页