前端和后端的JSON数据的流通

---

title: 前端和后端的JSON数据的流通
date: 2023-10-15 20:40:21
comments: true
toc: true
categories: “springboot”
description: 前端和后端和数据库的数据类型不对应怎么办，一篇文章教你解决
cover: https://gitee.com/jacksonzhang1014/blog-image/raw/master/springboot.png
top_img: https://gitee.com/jacksonzhang1014/blog-image/raw/master/img/main.jpg
tags:

• Java
• springboot
• SSM
• JSON
• vue

---

前端和后端的JSON数据的流通

前端 to 后端

1.前端的json数据

他们的值有自己的数据类型,例如name的值是类型，而age的值是number类型,但是他们的键一般都是string类型

可以表示为"name" : "John"，在vue中，如果写成这样子name: "John",也会被隐式转换为字符串—>"name" : "John".

const data = {
  name: "John",
  age: 30,
  isStudent: false,
  hobbies: ["reading", "hiking"],
  address: {
    street: "123 Main St",
    city: "Exampleville"
  }
};

2.postman的使用

例如使用postman去发送请求的json数据，一般要求键要加上双引号，不然像wrong就报错了

3.后端实体类接收

一般新建一个req的接受实体类。

@Data
public class PersonReq {
    private String name;
    private Integer age;
    private boolean isStudent;
    private List<String> hobbies;
    private Address address;
}

mvc给我们做了参数类型转换，Params 对象当中的age是Integer类型，但是json传字符串，照样可以映射进去。Boolean、BigDecimal、Integer、String、Date这些其实都可以映射进去的。

4.后端业务类处理对象

• 需要的方法

​ JSON.parseObject 是将Json字符串转化为相应的对象；

​ JSON.toJSONString 是将对象转化为Json字符串

• 使用前需要导包

<dependency>
	<groupId>com.alibabagroupId>
	<artifactId>fastjsonartifactId>
    <version>1.2.62version>
dependency>

• 示例：

//转换为Map集合
Map<String, Object> filter = JSONObject.parseObject(JSON.toJSONString(PersonReq));

//转换为对象
Student student = JSON.parseObject(JSON.toJSONString(PersonReq), Student.class);

5.搜索框的空值

在查询的时候，往往有些搜索框是空的，我们在写SQL语句的时候往往需要这样写。

		 <where>
            <if test="filter.customer != null and filter.customer != ''">
                and (c.customer_code like concat('%', #{filter.customer},'%')
        where>

如果不为空，就要进行查询。如果为空的话，就可以跳过该查询了。但是如果字段的的数据类型是int，或者long怎么办。这个东西可没有null，难道要使用0吗。但是万一如果这个需要用到0的查询怎么办，因此我们需要使用包装类。int—> Integer和long->Long，这样的话，如果搜索框为空的话，那就可以传一个null了。

<template>
  <div>
    <input v-model="searchValue" placeholder="Search..." @input="search">
    <button @click="clearSearch">Clear</button>
    <div v-if="searchResults.length > 0">
      <ul>
        <li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: null, // 初始化为空值
      searchResults: []
    };
  },
  methods: {
    search() {
      // 在这里执行搜索操作，使用 this.searchValue 作为搜索条件
      // 更新 this.searchResults 以显示搜索结果
    },
    clearSearch() {
      this.searchValue = null; // 清空搜索条件
      this.searchResults = []; // 清空搜索结果
    }
  }
};
</script>

@Data
public class SearchCriteria {
    private Integer searchValue;
}

后端to前端

1.前言

从后端返回给前端Json格式.他们的值一般都成为了String类型（除了null和布尔值）。无论你的Java中Resp返回类的数据类型是什么。

2.Java接收实体类

class CustomerResp  {
    /**
     * 客户id
     */
    @TableId(type = IdType.AUTO)
    private Long customerId;

    /**
     * 客户名称
     */
    private String customerName;

}

3.postman返回结果

4.来自chatGPT的解释

在 JSON 数据中，整数字段通常会被表示为字符串，并用双引号括起来，即使您的 Java 实体类中将整数属性声明为 Integer 类型。这是 JSON 标准的一部分，为了保持数据的一致性和格式化，整数值也会被包装在双引号中。

例如，如果您的 Java 实体类如下：

javaCopy codepublic class ExampleEntity {
    private Integer intValue;

    // Getter and setter methods
}

当您在后端返回 JSON 数据时，即使 intValue 是 Integer 类型，返回的 JSON 数据中的整数值也会被表示为字符串，如下所示：

jsonCopy code{
  "intValue": "42"
}

在上面的 JSON 中，intValue 的值是字符串 “42”，而不是整数 42，因为 JSON 数据中的数字通常会以字符串形式表示。

前端在解析 JSON 数据时通常会根据需要将字符串形式的整数值转换为整数类型，这通常是自动处理的。 JSON 解析库（如 JavaScript 中的 JSON.parse()）会负责将字符串转换为适当的数据类型。所以，虽然数据在 JSON 中以字符串形式表示，前端代码可以方便地将其转换为整数类型。

const jsonString = '{"floatValue": "3.14"}';
const data = JSON.parse(jsonString);

console.log(data.floatValue); // 输出 3.14（作为浮点数）

总结

数据类型。所以，虽然数据在 JSON 中以字符串形式表示，前端代码可以方便地将其转换为整数类型。

const jsonString = '{"floatValue": "3.14"}';
const data = JSON.parse(jsonString);

console.log(data.floatValue); // 输出 3.14（作为浮点数）

总结

在Java后端，无论是req和resp的类中的数据类型，都可以按照数据库定义的数据类型来。前端有相应的处理方法，不需要为了方便全部定义为string类型的