feat(FriendLink.vue): 增加友情链接组件

This commit is contained in:
xiongxiaoyang 2022-05-14 17:02:15 +08:00
parent 47356f4f8f
commit f5e23d75b5
3 changed files with 54 additions and 10 deletions

View File

@ -2,4 +2,10 @@ import request from '../utils/request'
export function listHomeBooks() { export function listHomeBooks() {
return request.get('/home/books'); return request.get('/home/books');
} }
export function listHomeFriendLinks() {
return request.get('/home/friendLinks');
}

View File

@ -0,0 +1,43 @@
<template>
<div class="friend_link">
<div class="box_center cf" id="friendLink">
<span>友情链接</span>
<a
v-for="(item, index) in friendLinks"
:key="index"
target="_blank"
:href="item.linkUrl"
>{{ item.linkName }}
</a>
</div>
</div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue";
import { ElMessage, ElLoading } from "element-plus";
import { listHomeFriendLinks } from "@/api/home";
export default {
name: "FriendLink",
setup() {
const state = reactive({
friendLinks: [],
});
onMounted(async () => {
const loadingInstance = ElLoading.service({
target: "#indexNews",
text: "加载中。。。",
});
const { data } = await listHomeFriendLinks();
loadingInstance.close();
state.friendLinks = data;
});
return {
...toRefs(state),
};
},
};
</script>

View File

@ -1151,14 +1151,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="friend_link"> <FriendLink/>
<div class="box_center cf" id="friendLink">
<span>友情链接</span>
<a target="_blank" href="https://www.xinshumen.com">小说精品屋</a
><a target="_blank" href="http://video.java2nb.com/">小羊影视</a
><a target="_blank" href="http://bbs.java2nb.com">官方论坛</a>
</div>
</div>
<div class="footer"> <div class="footer">
<div class="box_center cf"> <div class="box_center cf">
@ -1189,11 +1182,13 @@ import { listHomeBooks } from "@/api/home";
import { ElMessage, ElLoading } from "element-plus"; import { ElMessage, ElLoading } from "element-plus";
import Header from "@/components/Header"; import Header from "@/components/Header";
import LatestNews from "@/components/LatestNews" import LatestNews from "@/components/LatestNews"
import FriendLink from "@/components/FriendLink"
export default { export default {
name: "home", name: "home",
components: { components: {
Header, Header,
LatestNews LatestNews,
FriendLink
}, },
setup() { setup() {
const state = reactive({ const state = reactive({