wanglin
/
practice_VUE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

接口编写+样式修改

home_zwk
zhaowenkang 7 months ago
parent
d60710765d
commit
2bc9e3796b
4 changed files with 127 additions and 96 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 12
      vueHomilyLink/src/api/HomeApi.js
  2. 14
      vueHomilyLink/src/api/index.js
  3. 2
      vueHomilyLink/src/components/Nav.vue
  4. 195
      vueHomilyLink/src/views/HomeView.vue

12
vueHomilyLink/src/api/HomeApi.js
View File

@ -0,0 +1,12 @@
import service from ".";
const homeApi = {
//获取首页列表
gethomeList() {
return service.get('/mainpage/get-shows');
},
//获取视频列表
getHomeVideo(){
return service.get('/mainpage/get-videos');
}
}
export default homeApi;

14
vueHomilyLink/src/api/index.js
View File

@ -0,0 +1,14 @@
import axios from "axios";
const service = axios.create({
baseURL: 'http://localhost:8080',
});
//Axios的响应拦截器..
service.interceptors.response.use(resp => {
return resp.data;
}, error => {
return Promise.reject(error);
});
export default service;

2
vueHomilyLink/src/components/Nav.vue
View File

@ -18,7 +18,7 @@
background-color: rgba(177, 174, 159, 0.493);
height: 30px;
border-bottom: 1px solid #aaa;
width: 1200px;
width: 1000px;
margin-right: auto;
margin-left: auto;
}

195
vueHomilyLink/src/views/HomeView.vue
View File

@ -1,109 +1,122 @@
<script setup>
import Nav from '@/components/Nav.vue';
import { ref,onMounted } from 'vue';
import { ref, onMounted, reactive } from 'vue';
import axios from 'axios';
const articleImgSrc = ref('https://d31zlh4on95l9h.cloudfront.net/file/5iujax01000d3zmepl9pbsls208uy0xn.jpg');
const title = ref('机构逃顶时空信号解析Sam老师(6.9.24)');
const authorAvatarSrc = ref('https://d31zlh4on95l9h.cloudfront.net/images/1y9yuf08kg0cyezmliqxmdt1qfoitfft.jpg');
const authorName = ref('STW');
const publishTime = ref('09-07 08:20');
const viewsCount = ref(431);
const commentsCount = ref(0);
const likesCount = ref(3);
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 playTime=ref('09-07 08:20');
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 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 articleData = ref([]);
const articleData = reactive({
articleImgSrc: '',
title: '',
authorAvatarSrc: '',
authorName: '',
publishTime: '',
viewsCount: 0,
commentsCount: 0,
likesCount: 0,
playTime: ''
});
// 页面加载时调用接口获取数据
onMounted(() => {
axios.get('/************') // 将这里替换为实际的后端接口地址
.then((response) => {
articleData.value = response.data;
})
.catch((error) => {
console.error('获取数据出错：', error);
});
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);
});
});
</script>
<template>
<div>
<div class="daohang">
<Nav></Nav>
</div>
<div>
<div class="daohang">
<Nav></Nav>
</div>
<div class="class123">
<div class="container" style="width: 800px;">
<div class="title">推荐</div>
<ul class="data-list">
<!-- <li class="data-list-li articleList" v-for="item in articleData" :key="item.id"> -->
<li class="data-list-li articleList">
<div class="articleimg">
<div class="el-image articleimg-img">
<img :src="articleImgSrc" alt="文章图片">
<span class="play-icon" ></span>
<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>
<div class="articleinfo">
<p>{{ title }}</p>
<!-- <div class="right_inline tips"></div> -->
<span class="articleinfo-avatar islink">
<img :src="authorAvatarSrc" alt="作者头像">
"{{ authorName }}"
</span>
<span class="articleinfo-time">{{ publishTime }}</span>
<span class="homepage-list-li-see">
<img :src="seeSrc" alt="浏览量图标">
"{{ viewsCount }}"
</span>
<span class="homepage-list-li-ping">
<img :src="pingSrc" alt="评论数图标">
"{{ commentsCount }}"
</span>
<span class="homepage-list-1i-zan">
<img :src="zanSrc" alt="点赞图标">
"{{ likesCount }}"
</span>
</div>
</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 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>
</div>
<ul class="data-list">
<!-- <li class="data-list-li articleList" v-for="item in articleData" :key="item.id"> -->
<li class="data-list-li articleList">
<div class="articleimg">
<div class="el-image articleimg-img">
<img :src="articleImgSrc" alt="文章图片">
<span class="corner-mark">1</span>
<span class="play-time">{{playTime}}</span>
<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="(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>
</div>
<div class="articleinfo">
<h5>{{ title }}</h5>
<div class="right_inline tips"></div>
<span class="homepage-list-li-see">
<img :src="seeSrc" alt="浏览量图标">
"{{ viewsCount }}"
</span>
<span class="articleinfo-time">{{ publishTime }}</span>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<style scoped>
@ -137,16 +150,11 @@ body {
font-size: 24px;
color: #333;
padding: 10px 0;
border-bottom: 2px solid #ccc;
}
.data-list {
list-style: none;
padding: 0 10px;
}
.data-list-li {
display: flex;
align-items: flex-start;
border-bottom: 1px solid #eee;
padding: 10px 0;
}
.articleimg {
@ -206,9 +214,6 @@ body {
/*让页面分为左右结构*/
display: flex;
}
.articleimg {
position: relative; /* 设置相对定位，为内部绝对定位元素提供定位基准 */
}
.corner-mark {
position: absolute;

Write Preview
Loading…
Cancel
Save