diff --git a/vueHomilyLink/package-lock.json b/vueHomilyLink/package-lock.json
index 03a0d28..d773b69 100644
--- a/vueHomilyLink/package-lock.json
+++ b/vueHomilyLink/package-lock.json
@@ -8,7 +8,6 @@
       "name": "vuehomilylink",
       "version": "0.0.0",
       "dependencies": {
-        "axios": "^1.7.8",
         "pinia": "^2.2.6",
         "vue": "^3.5.12",
         "vue-router": "^4.4.5"
@@ -488,6 +487,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@ctrl/tinycolor": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+      "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@element-plus/icons-vue": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.21.5",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
@@ -879,6 +894,28 @@
         "node": ">=12"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.12.tgz",
+      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -938,6 +975,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@popperjs/core": {
+      "name": "@sxzz/popperjs-es",
+      "version": "2.11.7",
+      "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.1.3",
       "resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
@@ -1220,6 +1267,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.13.tgz",
+      "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg=="
+    },
+    "node_modules/@types/lodash-es": {
+      "version": "4.17.12",
+      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.0",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.2.0.tgz",
@@ -1435,23 +1500,6 @@
       "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
       "license": "MIT"
     },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "license": "MIT"
-    },
-    "node_modules/axios": {
-      "version": "1.7.8",
-      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.8.tgz",
-      "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==",
-      "license": "MIT",
-      "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
-        "proxy-from-env": "^1.1.0"
-      }
-    },
     "node_modules/birpc": {
       "version": "0.2.19",
       "resolved": "https://registry.npmmirror.com/birpc/-/birpc-0.2.19.tgz",
@@ -1532,18 +1580,6 @@
       ],
       "license": "CC-BY-4.0"
     },
-    "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==",
-      "license": "MIT",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1588,6 +1624,11 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmmirror.com/debug/-/debug-4.3.7.tgz",
@@ -1649,15 +1690,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.64",
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.64.tgz",
@@ -1665,6 +1697,31 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/element-plus": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.9.0.tgz",
+      "integrity": "sha512-ccOFXKsauo2dtokAr4OX7gZsb7TuAoVxA2zGRZo5o2yyDDBLBaZxOoFQPoxITSLcHbBfQuNDGK5Iag5hnyKkZA==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.1",
+        "@element-plus/icons-vue": "^2.3.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+        "@types/lodash": "^4.14.182",
+        "@types/lodash-es": "^4.17.6",
+        "@vueuse/core": "^9.1.0",
+        "async-validator": "^4.2.5",
+        "dayjs": "^1.11.13",
+        "escape-html": "^1.0.3",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lodash-unified": "^1.0.2",
+        "memoize-one": "^6.0.0",
+        "normalize-wheel-es": "^1.2.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@@ -1736,6 +1793,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -1766,40 +1828,6 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
-    "node_modules/follow-redirects": {
-      "version": "1.15.9",
-      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
-      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "license": "MIT",
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/form-data": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz",
-      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
-      "license": "MIT",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/fs-extra": {
       "version": "11.2.0",
       "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -2037,6 +2065,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -2056,6 +2104,11 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -2063,27 +2116,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "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==",
-      "license": "MIT",
-      "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==",
-      "license": "MIT",
-      "dependencies": {
-        "mime-db": "1.52.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -2146,6 +2178,11 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/normalize-wheel-es": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
+      "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw=="
+    },
     "node_modules/npm-run-path": {
       "version": "5.3.0",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-5.3.0.tgz",
@@ -2333,12 +2370,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "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==",
-      "license": "MIT"
-    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",
diff --git a/vueHomilyLink/package.json b/vueHomilyLink/package.json
index 79fd816..5c51bad 100644
--- a/vueHomilyLink/package.json
+++ b/vueHomilyLink/package.json
@@ -9,7 +9,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.7.8",
     "pinia": "^2.2.6",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
diff --git a/vueHomilyLink/src/api/LiveApi.js b/vueHomilyLink/src/api/LiveApi.js
index 5e6733d..5ea3ab7 100644
--- a/vueHomilyLink/src/api/LiveApi.js
+++ b/vueHomilyLink/src/api/LiveApi.js
@@ -2,14 +2,15 @@ import service from ".";
 const liveApi = {
     //获取直播列表
     getLiveList() {
-        return service.get('/live');
+        return service.post('/live', { UserId: 90000001 });
     },
     //预约
-    addReservation(id,userId){
-        return service.post('/reservation',{id,userId});
+    addReservation(Id, UserId) {
+        return service.post('/reservation', { Id, UserId });
     },
     //取消预约
-    cancelReservation(id,userId){
-        return service.delete('/reservation',{id,userId});
+    cancelReservation(Id, UserId) {
+        return service.delete(`/reservation?Id=${Id}&UserId=${UserId}`);
     }
-}
\ No newline at end of file
+}
+export default liveApi;
\ No newline at end of file
diff --git a/vueHomilyLink/src/api/index.js b/vueHomilyLink/src/api/index.js
index a388e65..f4a660c 100644
--- a/vueHomilyLink/src/api/index.js
+++ b/vueHomilyLink/src/api/index.js
@@ -1,7 +1,8 @@
 import axios from "axios";
 
 const service = axios.create({
-    baseURL: 'http://localhost:8080',
+    // baseURL: 'http://192.168.9.19:8080',
+    baseURL: '/api'
 });
 
 
diff --git a/vueHomilyLink/src/main.js b/vueHomilyLink/src/main.js
index 5dcad83..5410837 100644
--- a/vueHomilyLink/src/main.js
+++ b/vueHomilyLink/src/main.js
@@ -2,6 +2,8 @@ import './assets/main.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
 import App from './App.vue'
 import router from './router'
@@ -10,5 +12,6 @@ const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(ElementPlus)
 
 app.mount('#app')
diff --git a/vueHomilyLink/src/views/LiveView.vue b/vueHomilyLink/src/views/LiveView.vue
index 9c042cb..dd750c4 100644
--- a/vueHomilyLink/src/views/LiveView.vue
+++ b/vueHomilyLink/src/views/LiveView.vue
@@ -13,95 +13,38 @@
                     <!-- 用户头像 -->
                     <img :src=live.user.avatar alt="节目1" class="user-avatar">
                     <!-- 用户昵称，与头像同行显示 -->
-                    <div class="card-info">{{ live.user.userName }}</div>
+                    <div class="card-info">{{ live.user.username }}</div>
                     <!-- 预约按钮,如果预约过了，按钮变灰色，文字变灰色，按钮文字为“已预约” -->
                     <a v-if="live.reservation == 0" href="#" class="card-button"
-                        @click="booking(live.id, live.user.userId)">预约</a>
-                    <a v-else href="#" class="card-button" style="background-color: #ccc;">已预约</a>
+                        @click="booking(live.id, 90000001)">预约</a>
+                    <a v-else href="#" @click="cancelBooking(live.id, 90000001)" class="card-button" style="background-color: #ccc;">已预约</a>
                 </div>
             </div>
+            
         </div>
     </div>
 </template>
 
 
 <script setup>
+import liveApi from '@/api/LiveApi';
 import { ref } from 'vue';
+import { ElMessage } from 'element-plus';
 /*
 模拟后端数据
 */
-const liveList = ref([]);
-
-
+const liveList = ref({});
 //获取直播列表
 function getLive() {
-    liveList.value = [
-        {
-            id: 1,
-            cover: "src/assets/live.jpg",
-            user: {
-                userId: 1,
-                userName: "冷辉老师",
-                avatar: "src/assets/live.jpg"
-            },
-            liveName: "猎庄之顶级波段",
-            startTime: "2024-12-01 09:55",
-            reservation: 1, //0表示未预约，1表示已预约
-            status: 1 //0表示未开播，1表示已开播
-        },
-        {
-            id: 2,
-            cover: "src/assets/live.jpg",
-            user: {
-                userId: 2,
-                userName: "冷辉老师",
-                avatar: "src/assets/live.jpg"
-            },
-            liveName: "猎庄之顶级波段",
-            startTime: "2024-12-01 09:55",
-            reservation: 1, //0表示未预约，1表示已预约
-            status: 1
-        },
-        {
-            id: 3,
-            cover: "src/assets/live.jpg",
-            user: {
-                userId: 3,
-                userName: "冷辉老师",
-                avatar: "src/assets/live.jpg"
-            },
-            liveName: "猎庄之顶级波段",
-            startTime: "2024-11-30 12:55",
-            reservation: 1, //0表示未预约，1表示已预约
-            status: 1
-        },
-        {
-            id: 4,
-            cover: "src/assets/live.jpg",
-            user: {
-                userId: 4,
-                userName: "冷辉老师",
-                avatar: "src/assets/live.jpg"
-            },
-            liveName: "猎庄之顶级波段",
-            startTime: "2024-12-30 12:55",
-            reservation: 0, //0表示未预约，1表示已预约
-            status: 1
-        },
-        {
-            id: 5,
-            cover: "src/assets/live.jpg",
-            user: {
-                userId: 5,
-                userName: "冷辉老师",
-                avatar: "src/assets/live.jpg"
-            },
-            liveName: "猎庄之顶级波段",
-            startTime: "2024-12-30 12:55",
-            reservation: 0, //0表示未预约，1表示已预约
-            status: 1,
-        }
-    ]
+    liveApi.getLiveList()
+        .then(resp => {
+            if(resp.code == 0){
+                liveList.value = resp.data.liveList;
+                console.log(liveList.value);
+            }else{
+                ElMessage.error('获取直播列表失败');
+            }
+        })
 }
 getLive();
 
@@ -119,36 +62,31 @@ function getDateDay(startTime) {
     }
 }
 
-// //获取用户信息
-// const userInfo = ref([]);
-// function getUserInfo() {
-//     userInfo.value = {
-//         userId: 1,
-//         userName: "冷辉老师",
-//         avatar: "src/assets/live.jpg",
-//         //预约信息
-//         reservationList: [1,2,3]
-//     }
-// }
-// getUserInfo();
-
-// console.log(userInfo.value);
-
-// /* 判断预约状态 */
-// function isBooking(liveId) {
-//     for (let i = 0; i < userInfo.value.reservationList.length; i++) {
-//         if (userInfo.value.reservationList[i] == liveId) {
-//             return true;
-//         }
-//     }
-//     return false;
-// }
-
-
-
 /*点击预约按钮以后显示预约成功的提示，并将按钮变为不可点击状态，且将按钮的文字改为“已预约”，并将按钮的背景颜色改为灰色*/
 function booking(liveId, userId) {
-    alert("预约成功！");
+    liveApi.addReservation(liveId,userId)
+        .then(resp => {
+            console.log(resp.code);
+            if (resp.code == 0) {
+                getLive();
+                ElMessage.success("预约成功");
+            } else {
+                ElMessage.error("预约失败，请联系管理员");
+            }
+        })
+
+}
+function cancelBooking(liveId, userId) {
+    liveApi.cancelReservation(liveId, userId)
+        .then(resp => {
+            if (resp.code == 0) {
+                ElMessage.success("取消预约成功");
+            } else {
+                ElMessage.error("取消预约失败，请联系管理员");
+            }
+            getLive();
+        })
+        getLive();
 }
 
 </script>
@@ -226,7 +164,7 @@ function booking(liveId, userId) {
     position: absolute;
     top: 0;
     left: 0;
-    width: 207px;
+    width: 209px;
     height: 120px;
     /*最后一个参数是半透明度，可以透过调整0-1的数值，调整到满意的透明度*/
     background-color: rgba(0, 0, 0, 0.3);
diff --git a/vueHomilyLink/vite.config.js b/vueHomilyLink/vite.config.js
index 4217010..26696aa 100644
--- a/vueHomilyLink/vite.config.js
+++ b/vueHomilyLink/vite.config.js
@@ -15,4 +15,13 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://192.168.9.19:8080',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  },
 })