溧阳 招网站开发兼职,做国际贸易做什么网站,如何查询网络服务商,安康市移动公司电话前言 接口的调试和测试是确保系统稳定性的重要步骤。为了让开发人员和测试人员能够直观地查看接口返回的 JSON 数据#xff0c;使用合适的工具至关重要。vue-json-viewer 插件为 vue 开发者提供了一个简单而强大的解决方案。本文将详细介绍如何在 vue 项目中使用该插件#x…前言 接口的调试和测试是确保系统稳定性的重要步骤。为了让开发人员和测试人员能够直观地查看接口返回的 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 配置
属性描述默认值valuejson对象的值可以使用v-model支持响应式必填expand-depth默认展开的层级1copyable展示复制按钮默认文案为copy、copied!, 你可以设置一个对象{copyText: ‘copy’, copiedText: ‘copied’} 来自定义复制按钮文案falsesort按照key排序展示falseboxed为组件添加一个盒样式falsetheme添加一个自定义的样式class用作主题jv-lightexpanded默认展开视图falsetimeformat自定义时间格式函数time time.toLocaleString()preview-mode不可折叠模式默认全部展开falseshow-array-index是否显示数组索引trueshow-double-quotes展示key双引号false
1.2 事件
事件描述copied复制文本后的事件keyclick点击key的事件
1.3 Slots
名称描述Scopecopy自定义拷贝按钮{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 }
}四、基础使用
templatedivjson-viewer :valuejsonData/json-viewer/div
/templatescript
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) 添加 thememy-awesome-json-theme JsonViewer 的组件属性复制粘贴下面的模板并且根据自定义的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;}}}}
}实现效果 六、结合业务需求实现代码
templatediv classserviceTestingdiv classnavspan /h3接口数据测试/h3/divel-card classbox-carddiv classcontentp接口/pel-selectv-modelform.addressclearableplaceholder请选择内置接口changeonChangeel-optionv-foritem in options:keyitem.value:labelitem.label:valueitem.value/el-option/el-selectpGET/pel-input v-modelform.way placeholder请输入接口地址 disabled /el-inputel-buttontypeprimaryiconel-icon-s-promotion:disabledthrottleclickonSend发送/el-button/divdiv classformsh4参数列表/h4div classline /el-table :datatableData border stylewidth: 100%el-table-column propname label参数名template slot-scopescopeel-input v-modelscope.row.name clearable sizemini/el-input/template/el-table-columnel-table-column propvalue label参数值template slot-scopescopeel-input v-modelscope.row.value clearable sizemini/el-input/template/el-table-columnel-table-column proprequired label是否必填template slot-scopescopeel-switchv-modelscope.row.mustactive-color#13ce66inactive-color#ff4949disabled/el-switch/template/el-table-columnel-table-column propdescribe label参数描述/el-table-column/el-table/div/el-carddivv-loadingthrottleelement-loading-text拼命加载中element-loading-spinnerel-icon-loadingelement-loading-backgroundrgba(0, 0, 0, 0.8):valuecontentclassresultel-card classbox-cardh4响应结果/h4div classline /json-viewerv-ifcontent ! null:copyable{ copyText: 复制, copiedText: 已复制 }thememy-awesome-json-theme:preview-modetrue/json-viewerdiv v-elseel-empty description选择接口输入参数点击发送按钮获取响应结果/el-empty/div/el-card/div/div
/templatescriptimport JsonViewer from vue-json-viewerexport 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: }]}}}
/scriptstyle langless 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实现效果
