Skip to content

1
1024程序员开源挑战赛

夜猫逐梦 / 1024程序员开源挑战赛
与 Fork 源项目一致

Fork自 GitCode / 1024程序员开源挑战赛（10.23-11.14）

通知 3
Star 1
Fork 0
1
1024程序员开源挑战赛
提交 b8aaa25c 编写于 作者: B baiy 提交者： ninecents
浏览文件
操作

#105

上级 ddbe3fc9
隐藏空白更改
内联 并排
Showing with 233 addition and 131 deletion
src/views/tool/json.vue
浏览文件 @ b8aaa25c
<template>
<div>
<div style="border: 1px solid #dcdee2;border-radius: 4px;">
<code-editor v-model="current.content" :auto-height="220" language="json"></code-editor>
<div>
<heightResize :append="['.page-option-block','.tool-json-mode-get']" @resize="resize">
<Row :gutter="10">
<Col :span="24-jsonInputCol" v-if="isMode('from_csv')">
<csvToJson @change="(json)=>current.content = json" @saveToolData="saveToolData" :height="height" v-model="current.from_csv" />
</Col>
<Col :span="24-jsonInputCol" v-if="isMode('from_table')">
<tableToJson @change="(json)=>current.content = json" @saveToolData="saveToolData" :height="height" v-model="current.from_table" />
</Col>
<Col :span="jsonInputCol">
<input-block top="4px">
<code-editor :height="`${height}px`" :placeholder="`${$t('json_input')}JSON`" v-model="current.content" language="json"></code-editor>
<template slot="extra">
<Button shape="circle" icon="md-code" v-if="!isMode('default')" @click="setMode('default')"></Button>
</template>
</input-block>
</Col>
<Col :span="24-jsonInputCol" v-if="isMode('to_csv')">
<jsonToCsv :json="current.content" :height="height" v-model="current.to_csv" @saveToolData="saveToolData" />
</Col>
<Col :span="24-jsonInputCol" v-if="isMode('to_table')">
<jsonToTable :json="current.content" :height="height" v-model="current.to_table" @saveToolData="saveToolData" />
</Col>
<Col :span="24-jsonInputCol" v-if="isMode('object')">
<jsonToObject :json="current.content" :height="height" v-model="current.to_object" @saveToolData="saveToolData" />
</Col>
</Row>
</heightResize>
<option-block style="padding-top: 10px" disable-padding class="tool-json-mode-get" v-if="isMode('to_get') || isMode('from_get')">
<Input v-if="isMode('to_get')" type="textarea" :rows="3" :value="getOutput" :placeholder="`Get ${$t('json_output')}`"></Input>
<Input v-else type="textarea" :rows="3" v-model="current.get.input" :placeholder="`Get ${$t('json_input')} var1=value1&var2=value2`"></Input>
</option-block>
<option-block center class="page-option-block">
<FormItem class="tool-json-button">
<ButtonGroup class="tool-json-item">
<Button type="primary" @click="simple('beautify')">{{ $t('json_format') }}</Button>
<Button type="primary" @click="simple('compress')">{{ $t('json_compress') }}</Button>
</ButtonGroup>
<Dropdown @on-click="(name)=>simple(name)" class="tool-json-item">
<Button type="primary">
{{ $t('json_escape') }}
<Icon type="ios-arrow-up" />
</Button>
<DropdownMenu slot="list">
<DropdownItem name="escape">{{ $t('json_add_escape') }}</DropdownItem>
<DropdownItem name="clearEscape">{{ $t('json_clear_escape') }}</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown @on-click="(name)=>simple(name)" class="tool-json-item">
<Button type="primary">
{{ $t('json_unicode') }}
<Icon type="ios-arrow-up" />
</Button>
<DropdownMenu slot="list">
<DropdownItem name="unicode2zh">{{ $t('json_unicode_to_zh') }}</DropdownItem>
<DropdownItem name="zh2unicode">{{ $t('json_zh_to_unicode') }}</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown @on-click="(name)=>setMode(name)" class="tool-json-item">
<Button type="primary">
{{ $t('json_get') }}
<Icon type="ios-arrow-up" />
</Button>
<DropdownMenu slot="list">
<DropdownItem name="to_get">JSON => Get</DropdownItem>
<DropdownItem name="from_get">Get => JSON</DropdownItem>
</DropdownMenu>
</Dropdown>
<Button class="tool-json-item" type="primary" @click="setMode('object')">{{ $t('json_object') }}</Button>
<Dropdown @on-click="(name)=>setMode(name)" class="tool-json-item">
<Button type="primary">
{{ $t('json_csv') }}
<Icon type="ios-arrow-up" />
</Button>
<DropdownMenu slot="list">
<DropdownItem name="to_csv">JSON => CSV</DropdownItem>
<DropdownItem name="from_csv">CSV => JSON</DropdownItem>
</DropdownMenu>
</Dropdown>
<Dropdown @on-click="(name)=>setMode(name)" class="tool-json-item">
<Button type="primary">
{{ $t('json_table') }}
<Icon type="ios-arrow-up" />
</Button>
<DropdownMenu slot="list">
<DropdownItem name="to_table">JSON => Table</DropdownItem>
<DropdownItem name="from_table">Table => JSON</DropdownItem>
</DropdownMenu>
</Dropdown>
</FormItem>
</option-block>
</div>
<option-block :style="{textAlign:'center'}">
<FormItem>
<ButtonGroup>
<Button type="primary" @click="handle(k)" v-for="(v,k) in type" :key="k">{{v}}</Button>
</ButtonGroup>
</FormItem>
</option-block>
</div>
</template>
<script>
import Unicode from "./library/unicode"
import codeEditor from "./components/codeEditor";
import jsonInstance from "./library/json"
import codeEditor from "./components/codeEditor";
import heightResize from "./components/heightResize";
import jsonToObject from "./library/json/components/jsonToObject";
import csvToJson from "./library/json/components/csvToJson";
import tableToJson from "./library/json/components/tableToJson";
import {dispatchWindowResize} from "../../tool/event";
import jsonToCsv from "./library/json/components/jsonToCsv";
import jsonToTable from "./library/json/components/jsonToTable";
export default {
components: {
codeEditor,
export default {
components: {
jsonToCsv,
jsonToTable,
codeEditor,
heightResize,
csvToJson,
jsonToObject,
tableToJson
},
computed:{
jsonInputCol(){
if (this.isMode('object')){
return 10
}
if (this.isMode('from_csv') || this.isMode('from_table') || this.isMode('to_csv') || this.isMode('to_table')){
return 12
}
return 24
},
getOutput(){
if (!this.isMode('to_get')){
return "";
}
return this.errorHandle(()=>{
return jsonInstance.toGet(this.current.content)
})
},
fromGet(){
if (this.isMode('from_get') && this.current.get.input.trim()){
return this.current.get.input;
}
return "";
}
},
watch:{
fromGet(val){
if (val){
this.errorHandle(()=>{
this.setContentAndSaveToolData(jsonInstance.fromGet(val))
})
}
}
},
created() {
this.$initToolData()
},
methods: {
resize(height){
this.height = height
},
errorHandle(callback){
try {
return callback()
} catch (e) {
this.$Message.error(this.$t('json_error', [e.message]).toString())
}
return ""
},
created () {
this.current = Object.assign(this.current, this.$getToolData('content'))
isMode(mode){
return mode === this.current.mode
},
methods: {
handle (v) {
if (this.current.content) {
switch (v) {
case 'format':
try {
let content = this.current.content.trim()
if (!content) {
return this.$Notice.error({ title: '错误提示', desc: '请输入内容' })
}
require('jsonlint').parse(content)
this.current.content = JSON.stringify(JSON.parse(this.current.content), null, 4)
} catch (error) {
this.$Notice.error({
title: '错误提示',
desc: error.message,
})
return
}
break
case 'compress':
try {
this.current.content = JSON.stringify(JSON.parse(this.current.content.trim()))
} catch (e) {
this.current.content = this.current.content.replace(/\n/g, '').replace(/\r/g, '')
}
break
case 'escape':
this.current.content = this.current.content.trim().
replace(/\\/g, '\\\\').
replace(/"/g, '\\"')
break
case 'clearEscape':
this.current.content = this.current.content.trim().
replace(/\\\\/g, '\\').
replace(/\\"/g, '"')
break
case 'unicode2zh':
this.current.content = this.unicode2zh()
break
case 'zh2unicode':
this.current.content = this.zh2unicode()
break
case 'get':
try {
const httpBuildQuery = require('http-build-query');
let content = this.current.content.trim()
if (!content) {
return
}
require('jsonlint').parse(content)
this.current.content = httpBuildQuery(JSON.parse(this.current.content))
} catch (error) {
this.$Notice.error({
title: '错误提示',
desc: error.message,
})
return
}
break
case 'clear':
this.current.content = ''
break
default:
return
}
this.$clipboardCopy(this.current.content)
this.$saveToolData(this.current)
setMode(mode){
this.current.mode = mode
this.$nextTick(() => {
dispatchWindowResize()
})
},
// 简单处理
simple(type) {
this.errorHandle(()=>{
this.current.content = this.current.content.trim()
if (!this.current.content) {
throw new Error(this.$t('json_json_input_empty').toString())
}
},
unicode2zh () {
return Unicode.decode(
this.current.content.replace(/\\U[0-9a-fA-F]{4}/g,(item)=>{
// \Uxxxx=>\uxxxx
return item.replace("\\U","\\u");
})
)
},
zh2unicode () {
let content = this.current.content
if (content) {
let newStr = ''
for (let i = 0; i < content.length; i++) {
let str = content.charAt(i)
newStr += /[\u4e00-\u9fa5]/.test(str) ? '\\u' + str.charCodeAt(0).toString(16) : str
}
return newStr
// 保存操作前数据
this.saveToolData(true)
if (!(type in jsonInstance)) {
throw new Error("type error")
}
return content
},
this.current.content = jsonInstance[type](this.current.content)
this.saveToolData()
this.$Message.success(this.$t('json_complete').toString())
})
},
data () {
return {
current: {
content: '',
},
type: {
'format': '格式化/校验',
'compress': '压缩',
'escape': '转义',
'clearEscape': '去除转义',
'unicode2zh': 'Unicode转中文',
'zh2unicode': '中文转Unicode',
'get': '转GET参数',
'clear': '清空数据',
},
}
saveToolData(force = false){
this.$saveToolData(this.current, force)
},
}
setContentAndSaveToolData(content){
this.current.content = content
this.saveToolData()
}
},
data() {
return {
current: {
content: '',
get: {
input: ""
},
to_object:{},
from_csv:{},
from_table:{},
to_csv:{},
to_table:{},
mode: "default"
},
height:100
}
},
}
</script>
<style scoped>
.tool-json-button .ivu-btn {
padding: 0 10px;
}
.tool-json-button .tool-json-item{
margin-right: 5px;
}
</style>
src/views/tool/library/formatter/json.js
浏览文件 @ b8aaa25c
export const beautify = (code, option = {}) => {
return objectBeautify(JSON.parse(code.trim()), option)
import prettier from "prettier/standalone";
import parserJson5 from "prettier/parser-babel";
export const beautify = (code, {tab = 4} = {}) => {
return prettier.format(code, {
parser: "json5",
plugins: [parserJson5],
quoteProps: "preserve",
trailingComma: "none",
tabWidth: tab,
printWidth: 1
})
}
export const objectBeautify = (codeObject, option = {}) => {
return JSON.stringify(codeObject, null, "tab" in option ? option.tab : 4)
return beautify(JSON.stringify(codeObject), option)
}
// eslint-disable-next-line no-unused-vars
export const compress = (code, options = {}) => {
try {
return JSON.stringify(JSON.parse(code.trim()), null, 0)
} catch (e) {
return code.replace(/\n/g, '').replace(/\r/g, '')
let result = []
for (let i = !1, o = 0, r = (code = code.split("\n").join(" ")).length; o < r; o++) {
let a = code.charAt(o);
i && a === i ? "\\" !== code.charAt(o - 1) && (i = !1) : i || '"' !== a && "'" !== a ? i || " " !== a && "\t" !== a || (a = "") : i = a
result.push(a)
}
return result.join("")
}
export default {
beautify, compress,objectBeautify
beautify, compress, objectBeautify
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或