前端——JSON学习总结

Posted 2021-12-30 。往心。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端——JSON学习总结相关的知识，希望对你有一定的参考价值。

学习网址：

https://www.bilibili.com/video/BV1Pt411u7R3

什么是JSON？（以下有关概念内容为视频中学习文档相关内容，代码为本人学习时使用的有关代码）

JSON（JavaScript Object Notation,JS对象标记）是一种轻量级的数据交换格式，目前使用特别广泛。

采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在javaScript语言中，一切都是对象。因此，任何javaScript支持的类型都可以通过json来表示，例如字符串、数字、对象、数组等。看看他的要求和语法格式：

对象表示为键值对，数据由逗号分隔
花括号保存对象
方括号保存数组

JSON在线格式化、压缩转义有关网址

https://www.json.cn/json/jsonzip.html
https://www.bejson.com/zhuanyi/
https://m.sojson.com/yasuo.html
http://www.ab173.com/json/zhuanyi.php

JSON数据的格式

JSON键值对是用来保存javaScript对象的一种方式，和javaScript对象的写法也大同小异，键值对组合中的键名写在前面并用双引号””包裹，使用冒号：分割，然后紧接着值：

  
    "name":"nihai",
    "age":3,
    "sex":"男"
  ,
  
    "name":"nihai",
    "age":3,
    "sex":"男"

JSON和javaScript区别

JSON是javaScript对象的字符串表达法，它使用文本表示一个JS对象的信息，本质是一个字符串。

//编写一个对象
    var user = 
        name:"nihai",
        age:3,
        sex:"男"

JSON 和 JavaScript 对象互转

JSON字符串转换为JavaScript 对象，使用 JSON.parse() 方法

 var users =  \'"name": "nihai", "age": 3,"sex":"男"\';
    var user1=JSON.parse(users);
    console.log(users);

JavaScript 对象转换为JSON字符串，使用 JSON.stringify() 方法

//编写一个对象
    var user = 
        name:"nihai",
        age:3,
        sex:"男"
    
    console.log(user);
    //将js对象转换为json字符串
    var str=JSON.stringify(user);

代码测试

在web目录下新建一个 json-1.jsp，编写测试内容

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<html>
<head>
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    //编写一个对象
    var user = 
        name:"nihai",
        age:3,
        sex:"男"
    
    console.log(user);
    //将js对象转换为json字符串
    var str=JSON.stringify(user);
    console.log(str);
    var users =  \'"name": "nihai", "age": 3,"sex":"男"\';
    var user1=JSON.parse(users);
    console.log(users);
</script>
</body>
</html>

测试结果

Controller返回JSON数据

Jackson应该是目前比较好的json解析工具了

当然工具不止这一个，比如还有阿里巴巴的 fastjson 等等。

我们这里使用Jackson，使用它需要导入它的jar包；

<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-core -->
<dependency>
   <groupId>com.fasterxml.jackson.core</groupId>
   <artifactId>jackson-databind</artifactId>
   <version>2.9.8</version>
</dependency>

配置SpringMVC需要的配置

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
        version="4.0">

   <!--1.注册servlet-->
   <servlet>
       <servlet-name>SpringMVC</servlet-name>
       <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
       <!--通过初始化参数指定SpringMVC配置文件的位置，进行关联-->
       <init-param>
           <param-name>contextConfigLocation</param-name>
           <param-value>classpath:springmvc-servlet.xml</param-value>
       </init-param>
       <!-- 启动顺序，数字越小，启动越早 -->
       <load-on-startup>1</load-on-startup>
   </servlet>

   <!--所有请求都会被springmvc拦截 -->
   <servlet-mapping>
       <servlet-name>SpringMVC</servlet-name>
       <url-pattern>/</url-pattern>
   </servlet-mapping>

   <filter>
       <filter-name>encoding</filter-name>
       <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
       <init-param>
           <param-name>encoding</param-name>
           <param-value>utf-8</param-value>
       </init-param>
   </filter>
   <filter-mapping>
       <filter-name>encoding</filter-name>
       <url-pattern>/</url-pattern>
   </filter-mapping>

</web-app>

springmvc-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:context="http://www.springframework.org/schema/context"
      xmlns:mvc="http://www.springframework.org/schema/mvc"
      xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd
       http://www.springframework.org/schema/mvc
       https://www.springframework.org/schema/mvc/spring-mvc.xsd">

   <!-- 自动扫描指定的包，下面所有注解类交给IOC容器管理 -->
   <context:component-scan base-package="com.kuang.controller"/>

   <!-- 视图解析器 -->
   <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
         id="internalResourceViewResolver">
       <!-- 前缀 -->
       <property name="prefix" value="/WEB-INF/jsp/" />
       <!-- 后缀 -->
       <property name="suffix" value=".jsp" />
   </bean>

</beans>

编写一个User的实体类，测试Controller

package com.thym.thymdemo.view;

import lombok.Data;

import java.util.Date;
import java.util.List;

/**
 * @author June
 * @date 2021/12/25 15:46
 */
@Data
public class User 
    private String username;
    private Integer age;
    private Integer sex;
    private Boolean isVip;
    private Date createTime;
    private List<String> tags;

需要两个新东西，一个是@ResponseBody，一个是ObjectMapper对象

编写一个Controller：

package com.thym.thymdemo.controller;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.SerializationFeature;
import com.thym.thymdemo.view.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;


@Controller
public class IndexController 
    @RequestMapping(value = "/json1",produces = "application/json;charset=utf-8")
    @ResponseBody
    public String json1() throws JsonProcessingException
        ObjectMapper mapper = new ObjectMapper();

        User user = new User();
        user.setUsername("啊手动阀");
        user.setSex(1);
        user.setIsVip(true);

        String str = mapper.writeValueAsString(user);
        System.out.println(str);
        return str;

测试结果：

乱码问题

通过@RequestMaping的produces属性来实现，修改下代码

//produces:指定响应体返回类型和编码
@RequestMapping(value = "/json1",produces = "application/json;charset=utf-8")

乱码统一解决

上一种方法比较麻烦，如果项目中有许多请求则每一个都要添加，可以通过Spring配置统一指定，这样就不用每次都去处理了！

我们可以在springmvc的配置文件上添加一段消息StringHttpMessageConverter转换配置！

<mvc:annotation-driven>
   <mvc:message-converters register-defaults="true">
       <bean class="org.springframework.http.converter.StringHttpMessageConverter">
           <constructor-arg value="UTF-8"/>
       </bean>
       <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
           <property name="objectMapper">
               <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                   <property name="failOnEmptyBeans" value="false"/>
               </bean>
           </property>
       </bean>
   </mvc:message-converters>
</mvc:annotation-driven>

输出时间对象

@RequestMapping(value = "/json2")
    @ResponseBody
    public String json2() throws JsonProcessingException
        Date date = new Date();
        return new ObjectMapper().writeValueAsString(date);

测试截图

默认日期格式会变成一个数字，是1970年1月1日到当前日期的毫秒数！
Jackson 默认是会把时间转成timestamps形式

解决方案：取消timestamps形式，自定义时间格式

@RequestMapping(value = "/json3")
    @ResponseBody
    public String json3() throws JsonProcessingException
        ObjectMapper mapper = new ObjectMapper();
        Date date = new Date();
        //关闭时间戳功能
        mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS,false);
        //时间格式化
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        mapper.setDateFormat(simpleDateFormat);
        return mapper.writeValueAsString(date);

测试截图

FastJson

fastjson.jar是阿里开发的一款专门用于Java开发的包，可以方便的实现json对象与JavaBean对象的转换，实现JavaBean对象与json字符串的转换，实现json对象与json字符串的转换。实现json的转换方法很多，最后的实现结果都是一样的。

fastjson 的 pom依赖

<dependency>
   <groupId>com.alibaba</groupId>
   <artifactId>fastjson</artifactId>
   <version>1.2.60</version>
</dependency>

fastjson 三个主要的类：

JSONObject 代表 json 对象

JSONObject实现了Map接口, 猜想 JSONObject底层操作是由Map实现的。
JSONObject对应json对象，通过各种形式的get()方法可以获取json对象中的数据，也可利用诸如size()，isEmpty()等方法获取"键：值"对的个数和判断是否为空。其本质是通过实现Map接口并调用接口中的方法完成的。

JSONArray 代表 json 对象数组

内部是有List接口中的方法来完成操作的。

JSON代表 JSONObject和JSONArray的转化

JSON类源码分析与使用
仔细观察这些方法，主要是实现json对象，json对象数组，javabean对象，json字符串之间的相互转化。

注：此篇博客只是视频讲解中部分内容，需要了解更多内容还需观看视频：https://www.bilibili.com/video/BV1Pt411u7R3

以上是关于前端——JSON学习总结的主要内容，如果未能解决你的问题，请参考以下文章

VS Code配置snippets代码片段快速生成html模板，提高前端编写效率

前端开发工具vscode如何快速生成代码片段

python常用代码片段总结

回归 | js实用代码片段的封装与总结（持续更新中...）

web前端开发JQuery常用实例代码片段(50个)

Python学习总结