0
点赞
收藏
分享

微信扫一扫

前端学习记录 Day5（JSON）

水墨_青花 2022-09-06 阅读 93
JSONjsonspringxml前端开发


文章目录

  • ​​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>

  2. 运行效果如下（在网页编辑器中查看）：

    3. 前端学习记录 Day5（JSON）_spring

使用Controller实现返回JSON数据

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

返回对象

  1. 这里使用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>

  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格式返回；十分方便
    }

}

  2. 配置tomcat，测试，发现出现乱码问题，如图所示：

    3. 前端学习记录 Day5（JSON）_JSON_02

  3. 为了解决乱码问题，需要设置一下它的编码格式为utf-8，以及它返回的类型，通过@RequestMaping的produces属性来实现，如图所示：

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

  2. 再次测试，发现乱码问题消除，如图所示：

    3. 前端学习记录 Day5（JSON）_spring_03

注意：使用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>
        <!--JSON格式乱码处理方式-->
        <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格式返回；十分方便
    }

  2. 运行，结果如图：

    3. 前端学习记录 Day5（JSON）_xml_04

返回日期

  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格式返回；十分方便
    }

  2. 运行，结果如图：

    3. 前端学习记录 Day5（JSON）_json_05

  3. 默认日期格式会变成一个数字，是1970年1月1日到当前日期的毫秒数！Jackson 默认是转成时间戳（timestamps）形式
    为了解决这个问题，让时间按照指定的样式输出，需要取消timestamps形式，然后自定义时间格式
  4. 修改代码，代码如下：

@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格式返回；十分方便
    }

  2. 再次运行，结果如图：

    3. 前端学习记录 Day5（JSON）_xml_06

  3. 如果要经常使用该方法的相关代码的话，这样是比较麻烦的，可以将这些代码封装到一个工具类中，代码如下：

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来测试这一块。这两个注解一般都会在异步获取数据中使用到；


举报

相关推荐

前端学习--day5 | css（2）

前端css学习

JavaWeb学习记录 Day5（JSP进阶）

JSPJavaWebhtmljavaxml编程语言

Spring学习记录 Day5（Spring MVC进阶）

Spring MVCspringmvcxmlLinux系统/运维

Java学习 day5

java

Linux学习-DAY5

x系统文件名绝对路径Linux系统/运维

数据库学习记录 Day5（Mybatis进阶）

Mybatissql分页提交事务MySQL数据库

0基础学前端 day5

javaIOReaderWriterFiles

Java学习 day5 数组

java

Day5 - 常用模块学习

xml字符串python编程语言

国庆day5

华为算法数学建模leetcode宽度优先动态规划
0 条评论