haha

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/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,128 +77,156 @@
   </div>
 </template>
 
+
+
+
 <script setup>
-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);
+
+// 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);
+  });
+}
 
-// 清除本地存储（调试用）
-localStorage.removeItem('videos');
+formatTime();
 
-// 合并 onMounted 逻辑
-onMounted(() => {
-  fetchShowList();
-  loadFromLocalStorage();
-});
 </script>
 
+
+
+
 <style scoped>
 
 .header-content p {

src/views/LiveView.vue

@@ -26,8 +26,7 @@
 <script setup>
 import zhiboApi from '@/api/zhiboApi';
 import { ref } from 'vue';
-const courses = ref([
-]);
+const courses = ref([]);
 
 
 function formatTime(queryType) {
@@ -43,6 +42,7 @@ formatTime();
 
 </script>
 
+
 <style scoped>
 .container {
   max-width: 1200px;