diff --git a/src/api/home.js b/src/api/home.js
index 69b8b6c..35c0297 100644
--- a/src/api/home.js
+++ b/src/api/home.js
@@ -2,4 +2,10 @@ import request from '../utils/request'
 
 export function listHomeBooks() {
     return request.get('/home/books');
-}
\ No newline at end of file
+}
+
+
+export function listHomeFriendLinks() {
+    return request.get('/home/friendLinks');
+}
+
diff --git a/src/components/FriendLink.vue b/src/components/FriendLink.vue
new file mode 100644
index 0000000..35b8c48
--- /dev/null
+++ b/src/components/FriendLink.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 6e1bb35..702ffe3 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1151,14 +1151,7 @@
       </div>
     </div>
   </div>
-  <div class="friend_link">
-    <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>
+  <FriendLink/>
 
   <div class="footer">
     <div class="box_center cf">
@@ -1189,11 +1182,13 @@ import { listHomeBooks } from "@/api/home";
 import { ElMessage, ElLoading } from "element-plus";
 import Header from "@/components/Header";
 import LatestNews from "@/components/LatestNews"
+import FriendLink from "@/components/FriendLink"
 export default {
   name: "home",
   components: {
     Header,
-    LatestNews
+    LatestNews,
+    FriendLink
   },
   setup() {
     const state = reactive({