前端学习记录 Day5（JSON）

今天药忘吃喽~ 2021-11-10 05:02 375阅读 0赞

### 文章目录 ###

*  Day 5
 *  简介
 *  语法
 *   *  JSON键值对
     *  JSON和Js对象的关系
     *  JSON 和 JS 对象互转
     *  实现
 *  使用Controller实现返回JSON数据
 *   *  返回对象
     *  返回集合
     *  返回日期
 *  总结

# Day 5 #

2019年8月1日。  
这是我学习前端的第五天。  
这一天，我学到了以下的知识。

# 简介 #

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

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

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

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

# 语法 #

## JSON键值对 ##

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

{ "name": "QinJiang"}
    { "age": "3"}
    { "sex": "男"}

## JSON和Js对象的关系 ##

很多人搞不清楚 JSON 和 Js 对象的关系，甚至连谁是谁都不清楚。其实，可以这么理解：

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

var obj = { a: 'Hello', b: 'World'}; //这是一个对象，注意键名也是可以使用引号包裹的
    var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

## JSON 和 JS 对象互转 ##

要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}

要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({ a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

## 实现 ##

1.  编写一个Html页面，来测试一下JSON的使用，代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JSON_秦疆</title>
    </head>
    <body>
    
    <script type="text/javascript"> //编写一个js的对象 var user = { name:"秦疆", age:3, sex:"男" }; //将js对象转换成json字符串 var str = JSON.stringify(user); console.log(str); //将json字符串转换为js对象 var user2 = JSON.parse(str); console.log(user2.age,user2.name,user2.sex); </script>
    
    </body>
    </html>

1.  运行效果如下（在网页编辑器中查看）：  
    ![在这里插入图片描述][20190802142733787.png]

# 使用Controller实现返回JSON数据 #

Jackson应该是目前比较好的json解析工具了，当然工具不止这一个，比如还有阿里巴巴的fastjson等等。

## 返回对象 ##

1.  这里使用Jackson，使用它需要导入它的jar包；

<dependency>
                <groupId>com.fasterxml.jackson.core</groupId>
                <artifactId>jackson-databind</artifactId>
                <version>2.9.8</version>
            </dependency>

1.  编写一个User的实体类，代码如下：

package pojo;
    
    public class User { 
        private String name;
        private int age;
        private String sex;
    
        public User() { 
        }
    
        public User(String name, int age, String sex) { 
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
    
        public String getName() { 
            return name;
        }
    
        public void setName(String name) { 
            this.name = name;
        }
    
        public int getAge() { 
            return age;
        }
    
        public void setAge(int age) { 
            this.age = age;
        }
    
        public String getSex() { 
            return sex;
        }
    
        public void setSex(String sex) { 
            this.sex = sex;
        }
    
        @Override
        public String toString() { 
            return "User{" +
                    "name='" + name + '\'' +
                    ", age=" + age +
                    ", sex='" + sex + '\'' +
                    '}';
        }
    }

1.  然后去编写我们的测试Controller；这里我们需要两个新东西，一个是@ResponseBody，一个是ObjectMapper对象，代码如下：

import com.fasterxml.jackson.core.JsonProcessingException;
    import com.fasterxml.jackson.databind.ObjectMapper;
    import com.pojo.User;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    @Controller
    public class UserController { 
    
        @RequestMapping("/json")
        @ResponseBody
        public String json1() throws JsonProcessingException { 
    
            //创建一个jackson的对象映射器，用来解析数据
            ObjectMapper mapper = new ObjectMapper();
            //创建一个对象
            User user = new User("秦疆1号", 3, "男");
            //将我们的对象解析成为json格式
            String str = mapper.writeValueAsString(user);
    
            return str; //由于@ResponseBody注解，这里会将str转成json格式返回；十分方便
        }
    
    }

1.  配置tomcat，测试，发现出现乱码问题，如图所示：  
    ![在这里插入图片描述][20190802143204275.png]
2.  为了解决乱码问题，需要设置一下它的编码格式为utf-8，以及它返回的类型，通过@RequestMaping的produces属性来实现，如图所示：

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

1.  再次测试，发现乱码问题消除，如图所示：  
    ![在这里插入图片描述][20190802143405769.png]

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

1.  **在resources目录下新建spring-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 http://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
    
        <context:component-scan base-package="controller"/>
        <mvc:default-servlet-handler/>
        <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>
    
        <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="InternalResourceViewResolver">
            <property name="prefix" value="/WEB-INF/jsp/"/>
            <property name="suffix" value=".jsp"/>
        </bean>
    
    
    
    </beans>

## 返回集合 ##

1.  修改测试Controller，加入一个打印集合的方法，代码如下：

@RequestMapping("/json3")
        @ResponseBody
        public String json3() throws JsonProcessingException { 
    
            //创建一个jackson的对象映射器，用来解析数据
            ObjectMapper mapper = new ObjectMapper();
            //创建一个对象
            User user1 = new User("秦疆1号", 3, "男");
            User user2 = new User("秦疆2号", 3, "男");
            User user3 = new User("秦疆3号", 3, "男");
            User user4 = new User("秦疆4号", 3, "男");
            List<User> list = new ArrayList<>();
            list.add(user1);
            list.add(user2);
            list.add(user3);
            list.add(user4);
            //将我们的对象解析成为json格式
            String str = mapper.writeValueAsString(list);
    
            return str; //由于@ResponseBody注解，这里会将str转成json格式返回；十分方便
        }

1.  运行，结果如图：  
    ![在这里插入图片描述][20190802143848941.png]

## 返回日期 ##

1.  修改测试Controller，加入一个打印时间日期对象的方法，代码如下：

@RequestMapping("/time")
        @ResponseBody
        public String json2() throws JsonProcessingException { 
    
            ObjectMapper mapper = new ObjectMapper();
            //创建时间一个对象
            Date date = new Date();
            //将我们的对象解析成为json格式
            String str = mapper.writeValueAsString(date);
    
            return str; //由于@ResponseBody注解，这里会将str转成json格式返回；十分方便
        }

1.  运行，结果如图：  
    ![在这里插入图片描述][20190802143958501.png]  
    默认日期格式会变成一个数字，是1970年1月1日到当前日期的毫秒数！Jackson 默认是转成时间戳（timestamps）形式  
    为了解决这个问题，让时间按照指定的样式输出，**需要取消timestamps形式，然后自定义时间格式**
2.  修改代码，代码如下：

@RequestMapping("/time")
        @ResponseBody
        public String json2() throws JsonProcessingException { 
    
            ObjectMapper mapper = new ObjectMapper();
            //不使用时间戳的方式
            mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
            //自定义日期格式对象
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            //指定日期格式
            mapper.setDateFormat(sdf);
    
            Date date = new Date();
            String str = mapper.writeValueAsString(date);
    
            return str; //由于@ResponseBody注解，这里会将str转成json格式返回；十分方便
        }

1.  再次运行，结果如图：  
    ![在这里插入图片描述][20190802144417147.png]
2.  如果要经常使用该方法的相关代码的话，这样是比较麻烦的，可以将这些代码封装到一个工具类中，代码如下：

import com.fasterxml.jackson.core.JsonProcessingException;
    import com.fasterxml.jackson.databind.ObjectMapper;
    import com.fasterxml.jackson.databind.SerializationFeature;
    
    import java.text.SimpleDateFormat;
    
    public class JsonUtils { 
        
        public static String getJson(Object object) { 
            return getJson(object,"yyyy-MM-dd HH:mm:ss");
        }
    
        public static String getJson(Object object,String dateFormat) { 
            ObjectMapper mapper = new ObjectMapper();
            //不使用时间差的方式
            mapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
            //自定义日期格式对象
            SimpleDateFormat sdf = new SimpleDateFormat(dateFormat);
            //指定日期格式
            mapper.setDateFormat(sdf);
            try { 
                return mapper.writeValueAsString(object);
            } catch (JsonProcessingException e) { 
                e.printStackTrace();
            }
            return null;
        }
    }

1.  修改代码，使用工具类，代码如下：

@RequestMapping("/utils")
        @ResponseBody
        public String json3() throws JsonProcessingException { 
    
            Date date = new Date();
            String json = JsonUtils.getJson(date);
    
            return json;
        }

--------------------

# 总结 #

**总结：上面都是用的是 @ResponseBody 注解，它就是把后台的对象转换成json对象，返回到页面 ， 和它对应的当然就是@RequestBody，一般用来负责接收前台的json数据，把json数据自动封装到pojo中；之后可以用Ajax来测试这一块。这两个注解一般都会在异步获取数据中使用到；**

[20190802142733787.png]: /images/20211109/6e7dd0d1179e447ba89d31c215f14f2e.png
[20190802143204275.png]: /images/20211109/c3eb2715cc1a485c8df0282718bf69b8.png
[20190802143405769.png]: /images/20211109/431d75200dec4ad8848595829bdff2ec.png
[20190802143848941.png]: /images/20211109/2e2e5ad5612b41d49c7a4a2068c6a42f.png
[20190802143958501.png]: /images/20211109/51185bb1d74a40b491d1d18cf2fcef03.png
[20190802144417147.png]: /images/20211109/7fb60bea6b8e4c02bae5cdc2435c79d5.png