From 65e2d52d43881182f3a7e589d8ec071431d1511c Mon Sep 17 00:00:00 2001 From: ting Date: Tue, 3 Dec 2024 15:33:27 +0800 Subject: [PATCH] =?UTF-8?q?axios+=E9=A2=91=E9=81=93=E4=BE=A7=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vueHomilyLink/package-lock.json | 100 ++++++++ vueHomilyLink/package.json | 1 + vueHomilyLink/src/views/ChannelView.vue | 441 ++++++++++++++++++-------------- 3 files changed, 346 insertions(+), 196 deletions(-) diff --git a/vueHomilyLink/package-lock.json b/vueHomilyLink/package-lock.json index a347183..03a0d28 100644 --- a/vueHomilyLink/package-lock.json +++ b/vueHomilyLink/package-lock.json @@ -8,6 +8,7 @@ "name": "vuehomilylink", "version": "0.0.0", "dependencies": { + "axios": "^1.7.8", "pinia": "^2.2.6", "vue": "^3.5.12", "vue-router": "^4.4.5" @@ -1434,6 +1435,23 @@ "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==", "license": "MIT" }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "license": "MIT" + }, + "node_modules/axios": { + "version": "1.7.8", + "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.8.tgz", + "integrity": "sha512-Uu0wb7KNqK2t5K+YQyVCLM76prD5sRFjKHbJYCP1J7JFGEQ6nN7HWn9+04LAeiJ3ji54lgS/gZCH1oxyrf1SPw==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/birpc": { "version": "0.2.19", "resolved": "https://registry.npmmirror.com/birpc/-/birpc-0.2.19.tgz", @@ -1514,6 +1532,18 @@ ], "license": "CC-BY-4.0" }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "license": "MIT", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/convert-source-map": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz", @@ -1619,6 +1649,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/electron-to-chromium": { "version": "1.5.64", "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.64.tgz", @@ -1727,6 +1766,40 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, + "node_modules/follow-redirects": { + "version": "1.15.9", + "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz", + "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.1", + "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz", + "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fs-extra": { "version": "11.2.0", "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.2.0.tgz", @@ -1990,6 +2063,27 @@ "dev": true, "license": "MIT" }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/mimic-fn": { "version": "4.0.0", "resolved": "https://registry.npmmirror.com/mimic-fn/-/mimic-fn-4.0.0.tgz", @@ -2239,6 +2333,12 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "license": "MIT" + }, "node_modules/rfdc": { "version": "1.4.1", "resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz", diff --git a/vueHomilyLink/package.json b/vueHomilyLink/package.json index 5c51bad..79fd816 100644 --- a/vueHomilyLink/package.json +++ b/vueHomilyLink/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "axios": "^1.7.8", "pinia": "^2.2.6", "vue": "^3.5.12", "vue-router": "^4.4.5" diff --git a/vueHomilyLink/src/views/ChannelView.vue b/vueHomilyLink/src/views/ChannelView.vue index d793232..4cceea3 100644 --- a/vueHomilyLink/src/views/ChannelView.vue +++ b/vueHomilyLink/src/views/ChannelView.vue @@ -3,141 +3,165 @@ import Nav from '@/components/Nav.vue'; import { ref } from 'vue'; import router from '@/router'; +//频道列表 + +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(); + + //频道 //获取传递的参数中的id -const channel = ref(); +const channel = ref({ + id: 1, + image: "https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png", + name: "量价时空四维预测术", + // 订阅数量 + subscriptionCount: 60, + backgroundImage: "https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg", + status: 1 +}); //加载频道信息 -function loadChannels(channelId){ - channel.value = { - // id:1, - // image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png", - // name:"量价时空四维预测术", - // // 订阅数量 - // subscriptionCount:60, - // backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg", - // status:0 - id:2, - image:"https://d31zlh4on95l9h.cloudfront.net/images/52ea7786d329493ea43791533e17ba66.png", - name:"量价时空四维预测术", - // 订阅数量 - subscriptionCount:60, - backgroundImage:"https://d31zlh4on95l9h.cloudfront.net/images/148gntohb80czrcs8ykqfkq1yhuplalr.jpg", - status:0 - } +function loadChannels(channelId) { + channelList.value.forEach(ch =>{ + if(ch.id == channelId){ + channel.value = ch; + } + }); } loadChannels(); -function toLink(channelId){ - router.push({path:'/channel',query:{id: channelId}}); - console.log(channelId); - loadChannels(channelId); - loadShows(); +function toLink(channelId) { + router.push({ path: '/channel', query: { id: channelId } }); + loadChannels(channelId); + loadShows(); } // 展示列表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() { + 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" + } + + } + ]) } // loadShows(); //订阅 -function submit(){ - +function submit() { + } @@ -148,16 +172,13 @@ function submit(){
- - - - +
- + @@ -168,7 +189,7 @@ function submit(){

{{ channel.name }}

- {{ channel.subscriptionCount}}已订阅 + {{ channel.subscriptionCount }}已订阅

.

@@ -177,9 +198,9 @@ function submit(){
- - - + + +
@@ -190,7 +211,7 @@ function submit(){
视频缩略图 -
+
{{ show.videoDuration }}
@@ -198,7 +219,7 @@ function submit(){

{{ show.name }}

- +
@@ -208,7 +229,8 @@ function submit(){ {{ show.comments }}评论 -
{{ show.releaseTime }}
+
{{ show.releaseTime }} +
@@ -220,86 +242,98 @@ function submit(){ \ No newline at end of file