创建钩子函数默认调用模板方法

app/src/App.vue

@@ -665,22 +665,15 @@ const handleExportCommand = type => {
     })
   }
 }
-//保存为模板文件,需要把exportImageUrl.value和app.exportJson()放进同一个变量中以便可以动态获取
+//保存文件
 const savetemplate = async (types) => {
-  const exportJson= null
   if (types === 1) {
     console.log("当前url", window.location.href)
     const url = window.location.href
     const fileName = getQueryParams(url);
     saveFileName.value = fileName.fileName
-    exportImageUrl.value = app.exportImage({
-      renderBg: true,
-      paddingX: exportImagePaddingX.value,
-      paddingY: exportImagePaddingY.value,
-      onlySelected: exportOnlySelected.value
-    })
-    console.log(exportImageUrl.value)
-    if (fileName === undefined) {
+    // console.log(exportJson)
+    if (fileName.fileName === undefined) {
       ElNotification.warning('URL参数错误')
       return
     }
@@ -689,7 +682,12 @@ const savetemplate = async (types) => {
     ElNotification.warning('请输入模板名')
     return
   }
-  exportJson= app.exportJson()
+  exportImageUrl.value = app.exportImage({
+    renderBg: true,
+    paddingX: exportImagePaddingX.value,
+    paddingY: exportImagePaddingY.value,
+    onlySelected: exportOnlySelected.value
+  })
   try {
     const response = await fetch('http://localhost:8080/api/saveTemplate', {
       method: 'POST',
@@ -699,7 +697,8 @@ const savetemplate = async (types) => {
       body: JSON.stringify({
         type: types, // 1:代表普通保存,0:代表模板保存
         name: saveFileName.value,
-        data: exportJson
+        data: app.exportJson(),
+        imageUrl: exportImageUrl.value
       })
     })
     if (!response.ok) throw new Error('Failed to fetch JSON data')
@@ -713,50 +712,38 @@ const savetemplate = async (types) => {
       ElNotification.success('保存成功')
     }
   } catch (error) {
-    ElNotification.error(data.message)
+    ElNotification.error(error)
     console.log(error)
 
   }
 }
-//保存为文件
-const SaveFile = async () => {
-  console.log("当前url", window.location.href)
+async function getTemplats() {
   const url = window.location.href
   const fileName = getQueryParams(url);
-  if (fileName === undefined) {
-    ElNotification.warning('URL参数错误')
-    return
-  }
-  console.log(fileName); // 输出 "xxxxxx"
-  try {
-    const response = await fetch('http://localhost:8080/api/saveTemplate', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-        // 'Content-Type': 'application/x-www-form-urlencoded',
-      },
-      body: JSON.stringify({
-        type: 1, // 1:代表普通保存,0:代表模板保存
-        name: fileName,
-        data: app.exportJson()
+  if (fileName.fileName != undefined) {
+    try {
+      const url = new URL('http://localhost:8080/api/template');
+      url.searchParams.append('name', fileName.fileName);
+      const response = await fetch(url, {
+        headers: {
+          'Content-Type': 'application/json'
+        }
       })
-    })
-    if (!response.ok) throw new Error('Failed to fetch JSON data')
-    const data = await response.json()
-    if (data.code !== 200) {
-      ElNotification.error(data.message)
-    } else {
-      ElNotification.success('保存成功')
+      if (response.ok) {
+        const jsonData = await response.json()
+        if (jsonData.code === 200) {
+          app.setData(jsonData.data.data)
+        }
+      }
+    } catch (error) {
+      console.log(error)
     }
-  } catch (error) {
-    ElNotification.error(error)
-    console.log(error)
   }
 }
-
+//获得模板信息
 const templateItems = async () => {
   const requestBody = {
-    type: false,
+    type: 0,
   };
   names.clear() //清空map 重新渲染
   try {
@@ -950,6 +937,9 @@ onMounted(() => {
     }, 300)
   })
 })
+onMounted(() => {
+  getTemplats()
+})
 </script>
 
 <style lang="less">

app/src/main.js

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