AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【前端】Vue项目中 JSON 编辑器的使用

2023-10-15 2656
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【前端】Vue项目中 JSON 编辑器的使用

一、背景描述

现有一个vue项目，需要一个json编辑器，能够格式化json数据，同时也支持编辑功能。以下是列举了几种，可以根据风格或者喜好随意选择其中的一种即可。如果有兴趣的话，每一种都可以试着写下哦。

二、vue-json-edit

2.1 依赖安装

npm install vue-json-editor --save
• 1

2.2 示例代码

<template>
  <div style="width:50% ">
    <vue-json-editor v-model="resultInfo"
                     :showBtns="false"
                     :mode="'code'"
                     @json-change="onJsonChange"
                     @json-save="onJsonSave"
                     @has-error="onError" />
    <br>
    <el-button type="primary"
               @click="checkJson">确定</el-button>
  </div>
</template>
<script>
// 导入模块
import vueJsonEditor from 'vue-json-editor'
export default {
  // 注册组件
  components: { vueJsonEditor },
  data () {
    return {
      hasJsonFlag: true, // json是否验证通过
      // json数据
      resultInfo: {
        'employees': [
          {
            'firstName': 'Bill',
            'lastName': 'Gates'
          },
          {
            'firstName': 'George',
            'lastName': 'Bush'
          },
          {
            'firstName': 'Thomas',
            'lastName': 'Carter'
          }
        ]
      }
    }
  },
  mounted: function () {
  },
  methods: {
    onJsonChange (value) {
      // 实时保存
      this.onJsonSave(value)
    },
    onJsonSave (value) {
      this.resultInfo = value
      this.hasJsonFlag = true
    },
    onError (value) {
      this.hasJsonFlag = false
    },
    // 检查json
    checkJson () {
      if (this.hasJsonFlag === false) {
        alert('json验证失败')
        return false
      } else {
        alert('json验证成功')
        return true
      }
    }
  }
}
</script>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70

2.3 效果图

三、vue-json-pretty

3.1 依赖安装

npm install vue-json-pretty@1.7.1 --save
• 1

3.2 示例代码

<template>
  <div>
    <vue-json-pretty :deep="3" selectableType="single" :showSelectController="true" :highlightMouseoverNode="true"
path="res" :data="response" > </vue-json-pretty>
  </div>
</template>
<script>
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'
export default {
  name: 'cluster',
  components: {VueJsonPretty},
  data () {
    return {
      response: {
        result: '',
        data: [
          {
            id: 1,
            title: 'aaa'
          },
          {
            id: 2,
            title: 'bbb'
          },
          {
            id: 3,
            title: 'ccc'
          },
          {
            id: 4,
            title: 'ddd'
          }
        ]
      }
    }
  }
}
</script>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40

3.3 效果图

四、bin-code-editor

官网：https://wangbin3162.gitee.io/bin-code-editor/#/jsonEditor

4.1 依赖安装

npm install bin-code-editor -d
• 1

4.2 示例代码

<template>
  <div style="width: 70%;margin-left: 30px;margin-top: 30px;">
    <CodeEditor v-model="jsonStr"
                :auto-format="true"
                :smart-indent="true"
                theme="dracula"
                :indent-unit="4"
                :line-wrap="false"
                ref="editor"></CodeEditor>
    <br>
    <el-button type="primary"
               @click="onSubumit">提交</el-button>
  </div>
</template>
<script>
import { CodeEditor } from 'bin-code-editor'
console.log('CodeEditor', CodeEditor)
const jsonData = `{
    "employees": [{
      "firstName": "Bill",
      "lastName": "Gates"
    }, {
      "firstName": "George",
      "lastName": "Bush"
    }, {
      "firstName": "Thomas",
      "lastName": "Carter"
    }]
  }`
export default {
  // 注册组件
  components: { CodeEditor },
  data () {
    return {
      jsonStr: jsonData
    }
  },
  methods: {
    // 检测json格式
    isJSON (str) {
      if (typeof str === 'string') {
        try {
          var obj = JSON.parse(str)
          if (typeof obj === 'object' && obj) {
            return true
          } else {
            return false
          }
        } catch (e) {
          return false
        }
      } else if (typeof str === 'object' && str) {
        return true
      }
    },
    onSubumit () {
      if (!this.isJSON(this.jsonStr)) {
        this.$message.error(`json格式错误`)
        return false
      }
      this.$message.success('json格式正确')
    }
  }
}
</script>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66

4.3 效果图

五、vue-json-views

5.1 依赖安装

npm i -S vue-json-views 
• 1

5.2 示例代码

<template>
  <json-view :data="jsonData"/>
</template>
<script>
import jsonView from 'vue-json-views'
export default {
  components: {
    jsonView
  },
  data () {
    return {
      // 可使用 JSON.parse() 对json数据转化
      jsonData: {
        name: 'dog',
        age: 2,
        hobby: {
          eat: {
            food: '狗粮',
            water: '冰可乐'
          },
          sleep: {
            time: '白日梦'
          }
        }
      }
    }
  }
}
</script>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31

5.3 效果图

5.4 相关属性

六、CodeMirror

  1. 官网地址：https://codemirror.net/docs/guide/
  2. 支持快速搜索
  3. 支持自动补全提示
  4. 支持自动匹配括号
  5. 支持代码高亮 62种主题颜色，例如monokai等等 支持json, sql, javascript，css，xml,
    html，yaml, markdown, python编辑模式，默认为 json

6.1 依赖安装

下载时注意指定版本，且这里下载vue-codemirror，不是codemirror，两者现有版本不同，可在npm社区查看具体版本，默认下载是最新版本只支持Vue3。

这里下载的是vue-codemirror4.0.6 支持 Vue2：

npm install vue-codemirror@4.0.6
npm install jshint
npm install jsonlint
npm install script-loader
• 1
• 2
• 3
• 4
• 5

6.2 示例代码

<template>
  <div style="width:50%">
    <codemirror ref="myCm"
                v-model="editorValue"
                :options="cmOptions"
                @changes="onCmCodeChanges"
                @blur="onCmBlur"
                @keydown.native="onKeyDown"
                @mousedown.native="onMouseDown"
                @paste.native="OnPaste">
    </codemirror>
  </div>
</template>
<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/keymap/sublime'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/xml/xml.js'
import 'codemirror/mode/htmlmixed/htmlmixed.js'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/yaml/yaml.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/mode/python/python.js'
import 'codemirror/mode/markdown/markdown.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/javascript-hint.js'
import 'codemirror/addon/hint/xml-hint.js'
import 'codemirror/addon/hint/css-hint.js'
import 'codemirror/addon/hint/html-hint.js'
import 'codemirror/addon/hint/sql-hint.js'
import 'codemirror/addon/hint/anyword-hint.js'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/lint.js'
import 'codemirror/addon/lint/json-lint'
import 'codemirror/addon/selection/active-line'
import 'codemirror/addon/lint/javascript-lint.js'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/xml-fold.js'
import 'codemirror/addon/fold/comment-fold.js'
import 'codemirror/addon/fold/markdown-fold.js'
import 'codemirror/addon/fold/indent-fold.js'
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/edit/closetag.js'
import 'codemirror/addon/edit/matchtags.js'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/search/jump-to-line.js'
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/search.js'
import 'codemirror/addon/display/autorefresh.js'
import 'codemirror/addon/selection/mark-selection.js'
import 'codemirror/addon/search/match-highlighter.js'
// require('script-loader!jsonlint')
export default {
  name: 'index',
  components: { codemirror },
  props: ['cmTheme', 'cmMode', 'cmIndentUnit', 'autoFormatJson'],
  data () {
    return {
      editorValue: '{}',
      cmOptions: {
        theme: !this.cmTheme || this.cmTheme === 'default' ? 'default' : this.cmTheme, // 主题
        mode: !this.cmMode || this.cmMode === 'default' ? 'application/json' : this.cmMode, // 代码格式
        tabSize: 4, // tab的空格个数
        indentUnit: !this.cmIndentUnit ? 2 : this.cmIndentUnit, // 一个块（编辑语言中的含义）应缩进多少个空格
        autocorrect: true, // 自动更正
        spellcheck: true, // 拼写检查
        lint: true, // 检查格式
        lineNumbers: true, // 是否显示行数
        lineWrapping: true, // 是否自动换行
        styleActiveLine: true, // line选择是是否高亮
        keyMap: 'sublime', // sublime编辑器效果
        matchBrackets: true, // 括号匹配
        autoCloseBrackets: true, // 在键入时将自动关闭括号和引号
        matchTags: { bothTags: true }, // 将突出显示光标周围的标签
        foldGutter: true, // 可将对象折叠，与下面的gutters一起使用
        gutters: [
          'CodeMirror-lint-markers',
          'CodeMirror-linenumbers',
          'CodeMirror-foldgutter'
        ],
        highlightSelectionMatches: {
          minChars: 2,
          style: 'matchhighlight',
          showToken: true
        }
      },
      enableAutoFormatJson: this.autoFormatJson == null ? true : this.autoFormatJson // json编辑模式下，输入框失去焦点时是否自动格式化，true 开启， false 关闭
    }
  },
  created () {
    try {
      if (!this.editorValue) {
        this.cmOptions.lint = false
        return
      }
      if (this.cmOptions.mode === 'application/json') {
        if (!this.enableAutoFormatJson) {
          return
        }
        this.editorValue = this.formatStrInJson(this.editorValue)
      }
    } catch (e) {
      console.log('初始化codemirror出错：' + e)
    }
  },
  methods: {
    resetLint () {
      if (!this.$refs.myCm.codemirror.getValue()) {
        this.$nextTick(() => {
          this.$refs.myCm.codemirror.setOption('lint', false)
        })
        return
      }
      this.$refs.myCm.codemirror.setOption('lint', false)
      this.$nextTick(() => {
        this.$refs.myCm.codemirror.setOption('lint', true)
      })
    },
    // 格式化字符串为json格式字符串
    formatStrInJson (strValue) {
      return JSON.stringify(
        JSON.parse(strValue),
        null,
        this.cmIndentUnit
      )
    },
    onCmCodeChanges (cm, changes) {
      this.editorValue = cm.getValue()
      this.resetLint()
    },
    // 失去焦点时处理函数
    onCmBlur (cm, event) {
      try {
        let editorValue = cm.getValue()
        if (this.cmOptions.mode === 'application/json' && editorValue) {
          if (!this.enableAutoFormatJson) {
            return
          }
          this.editorValue = this.formatStrInJson(editorValue)
        }
      } catch (e) {
        // 啥也不做
      }
    },
    // 按下键盘事件处理函数
    onKeyDown (event) {
      const keyCode = event.keyCode || event.which || event.charCode
      const keyCombination =
        event.ctrlKey || event.altKey || event.metaKey
      if (!keyCombination && keyCode > 64 && keyCode < 123) {
        this.$refs.myCm.codemirror.showHint({ completeSingle: false })
      }
    },
    // 按下鼠标时事件处理函数
    onMouseDown (event) {
      this.$refs.myCm.codemirror.closeHint()
    },
    // 黏贴事件处理函数
    OnPaste (event) {
      if (this.cmOptions.mode === 'application/json') {
        try {
          this.editorValue = this.formatStrInJson(this.editorValue)
        } catch (e) {
          // 啥都不做
        }
      }
    }
  }
}
</script>
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126
• 127
• 128
• 129
• 130
• 131
• 132
• 133
• 134
• 135
• 136
• 137
• 138
• 139
• 140
• 141
• 142
• 143
• 144
• 145
• 146
• 147
• 148
• 149
• 150
• 151
• 152
• 153
• 154
• 155
• 156
• 157
• 158
• 159
• 160
• 161
• 162
• 163
• 164
• 165
• 166
• 167
• 168
• 169
• 170
• 171
• 172
• 173
• 174
• 175
• 176
• 177
• 178
• 179

6.3 效果图

这个效果没有那么好。

本文完结！


文章标签：
数据格式
JSON
JavaScript
前端开发
XML
关键词：
编辑器项目
前端项目
前端vue
VUE.js项目
前端vue项目
No8g攻城狮
目录
相关文章
我是快乐的嘟嘟
|
1月前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具，正确配置和运行预渲染操作，结合其他 SEO 策略，可以实现更好的搜索引擎优化效果。同时，需要不断地监控和优化预渲染效果，以适应不断变化的搜索引擎环境和用户需求。
我是快乐的嘟嘟
144 63
favori
|
27天前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目，实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库，旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入，帮助开发者轻松实现3D场景与React项目的无缝融合。
favori
101 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目，实现数字孪生
我是快乐的嘟嘟
|
1月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
179 26
左诗右码
|
1月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中，后端与前端的数据交换常使用JSON格式，但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数，超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包，介绍如何通过将大整数以字符串形式序列化和反序列化，有效解决这一问题，确保前后端数据交换的准确性。
左诗右码
36 4
dufadayang
|
1月前
|
前端开发 测试技术
前端工程化的分支策略要如何与项目的具体情况相结合？
前端工程化的分支策略要紧密结合项目的实际情况，以实现高效的开发、稳定的版本控制和顺利的发布流程。
dufadayang
27 1
土木林森
|
1月前
|
前端开发 Unix 测试技术
揭秘！前端大牛们如何高效管理项目，确保按时交付高质量作品！
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题，帮助你学习前端大牛们的项目管理技巧，确保按时交付高质量的作品。
土木林森
37 2
一缕微风绕指柔
|
1月前
|
前端开发 JavaScript 开发者
React与Vue：前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue：前端框架的巅峰对决与选择策略
一缕微风绕指柔
56 3
一缕微风绕指柔
|
1月前
|
前端开发 JavaScript 数据管理
React与Vue：两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue：两大前端框架的较量与选择策略
一缕微风绕指柔
58 2
大树营养快线
|
1月前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念，掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索，你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
大树营养快线
40 2
大树营养快线
|
1月前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素，通过仔细分析、排查和优化，逐步提高 Tree shaking 的效果，为项目带来更好的性能和用户体验。同时，持续关注和学习相关技术的发展，不断探索新的解决方案，以适应不断变化的项目需求。
大树营养快线
44 1

热门文章

最新文章

  • 1
    Python处理JSON文件数据各类操作一文详解+实例代码
  • 2
    PHP中Json相关
  • 3
    获取中国【省、市、区县、乡镇街道】json,csv,sql数据
  • 4
    Python基础--dict(或对象)与json之间的区别和互相转化
  • 5
    15.4. Ajax + JSON
  • 6
    JS-【同页面多次调用】轮播特效封装-json传多个参数
  • 7
    JavaScriptSerializer序列化和反序列化JSON：使用自定义JavaScriptConverter
  • 8
    Json简介入门
  • 9
    ajax和json对象
  • 10
    错误struts2 json There is no Action mapped for namespace
  • 1
    使用Vue.js构建交互式前端的技术探索
    89
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    168
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    132
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    150
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    184
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    104
  • 7
    vue3中使用动态组件
    102
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    141
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    76
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    121

    • 相关课程

    更多
  • Ajax 前端开发入门与实战
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • vi编辑器的学习和使用
    • 下一篇
    DataWorks售前咨询