217 lines
11 KiB
HTML
217 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" class="uk-height-1-1">
|
||
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="hostname" content="feling.net">
|
||
<meta name="description" content="聆熵在线工具——在开发过程中，工程师们常常需要人工查看 json 数据。格式验证的目的，就是将一串难以阅读的文字，调整成人类友好的格式，便于人们阅读。">
|
||
<meta name="keywords" content="base64编码解码,json格式验证,base64图片">
|
||
<meta name="robots" content="all">
|
||
<meta name="author" content="feling.net">
|
||
<title>base64编码解码，json格式验证，base64图片</title>
|
||
<link rel="stylesheet" href="//cdn-feling-net.oss-cn-beijing.aliyuncs.com/css/uikit.min.css" media="all">
|
||
<link rel="icon" type="image/png" href="//cdn.apihub.net/img/favicon.png">
|
||
<script src="//cdn.apihub.net/js/jquery-3.3.1.min.js"></script>
|
||
<script src="//cdn.apihub.net/js/vue.min.js"></script>
|
||
<script src="//cdn-feling-net.oss-cn-beijing.aliyuncs.com/js/uikit.min.js"></script>
|
||
</head>
|
||
|
||
<body class="uk-height-1-1">
|
||
<header>
|
||
<!-- 浏览器兼容性检测 -->
|
||
<div id="iiie"></div>
|
||
<script>
|
||
IIIE = new Vue({el:"#iiie"});
|
||
</script>
|
||
<script>
|
||
if (typeof IIIE == 'undefined') {
|
||
alert("该网页不支持您的浏览器版本，推荐使用 chrome 浏览器")
|
||
}
|
||
</script>
|
||
|
||
<!-- 网络联通性检测 -->
|
||
<div id="the-gfw"></div>
|
||
<script>
|
||
let gfw_tester = $.ajax({
|
||
url: "https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=xxx",
|
||
complete: function (data) {
|
||
if (data.statusText !== "timeout") {
|
||
$('#the-gfw').trigger('passible')
|
||
}
|
||
},
|
||
timeout: 2000
|
||
});
|
||
</script>
|
||
|
||
<nav class="uk-navbar">
|
||
<div href="/" class="uk-navbar-brand"
|
||
onmouseover="$('#brand-img').addClass('brand-img-animation')"
|
||
onmouseout="$('#brand-img').removeClass('brand-img-animation')">
|
||
<img id="brand-img" class="brand-img-animation" alt="logo"
|
||
width="28px;" height="28px;" src="//cdn.apihub.net/img/spinner.png">
|
||
</div>
|
||
<style>
|
||
.brand-img-animation {
|
||
animation: uk-rotate 0.8s;
|
||
animation-delay:0.4s;
|
||
}
|
||
</style>
|
||
<ul class="uk-navbar-nav">
|
||
<li class="uk-active"><a disabled>首页</a></li>
|
||
<li><a href="/">产品中心</a></li>
|
||
<li><a href="/about.html">关于我们</a></li>
|
||
<li><a href="/contact.html" rel="nofollow">联系我们</a></li>
|
||
</ul>
|
||
<div class="uk-navbar-flip">
|
||
<ul class="uk-navbar-nav" id="disqus_thread_modal_entrance">
|
||
<li><a href="#disqus_thread_modal" rel="nofollow" data-uk-modal>反馈与意见</a></li>
|
||
</ul>
|
||
<div id="disqus_thread_modal" class="uk-modal">
|
||
<div class="uk-modal-dialog">
|
||
<a class="uk-modal-close uk-close"></a>
|
||
<div id="disqus_thread">您的网络环境无法加载 disqus 的评论模块</div>
|
||
</div>
|
||
<script>
|
||
var disqus_config = function () {
|
||
this.page.url = "https://feling.net/";
|
||
this.page.identifier = "https://feling.net/";
|
||
};
|
||
$('#the-gfw').on('passible', function() {
|
||
var d = document, s = d.createElement('script');
|
||
s.src = '//feling.disqus.com/embed.js';
|
||
s.setAttribute('data-timestamp', + new Date());
|
||
(d.head || d.body).appendChild(s);
|
||
});
|
||
</script>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
<hr style="margin:0;">
|
||
|
||
<div id="content" style="
|
||
min-height:calc(100% - 90px - 40px - 17px);
|
||
padding-top: 15px;
|
||
padding-right: 15px;
|
||
overflow-x: hidden;">
|
||
<style>
|
||
@media(max-width:760px) {
|
||
#json-format-intro {
|
||
padding-left: 15px;
|
||
padding-right: 0px;
|
||
}
|
||
}
|
||
@media(min-width:760px) {
|
||
#json-format-intro {
|
||
padding-left: 60px;
|
||
padding-right: 45px;
|
||
}
|
||
}
|
||
</style>
|
||
<div id="json-format-intro" class="uk-text-center">
|
||
<h1><a href="/json/">在线 JSON 格式化</a>，让前后端联调更简单 </h1>
|
||
<!-- <img style="margin-bottom: 35px;box-shadow: 2px 2px 5px #ccc;" src="//cdn-feling-net.oss-cn-beijing.aliyuncs.com/images/json-intro-h1.png"> -->
|
||
<figure class="uk-overlay">
|
||
<img alt="json intro" style="border-top-left-radius: 5px;border-top-right-radius: 5px;" src="//cdn-feling-net.oss-cn-beijing.aliyuncs.com/images/json-intro.gif">
|
||
<figcaption class="uk-overlay-panel uk-overlay-bottom uk-overlay-background uk-text-center">
|
||
<a href="/json/" style="color: #fff;">立即体验 -- 在线 JSON 格式化</a>
|
||
</figcaption>
|
||
</figure>
|
||
<h2>什么是 JSON ?</h2>
|
||
<div class="uk-text-left" >
|
||
<p>
|
||
JSON 全称： JavaScript Object Notation，最早用于 JavaScript 语言中，描述对象的存在结构。 <br>
|
||
在现代 web 开发中，常用到前后端分离的架构。前端更专注于展示、交互的设计，后端更专注于业务逻辑的处理。而前后端之间沟通交互的桥梁就是 json 字符串。<br>
|
||
作为一种字符串的格式规范，json 比起早年常用的 xml 格式的字符串，更加简洁、高效、更容易阅读，在使用编程语言进行编码、解码时也更加方便。<br><br>
|
||
</p>
|
||
</div>
|
||
<h2>格式化有什么用？</h2>
|
||
<div class="uk-text-left" >
|
||
<p>
|
||
虽然 json 字符串的主要应用场景之一是前后端数据交互，是给机器阅读的一种格式规范。但在开发过程中，工程师们常常需要人工查看 json 数据。<br>
|
||
格式化的目的，就是将一串难以阅读的文字，调整成人类友好的格式，便于人们阅读。普遍的做法有：
|
||
<div>
|
||
<div style="display: inline-block" >
|
||
1. 添加空白符 ( 换行、空格、缩进 ) <br>
|
||
2. 标记不同的颜色 ( 高亮 )<br>
|
||
3. 折叠一个段落<br>
|
||
</div>
|
||
<img alt="json intro thumbnail" style="display: inline-block;width: 300px;" src="//cdn-feling-net.oss-cn-beijing.aliyuncs.com/images/json-intro-thumbnail.png">
|
||
</div>
|
||
|
||
</p>
|
||
</div>
|
||
|
||
<h2>JSON 语法介绍</h2>
|
||
<style>
|
||
code {
|
||
background: #ccc;
|
||
border: 1px solid #e1e1e8;
|
||
padding: 0.2em 0.4em;
|
||
margin: 0;
|
||
font-size: 85%;
|
||
background-color: rgba(27,31,35,0.05);
|
||
border-radius: 3px;
|
||
}
|
||
</style>
|
||
<div class="uk-text-left" >
|
||
<p>
|
||
json 字符串通常以这样的形式出现： <code>{"key": value,}</code> ，这样的一组结构在 json 中表示一个对象。其中,开头和结尾是一对花括号 <code>{}</code>；中间是以逗号 <code>,</code> 分割的 键值对；<br><br>
|
||
|
||
每个键值对中：<br>
|
||
键 是一个字符串类型的数据，需要用引号 <code>"</code> 包裹，字符串中不能有换行符。<br><br>
|
||
键 和 值 之间用冒号 <code>:</code> 分割。<br><br>
|
||
|
||
而每个值，可能有：字符串<code>""</code>、数字、布尔<code>flase</code>、数组<code>[]</code>、对象、空<code>null</code> 这六种类型。
|
||
</p>
|
||
</div>
|
||
<h2>其他 JSON 格式化方法 </h2>
|
||
<div class="uk-text-left" >
|
||
<h3>终端</h3>
|
||
<p >
|
||
<span class="uk-text-top">终端中经常使用 <code style="vertical-align: top;">curl</code> 命令调用后端接口，配合 <code style="vertical-align: top;">jq</code> 命令可以实现 json 格式化。如图：</span>
|
||
<img width="540" style="border-radius: 10px;" alt="json intro jq"
|
||
src="//cdn-feling-net.oss-cn-beijing.aliyuncs.com/images/json-intro-jq.png">
|
||
</p>
|
||
<h3>Python</h3>
|
||
<p>
|
||
Python 中打印格式化的 json 字符串，可以参考下面的示例代码：<br>
|
||
<pre>>>> import json
|
||
>>> json.dumps(some_object, indent=4, separators=(',', ': '))
|
||
</pre>
|
||
</p>
|
||
<h3>JavaScript</h3>
|
||
<p>
|
||
JavaScript 中打印格式化的 json 字符串，可以参考下面的示例代码：<br>
|
||
参考文档：<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify" rel="nofollow">mozilla-json-stringify</a> <br>
|
||
<pre>JSON.stringify(someValue, null, 4)</pre> <br>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr style="margin:0">
|
||
<footer class="uk-grid uk-grid-small" style="background:#f6f6f6;padding: 10px 10px 0 10px;">
|
||
<div class="uk-width-small-1-1 uk-width-medium-1-3 uk-text-small uk-text-muted">
|
||
<span>
|
||
开源地址: https://gitee.com/apihub/feling.net
|
||
</span><br><br>
|
||
<span>
|
||
<a href="http://www.beian.miit.gov.cn" rel="nofollow">闽ICP备19012687号</a>
|
||
</span><br><br>
|
||
<br>
|
||
</div>
|
||
<script>
|
||
var _hmt = _hmt || [];
|
||
(function() {
|
||
var hm = document.createElement("script");
|
||
hm.src = "https://hm.baidu.com/hm.js?7926b3f77abd3abf9b3a5c3ff9608acc";
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(hm, s);
|
||
})();
|
||
</script>
|
||
<a href="/book/" rel="nofollow" style="display: none;"></a>
|
||
</footer>
|
||
</body>
|
||
</html> |