vue 与 vue-json-viewer 实现 JSON 数据可视化

前言

接口的调试和测试是确保系统稳定性的重要步骤。为了让开发人员和测试人员能够直观地查看接口返回的 JSON 数据，使用合适的工具至关重要。vue-json-viewer 插件为 vue 开发者提供了一个简单而强大的解决方案。本文将详细介绍如何在 vue 项目中使用该插件，帮助你快速上手，提升接口测试的效率。

---

一、vue-json-viewer

vue-json-viewer 是一个用于在 vue.js 应用中展示 JSON 数据的插件。它提供了一种直观和美观的方式来可视化 JSON 数据，特别适合用于调试和展示 API 返回的数据。

为什么要选择 vue-json-viewer？

• 易于使用
  插件的使用非常简单，只需安装并在 vue 组件中引入即可使用，适合快速集成到现有项目中。

• 美观的展示
  vue-json-viewer 提供了友好的用户界面，能够以树形结构展示 JSON 数据，便于用户理解和查看数据层级。

• 支持复制功能
  插件内置了复制功能，用户可以轻松复制 JSON 数据，方便进行调试或分享。

• 主题支持
  插件支持自定义主题，开发者可以根据项目的设计风格调整 JSON 数据的展示样式。

• 预览模式
  提供预览模式，可以在不展开所有数据的情况下，快速查看 JSON 数据的结构。

1.1 配置

属性	描述	默认值
value	json对象的值，可以使用v-model，支持响应式	必填
expand-depth	默认展开的层级	1
copyable	展示复制按钮，默认文案为：copy、copied!, 你可以设置一个对象{copyText: ‘copy’, copiedText: ‘copied’} 来自定义复制按钮文案	false
sort	按照key排序展示	false
boxed	为组件添加一个盒样式	false
theme	添加一个自定义的样式class用作主题	jv-light
expanded	默认展开视图	false
timeformat	自定义时间格式函数	time => time.toLocaleString()
preview-mode	不可折叠模式，默认全部展开	false
show-array-index	是否显示数组索引	true
show-double-quotes	展示key双引号	false

1.2 事件

事件	描述
copied	复制文本后的事件
keyclick	点击key的事件

1.3 Slots

名称	描述	Scope
copy	自定义拷贝按钮	{copied: boolean}

1.4 快捷键

名称	描述
alt + click	展开当前节点下的所有节点

---

二、安装

可以通过 npm 或 yarn 安装 vue-json-viewer 插件。

npm install vue-json-viewer --save

或

yarn add vue-json-viewer

---

三、注册引入

3.1 全局注册组件

在全局 main.js 中引入并注册。

import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer)

3.2 单个组件引入

import JsonViewer from 'vue-json-viewer'
export default {components:{ JsonViewer }
}

---

四、基础使用

<template><div><json-viewer :value="jsonData"></json-viewer></div>
</template><script>
import JsonViewer from "vue-json-viewer";
export default {components: { JsonViewer },data() {return {jsonData: {total: 25,limit: 10,skip: 0,links: {previous: undefined,next: function() {},},},};},
};
</script>

实现效果

---

五、主题样式

• 有两个办法创建自定义主题 (e.g. my-awesome-json-theme)
  1. 添加 theme="my-awesome-json-theme" JsonViewer 的组件属性；
  2. 复制粘贴下面的模板并且根据自定义的theme名称做对应调整。

// values are default one from jv-light template
.my-awesome-json-theme {background: #fff;white-space: nowrap;color: #525252;font-size: 14px;font-family: Consolas, Menlo, Courier, monospace;.jv-ellipsis {color: #999;background-color: #eee;display: inline-block;line-height: 0.9;font-size: 0.9em;padding: 0px 4px 2px 4px;border-radius: 3px;vertical-align: 2px;cursor: pointer;user-select: none;}.jv-button { color: #49b3ff }.jv-key { color: #111111 }.jv-item {&.jv-array { color: #111111 }&.jv-boolean { color: #fc1e70 }&.jv-function { color: #067bca }&.jv-number { color: #fc1e70 }&.jv-number-float { color: #fc1e70 }&.jv-number-integer { color: #fc1e70 }&.jv-object { color: #111111 }&.jv-undefined { color: #e08331 }&.jv-string {color: #42b983;word-break: break-word;white-space: normal;}}.jv-code {.jv-toggle {&:before {padding: 0px 2px;border-radius: 2px;}&:hover {&:before {background: #eee;}}}}
}

实现效果

---

六、结合业务需求实现代码

<template><div class="serviceTesting"><div class="nav"><span /><h3>接口数据测试</h3></div><el-card class="box-card"><div class="content"><p>接口</p><el-selectv-model="form.address"clearableplaceholder="请选择内置接口"@change="onChange"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select><p>GET</p><el-input v-model="form.way" placeholder="请输入接口地址" disabled> </el-input><el-buttontype="primary"icon="el-icon-s-promotion":disabled="throttle"@click="onSend">发送</el-button></div><div class="forms"><h4>参数列表</h4><div class="line" /><el-table :data="tableData" border style="width: 100%"><el-table-column prop="name" label="参数名"><template slot-scope="scope"><el-input v-model="scope.row.name" clearable size="mini"></el-input></template></el-table-column><el-table-column prop="value" label="参数值"><template slot-scope="scope"><el-input v-model="scope.row.value" clearable size="mini"></el-input></template></el-table-column><el-table-column prop="required" label="是否必填"><template slot-scope="scope"><el-switchv-model="scope.row.must"active-color="#13ce66"inactive-color="#ff4949"disabled></el-switch></template></el-table-column><el-table-column prop="describe" label="参数描述"></el-table-column></el-table></div></el-card><divv-loading="throttle"element-loading-text="拼命加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)":value="content"class="result"><el-card class="box-card"><h4>响应结果</h4><div class="line" /><json-viewerv-if="content !== null":copyable="{ copyText: '复制', copiedText: '已复制' }"theme="my-awesome-json-theme":preview-mode="true"></json-viewer><div v-else><el-empty description="选择接口输入参数点击发送按钮获取响应结果"></el-empty></div></el-card></div></div>
</template><script>import JsonViewer from 'vue-json-viewer'export default {components: {JsonViewer},data() {return {options: [{value: '0',label: '测试接口1'},{value: '1',label: '测试接口2'}],form: {address: '',way: ''},tableData: [{name: '',value: '',must: false,describe: ''}],content: null,throttle: false}},methods: {onSend() {if (!this.form.address) {this.$message.warning('请选择接口地址')return}if (!this.tableData[0].name) {this.$message.warning('请输入参数名')return}if (!this.tableData[0].value) {this.$message.warning('请输入参数值')return}this.throttle = true// 请求接口port({}).then(res => {this.throttle = falseif (res.code === '0') {this.content = res.data}})},onChange() {this.content = nullthis.tableData = [{name: '',value: '',must: false,describe: ''}]}}}
</script><style lang="less" scoped>.serviceTesting {padding: 16px;.nav {display: flex;align-items: center;margin-bottom: 16px;span {display: inline-block;width: 8px;height: 22px;background: #409eff;margin-right: 5px;}}.content {display: flex;align-items: center;margin-bottom: 10px;.el-select {width: 300px;margin-right: 10px;}p {font-weight: bold;min-width: 30px;margin-right: 10px;}.el-button {margin-left: 10px;}}.el-card {padding: 10px;}h4 {text-align: left;}.line {width: 100%;height: 1px;background: rgb(246, 246, 246);margin: 10px 0;}.result {margin-top: 16px;}}::v-deep {.el-card .el-card__body {text-align: left;}.my-awesome-json-theme {background: #fff;white-space: nowrap;color: #525252;font-size: 14px;font-family: Consolas, Menlo, Courier, monospace;.jv-ellipsis {color: #999;background-color: #eee;display: inline-block;line-height: 0.9;font-size: 0.9em;padding: 0px 4px 2px 4px;border-radius: 3px;vertical-align: 2px;cursor: pointer;user-select: none;}.jv-button {color: #49b3ff;}.jv-key {color: #111111;}.jv-item {&.jv-array {color: #111111;}&.jv-boolean {color: #fc1e70;}&.jv-function {color: #067bca;}&.jv-number {color: #fc1e70;}&.jv-number-float {color: #fc1e70;}&.jv-number-integer {color: #fc1e70;}&.jv-object {color: #111111;}&.jv-undefined {color: #e08331;}&.jv-string {color: #42b983;word-break: break-word;white-space: normal;}}.jv-code {.jv-toggle {&:before {padding: 0px 2px;border-radius: 2px;}&:hover {&:before {background: #eee;}}}}}}
</style>

实现效果