diff --git a/vueHomilyLink/src/api/ChannelApi.js b/vueHomilyLink/src/api/ChannelApi.js
new file mode 100644
index 0000000..acfb155
--- /dev/null
+++ b/vueHomilyLink/src/api/ChannelApi.js
@@ -0,0 +1,22 @@
+import service from ".";
+
+const ChannelApi = {
+    //获取频道列表
+    getchannels(){
+        return service.get('/list');
+    },
+    //获取shows列表
+    getShows(Id,UserId,FlagType){
+        return service.post('/channel',{Id,UserId,FlagType});
+    },
+    //订阅状态
+    subscribe(Id,UserId){
+        return service.post('/subscription',{Id,UserId})
+    },
+    //取消订阅
+    unSubscribe(Id,UserId){
+        return service.delete('/subscription',{Id,UserId})
+    }
+    
+}
+export default ChannelApi;
\ No newline at end of file
diff --git a/vueHomilyLink/src/api/index.js b/vueHomilyLink/src/api/index.js
index f4a660c..e8e7453 100644
--- a/vueHomilyLink/src/api/index.js
+++ b/vueHomilyLink/src/api/index.js
@@ -4,7 +4,7 @@ const service = axios.create({
     // baseURL: 'http://192.168.9.19:8080',
     baseURL: '/api'
 });
-
+// http://192.168.8.191:8080
 
 //Axios的响应拦截器..
 service.interceptors.response.use(resp => {
diff --git a/vueHomilyLink/src/views/ChannelView.vue b/vueHomilyLink/src/views/ChannelView.vue
index 4cceea3..dd62036 100644
--- a/vueHomilyLink/src/views/ChannelView.vue
+++ b/vueHomilyLink/src/views/ChannelView.vue
@@ -1,38 +1,16 @@
 <script setup>
 import Nav from '@/components/Nav.vue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import router from '@/router';
+import ChannelApi from '@/api/ChannelApi';
 
 //频道列表
-
 const channelList = ref([]);
-function getChannel() {
-    channelList.value = ([
-        {
-            id: 1,
-            image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
-            name: "量价时空四维预测术",
-            // 订阅数量
-            subscriptionCount: 60,
-            backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
-            status: 1
-        },
-        {
-            id:2,
-            image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
-            name:"时空四维预测术",
-            // 订阅数量
-            subscriptionCount:60,
-            backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
-            status:0
-        }
-    ]);
-}
-getChannel();
-
-
+//视频上的导航栏
+const currentTab = ref('all');
+const flagType = ref(null);
 //频道
-//获取传递的参数中的id
+//默认信息
 const channel = ref({
     id: 1,
     image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
@@ -40,130 +18,76 @@ const channel = ref({
     // 订阅数量
     subscriptionCount: 60,
     backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg",
-    status: 1
 });
-//加载频道信息
-function loadChannels(channelId) {
-    channelList.value.forEach(ch =>{
-        if(ch.id == channelId){
-            channel.value = ch;
-        }
-    });
+//1-左侧导航栏加载
+function getChannels() {
+    //查询频道列表api
+    ChannelApi.getchannels().then((result) =>{
+        console.log(result.data);
+        channelList.value = result.data;
+        console.log("++++",channelList.value);
+    })
+
 }
-loadChannels();
+getChannels();
+
 function toLink(channelId) {
     router.push({ path: '/channel', query: { id: channelId } });
-    loadChannels(channelId);
-    loadShows();
+    loadShows(channelId,flagType);
+    console.log("flga",flagType.value);
+}
+
+
+
+function changeTab(tab, flagType) {
+  currentTab.value = tab;
+  loadShows(flagType);
 }
 
 // 展示列表1
 const shows = ref([]);
 // 加载展示列表
-function loadShows() {
-    shows.value = ([
-        {
-            id: 3,
-            cover: "	https://d31zlh4on95l9h.cloudfront.net/images/5iujax01000d5j9gzh9bvhrgq0hb5t0q.jpg",
-            name: "联合利剑！五大机器人史诗升级",
-            user: {
-                id: 1,
-                username: "HomilyLink",
-                avatar: "https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
-            },
-            releaseTime: "2024-05-26 11:42:00",
-            // 视频时长
-            videoDuration: "01:22:11",
-            // 观看数量
-            viewCount: 796,
-            comments: 1,
-            likes: 10,
-            // 内容标识类型,图文还是视频
-            flagType: 1,
-
-
-        },
-        {
-            id: 4,
-            cover: "https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg",
-            name: "壁垒将至？中美博弈开启拼刺刀白热化阶段",
-            user: {
-                id: 1,
-                username: "HomilyLink",
-                avatar: "https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
-            },
-            releaseTime: "2024-01-24 09:55:00",
-            // 视频时长
-            videoDuration: "03:56:00",
-            // 观看数量
-            viewCount: "594",
-            comments: 50,
-            likes: 16,
-            // 内容标识类型,图文还是视频
-            flagType: 1,
-            club: {
-                id: 1,
-                image: "https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
-                name: "博股俱乐部",
-                introduction: "博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
-                backgroundImage: ""
-            },
-            channel: {
-                id: 1,
-                image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
-                name: "量价时空四维预测术",
-                // 订阅数量
-                subscriptionCount: 60,
-                backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg"
-            }
-
-        },
-        {
-            id: 5,
-            cover: "https://d31zlh4on95l9h.cloudfront.net/images/5iujau01000d5gniid28ddecu026a4y7.jpg",
-            name: "壁垒将至？中美博弈开启拼刺刀白热化阶段",
-            user: {
-                id: 1,
-                username: "HomilyLink",
-                avatar: "https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf0myv0cyno4wstwr368e0wbi9on.jpg",
-                password: "123456",
-            },
-            releaseTime: "2024-01-24 09:55:00",
-            // 视频时长
-            videoDurition: "03:56:00",
-            // 观看数量
-            viewCount: "594",
-            comments: 50,
-            likes: 16,
-            // 内容标识类型,图文还是视频
-            flagType: 0,
-            club: {
-                id: 1,
-                image: "https://d31zlh4on95l9h.cloudfront.net/default/1y9yuf08kg0cydno200zqtu17zi4gwwv.png",
-                name: "博股俱乐部",
-                introduction: "博股国际投资论坛(BoguIntemational InvestmentForum)立足中国，面向全球。聚集了国际政要、投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高投资人士提供深度学习，解读国际经济形势，井研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重知识体系的深度，与大师为伍，强调价值投资，并利用大波设进行盈利。",
-                backgroundImage: ""
-            },
-            channel: {
-                id: 1,
-                image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png",
-                name: "量价时空四维预测术",
-                // 订阅数量
-                subscriptionCount: 60,
-                backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg"
-            }
-
-        }
-    ])
-
+function loadShows(channleId,flagType) {
+    //shows查询api,根据id,userId
+    ChannelApi.getShows(channleId,90000000,flagType.value).then((result)=>{
+        console.log(result.data)
+        channel.value = result.data.channel;
+
+        console.log("频道",channel.value)
+        shows.value = result.data.shows;
+        console.log("视频",shows.value);
+        
+    })
 }
-// 
-loadShows();
+loadShows(channel.value.id,flagType);
+
 //订阅
-function submit() {
+function submit(channelId) {
+    console.log("频道id",channelId);
+    ChannelApi.subscribe(channelId,90000000).then((result)=>{
+       if(result && result.success){
+        alert('订阅成功！');
+        loadShows(channelId);
+       }else{
+        alert('订阅失败！');
+       }
+    })
 
 }
 
+function unsubmit(channelId){
+    console.log("取消频道id",channelId);
+    ChannelApi.unSubscribe(channelId,90000000).then((result) =>{
+        if(result && result.success){
+            alert('取消订阅成功！');
+            loadShows(channelId);
+        }
+    })
+}
+// function buttonActive(){
+   
+// }
+// buttonActive();
 
 </script>
 
@@ -172,14 +96,15 @@ function submit() {
     <ChannelNav></ChannelNav>
     <div class="club-nav">
         <div class="container">
-            <button v-for="channel in channelList" @click="toLink(channel.id)" class="nav-item">{{ channel.name }}</button>
+            <button v-for="ch in channelList.list" @click="toLink(ch.id)" class="nav-item">{{ ch.name }}</button>
         </div>
     </div>
     <div class="channel">
         <div class="channel-head">
             <!-- 1-订阅按钮 -->
-            <button v-if="channel.status && channel.status == 1" class="submited">已订阅</button>
-            <button v-else class="submit" @click="submit">订阅</button>
+            <button v-if="channel.status && channel.status == 1" class="submited"
+              @click="unsubmit(channel.id)">取消订阅</button>
+            <button v-else class="submit" @click="submit(channel.id)">订阅</button>
             <!-- 2-背景图片 -->
             <img alt="" class="bc-image" :src="channel.backgroundImage" />
             <!-- 3-频道主题 -->
@@ -198,12 +123,24 @@ function submit() {
         <div class="channel-content">
             <!-- 导航栏 -->
             <div class="content-nav">
-                <button class="tab">全部</button>
-                <button class="tab">文章</button>
-                <button class="tab">视频</button>
+                <button 
+                class="tab" 
+                :class="{ active: currentTab === 'all' }" 
+                @click="changeTab(channel.id,null)">全部</button>
+                <button 
+                class="tab" 
+                :class="{ active: currentTab === 'articles' }" 
+                @click="changeTab(channel.id,1)">文章</button>
+                <button 
+                class="tab" 
+                :class="{ active: currentTab === 'videos' }" 
+                @click="changeTab(channel.id, 2)">视频</button>
             </div>
+            <component :is="currentTabComponent"></component>
             <!-- 内容 -->
-            <div class="content-list">
+             <!-- 如果是全部 -->
+            
+            <div v-if="currentTab == 'all'" class="content-list">
                 <ul class="list-display">
                     <!-- 一条 -->
                     <li v-for="show in shows">
@@ -237,6 +174,80 @@ function submit() {
                     </li>
                 </ul>
             </div>
+
+            <div v-if="currentTab == 'videos'" class="content-list">
+                <ul class="list-display">
+                    <!-- 一条 -->
+                    <li v-for="show in shows">
+                        <div class="sub-topic">
+                            <!-- 左边 -->
+                            <div class="sub-left">
+                                <img class="sub-image" :src="show.cover" alt="视频缩略图">
+                                <div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time">
+                                    {{ show.videoDuration }}
+                                </div>
+                            </div>
+                            <!-- 右边 -->
+                            <div class="sub-right">
+                                <!-- title -->
+                                <h3 :name="show.name" class="right-title">{{ show.name }}</h3>
+
+                                <div class="right-inline">
+                                    <!-- 发布的用户名 -->
+                                    <div class="right-item">
+                                        <img :src="show.user.avatar" class="img1">
+                                        <div :username="show.user.username">{{ show.user.username }}</div>
+                                    </div>
+                                    <!-- 评论 -->
+                                    <span :comments="show.comments" class="right-item">{{ show.comments }}评论</span>
+                                    <!-- 日期 -->
+                                    <div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+
+            <div v-if="currentTab == 'articles'" class="content-list">
+                <ul class="list-display">
+                    <!-- 一条 -->
+                    <li v-for="show in shows">
+                        <div class="sub-topic">
+                            <!-- 左边 -->
+                            <div class="sub-left">
+                                <img class="sub-image" :src="show.cover" alt="视频缩略图">
+                                <div v-if="show.flagType == 1" :videoDuration="show.videoDuration" class="video-time">
+                                    {{ show.videoDuration }}
+                                </div>
+                            </div>
+                            <!-- 右边 -->
+                            <div class="sub-right">
+                                <!-- title -->
+                                <h3 :name="show.name" class="right-title">{{ show.name }}</h3>
+
+                                <div class="right-inline">
+                                    <!-- 发布的用户名 -->
+                                    <div class="right-item">
+                                        <img :src="show.user.avatar" class="img1">
+                                        <div :username="show.user.username">{{ show.user.username }}</div>
+                                    </div>
+                                    <!-- 评论 -->
+                                    <span :comments="show.comments" class="right-item">{{ show.comments }}评论</span>
+                                    <!-- 日期 -->
+                                    <div :releaseTime="show.releaseTime" class="right-item"> {{ show.releaseTime }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+
+
+
         </div>
     </div>
 </template>
@@ -400,9 +411,8 @@ function submit() {
 }
 
 .active {
-    color: red;
+    color: red;   
     border-bottom: 2px solid red;
-    /* 修正了属性名中的空格 */
 }
 
 .list-display {
diff --git a/vueHomilyLink/vite.config.js b/vueHomilyLink/vite.config.js
index 26696aa..a44a510 100644
--- a/vueHomilyLink/vite.config.js
+++ b/vueHomilyLink/vite.config.js
@@ -23,5 +23,5 @@ export default defineConfig({
         rewrite: (path) => path.replace(/^\/api/, '')
       }
     }
-  },
+  }
 })