apihub
/
feling.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
feling.net/json-intro.html

217 lines
11 KiB
HTML
Raw Normal View History

。。
2019-09-30 14:50:41 +08:00
<!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">
。。
2020-01-17 00:58:31 +08:00
<meta name="description" content="聆熵在线工具——在开发过程中，工程师们常常需要人工查看 json 数据。格式验证的目的，就是将一串难以阅读的文字，调整成人类友好的格式，便于人们阅读。">
。。
2020-01-15 13:40:30 +08:00
<meta name="keywords" content="base64编码解码,json格式验证,base64图片">
。。
2019-09-30 14:50:41 +08:00
<meta name="robots" content="all">
<meta name="author" content="feling.net">
..
2021-11-28 16:49:10 +08:00
<title>base64编码解码，json格式验证，base64图片</title>
..
2024-02-17 16:28:34 +08:00
<link rel="stylesheet" href="//cdn-feling-net.oss-cn-beijing.aliyuncs.com/css/uikit.min.css" media="all">
。。
2019-09-30 14:50:41 +08:00
<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>
..
2024-02-17 16:28:34 +08:00
<script src="//cdn-feling-net.oss-cn-beijing.aliyuncs.com/js/uikit.min.js"></script>
。。
2019-09-30 14:50:41 +08:00
</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">
..
2020-01-16 04:24:00 +08:00
</div>
。。
2019-09-30 14:50:41 +08:00
<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>
..
2024-02-17 16:28:34 +08:00
<!-- <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"> -->
。。
2019-09-30 14:50:41 +08:00
<figure class="uk-overlay">
..
2024-02-17 16:28:34 +08:00
<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">
。。
2019-09-30 14:50:41 +08:00
<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" >
&nbsp;&nbsp;&nbsp;&nbsp;1. 添加空白符 ( 换行、空格、缩进 ) <br>
&nbsp;&nbsp;&nbsp;&nbsp;2. 标记不同的颜色 ( 高亮 )<br>
&nbsp;&nbsp;&nbsp;&nbsp;3. 折叠一个段落<br>
</div>
..
2024-02-17 16:28:34 +08:00
<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">
。。
2019-09-30 14:50:41 +08:00
</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>
..
2021-11-28 16:49:10 +08:00
json 字符串通常以这样的形式出现： <code>{"key": value,}</code> ，这样的一组结构在 json 中表示一个对象。其中,开头和结尾是一对花括号 <code>{}</code>；中间是以逗号 <code>,</code> 分割的 键值对；<br><br>
。。
2019-09-30 14:50:41 +08:00
每个键值对中：<br>
..
2021-11-28 16:49:10 +08:00
键 是一个字符串类型的数据，需要用引号 <code>"</code> 包裹，字符串中不能有换行符。<br><br>
。。
2019-09-30 14:50:41 +08:00
键 和 值 之间用冒号 <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"
..
2024-02-17 16:28:34 +08:00
src="//cdn-feling-net.oss-cn-beijing.aliyuncs.com/images/json-intro-jq.png">
。。
2019-09-30 14:50:41 +08:00
</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;">
..
2020-01-15 14:00:19 +08:00
<div class="uk-width-small-1-1 uk-width-medium-1-3 uk-text-small uk-text-muted">
..
2020-01-15 13:58:13 +08:00
<span>
。。
2020-01-15 13:56:11 +08:00
开源地址: https://gitee.com/apihub/feling.net
..
2020-01-15 14:03:24 +08:00
</span><br><br>
..
2020-01-15 13:58:13 +08:00
<span>
,,
2020-03-12 17:58:46 +08:00
<a href="http://www.beian.miit.gov.cn" rel="nofollow">闽ICP备19012687号</a>
..
2021-11-28 17:00:42 +08:00
</span><br><br>
..
2021-11-28 17:07:49 +08:00
<br>
。。
2019-09-30 14:50:41 +08:00
</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>