服务器获取模板改动

app/package-lock.json

@@ -8,6 +8,7 @@
       "name": "tiny_whiteboard_demo",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.6.8",
         "element-plus": "^2.1.6",
         "vue": "^3.2.25"
       },
@@ -266,6 +267,21 @@
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz",
       "integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -323,6 +339,17 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/copy-anything": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
@@ -352,6 +379,14 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/element-plus": {
       "version": "2.1.7",
       "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.1.7.tgz",
@@ -787,6 +822,32 @@
         "node": ">=8"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -1053,6 +1114,25 @@
         "node": ">=4"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.0.1.tgz",
@@ -1182,6 +1262,11 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -1689,6 +1774,21 @@
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz",
       "integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ=="
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "requires": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1735,6 +1835,14 @@
         "readdirp": "~3.6.0"
       }
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "copy-anything": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
@@ -1764,6 +1872,11 @@
         "ms": "^2.1.1"
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "element-plus": {
       "version": "2.1.7",
       "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.1.7.tgz",
@@ -2003,6 +2116,21 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -2204,6 +2332,19 @@
       "dev": true,
       "optional": true
     },
+    "mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
+    },
+    "mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "requires": {
+        "mime-db": "1.52.0"
+      }
+    },
     "minimatch": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.0.1.tgz",
@@ -2294,6 +2435,11 @@
       "integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
       "dev": true
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",

app/package.json

@@ -9,6 +9,7 @@
     "format": "prettier --write ."
   },
   "dependencies": {
+    "axios": "^1.6.8",
     "element-plus": "^2.1.6",
     "vue": "^3.2.25"
   },

app/src/App.vue

@@ -304,7 +304,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, watch, toRaw, nextTick, computed, reactive } from 'vue'
+import { onMounted, ref, watch, toRaw, nextTick, computed, reactive, getCurrentInstance } from 'vue'
 import TinyWhiteboard from 'tiny-whiteboard'
 import ColorPicker from './components/ColorPicker.vue'
 import {
@@ -331,10 +331,11 @@ import {
 import Contextmenu from './components/Contextmenu.vue'
 import { fontFamilyList, fontSizeList } from './constants'
 import { ElMessage } from 'element-plus'
+const currentInstance = getCurrentInstance();
+const { axios } = currentInstance.appContext.config.globalProperties;
 // 当前操作类型
 const currentType = ref('selection')
 const saveFileName = ref('')
-
 // dom节点
 const box = ref(null)
 
@@ -548,17 +549,19 @@ const importFromJson = () => {
 //从服务器获取模板
 const importFromJsonServer = async () => {
   try {
-    const response = await this.$axios.get('http://localhost:8080/api/template', {
+    const url = new URL('http://localhost:8080/api/template');
+    url.searchParams.append('name', '文件测试');
+    const response = await fetch(url, {
       headers: {
         'Content-Type': 'application/json'
-      },
-      params: {
-        name: "文件测试"
       }
     })
     if (!response.ok) throw new Error('Failed to fetch JSON data')
     const jsonData = await response.json()
-    app.setData(jsonData.data)
+    const jsonObject = JSON.parse(jsonData.data)
+    console.log(jsonObject.data)
+    app.setData(jsonObject.data)
+    ElMessage({ message: '导入成功', type: 'success' })
   } catch (error) {
     console.log(error)
   }
@@ -591,15 +594,17 @@ const handleExportCommand = type => {
 //保存为json文件
 const save = async () => {
   try {
-    const response = await this.$axios.post('http://localhost:8080/api/savefile', {
-      type: filetype.value, // true:代表普通保存,false:代表模板保存
-      name: saveFileName.value,
-      data: app.exportJson()
-    }, {
+    const response = await fetch('http://localhost:8080/api/savefile', {
+      method: 'POST',
       headers: {
         'Content-Type': 'application/json'
         // 'Content-Type': 'application/x-www-form-urlencoded',
       },
+      body: JSON.stringify({
+        // type: filetype.value, // true:代表普通保存,false:代表模板保存
+        name: saveFileName.value,
+        data: app.exportJson()
+      })
     })
     if (!response.ok) throw new Error('Failed to fetch JSON data')
     ElMessage.success('保存成功')
@@ -618,13 +623,13 @@ const templateItmes = async () => {
     type: filetype.value,
   }
   try {
-    const response = await this.$axios.post('http://localhost:8080/api/template',{
-      type: requestBody,
-    }, {
+    const response = await fetch('http://localhost:8080/api/template', {
+      method: 'POST',
       headers: {
         'Content-Type': 'application/json'
         // 'Content-Type': 'application/x-www-form-urlencoded',
       },
+      body: { type: requestBody, }
     })
     if (response.ok) {
       const jsonData = await response.json()

app/src/main.js

@@ -1,4 +1,4 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-
-createApp(App).mount('#app')
+const app = createApp(App)
+app.mount('#app')

tiny-whiteboard/package.json

@@ -4,12 +4,12 @@
   "description": "一个简单的在线白板",
   "authors": [
     {
-      "name": "街角小林",
-      "email": "1013335014@qq.com"
+      "name": "xxxxx",
+      "email": "xxxxxx@qq.com"
     },
     {
-      "name": "理想青年实验室",
-      "url": "http://lxqnsys.com/"
+      "name": "xxxxxxx",
+      "url": "xxxxxxxxx"
     }
   ],
   "license": "MIT",