diff --git a/vueHomilyLink/src/api/HomeApi.js b/vueHomilyLink/src/api/HomeApi.js
index 55a665b..21e603a 100644
--- a/vueHomilyLink/src/api/HomeApi.js
+++ b/vueHomilyLink/src/api/HomeApi.js
@@ -6,7 +6,7 @@ const homeApi = {
     },
 	//获取视频列表
 	getHomeVideo(){
-		return service.get('/mainpage/get-videos');
+		return service.get('/mainpage/get-videos?flagType=1');
 	}
 }
 export default homeApi;
\ No newline at end of file
diff --git a/vueHomilyLink/src/api/index.js b/vueHomilyLink/src/api/index.js
index a388e65..a6ba51f 100644
--- a/vueHomilyLink/src/api/index.js
+++ b/vueHomilyLink/src/api/index.js
@@ -1,9 +1,11 @@
 import axios from "axios";
 
 const service = axios.create({
-    baseURL: 'http://localhost:8080',
+    // baseURL: 'http://192.168.8.191:8080',
+    // baseURL: 'http://localhost:8080',
+    baseURL: '/api',
 });
-
+// http://192.168.8.191:8080
 
 //Axios的响应拦截器..
 service.interceptors.response.use(resp => {
diff --git a/vueHomilyLink/src/views/HomeView.vue b/vueHomilyLink/src/views/HomeView.vue
index 6797f11..9a7791b 100644
--- a/vueHomilyLink/src/views/HomeView.vue
+++ b/vueHomilyLink/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <script setup>
 import Nav from '@/components/Nav.vue';
-import { ref, onMounted, reactive } from 'vue';
-import axios from 'axios';
+import { ref, onMounted, reactive,computed } from 'vue';
+import homeApi from '@/api/HomeApi';
 
 const articleImgSrc = ref('');
 const title = ref('');
@@ -11,42 +11,80 @@ 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=');
 
+const clubMark1Src = ref('https://lfjf.rzfwq.com/jtzy/Product/pcjingwang/uploads/default/416cf8f2e000451043b1d1af74b5dbb8.png ');
+const clubMark2Src = ref('https://d31zlh4on95l9h.cloudfront.net/web/20241130133116/img/clubS1.b631a2c3.png');
+const clubMark3Src = ref('https://lfjf.rzfwq.com/jtzy/Product/pcjingwang/uploads/default/cbd9eda094b33695bab858e08c67ae71.png');
+const clubMark4Src = ref('https://d31zlh4on95l9h.cloudfront.net/web/20241130133116/img/clubS4.98fc204a.png');
+
 // 定义响应式数据来存储从数据库获取的数据
 const articleData = reactive({
   articleImgSrc: '',
   title: '',
   authorAvatarSrc: '',
   authorName: '',
-  publishTime: '',
   viewsCount: 0,
   commentsCount: 0,
   likesCount: 0,
-  playTime: ''
+  playTime: '',
+  club_id: '',
+  publishTime: '',
+  flag_type:''
 });
 
+console.log('初始化后的articleData:', articleData);
+
+// 定义一个函数，用于将接口返回的数据映射到articleData响应式对象中
+const mapResponseToArticleData = (responseData) => {
+  if (Array.isArray(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.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);
+  } else {
+    console.warn('接口返回的数据格式不符合预期');
+  }
+};
+
 // 页面加载时调用接口获取数据
-onMounted(() => {
-  axios.get('https://api.example.com/article')
-   .then((response) => {
-      // 直接修改articleData里的各个属性，因为它现在是reactive响应式对象
-      articleData.articleImgSrc = response.data.articleImgSrc;
-      articleData.title = response.data.title;
-      articleData.authorAvatarSrc = response.data.authorAvatarSrc;
-      articleData.authorName = response.data.authorName;
-      articleData.publishTime = response.data.publishTime;
-      articleData.viewsCount = response.data.viewsCount;
-      articleData.commentsCount = response.data.commentsCount;
-      articleData.likesCount = response.data.likesCount;
-      articleData.playTime = response.data.playTime;
-    })
-   .catch((error) => {
-      console.error('获取数据出错：', error);
-    });
+async function selectAll() {
+  try {
+    const response = await homeApi.gethomeList();
+    mapResponseToArticleData(response);
+  } catch (error) {
+    console.error('获取数据出错：', error);
+  }
+}
+
+selectAll();
+
+
+const getColorClass = (index) => {
+  const num = index + 1;
+  if (num === 1) {
+    return 'color-red';
+  } else if (num === 2) {
+    return 'color-green';
+  } else if (num === 3) {
+    return 'color-blue';
+  }
+  return '';
+};
+
+const filteredArticleData = computed(() => {
+    return articleData.title.filter((_, index) => articleData.flag_type[index] === 1);
 });
 </script>
 
@@ -59,35 +97,46 @@ onMounted(() => {
       <div class="container" style="width: 600px;">
         <div class="title"><b>推荐</b></div>
         <ul class="data-list">
-          <li class="data-list-li articleList" v-for="(item, index) in articleData" :key="index">
-            <div class="articleimg">
-              <div class="el-image articleimg-img">
-                <img :src="item.articleImgSrc" alt="文章图片">
-                <span class="play-icon"></span>
-              </div>
-            </div>
-            <div class="articleinfo">
-              <p>{{ item.title }}</p>
-              <span class="articleinfo-avatar islink">
-                <img :src="item.authorAvatarSrc" alt="作者头像">
-                "{{ item.authorName }}"
-              </span>
-              <span class="articleinfo-time">{{ item.publishTime }}</span>
-              <span class="homepage-list-li-see">
-                <img :src="seeSrc" alt="浏览量图标">
-                "{{ item.viewsCount }}"
-              </span>
-              <span class="homepage-list-li-ping">
-                <img :src="pingSrc" alt="评论数图标">
-                "{{ item.commentsCount }}"
-              </span>
-              <span class="homepage-list-1i-zan">
-                <img :src="zanSrc" alt="点赞图标">
-                "{{ item.likesCount }}"
-              </span>
-            </div>
-          </li>
-        </ul>
+  <li class="data-list-li articleList" v-for="(title, index) in articleData.title" :key="index">
+    <!-- 下面继续展示对应数据的渲染，和之前类似 -->
+    <div class="articleimg">
+      <div class="el-image articleimg-img">
+        <img :src="articleData.articleImgSrc[index]" alt="文章图片">
+        <span class="play-icon"></span>
+      </div>
+      <div class="club">
+          <span class="club_img">
+          <img v-if="articleData.club_id[index] === 1" :src="clubMark1Src" alt="club_id为1的角标">
+          <img v-else-if="articleData.club_id[index] === 2" :src="clubMark2Src" alt="club_id为2的角标">
+          <img v-else-if="articleData.club_id[index] === 3" :src="clubMark3Src" alt="club_id为3的角标">
+          <img v-else-if="articleData.club_id[index] === 4" :src="clubMark4Src" alt="club_id为4的角标">
+        </span>
+        </div>
+    </div>
+    <div class="articleinfo">
+      <p>{{ title }}</p>
+      <span class="articleinfo-avatar islink">
+        <img :src="articleData.authorAvatarSrc[index]" alt="作者头像">
+        {{ articleData.authorName[index] }}
+      </span>
+      <span class="articleinfo-time" alt="发布时间">
+        {{ articleData.publishTime[index] }}
+      </span>
+      <span class="homepage-list-li-see">
+        <img :src="seeSrc" alt="浏览量图标">
+        {{ articleData.viewsCount[index] }}
+      </span>
+      <span class="homepage-list-li-ping">
+        <img :src="pingSrc" alt="评论数图标">
+        {{ articleData.commentsCount[index] }}
+      </span>
+      <span class="homepage-list-1i-zan">
+        <img :src="zanSrc" alt="点赞图标">
+        {{ articleData.likesCount[index] }}
+      </span>
+    </div>
+  </li>
+</ul>
       </div>
       <div class="sidebar-right" style="width: 400px; float: right;">
         <div>
@@ -95,25 +144,25 @@ onMounted(() => {
             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="(item, index) in articleData" :key="index">
-            <div class="articleimg">
-              <div class="el-image articleimg-img">
-                <img :src="item.articleImgSrc" alt="文章图片">
-                <span class="corner-mark">1</span>
-                <span class="play-time">{{ item.playTime }}</span>
-              </div>
-            </div>
-            <div class="articleinfo">
-              <h5>{{ item.title }}</h5>
-              <span class="homepage-list-li-see">
-                <img :src="seeSrc" alt="浏览量图标">
-                "{{ item.viewsCount }}"
-              </span>
-              <span class="articleinfo-time">{{ item.publishTime }}</span>
-            </div>
-          </li>
-        </ul>
+        <ul class="data-list"  >
+          <li class="data-list-li articleList" v-for="(title, index) in filteredArticleData" :key="index">
+    <div class="articleimg" >
+      <div class="el-image articleimg-img" >
+        <img :src="articleData.articleImgSrc[index]" alt="文章图片">
+        <span :class="['corner-mark', getColorClass(index)]">{{ index + 1 }}</span>
+        <span class="play-time">{{ articleData.playTime[index] }}</span>
+      </div>
+    </div>
+    <div class="articleinfo">
+      <h5>{{ title }}</h5>
+      <span class="homepage-list-li-see">
+        <img :src="seeSrc" alt="浏览量图标">
+        {{ articleData.viewsCount[index] }}
+      </span>
+      <span class="articleinfo-time">{{ articleData.publishTime[index] }}</span>
+    </div>
+  </li>
+</ul>
       </div>
     </div>
   </div>
@@ -215,17 +264,29 @@ body {
             display: flex;
         }
 
-.corner-mark {
+        .corner-mark {
     position: absolute;
     top: 0;
     left: 0;
-    background-color: red;
+    background-color: rgb(128, 128, 128);
     color: white;
     padding: 2px 5px;
     border-radius: 2px;
     font-size: 12px;
 }
 
+.color-red {
+    background-color: red;
+}
+
+.color-green {
+  background-color: rgb(255, 102, 0);
+}
+
+.color-blue {
+  background-color: rgb(255, 196, 0);
+}
+
 .play-time {
     position: absolute;
     bottom: 10%;
@@ -236,4 +297,22 @@ body {
     border-radius: 2px;
     font-size: 12px;
 }
+
+.club {
+    position: absolute;
+    top: 0;
+    right: 0;
+    /* 可以根据实际需求调整容器大小等样式 */
+    
+    width: 10px;
+    height: 10px;
+}
+.club_img img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    /* 可以根据实际需求调整图片的大小等其他样式，以下是示例 */
+    width: 15px; /* 假设调整宽度 */
+    height: 15px; /* 假设调整高度 */
+  }
 </style>
diff --git a/vueHomilyLink/vite.config.js b/vueHomilyLink/vite.config.js
index 4217010..3f92ffb 100644
--- a/vueHomilyLink/vite.config.js
+++ b/vueHomilyLink/vite.config.js
@@ -15,4 +15,14 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url))
     },
   },
+  server: {
+    proxy: {
+      '/api': {
+        // target: 'http://192.168.8.191:8080',
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  }
 })