接口对接，调整

7 months ago · 5d267c6ac8
2 changed files with 88 additions and 41 deletions
--- a/vueHomilyLink/src/views/HomeView.vue
+++ b/vueHomilyLink/src/views/HomeView.vue
@ -3,16 +3,6 @@ import Nav from '@/components/Nav.vue';
 import { ref, onMounted, reactive,computed } from 'vue';
 import homeApi from '@/api/HomeApi';

-const articleImgSrc = ref('');
-const title = ref('');
-const authorAvatarSrc = ref('');
-const authorName = ref('');
-const viewsCount = ref('');
-const commentsCount = ref('');
-const likesCount = ref('');
-const playTime = ref('');
-const club_id=ref('');
-
 const seeSrc = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIjSURBVFiF7VhtkqQgDE2sudfSxwAOox4GOUYzFzPzY2Ar0higdWtnqni//IjwQh5JBGBgYGBg4H8C7xrIe68AAPZ9V4j4h4g+07tpmoLWOtwxzyXC3ntFRDMAqBZ7IlqttcuVOd8i3Es0xxXi3YSdcwsiztnjAACAiCsAQAq/917t+67iu/ybt4h3Ed627QnHVQ2IuLbqs+RsL+lmwjnZK2EtEA/GmEfLt1XCJb0i4uPqro/jPtmjpmhVCW/bRj2D8vRWi8A7iyESzkInhk3KHDX5ZHIT5zklnOvMGNNsW0IPacl2aiGAiKcelzYQIj6IaCWilY0xJ7mUkFJizbZImBMgIlGzua0x5qG1DtbaxVq7cNJRMkVorUNm+yyRfiHsnFs4ASmMfMAz2/gsxFslrXJmW3TwQNh7r/gmq+3yVMVq4OGuIW64EG9fHCxKohXTNIXSdQ7uWKOTpzYHwlGraWLF5VGDpM/DhIJjAEdJAsBLW1pMVbxYNKQj0fZKeizZfpQ+jGnpGa9n7/1pA57bOucA4Hsl80LCs0AOVnhE26KGCymmOR0h4oyIc3TiQFaKFO8rJFuxNPeUTKHaVfuPW0ozG6yr+QH4Jp82V61RymUjabyJMMBrL/yj28uEX9PAVybqIn7SgjaTBbjvJ/RvGuJnEKmssiyj8m/+6U8oR0sPLKDr55Xj8slPJ/G3iSbcelTFG5t0XNWS3gYGBgYGfg++AMoF42iHsimVAAAAAElFTkSuQmCC');
 const pingSrc = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAIkSURBVFiF7Zc9j9NAEIafsRM+KhpqoKDiR4DTREqDaJAoafhoQuK1ckg0ZyMdEiS2OySEECVItBR0Z4TEj6Ch5gdc66GxcxtfEjsHzoGUt9rZmfU83vXHDOz0n0lsI01TT1X3C9NrO7mqRkEQhCuBkiTRtiGWSUR6vu9nAJ1yMo7jsByrarQFiFsUp1CcyiKQiJRHlVW3sS3FcRxaeQFwqkGq+nUbMBV55eAE0FlrB1SnHVCdOvUhkCTJM2APeGWMeWH7ZrPZZdd13+V5fr3T6TwYjUbfK2vvAS+BL8aYR3W5ancoTdM7wAFwCTgo7Llc132tqrdF5Eae558rsFeBD8AV4GEcx8//GEhVL9TYF63xOdsnIucr9sLaUwEZYz4C08KcFvZc3W73CfAN+CUid21fEAQ/HMd5DByJyCdjzNO6fI2eIWPM3nQ6jSaTyVHVNxwOfwI3V60dj8dvwjB8G4Zh3iRX47dsGUxTNYWBf/C13wHVaQdUpzMFKsrYBdnfoQzwRGQ/TdMMoCy865SmqbcpTJ7nHsc19byGt2vqSFXLgEOAJEkAMmNMb9lFy5pYdfNmReS44XEcJ5vP20FWX+bZ89X+qYg73JjipDIRieyTkFWRFbj5LlVhVDWy77CpVj0OK/9lvu9ncRx7IuJVIBdg/nbL5K5zDgYDgPvAtX6/L8D7NmFgzZGVWtZetwUDzQq0hbZaRHrb6mzX6jTfmp3a0G+wI+Yg4Q0N4wAAAABJRU5ErkJggg==');
 const zanSrc = ref('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAHOSURBVFiF7ZjdbawwEIXPISkknVzvC9p2sAtgKQC7hrTBS0wn9zbiyQsg4/3JgnfjKLpHWgmN/74dezwDwH/dFnMGO+eUiLQAlIh0AGCMOeXMWeUMDiEoAAoASLYk277vs4Be9g7s+/5EsgUAEelIAsAbSVXXNYdh8HvmzfLQJG+MOWmtD/O2kWydc+rbgGLvkOxme+752Q0Uq2kan5g8AEyHfbM2A6VnZ8+iDwWK9YgtSrUJyDmnnumdzUDTvQPgOd4BgNctnTd6R1lrP641isgInP+xu4HiG3iDd9S1BpJqmnc1391A93qHZBdCGL/o8wdRynHO+fn6WCXXS3nIGHOKQ11rnZWQY1lrZXr0WusDEHkoytwrOed8COFRDCtNOXC1ZhU17rpZczRt3UpnYT9RH74HaVlzOXOPyPY5UqmhGFBcnlRV5ZfnEjC3VAwoTkNxCVMMKIowH9uLb1kcYUBZIHXJWNxDqYoAXQt54Ad4KH1JKAIUh3yqIkBzyF+qrc4KNJJtmvmrqvKzzVr7kYbqDhh1rX0BEpFxLiu/kLqz302JSHepFF4+NgzD4I/H4ygi/wCM84/k36ZpfF3XnD8oZLJ4EXl/1lvL79cnbWbUVZZeqYsAAAAASUVORK5CYII=');
@ -37,22 +27,29 @@ const articleData = reactive({
  flag_type:''
 });

-console.log('初始化后的articleData:', articleData);
-
 // 定义一个函数，用于将接口返回的数据映射到articleData响应式对象中
 const mapResponseToArticleData = (responseData) => {
  if (Array.isArray(responseData)) {
+    console.log('res:', responseData);
    articleData.articleImgSrc = responseData.map(item => item.cover);
    articleData.title = responseData.map(item => item.name);
-    articleData.authorAvatarSrc = responseData.map(item => item.avatar);
-    articleData.authorName = responseData.map(item => item.username);
-    articleData.viewsCount = responseData.map(item => item.view_count);
+    articleData.authorAvatarSrc = responseData.map(item => item.user.avatar);
+    articleData.authorName = responseData.map(item => item.user.username);
+    articleData.viewsCount = responseData.map(item => item.viewCount);
    articleData.commentsCount = responseData.map(item => item.comments);
    articleData.likesCount = responseData.map(item => item.likes);
-    articleData.playTime = responseData.map(item => item.video_duration);
-    articleData.publishTime = responseData.map(item => item.releaseTime);
-    articleData.club_id = responseData.map(item => item.club_id);
-    articleData.flag_type = responseData.map(item => item.flag_type);
+    articleData.playTime = responseData.map(item => item.videoDuration);
+    articleData.publishTime = responseData.map(item => {
+      const date = new Date(item.releaseTime);
+      const month = ('0' + (date.getMonth() + 1)).slice(-2);
+      const day = ('0' + date.getDate()).slice(-2);
+      const hours = ('0' + date.getHours()).slice(-2);
+      const minutes = ('0' + date.getMinutes()).slice(-2);
+      return `${month}-${day} ${hours}:${minutes}`;
+    });
+    articleData.club_id = responseData.map(item => item.clubId);
+    articleData.flag_type = responseData.map(item => item.flagType);
+
  } else {
    console.warn('接口返回的数据格式不符合预期');
  }
@ -62,15 +59,43 @@ const mapResponseToArticleData = (responseData) => {
 async function selectAll() {
  try {
    const response = await homeApi.gethomeList();
-    mapResponseToArticleData(response);
+    mapResponseToArticleData(response.data);
+    
  } catch (error) {
    console.error('获取数据出错：', error);
  }
 }
-
+console.log('初始化后的articleData:', articleData);
 selectAll();


+
+// 精选视频接口
+const articleData2 = ref([]);
+function fetchData (){
+  homeApi.getHomeVideo().then(response => {
+    // 将articleData响应式对象赋值给articleData2
+    articleData2.value = response.data;
+    articleData2.value = articleData2.value.map(item => {
+      const date = new Date(item.releaseTime);
+      const month = ('0' + (date.getMonth() + 1)).slice(-2);
+      const day = ('0' + date.getDate()).slice(-2);
+      const hours = ('0' + date.getHours()).slice(-2);
+      const minutes = ('0' + date.getMinutes()).slice(-2);
+      return {
+       ...item,
+        releaseTime: `${month}-${day} ${hours}:${minutes}`
+      };
+    });
+    console.log('初始化后的articleData2:', articleData2.value);
+  }).catch(error => {
+    console.error('获取数据出错：', error);
+  });
+};
+fetchData ();
+
+
+
 const getColorClass = (index) => {
  const num = index + 1;
  if (num === 1) {
@ -83,9 +108,9 @@ const getColorClass = (index) => {
  return '';
 };

-const filteredArticleData = computed(() => {
-    return articleData.title.filter((_, index) => articleData.flag_type[index] === 1);
-});
+// const filteredArticleData = computed(() => {
+//     return articleData.title.filter((_, index) => articleData.flag_type[index] === 1);
+// });
 </script>

 <template>
@ -114,8 +139,8 @@ const filteredArticleData = computed(() => {
        </div>
    </div>
    <div class="articleinfo">
-      <p>{{ title }}</p>
-      <span class="articleinfo-avatar islink">
+      <p><b>{{ title }}</b></p>
+      <span class="articleinfo-avatar islink" style="font-size: 14px;">
        <img :src="articleData.authorAvatarSrc[index]" alt="作者头像">
        {{ articleData.authorName[index] }}
      </span>
@ -138,28 +163,31 @@ const filteredArticleData = computed(() => {
  </li>
 </ul>
      </div>
+
+
+      <!-- 精选视频 -->
      <div class="sidebar-right" style="width: 400px; float: right;">
        <div>
          <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAHJSURBVFiF1ZhRkoMgDIb/OD1CPc/SWe5Vey86i+dx75B9KHHEWsEItvu/tFYGviaQkBCUGqw1AECM6+RnEz49ADChB4DWuU67DinAOmJ8TWBy5ZnQb4XNBgxg1/TItJhwywVNAg7WGmL87KZaUA5os/YyWK0KHPDYv4O13eqYVy9KujSlNUsuAh4JJ3oF+QT4DjjREmQE+E44ERMurXNenqND8m64wBAdyhEwdZqO1JRlBNRYjwk3hLRWUlOWBtBZTzb0+e4uAbSohKkBgJBbt8rLlwBKJUGFSVxsSkxaGNQM1pqmxuFonetKWXM1F+9RCWsS49oo91+29oJWs+Bcwe2bTzz9flvWLDhPSVu0Zc3DLKjVCY94Zo5YLNzOt2Qsf6pGM5P2plQdcART7HQm9Ccm3IjLu3h05865i1uwFBjwCE1NCBV+72RAVAWaAtN5IFiQCf0eN4+1syqiLkvaJmNNogjYPvwxTRskqfPdETAJ1IpcKTHNFOR6YomqOm3aKy2xHjBLdUy4HI8Ta+7JCLB1zteoL3KVLNxFH936EH1080h0BGSqR5jTwKwGmXPp/f8t4Lk+tom+JKmpJ5WhERgZI2FLW7/8AexhA1wjeFcZAAAAAElFTkSuQmCC"
            alt style="width: 20px; height: 20px; margin-right: 5px; vertical-align: middle;">精选视频
        </div>
-        <ul class="data-list"  >
-          <li class="data-list-li articleList" v-for="(title, index) in filteredArticleData" :key="index">
-    <div class="articleimg" >
+        <ul class="data-list" >
+          <li class="data-list-li articleList" v-for="(article, index) in articleData2" :key="index">
+    <div class="articleimg">
      <div class="el-image articleimg-img" >
-        <img :src="articleData.articleImgSrc[index]" alt="文章图片">
+        <img :src="article.cover" alt="文章图片">
        <span :class="['corner-mark', getColorClass(index)]">{{ index + 1 }}</span>
-        <span class="play-time">{{ articleData.playTime[index] }}</span>
+        <span class="play-time">{{ article.videoDuration }}</span>
      </div>
    </div>
    <div class="articleinfo">
-      <h5>{{ title }}</h5>
-      <span class="homepage-list-li-see">
+      <span class="articletitle">{{ article.name }}</span>
+      <span class="see">
        <img :src="seeSrc" alt="浏览量图标">
-        {{ articleData.viewsCount[index] }}
+        {{ article.viewCount }}
      </span>
-      <span class="articleinfo-time">{{ articleData.publishTime[index] }}</span>
+      <span class="articleinfo-time">{{ article.releaseTime }}</span>
    </div>
  </li>
 </ul>
@ -169,6 +197,11 @@ const filteredArticleData = computed(() => {
 </template>

 <style scoped>
+.articletitle{
+  display: block;
+  font-size: 16px;
+  margin-bottom: 20px;
+}
 .play-icon {
    width: 0;
    height: 0;
@ -212,15 +245,18 @@ body {
            height: 100px;
            margin-right: 10px; /* 减少右边距以让文字更靠近图片 */
            border-radius: 5px;
-            overflow: hidden;
+            /* overflow: hidden; */
        }
        .articleimg-img img {
-            width: 100%;
+            width: 150px;
            height: 90px;
            object-fit: cover;
        }
        .articleinfo {
            flex-grow: 1;
+            font-size: 20px;
+            margin: 0;
+            padding: 0;
        }
        .articleinfo p {
            margin: 0; /* 移除外边距 */
@ -242,8 +278,8 @@ body {
            border-radius: 50%;
        }
        .articleinfo-time {
-            font-size: 16px;
-            color: #999;
+            font-size: 13px;
+            color: #000000;
            margin-left: 10px;
        }
        .homepage-list-li-see,
@ -252,12 +288,23 @@ body {
            display: inline-block;
            margin-left: 10px;
            cursor: pointer;
+            font-size: 13px;
        }
        .homepage-list-li-see img,
        .homepage-list-li-ping img,
        .homepage-list-1i-zan img {
            width: 20px;
            height: 20px;
+            padding: 0;
+            margin-left: 0;
+        }
+        .see{
+          margin-left: 0;
+          font-size: 13px;
+        }
+        .see img{
+          width: 20px;
+          height: 20px;
        }
        .class123{
            /*让页面分为左右结构*/
--- a/vueHomilyLink/vite.config.js
+++ b/vueHomilyLink/vite.config.js
@ -18,8 +18,8 @@ export default defineConfig({
  server: {
    proxy: {
      '/api': {
-        // target: 'http://192.168.8.191:8080',
-        target: 'http://localhost:8080',
+        target: 'http://192.168.8.191:8080',
+        // target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }