Move background to database.

src/services/backgroundApi.ts

@@ -0,0 +1,10 @@
+/**
+ * @description 背景图片模块
+ * @author PeterAlbus
+ * @time 2023-08-15
+ */
+
+import http from './httpConfig';
+import { backgroundUrl } from "@/services/urlConfig";
+
+export const fetchBackgroundList = () => http.get({},backgroundUrl.getBackgroundList);

src/services/httpConfig.ts

@@ -4,7 +4,11 @@ import qs from "qs";
 import { ElMessage } from "element-plus";
 import { BASE_URL } from "@/services/urlConfig";
 
-
+export interface HttpResult {
+    code: number;
+    message: string;
+    data: any;
+}
 // 可能需要自定义添加些配置
 // interface AxiosRequestConfig extends _AxiosRequestConfig {}
 // interface AxiosResponse extends _AxiosResponse { }

src/services/urlConfig.ts

@@ -74,3 +74,9 @@ export const messageUrl:any = {
     getUnreadMessageCount: "/message/getUnreadMessageCount",
     readMessage: "/message/readMessage"
 }
+
+export const backgroundUrl:any = {
+    getBackgroundList: "/background/queryAll",
+    addBackground: "/background/add",
+    deleteBackground: "/background/delete",
+}

src/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="home-banner" :style="{background:'url('+backgrounds[randomIndex]+') fixed center center',backgroundSize:'cover',OBackgroundSize:'cover',MozBackgroundSize:'cover'}">
+  <div class="home-banner" :style="backgroundStyle">
     <div class="banner-container">
       <div>
         <el-avatar :size="150" src="https://file.peteralbus.com/assets/blog/imgs/blog_avatar.png"></el-avatar>
@@ -103,6 +103,8 @@ import {ElMessage} from "element-plus";
 import FriendLinks from "@/components/FriendLinks.vue"
 import PersonalInfo from "@/components/PersonalInfo.vue"
 import { fetchBlogList } from "@/services/blogApi";
+import { fetchBackgroundList } from "@/services/backgroundApi";
+import { HttpResult } from "@/services/httpConfig";
 
 const blogList = ref([
   {
@@ -152,21 +154,38 @@ const copyQuotes=()=>{
   ElMessage.success("复制成功!点击右键可换一句")
 }
 
-const backgrounds=[
-    'https://file.peteralbus.com/assets/blog/static/background/background-lumine.jpg',
-    // 'https://file.peteralbus.com/assets/blog/static/background/background-kazuha.jpg',
-    // 'https://file.peteralbus.com/assets/blog/static/background/background-blueeyes.jpg',
-    'https://file.peteralbus.com/assets/blog/static/background/background-girl1.jpg',
-    // 'https://file.peteralbus.com/assets/blog/static/background/background-mountain1.jpg',
-    'https://file.peteralbus.com/assets/blog/static/background/background-nogamenolife.jpg',
-    // 'https://file.peteralbus.com/assets/blog/static/background/background-ai1.jpg',
-    // 'https://file.peteralbus.com/assets/blog/static/background/background-ai2.jpg',
-    'https://file.peteralbus.com/assets/blog/static/background/background_ygo_1_1440p.jpg',
-    'https://file.peteralbus.com/assets/blog/static/background/background_1440pba.jpg',
-    'https://file.peteralbus.com/assets/blog/static/background/background_1440psekiro.jpg',
-]
-
-const randomIndex=Math.floor(Math.random()*backgrounds.length)
+const backgrounds=ref([
+  {
+    url:'',
+    description:'无'
+  }
+])
+
+const getBackgrounds = () => {
+  fetchBackgroundList().then((res:HttpResult) => {
+    backgrounds.value = []
+    res.data.map((item: any) => {
+      if (item.isShow) {
+        backgrounds.value.push({
+          url: item.backgroundUrl,
+          description: item.description
+        })
+      }
+    })
+    randomIndex.value=Math.floor(Math.random()*backgrounds.value.length)
+  })
+}
+
+const backgroundStyle = computed(() => {
+  return {
+    backgroundImage: `url(${backgrounds.value[randomIndex.value].url})`,
+    backgroundSize: 'cover',
+    OBackgroundSize: 'cover',
+    MozBackgroundSize: 'cover'
+  }
+})
+
+const randomIndex=ref(Math.floor(Math.random()*backgrounds.value.length))
 // const randomIndex=4
 
 const getBlogList=function () {
@@ -176,6 +195,7 @@ const getBlogList=function () {
 }
 
 onMounted(()=>{
+  getBackgrounds()
   getBlogList()
   getQuotes()
 })
@@ -191,7 +211,8 @@ const topBlogs=computed(()=>{
 })
 
 const recentBlogs = computed (function () {
-  const recentBlogs = blogList.value.reverse();
+  const blogListCopy = blogList.value;
+  const recentBlogs = blogListCopy.reverse();
   return recentBlogs.slice(0, 10);
 })