add get Json by url
This commit is contained in:
parent
6001554c5f
commit
d4ed37e534
3033
package-lock.json
generated
3033
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -8,6 +8,7 @@
|
|||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"axios": "^1.4.0",
|
||||||
"core-js": "^3.8.3",
|
"core-js": "^3.8.3",
|
||||||
"element-plus": "^2.3.8",
|
"element-plus": "^2.3.8",
|
||||||
"json-editor-vue3": "^1.0.8",
|
"json-editor-vue3": "^1.0.8",
|
||||||
@ -25,7 +26,9 @@
|
|||||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||||
"@vue/cli-service": "~5.0.0",
|
"@vue/cli-service": "~5.0.0",
|
||||||
"eslint": "^7.32.0",
|
"eslint": "^7.32.0",
|
||||||
"eslint-plugin-vue": "^8.0.3"
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"node-sass": "^9.0.0",
|
||||||
|
"sass-loader": "^13.3.2"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"root": true,
|
"root": true,
|
||||||
|
@ -9,6 +9,7 @@
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
|
background-color: #eeeeee;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 90 KiB |
@ -1,16 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<json-editor-vue class="editor"
|
<json-editor-vue class="editor"
|
||||||
v-model="resultInfo"
|
:modelValue="jsonData"
|
||||||
:modelValue="resultInfo"
|
|
||||||
language=""
|
language=""
|
||||||
style="position: fixed;height: 100%;width: 100%"
|
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "JsonEditor",
|
name: "JsonEditor",
|
||||||
|
props:{
|
||||||
|
jsonData:Object
|
||||||
|
},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
// 在data中添加测试数据
|
// 在data中添加测试数据
|
||||||
@ -49,4 +49,12 @@ export default {
|
|||||||
top: 0;
|
top: 0;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.editor{
|
||||||
|
position: fixed;
|
||||||
|
height: calc(100vh - 130px);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
/deep/ .show[data-v-58159d48] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
@ -8,8 +8,9 @@ import JsonSchemaEditor from 'json-schema-editor-vue3'
|
|||||||
import 'json-schema-editor-vue3/lib/json-schema-editor-vue3.css'
|
import 'json-schema-editor-vue3/lib/json-schema-editor-vue3.css'
|
||||||
|
|
||||||
import ElementPlus from 'element-plus';
|
import ElementPlus from 'element-plus';
|
||||||
// import 'element-plus/lib/theme-chalk/index.css';
|
import 'element-plus/dist/index.css'
|
||||||
|
import axios from "axios";
|
||||||
|
axios.defaults.withCredentials=true;
|
||||||
createApp(App)
|
createApp(App)
|
||||||
.use(store)
|
.use(store)
|
||||||
.use(router)
|
.use(router)
|
||||||
|
@ -1,12 +1,27 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="common-layout">
|
<div class="common-layout">
|
||||||
<!-- <el-container>-->
|
<el-container>
|
||||||
<!-- <el-header>Simple Json View</el-header>-->
|
<el-header style="z-index: 9999 ;height: 60px;width: 100%;display: flex;flex-direction: row;justify-content: flex-start;position: fixed">
|
||||||
<!-- <el-main>-->
|
<img :src="require('@/assets/logo.png')" style="height: 60px;width: auto">
|
||||||
<JsonEditor></JsonEditor>
|
<!-- <span style="font-size: 30px;font-weight: bold">Simple Json View</span>-->
|
||||||
|
</el-header>
|
||||||
|
<el-main style="width: 100%">
|
||||||
|
<div style="display: flex;flex-direction: row;align-items: center">
|
||||||
|
<el-input
|
||||||
|
autosize
|
||||||
|
type="textarea"
|
||||||
|
placeholder="输入接口链接"
|
||||||
|
style="width: 100%;margin-bottom: 10px;margin-top: 60px"
|
||||||
|
@blur="getJson"
|
||||||
|
v-model="url"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<JsonEditor :json-data="jsonData"></JsonEditor>
|
||||||
<!-- <JsonSchema></JsonSchema>-->
|
<!-- <JsonSchema></JsonSchema>-->
|
||||||
<!-- </el-main>-->
|
</el-main>
|
||||||
<!-- </el-container>-->
|
</el-container>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -14,12 +29,43 @@
|
|||||||
|
|
||||||
import JsonEditor from "@/components/JsonEditor.vue";
|
import JsonEditor from "@/components/JsonEditor.vue";
|
||||||
// import JsonSchema from "@/components/JsonSchema.vue";
|
// import JsonSchema from "@/components/JsonSchema.vue";
|
||||||
|
import { ElNotification } from 'element-plus'
|
||||||
|
import axios from "axios";
|
||||||
export default {
|
export default {
|
||||||
name: 'HomeView',
|
name: 'HomeView',
|
||||||
components: {
|
components: {
|
||||||
// JsonSchema,
|
// JsonSchema,
|
||||||
JsonEditor
|
JsonEditor
|
||||||
}
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
url:null,
|
||||||
|
jsonData:null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
getJson(){
|
||||||
|
console.log(this.url);
|
||||||
|
if(this.url!==null){
|
||||||
|
var that=this;
|
||||||
|
axios({
|
||||||
|
method: 'post',
|
||||||
|
// 请求的地址
|
||||||
|
url: this.url,
|
||||||
|
}).then( (res)=> {
|
||||||
|
that.jsonData=res;
|
||||||
|
}).catch((error)=>{
|
||||||
|
ElNotification({
|
||||||
|
title: 'Error',
|
||||||
|
message: error,
|
||||||
|
type: 'error',
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
Reference in New Issue
Block a user