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"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.4.0",
|
||||
"core-js": "^3.8.3",
|
||||
"element-plus": "^2.3.8",
|
||||
"json-editor-vue3": "^1.0.8",
|
||||
@ -25,7 +26,9 @@
|
||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.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": {
|
||||
"root": true,
|
||||
|
@ -9,6 +9,7 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
Binary file not shown.
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 90 KiB |
@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<json-editor-vue class="editor"
|
||||
v-model="resultInfo"
|
||||
:modelValue="resultInfo"
|
||||
:modelValue="jsonData"
|
||||
language=""
|
||||
style="position: fixed;height: 100%;width: 100%"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "JsonEditor",
|
||||
|
||||
props:{
|
||||
jsonData:Object
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
// 在data中添加测试数据
|
||||
@ -49,4 +49,12 @@ export default {
|
||||
top: 0;
|
||||
display: none;
|
||||
}
|
||||
.editor{
|
||||
position: fixed;
|
||||
height: calc(100vh - 130px);
|
||||
width: 100%;
|
||||
}
|
||||
/deep/ .show[data-v-58159d48] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
@ -8,8 +8,9 @@ import JsonSchemaEditor from 'json-schema-editor-vue3'
|
||||
import 'json-schema-editor-vue3/lib/json-schema-editor-vue3.css'
|
||||
|
||||
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)
|
||||
.use(store)
|
||||
.use(router)
|
||||
|
@ -1,12 +1,27 @@
|
||||
<template>
|
||||
<div class="common-layout">
|
||||
<!-- <el-container>-->
|
||||
<!-- <el-header>Simple Json View</el-header>-->
|
||||
<!-- <el-main>-->
|
||||
<JsonEditor></JsonEditor>
|
||||
<el-container>
|
||||
<el-header style="z-index: 9999 ;height: 60px;width: 100%;display: flex;flex-direction: row;justify-content: flex-start;position: fixed">
|
||||
<img :src="require('@/assets/logo.png')" style="height: 60px;width: auto">
|
||||
<!-- <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>-->
|
||||
<!-- </el-main>-->
|
||||
<!-- </el-container>-->
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -14,12 +29,43 @@
|
||||
|
||||
import JsonEditor from "@/components/JsonEditor.vue";
|
||||
// import JsonSchema from "@/components/JsonSchema.vue";
|
||||
|
||||
import { ElNotification } from 'element-plus'
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: 'HomeView',
|
||||
components: {
|
||||
// JsonSchema,
|
||||
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>
|
||||
|
Reference in New Issue
Block a user