亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用vue-json-viewer實現(xiàn)JSON數(shù)據(jù)可視化詳解

 更新時間：2025年01月16日 09:42:57   作者：水星記_  
vue-json-viewer?是一個用于在?vue.js?應(yīng)用中展示?JSON?數(shù)據(jù)的插件,它提供了一種直觀和美觀的方式來可視化?JSON?數(shù)據(jù),下面我們來看看如何使用它進(jìn)行JSON數(shù)據(jù)可視化吧

前言

接口的調(diào)試和測試是確保系統(tǒng)穩(wěn)定性的重要步驟。為了讓開發(fā)人員和測試人員能夠直觀地查看接口返回的 JSON 數(shù)據(jù)，使用合適的工具至關(guān)重要。vue-json-viewer 插件為 vue 開發(fā)者提供了一個簡單而強大的解決方案。本文將詳細(xì)介紹如何在 vue 項目中使用該插件，幫助你快速上手，提升接口測試的效率。

一、vue-json-viewer

vue-json-viewer 是一個用于在 vue.js 應(yīng)用中展示 JSON 數(shù)據(jù)的插件。它提供了一種直觀和美觀的方式來可視化 JSON 數(shù)據(jù)，特別適合用于調(diào)試和展示 API 返回的數(shù)據(jù)。

為什么要選擇 vue-json-viewer？

1.易于使用

插件的使用非常簡單，只需安裝并在 vue 組件中引入即可使用，適合快速集成到現(xiàn)有項目中。

2.美觀的展示

vue-json-viewer 提供了友好的用戶界面，能夠以樹形結(jié)構(gòu)展示 JSON 數(shù)據(jù)，便于用戶理解和查看數(shù)據(jù)層級。

3.支持復(fù)制功能

插件內(nèi)置了復(fù)制功能，用戶可以輕松復(fù)制 JSON 數(shù)據(jù)，方便進(jìn)行調(diào)試或分享。

4.主題支持

插件支持自定義主題，開發(fā)者可以根據(jù)項目的設(shè)計風(fēng)格調(diào)整 JSON 數(shù)據(jù)的展示樣式。

5.預(yù)覽模式

提供預(yù)覽模式，可以在不展開所有數(shù)據(jù)的情況下，快速查看 JSON 數(shù)據(jù)的結(jié)構(gòu)。

1.1 配置

屬性描述默認(rèn)值
valuejson對象的值，可以使用v-model，支持響應(yīng)式必填
expand-depth默認(rèn)展開的層級1
copyable展示復(fù)制按鈕，默認(rèn)文案為：copy、copied!, 你可以設(shè)置一個對象{copyText: ‘copy’, copiedText: ‘copied’} 來自定義復(fù)制按鈕文案false
sort按照key排序展示false
boxed為組件添加一個盒樣式false
theme添加一個自定義的樣式class用作主題jv-light
expanded默認(rèn)展開視圖false
timeformat自定義時間格式函數(shù)time => time.toLocaleString()
preview-mode不可折疊模式，默認(rèn)全部展開false
show-array-index是否顯示數(shù)組索引true
show-double-quotes展示key雙引號false

1.2 事件

事件描述
copied復(fù)制文本后的事件
keyclick點擊key的事件

1.3 Slots

名稱描述Scope
copy自定義拷貝按鈕{copied: boolean}

1.4 快捷鍵

名稱描述
alt + click展開當(dāng)前節(jié)點下的所有節(jié)點

二、安裝

可以通過 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 }
}

四、基礎(chǔ)使用

<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>

實現(xiàn)效果

五、主題樣式

有兩個辦法創(chuàng)建自定義主題 (e.g. my-awesome-json-theme)

添加 theme="my-awesome-json-theme" JsonViewer 的組件屬性；

復(fù)制粘貼下面的模板并且根據(jù)自定義的theme名稱做對應(yīng)調(diào)整。

// 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;
        }
      }
    }
  }
}

實現(xiàn)效果

六、結(jié)合業(yè)務(wù)需求實現(xiàn)代碼

<template>
  <div class="serviceTesting">
    <div class="nav">
      <span />
      <h3>接口數(shù)據(jù)測試</h3>
    </div>
    <el-card class="box-card">
      <div class="content">
        <p>接口</p>
        <el-select
          v-model="form.address"
          clearable
          placeholder="請選擇內(nèi)置接口"
          @change="onChange"
        >
          <el-option
            v-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-button
          type="primary"
          icon="el-icon-s-promotion"
          :disabled="throttle"
          @click="onSend"
          >發(fā)送</el-button
        >
      </div>
      <div class="forms">
        <h4>參數(shù)列表</h4>
        <div class="line" />
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="name" label="參數(shù)名">
            <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="參數(shù)值">
            <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-switch
                v-model="scope.row.must"
                active-color="#13ce66"
                inactive-color="#ff4949"
                disabled
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="describe" label="參數(shù)描述"></el-table-column>
        </el-table>
      </div>
    </el-card>

    <div
      v-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>響應(yīng)結(jié)果</h4>
        <div class="line" />
        <json-viewer
          v-if="content !== null"
          :copyable="{ copyText: '復(fù)制', copiedText: '已復(fù)制' }"
          theme="my-awesome-json-theme"
          :preview-mode="true"
        ></json-viewer>
        <div v-else>
          <el-empty description="選擇接口輸入?yún)?shù)點擊發(fā)送按鈕獲取響應(yīng)結(jié)果"></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('請輸入?yún)?shù)名')
          return
        }
        if (!this.tableData[0].value) {
          this.$message.warning('請輸入?yún)?shù)值')
          return
        }
        this.throttle = true
        // 請求接口
        port({}).then(res => {
          this.throttle = false
          if (res.code === '0') {
            this.content = res.data
          }
        })
      },
      onChange() {
        this.content = null
        this.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>

實現(xiàn)效果

到此這篇關(guān)于使用vue-json-viewer實現(xiàn)JSON數(shù)據(jù)可視化詳解的文章就介紹到這了,更多相關(guān)vue-json-viewer JSON數(shù)據(jù)可視化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue-nuxt?登錄鑒權(quán)的實現(xiàn)

    vue-nuxt?登錄鑒權(quán)的實現(xiàn)

    本文主要介紹了vue-nuxt?登錄鑒權(quán)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-12-12
  • vue中監(jiān)聽scroll事件失效的問題及解決

    vue中監(jiān)聽scroll事件失效的問題及解決

    這篇文章主要介紹了vue中監(jiān)聽scroll事件失效的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • Vue3實現(xiàn)HTML內(nèi)容預(yù)覽功能

    Vue3實現(xiàn)HTML內(nèi)容預(yù)覽功能

    這篇文章主要為大家詳細(xì)介紹了如何使用Vue3實現(xiàn)HTML內(nèi)容預(yù)覽功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2025-03-03
  • Vue filter 過濾器、以及在table中的使用介紹

    Vue filter 過濾器、以及在table中的使用介紹

    這篇文章主要介紹了Vue filter 過濾器、以及在table中的使用介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)

    Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)

    這篇文章主要介紹了Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • 前端新手小白的Vue3入坑超詳細(xì)指南

    前端新手小白的Vue3入坑超詳細(xì)指南

    這篇文章主要介紹了如何使用Vite安裝和啟動Vue3項目,并推薦了一些常用的第三方庫,如js-tool-big-box、less或sass預(yù)處理器、axios請求庫以及Element?Plus?UI庫,需要的朋友可以參考下
    2024-12-12
  • Vue對象的深層劫持詳細(xì)講解

    Vue對象的深層劫持詳細(xì)講解

    這篇文章主要介紹了vue2.x對象深層劫持的原理實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • Vue子組件向父組件通信與父組件調(diào)用子組件中的方法

    Vue子組件向父組件通信與父組件調(diào)用子組件中的方法

    這篇文章主要介紹了Vue子組件向父組件通信與父組件調(diào)用子組件中的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2018-06-06
  • 在Vue中使用Echarts可視化庫的完整步驟記錄

    在Vue中使用Echarts可視化庫的完整步驟記錄

    這篇文章主要給大家介紹了關(guān)于在Vue中使用Echarts可視化庫的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • 使用Vue-Awesome-Swiper實現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果

    使用Vue-Awesome-Swiper實現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果

    這篇文章主要介紹了用Vue-Awesome-Swiper實現(xiàn)旋轉(zhuǎn)疊加輪播效果&平移輪播效果,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值需要的朋友可以參考下
    2019-08-08

最新評論