Json 格式化

齐大圣2012

12724人浏览 · 2020-03-23 19:27:50

齐大圣2012 · 2020-03-23 19:27:50 发布

【简介】

在无网无插件的情况下，需要对JSON字符串进行格式化

【Demo 地址】

https://github.com/qidasheng2012/json-format

【pom】

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.5.RELEASE</version>
        <relativePath/>
    </parent>
    <groupId>com.it</groupId>
    <artifactId>json-format</artifactId>
    <version>1.0.0</version>
    <name>json-format</name>
    <description>Demo project for json-format</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

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

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

【application.yml】

server:
  port: 9527

spring:
  mvc:
    view:
      prefix: classpath:/templates/
      suffix: .html

【controller】

核心就是通过fastjson进行字符串的格式化

package com.it.controller;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.alibaba.fastjson.serializer.SerializerFeature;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/json")
public class JsonFormatController {

    @PostMapping("/format")
    public String format(@RequestBody String jsonStr) {

        if (!StringUtils.hasText(jsonStr)) {
            return "";
        }

        JSONObject jsonObject = JSON.parseObject(jsonStr);
        return JSON.toJSONString(jsonObject, SerializerFeature.PrettyFormat, SerializerFeature.WriteMapNullValue
                , SerializerFeature.WriteDateUseDateFormat);

    }
}

其实这里已经实现功能了
在这里插入图片描述

【页面】

为了方便，编写了个简单的页面。（本人非专业前端，页面写的low，不要介意）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json-format</title>
</head>
<body>
<div style="height: auto;width: 100%;border: 0px solid gray; margin: 0 auto; overflow: hidden">
    <div id="left" style="text-align: left;">
        <div style="padding-top: 10px">格式化前数据</div>
        <div style="padding-top: 10px">
            <textarea id="left_text" rows="10" cols="180"></textarea>
        </div>
    </div>

    <div id="middle" style="text-align: left;padding-top: 10px">
        <button onclick="format()" style="background-color: #6495ED;width: 80px;height: 40px">
            <font style="front-family:微软雅黑,宋体;front-size:lem;color: #FFFFFF">
                <b>格式化</b>
            </font>
        </button>
    </div>

    <div id="right" style="text-align: left;">
        <div style="padding-top: 10px">格式化后数据</div>
        <div style="padding-top: 10px">
            <textarea id="right_text" rows="60" cols="180"></textarea>
        </div>
    </div>
</div>

</body>

<script src="./js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    function format() {
        var jsonStr = $("#left_text").val();

        if (jsonStr == "") {
            alert("请输入要格式化的json字符串")
            return
        }

        $.ajax({
            type:"POST",
            url:"/json/format",
            datatype: "json",
            data: jsonStr,
            contentType:"text/plain;charset=UTF-8",
            success: function (data) {
                $("#right_text").val(data)
            },
            error:function () {
                alert("要格式化的json字符串格式错误！")
            }
        });
    }
</script>
</html>