zoukankan      html  css  js  c++  java
  • 前端——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

  • 相关阅读:
    Bootstrap标签(label)的使用
    Docker学习(二)
    linux 的tee命令
    解决 Docker pull 出现的net/http: TLS handshake timeout 的一个办法
    win 10 安装.msi 程序出现the error code is 2503
    Kbuntu16.04利用快捷键调用终端Konsole
    ubuntu上swift开发学习2
    ubuntu上swift开发学习1
    Linux中常用文件传输命令及使用方法
    Kbuntu16.04添加工作空间
  • 原文地址:https://www.cnblogs.com/lx06/p/15746008.html
Copyright © 2011-2022 走看看