add get Json by url

package.json

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

src/App.vue

@@ -9,6 +9,7 @@
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+    background-color: #eeeeee;
 }
 
 nav {

src/components/JsonEditor.vue

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

src/main.js

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

src/views/HomeView.vue

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