主页、电子书完成

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/bookApi.js

@@ -0,0 +1,7 @@
+import service from "./indexApi";
+const bookApi = {
+  getBookList() {
+    return service.post("/api/ebooks/getEbookList");
+  },
+}
+export default bookApi;

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/BookView.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="book-list">
-    <div v-for="book in books" :key="book.title" class="book-item">
-      <img :src="book.cover" :alt="book.title">
+    <div v-for="book in books" :key="book.id" class="book-item">
+      <img :src="book.cover">
+      <!-- <img :src="book.cover" :alt="book.title"> -->
       <div class="book-info" >
         <h3>{{ book.title }}</h3>
         <p>{{ book.description }}</p>
-        <p>阅读次数：{{ book.reads }}次</p>
+        <p>阅读次数：{{ book.viewCount }}次</p>
       </div>
       <button @click="handleReadBook(book.title)">立即阅读</button>
     </div>
@@ -57,34 +58,45 @@ export default {
 };
 </script> -->
 <script setup>
+import bookApi from '@/api/bookApi';
 import { ref } from 'vue';
 
-const books = ref([
-  {
-    title: "发财线秘籍",
-    description: "发财线经济（阅读时间截止为2024年6月30日）",
-    reads: 2490,
-    cover: "src/assets/发财线.png"
-  },
-  {
-    title: "解套宝典",
-    description: "解套宝典（阅读截止时间为2024年12月31日）",
-    reads: 1057,
-    cover: "src/assets/解套.png"
-  },
-  {
-    title: "十年200倍——上册",
-    description: "十年200倍——上册（阅读截止时间为2024年12月31日）",
-    reads: 1073,
-    cover: "src/assets/十年上.png"
-  },
-  {
-    title: "十年200倍——下册",
-    description: "十年200倍——下册（阅读截止时间为2024年12月31日）",
-    reads: 1018,
-    cover: "src/assets/十年下.png"
+const books = ref([]);
+//向后端发送请求
+function getBooks() {
+  bookApi.getBookList().then(resp => {
+    books.value = resp.data.list;
+    console.log(books.value);
+  } );
 }
-]);
+getBooks();
+
+// const books = ref([
+//   {
+//     title: "发财线秘籍",
+//     description: "发财线经济（阅读时间截止为2024年6月30日）",
+//     reads: 2490,
+//     cover: "src/assets/发财线.png"
+//   },
+//   {
+//     title: "解套宝典",
+//     description: "解套宝典（阅读截止时间为2024年12月31日）",
+//     reads: 1057,
+//     cover: "src/assets/解套.png"
+//   },
+//   {
+//     title: "十年200倍——上册",
+//     description: "十年200倍——上册（阅读截止时间为2024年12月31日）",
+//     reads: 1073,
+//     cover: "src/assets/十年上.png"
+//   },
+//   {
+//     title: "十年200倍——下册",
+//     description: "十年200倍——下册（阅读截止时间为2024年12月31日）",
+//     reads: 1018,
+//     cover: "src/assets/十年下.png"
+//   }
+// ]);
 
 const handleReadBook = (title) => {
   alert(`您点击了《${title}》`);
@@ -92,6 +104,10 @@ const handleReadBook = (title) => {
 </script>
 
 <style>
+
+.book-item:hover{
+  transform: scale(1.01);
+}
 body {
   font-family: Arial, sans-serif;
   background-color: #f4f4f4;
@@ -102,7 +118,6 @@ body {
 .book-list {
   display: flex;
   flex-direction: column;
-  gap: 20px;
 }
 
 .book-item {

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

@@ -5,7 +5,7 @@
         <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-card class="video-card">
               <div class="video-content">
                 <img :src="video.cover" alt="视频缩略图" class="video-thumbnail" />
                 <div class="video-info">
@@ -15,18 +15,12 @@
                     <img class="icon" :src="video.publisherAvatar" />
                     <span> {{ video.publisherName }} {{ video.publishTime }}</span>
                     <div class="video-stats">
-                      <el-icon>
-                        <View />
-                      </el-icon>
-                      <el-button type="text">{{ video.videoDuration }}</el-button>
-                      <!-- <div type="text" style="color: black;" >{{ video.videoDuration }}</div> -->
-
-                      <el-icon>
-                        <ChatDotSquare />
-                      </el-icon>
-                      <el-button type="text">{{ video.likeCount }}</el-button>
+                      <el-icon><View /></el-icon>
+                      <el-button type="text" style="color: black;">{{ video.videoDuration }}</el-button>
+                      <el-icon><ChatDotSquare /></el-icon>
+                      <el-button type="text" style="color: black;">{{ video.likeCount }}</el-button>
                       <img src="../pic/like.png" class="like">
-                      <el-button type="text">{{ video.commentCount }}</el-button>
+                      <el-button type="text" style="color: black;">{{ video.commentCount }}</el-button>
                     </div>
                   </div>
                 </div>
@@ -49,8 +43,8 @@
                       <el-icon class="my-icon">
                         <View />
                       </el-icon>
-                      <el-button type="text">{{ video.viewCount }}</el-button>
-                      <el-button type="text">{{ video.publishTime }}</el-button>
+                      <el-button type="text" style="color: black;">{{ video.viewCount }}</el-button>
+                      <el-button type="text" style="color: black;">{{ video.publishTime }}</el-button>
                       <!-- <el-button type="text">{{ video.comments }}</el-button> -->
                     </div>
                   </div>
@@ -287,7 +281,7 @@ span {
 
 .video-title1 {
   font-size: 20px;
-  font-weight: bold;
+  font-weight: 600;
   margin-bottom: 10px;
   text-align: left;
   line-height: normal;
@@ -295,7 +289,7 @@ span {
 
 .video-title2 {
   font-size: 18px;
-  font-weight: 540;
+  font-weight: 600;
   margin-bottom: 10px;
   text-align: left;
   line-height: normal;
@@ -309,13 +303,22 @@ span {
   /* padding-top: 20px; */
 
 }
+.video-meta1 span{
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #666;
+  /* padding-top: 20px; */
+  font-weight: 600;
+
+}
 
 .video-meta2 {
   display: flex;
   align-items: center;
   font-size: 14px;
   color: #666;
-  padding-top: 40px;
+  padding-top: 20px;
 
 }
 

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))
-    },
-  },
-})
+    }
+  }
+});