Merge branch 'guoyanqiang' into dev

src/api/boguApi.js

@@ -0,0 +1,10 @@
+import service from "./indexApi";
+const boguApi = {
+  selectBogu(queryType){
+    //查询首页的数据
+    return service.post('/api/show/getShowList', {queryType: queryType});
+  }
+
+}
+
+export default boguApi;

src/api/homeApi.js

@@ -1,9 +1,8 @@
-
 import service from "./indexApi";
 const homeApi = {
-  selectHome(queryType){
+  selectHome(){
     //查询首页的数据
-    return service.post('/api/show/getShowList', {queryType: queryType});
+    return service.post('/api/show/getShowList');
   }
 
 }

src/api/zhiboApi.js

@@ -0,0 +1,10 @@
+import service from "./indexApi";
+const zhiboApi = {
+  selectZhibo(queryType){
+    //查询首页的数据
+    return service.post('/api/live/getLiveList', {queryType: queryType});
+  }
+
+}
+
+export default zhiboApi;

src/views/ClubView.vue

@@ -25,9 +25,9 @@
 
       <!-- 视频列表 -->
       <div class="video-list">
-        <div class="video-card" v-for="(video, index) in videos" :key="index">
+        <div class="video-card" v-for="(videos, index) in videos" :key="index">
           <div class="video-thumbnail" @click="incrementViews(index)">
-            <img :src="video.thumbnail" alt="Video Thumbnail" />
+            <img :src="videos.cover" alt="Video Thumbnail" />
             <div class="play-button">
               <span class="play-icon">▶</span>
             </div>
@@ -45,19 +45,19 @@
                   <span class="homily-text">HomilyLink</span>
                 </div>
                 <div class="stat-item">
-                  <span class="date">{{ video.date }}</span>
+                  <span class="date">{{ videos.publishTime }}</span>
                 </div>
                 <div class="stat-item">
                   <img src="../pic/bofang.png" alt="Views" class="views-icon" />
-                  <span class="views">{{ video.views }}</span>
+                  <span class="views">{{ videos.viewCount }}</span>
                 </div>
                 <div class="stat-item">
                   <img src="../pic/bofang.png" alt="Comments" class="comments-icon" @click.stop="toggleComments(index)" />
-                  <span class="comments">{{ video.comments }}</span>
+                  <span class="comments">{{ videos.commentCount }}</span>
                 </div>
                 <div class="stat-item">
                   <img src="../pic/dianzan.png" alt="Likes" class="likes-icon" @click.stop="toggleLikes(index)" />
-                  <span class="likes">{{ video.likes }}</span>
+                  <span class="likes">{{ videos.likeCount}}</span>
                 </div>
               </div>
             </div>
@@ -77,108 +77,156 @@
   </div>
 </template>
 
+
+
+
 <script setup>
-import { ref, onMounted } from 'vue';
-
-const videos = ref([
-  {
-    thumbnail: 'src/pic/1.jpg',
-    title: '第一节《影形结构同现》',
-    date: '05-26 11:42',
-    views: 643,
-    comments: 5,
-    likes: 3,
-    isLiked: false,
-    isCommented: false
-  },
-  {
-    thumbnail: 'src/pic/2.jpg',
-    title: '第二节《强势结构形态》',
-    date: '01-11 09:55',
-    views: 498,
-    comments: 10,
-    likes: 12,
-    isLiked: false,
-    isCommented: false
-  },
-]);
-
-// 弹出框相关
-const showModal = ref(false);
-const modalTitle = ref('');
-const modalContent = ref('');
-
-// 增加播放量
-const incrementViews = (index) => {
-  videos.value[index].views += 1;
-  saveToLocalStorage();
-};
-
-// 切换评论状态
-const toggleComments = (index) => {
-  if (videos.value[index].isCommented) {
-    videos.value[index].comments -= 1;
-    videos.value[index].isCommented = false;
-  } else {
-    videos.value[index].comments += 1;
-    videos.value[index].isCommented = true;
-  }
-  saveToLocalStorage();
-};
-
-// 切换点赞状态
-const toggleLikes = (index) => {
-  if (videos.value[index].isLiked) {
-    videos.value[index].likes -= 1;
-    videos.value[index].isLiked = false;
-  } else {
-    videos.value[index].likes += 1;
-    videos.value[index].isLiked = true;
-  }
-  saveToLocalStorage();
-};
-
-// 查看更多的动态效果
-const showMore = () => {
-  modalTitle.value = '查看更多内容';
-  modalContent.value = '正在加载更多内容...';
-  showModal.value = true;
-};
-
-// 查看更多专题的动态效果
-const showMoreTopics = () => {
-  modalTitle.value = '查看更多专题';
-  modalContent.value = '正在加载更多专题...';
-  showModal.value = true;
-};
-
-// 关闭弹出框
-const closeModal = () => {
-  showModal.value = false;
-};
-
-// 保存到本地存储
-const saveToLocalStorage = () => {
-  localStorage.setItem('videos', JSON.stringify(videos.value));
-};
-
-// 从本地存储加载
-const loadFromLocalStorage = () => {
-  const savedVideos = localStorage.getItem('videos');
-  if (savedVideos) {
-    videos.value = JSON.parse(savedVideos);
-  }
-};
-
-
-// 清除本地存储（调试用）
-localStorage.removeItem('videos');
-// 初始化加载
-onMounted(() => {
-  loadFromLocalStorage();
+
+// import { ref, onMounted } from 'vue';
+// import axios from 'axios';
+
+// // 定义接口地址常量
+// const API_URL = 'http://192.168.8.235:8000/api/show/getShowList';
+
+// // 定义接口调用函数
+// const fetchShowList = async () => {
+//   try {
+//     // 发送 POST 请求
+//     const response = await axios.post(API_URL);
+//     // 处理响应数据
+//     console.log('接口返回数据:', response.data);
+
+//     // 这里可以根据返回的数据更新页面状态
+//   } catch (error) {
+//     // 处理错误
+//     console.error('接口请求出错:', error);
+//   }
+// };
+
+// const videos = ref([
+//   {
+//     thumbnail: 'src/pic/1.jpg',
+//     title: '第一节《影形结构同现》',
+//     date: '05-26 11:42',
+//     views: 643,
+//     comments: 5,
+//     likes: 3,
+//     isLiked: false,
+//     isCommented: false
+//   },
+//   {
+//     thumbnail: 'src/pic/2.jpg',
+//     title: '第二节《强势结构形态》',
+//     date: '01-11 09:55',
+//     views: 498,
+//     comments: 10,
+//     likes: 12,
+//     isLiked: false,
+//     isCommented: false
+//   },
+// ]);
+
+// // 弹出框相关
+// const showModal = ref(false);
+// const modalTitle = ref('');
+// const modalContent = ref('');
+
+// // 增加播放量
+// const incrementViews = (index) => {
+//   videos.value[index].views += 1;
+//   saveToLocalStorage();
+// };
+
+// // 切换评论状态
+// const toggleComments = (index) => {
+//   if (videos.value[index].isCommented) {
+//     videos.value[index].comments -= 1;
+//     videos.value[index].isCommented = false;
+//   } else {
+//     videos.value[index].comments += 1;
+//     videos.value[index].isCommented = true;
+//   }
+//   saveToLocalStorage();
+// };
+
+// // 切换点赞状态
+// const toggleLikes = (index) => {
+//   if (videos.value[index].isLiked) {
+//     videos.value[index].likes -= 1;
+//     videos.value[index].isLiked = false;
+//   } else {
+//     videos.value[index].likes += 1;
+//     videos.value[index].isLiked = true;
+//   }
+//   saveToLocalStorage();
+// };
+
+// // 查看更多的动态效果
+// const showMore = () => {
+//   modalTitle.value = '查看更多内容';
+//   modalContent.value = '正在加载更多内容...';
+//   showModal.value = true;
+// };
+
+// // 查看更多专题的动态效果
+// const showMoreTopics = () => {
+//   modalTitle.value = '查看更多专题';
+//   modalContent.value = '正在加载更多专题...';
+//   showModal.value = true;
+// };
+
+// // 关闭弹出框
+// const closeModal = () => {
+//   showModal.value = false;
+// };
+
+// // 保存到本地存储
+// const saveToLocalStorage = () => {
+//   localStorage.setItem('videos', JSON.stringify(videos.value));
+// };
+
+// // 从本地存储加载
+// const loadFromLocalStorage = () => {
+//   const savedVideos = localStorage.getItem('videos');
+//   if (savedVideos) {
+//     videos.value = JSON.parse(savedVideos);
+//   }
+// };
+
+// // 清除本地存储（调试用）
+// localStorage.removeItem('videos');
+
+// // 合并 onMounted 逻辑
+// onMounted(() => {
+//   fetchShowList();
+//   loadFromLocalStorage();
+// });
+
+
+import boguApi from '@/api/boguApi';
+import { ref } from 'vue';
+const videos = ref([]);
+
+
+function formatTime(queryType) {
+  boguApi.selectBogu(queryType).then(resp => {
+    if(resp.data){
+      videos.value = resp.data.list;
+      console.log(videos.value);
+    }
+  }).catch(error => {
+    // 处理请求错误
+    console.error('获取视频列表失败:', error);
   });
+}
+
+formatTime();
+
 </script>
 
+
+
+
 <style scoped>
 
 .header-content p {

src/views/HomeView.vue

@@ -4,16 +4,16 @@
       <el-col :span="17" :xs="24">
         <div class="section-title">推荐</div>
         <el-row :gutter="20" class="recommend-videos" style="margin-right: -25px;">
-          <el-col :span="24" v-for="video in video" :key="video.id">
-            <el-card class="video-card" @click="incrementViews(scope.row.id)">
+          <el-col :span="24" v-for="video in recommendedVideos" :key="video.id">
+            <el-card class="video-card">
               <div class="video-content">
-                <img :src="video.cover" alt="视频缩略图" class="video-thumbnail" />
+                <img :src="video.thumbnail" alt="视频缩略图" class="video-thumbnail" />
                 <div class="video-info">
                   <div class="video-title1">{{ video.title }}</div>
-                  <div style="text-align: left;"><img src="../pic/bogu.png" v-if="video.clubId == '1'" /><img v-else /></div>
+                  <div style="text-align: left;"><img src="../pic/bogu.png" v-if="video.author == '博股俱乐部'" /><img v-else /></div>
                   <div class="video-meta1">
-                    <img class="icon" :src="video.publisherAvatar" />
-                    <span> {{ video.publisherName }} {{ video.publishTime }}</span>
+                    <img class="icon" src="../pic/link.jpg" />
+                    <span> {{ video.author }} {{ video.time }}</span>
                     <div class="video-stats">
                       <el-icon>
                         <View />
@@ -24,9 +24,9 @@
                       <el-icon>
                         <ChatDotSquare />
                       </el-icon>
-                      <el-button type="text">{{ video.likeCount }}</el-button>
+                      <el-button type="text">{{ video.likes }}</el-button>
                       <img src="../pic/like.png" class="like">
-                      <el-button type="text">{{ video.commentCount }}</el-button>
+                      <el-button type="text">{{ video.comments }}</el-button>
                     </div>
                   </div>
                 </div>
@@ -41,16 +41,16 @@
           <el-col :span="24" v-for="video in featuredVideos" :key="video.id">
             <el-card class="video-card">
               <div class="video-content">
-                <img :src="video.cover" alt="视频缩略图" class="video-thumbnail" />
+                <img :src="video.thumbnail" alt="视频缩略图" class="video-thumbnail" />
                 <div class="video-info">
                   <div class="video-title2">{{ video.title }}</div>
                   <div class="video-meta2">
                     <div class="video-stats">
-                      <el-icon class="my-icon">
+                      <el-icon>
                         <View />
                       </el-icon>
-                      <el-button type="text">{{ video.viewCount }}</el-button>
-                      <el-button type="text">{{ video.publishTime }}</el-button>
+                      <el-button type="text">{{ video.views }}</el-button>
+                      <el-button type="text">{{ video.time }}</el-button>
                       <!-- <el-button type="text">{{ video.comments }}</el-button> -->
                     </div>
                   </div>
@@ -65,172 +65,134 @@
 </template>
 
 <script setup>
-import 'element-plus/dist/index.css';
-import homeApi from '@/api/homeApi';
 import { ref } from 'vue';
-
-
-
+import 'element-plus/dist/index.css';
+// import homeApi from '@/api/homeApi';
 
 //初始化所有的推荐视频
-const video = ref([]);
+// const video = ref([]);
 
 //定义方法，获取推荐视频
-function getAllRecommendedVideos(queryType) {
-  homeApi.selectHome(queryType)
-   .then(resp =>{
-    if(resp.data){
-      video.value = resp.data.list;
-      console.log(video.value);
-    }else{
-      console.log('获取推荐视频失败');
-    }
-   });
-}
-
-
-
-
-//精选视频
-const featuredVideos = ref([]);
-
-// 定义方法，获取精选视频
-function getAllFeaturedVideos(queryType) {
-  homeApi.selectHome(queryType)
-   .then(resp =>{
-    if(resp.data){
-      featuredVideos.value = resp.data.list;
-      console.log(featuredVideos.value);
-    }else{
-      console.log('获取精选视频失败');
-    }
-   });
-}
+// function getAllRecommendedVideos(queryType) {
+//   homeApi.selectHome()
+//    .then(resp =>{
+//     video.value = resp.data.QueryRecommend;
+//    });
+// }
 
 //页面加载时调用
-getAllRecommendedVideos(1);
-getAllFeaturedVideos(2);
-
-
-
-
-
-// const recommendedVideos = ref([
-//   {
-//     id: 1,
-//     thumbnail: 'src/pic/money.png',
-//     title: '【机构财富密码破局之道5】MCD六彩神龙之吉龙抬头(普通话)',
-//     author: '小金',
-//     time: '23小时前',
-//     views: 15,
-//     likes: 0,
-//     comments: 1,
-//   },
-//   {
-//     id: 2,
-//     thumbnail: 'src/pic/touzi.png',
-//     title: '投资的真谛(永远的价值投资)一陆健大师(13.7.24)',
-//     author: 'STW',
-//     time: '07-16 17:47',
-//     views: 5,
-//     likes: 0,
-//     comments: 0,
-//   },
-//   {
-//     id: 3,
-//     thumbnail: 'src/pic/qiangshi.png',
-//     title: '第二节《强势结构形态》',
-//     author: '博股俱乐部',
-//     time: '01-24 09:55',
-//     views: 498,
-//     likes: 0,
-//     comments: 12,
-//   },
-//   {
-//     id: 4,
-//     thumbnail: 'src/pic/jihuigu.png',
-//     title: '价值投资之机会谷一Josie老师(11.7.24)',
-//     author: 'STW',
-//     time: '07-16 17:37',
-//     views: 6,
-//     likes: 0,
-//     comments: 0,
-//   },
-//   {
-//     id: 5,
-//     thumbnail: 'src/pic/A.png',
-//     title: 'A股释放积极信号！一大批上市公司发布回购、业绩预增等公告',
-//     author: '宋建军',
-//     time: '07-16 16:22',
-//     views: 3,
-//     likes: 0,
-//     comments: 0,
-//   },
-// ]);
+// getAllRecommendedVideos(1);
+
+
+const recommendedVideos = ref([
+  {
+    id: 1,
+    thumbnail: 'src/pic/money.png',
+    title: '【机构财富密码破局之道5】MCD六彩神龙之吉龙抬头(普通话)',
+    author: '小金',
+    time: '23小时前',
+    views: 15,
+    likes: 0,
+    comments: 1,
+  },
+  {
+    id: 2,
+    thumbnail: 'src/pic/touzi.png',
+    title: '投资的真谛(永远的价值投资)一陆健大师(13.7.24)',
+    author: 'STW',
+    time: '07-16 17:47',
+    views: 5,
+    likes: 0,
+    comments: 0,
+  },
+  {
+    id: 3,
+    thumbnail: 'src/pic/qiangshi.png',
+    title: '第二节《强势结构形态》',
+    author: '博股俱乐部',
+    time: '01-24 09:55',
+    views: 498,
+    likes: 0,
+    comments: 12,
+  },
+  {
+    id: 4,
+    thumbnail: 'src/pic/jihuigu.png',
+    title: '价值投资之机会谷一Josie老师(11.7.24)',
+    author: 'STW',
+    time: '07-16 17:37',
+    views: 6,
+    likes: 0,
+    comments: 0,
+  },
+  {
+    id: 5,
+    thumbnail: 'src/pic/A.png',
+    title: 'A股释放积极信号！一大批上市公司发布回购、业绩预增等公告',
+    author: '宋建军',
+    time: '07-16 16:22',
+    views: 3,
+    likes: 0,
+    comments: 0,
+  },
+]);
 
 // 精选视频
-// const featuredVideos = ref([
-//   {
-//     id: 1,
-//     thumbnail: 'src/pic/wengehua.png',
-//     title: '温哥华弘粉之约-北美同城会陪你共话投资',
-//     author: 'CANADA',
-//     time: '07-08 19:47',
-//     views: 523,
-//     likes: 0,
-//     comments: 0,
-//   },
-//   {
-//     id: 2,
-//     thumbnail: 'src/pic/shengkuang.png',
-//     title: '盛况！香港弘粉同城会圆满成功！',
-//     author: '精彩回顾',
-//     time: '07-08 19:47',
-//     views: 307,
-//     likes: 0,
-//     comments: 0,
-//   },
-//   {
-//     id: 3,
-//     thumbnail: 'src/pic/jinrongzhan.png',
-//     title: '金融战事再升级-欧盟对中国电动车征税的真相',
-//     author: '精彩回顾',
-//     time: '06-27 17:30',
-//     views: 144,
-//     likes: 0,
-//     comments: 0,
-//   },
-//   {
-//     id: 4,
-//     thumbnail: 'src/pic/youxueban.png',
-//     title: '弘粉游学班：赏美景、品美食、学投资！',
-//     author: '精彩回顾',
-//     time: '06-29 19:11',
-//     views: 658,
-//     likes: 0,
-//     comments: 0,
-//   },
-//   {
-//     id: 5,
-//     thumbnail: 'src/pic/meiyuanbaquan.png',
-//     title: '美元霸权地位动摇！"石油美元"时代...',
-//     author: '精彩回顾',
-//     time: '06-18 14:00',
-//     views: 538,
-//     likes: 0,
-//     comments: 0,
-//   },
-// ]);
+const featuredVideos = ref([
+  {
+    id: 1,
+    thumbnail: 'src/pic/wengehua.png',
+    title: '温哥华弘粉之约-北美同城会陪你共话投资',
+    author: 'CANADA',
+    time: '07-08 19:47',
+    views: 523,
+    likes: 0,
+    comments: 0,
+  },
+  {
+    id: 2,
+    thumbnail: 'src/pic/shengkuang.png',
+    title: '盛况！香港弘粉同城会圆满成功！',
+    author: '精彩回顾',
+    time: '07-08 19:47',
+    views: 307,
+    likes: 0,
+    comments: 0,
+  },
+  {
+    id: 3,
+    thumbnail: 'src/pic/jinrongzhan.png',
+    title: '金融战事再升级-欧盟对中国电动车征税的真相',
+    author: '精彩回顾',
+    time: '06-27 17:30',
+    views: 144,
+    likes: 0,
+    comments: 0,
+  },
+  {
+    id: 4,
+    thumbnail: 'src/pic/youxueban.png',
+    title: '弘粉游学班：赏美景、品美食、学投资！',
+    author: '精彩回顾',
+    time: '06-29 19:11',
+    views: 658,
+    likes: 0,
+    comments: 0,
+  },
+  {
+    id: 5,
+    thumbnail: 'src/pic/meiyuanbaquan.png',
+    title: '美元霸权地位动摇！"石油美元"时代...',
+    author: '精彩回顾',
+    time: '06-18 14:00',
+    views: 538,
+    likes: 0,
+    comments: 0,
+  },
+]);
 </script>
 
 <style scoped>
-.video-card:hover{
-transform: scale(1.01);
-}
-
-.my-icon{
-  right: 3px;
-}
 .like {
   height: 14px;
   width: 14px;
@@ -315,7 +277,6 @@ span {
   align-items: center;
   font-size: 14px;
   color: #666;
-  padding-top: 40px;
 
 }
 

src/views/LiveView.vue

@@ -3,17 +3,17 @@
     <div class="course-grid">
       <div v-for="course in courses" :key="course.id" class="course-card">
         <div class="course-image">
-          <img :src="course.image" alt="课程图片">
+          <img :src="course.cover" alt="课程图片">
           <div class="live-badge">即将开播</div>
-          <div class="live-time">{{ course.time }}</div>
+          <div class="live-time">{{ course.startTime }}</div>
         </div>
         <div class="course-info">
           <div class="course-title">{{ course.title }}</div>
           <div class="course-footer">
             <div class="course-tag">
-              <img :src="course.avatar" alt="讲师头像">
+              <img :src="course.cover" alt="讲师头像">
               <!-- <img src="../pic/images/1.png" alt="讲师头像"> -->
-              {{ course.teacher }}
+              {{ course.publisherName }}
             </div>
             <button class="book-btn" :class="{ active: course.booked }" @click="toggleBook(course.id)">预约</button>
           </div>
@@ -23,143 +23,26 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import zhiboApi from '@/api/zhiboApi';
 import { ref } from 'vue';
+const courses = ref([]);
 
-export default {
-  name: 'LiveCourses',
-  setup() {
-    const courses = ref([
-      {
-        id: 1,
-        title: '猎庄之顶级波段我公司不...',
-        teacher: '猎庄之顶级波段',
-        time: '明天09:55开播',
-        image: 'src/pic/images/1.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      },
-      {
-        id: 2,
-        title: '如何提前把握大盘和个股...',
-        teacher: '多空识庄短线寻...',
-        time: '明天10:00开播',
-        image: 'src/pic/images/2.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      },
-      {
-        id: 3,
-        title: '【粤语】AI铁皮训练-Tom...',
-        teacher: '【粤语】AI铁皮...',
-        time: '明天11:30开播',
-        image: 'src/pic/images/3.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      },
-      {
-        id: 4,
-        title: '构建有效的价值投资体系...',
-        teacher: '构建有效的价值...',
-        time: '明天20:30开播',
-        image: 'src/pic/images/4.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      },
-      {
-        id: 5,
-        title: '猎庄之顶级波段我公司不...',
-        teacher: '猎庄之顶级波段',
-        time: '明天09:55开播',
-        image: 'src/pic/images/5.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      },
-      {
-        id: 6,
-        title: '如何提前把握大盘和个股...',
-        teacher: '多空识庄短线寻...',
-        time: '明天10:00开播',
-        image: 'src/pic/images/6.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      },
-      {
-        id: 7,
-        title: '【粤语】AI铁皮训练-Tom...',
-        teacher: '【粤语】AI铁皮...',
-        time: '明天11:30开播',
-        image: 'src/pic/images/7.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      },
-      {
-        id: 8,
-        title: '构建有效的价值投资体系...',
-        teacher: '构建有效的价值...',
-        time: '明天20:30开播',
-        image: 'src/pic/images/8.png',
-        avatar: 'src/pic/images/link.jpg',
-        booked: false
-      }
-    ]);
-
-    const toggleBook = async (id) => {
-      const courseIndex = courses.value.findIndex(course => course.id === id);
-      if (courseIndex !== -1) {
-        const course = courses.value[courseIndex];
-        try {
-          if (!course.booked) {
-            // 预约课程 - POST 请求
-            const response = await fetch(`https://your-backend-api.com/bookings/${id}`, {
-              method: 'POST',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify({
-                courseId: id
-              })
-            });
 
-            if (!response.ok) {
-              throw new Error('预约失败');
+function formatTime(queryType) {
+  zhiboApi.selectZhibo(queryType).then(resp => {
+    if(resp.data){
+      courses.value = resp.data.list;
+      console.log(courses.value);
     }
-
-            // 更新本地状态
-            course.booked = true;
-            alert(`您已成功预约课程：${course.title}`);
-          } else {
-            // 取消预约 - DELETE 请求
-            const response = await fetch(`https://your-backend-api.com/bookings/${id}`, {
-              method: 'DELETE',
-              headers: {
-                'Content-Type': 'application/json',
-              }
-            });
-
-            if (!response.ok) {
-              throw new Error('取消预约失败');
+  })
 }
 
-            // 更新本地状态
-            course.booked = false;
-            alert(`您已取消预约课程：${course.title}`);
-          }
-        } catch (error) {
-          console.error('预约请求失败:', error);
-          alert('预约请求失败，请稍后再试');
-        }
-      }
-    };
+formatTime();
 
-    return {
-      courses,
-      toggleBook
-    };
-  }
-};
 </script>
 
+
 <style scoped>
 .container {
   max-width: 1200px;

vite.config.js

@@ -1,18 +1,25 @@
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from 'node:url';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueDevTools from 'vite-plugin-vue-devtools';
 
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueDevTools from 'vite-plugin-vue-devtools'
-
-// https://vite.dev/config/
 export default defineConfig({
+  server: {
+    proxy: {
+      '/api': {
+        target: 'http://192.168.8.235:8000', // 后端服务器地址
+        changeOrigin: true, // 改变请求源
+        rewrite: (path) => path.replace(/^\/api/, '') // 重写路径，去掉 /api
+      }
+    }
+  },
   plugins: [
     vue(),
-    vueDevTools(),
+    vueDevTools()
   ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
-    },
-  },
-})
+    }
+  }
+});