refactor: 优化图谱URL转换逻辑

src/utils/convertUtil.ts

@@ -1,14 +1,64 @@
-import type {UserUpdateDTO} from "@/types/dto";
-import type {IUser} from "@/types/user";
+import type { UserUpdateDTO } from "@/types/dto";
+import type { IUser } from "@/types/user";
 
 export function convertIUserToUserUpdateDTO(user: IUser): UserUpdateDTO {
-    const userUpdateDTO: UserUpdateDTO = {};
-    // 遍历IUser对象的属性
-    for (const key in user) {
-        // 只选取UserUpdateDTO中定义的属性进行赋值
-        if (key === "userAvatar" || key === "lastLoginTime" || key === "englishName" || key === "gender" || key === "birthday" || key === "phone" || key === "contentEmail") {
-            userUpdateDTO[key] = user[key];
-        }
+  const userUpdateDTO: UserUpdateDTO = {};
+  // 遍历IUser对象的属性
+  for (const key in user) {
+    // 只选取UserUpdateDTO中定义的属性进行赋值
+    if (
+      key === "userAvatar" ||
+      key === "lastLoginTime" ||
+      key === "englishName" ||
+      key === "gender" ||
+      key === "birthday" ||
+      key === "phone" ||
+      key === "contentEmail"
+    ) {
+      userUpdateDTO[key] = user[key];
     }
-    return userUpdateDTO;
-}
+  }
+  return userUpdateDTO;
+}
+
+/**
+ * 处理图片url
+ * @param url
+ * @returns
+ */
+export function convertImageUrl(url: string, altText: string): string {
+  // 如果url为空，生成一个课程名图片
+  if (url === null || url === "") {
+    // 创建画布
+    const canvas = document.createElement("canvas");
+    // 绘制文字环境
+    const context = canvas.getContext("2d");
+    // 画布宽度
+    canvas.width = 400;
+    // 画布高度
+    canvas.height = 240;
+    // 绘制文字之前填充
+    context.fillStyle = "#000000";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    // 设置水平对齐方式
+    context.textAlign = "center";
+    // 设置垂直对齐方式
+    context.textBaseline = "middle";
+    // 设置字体颜色
+    context.fillStyle = "#ffffff";
+    // 设置字体大小和字体类型
+    context.font = "40px Arial";
+    // 绘制文字
+    context.fillText(altText, canvas.width / 2, canvas.height / 2);
+    // 生成图片信息
+    return canvas.toDataURL("image/png");
+  }
+
+  const index = url.indexOf("?");
+  // 截取?之前的字符串
+  if (index !== -1) {
+    return url.substring(0, index);
+  }
+  // 否则返回原url
+  return url;
+}

src/views/CourseSquare/component/AllCourse/MoreCourse.vue

@@ -15,7 +15,7 @@
       <div class="course-items-container">
         <el-card v-for="item in getCoursesSlice(0, 5)" :key="item.courseId" class="course-item active" @click="handleClick(item.courseId)">
           <div style="width: 200px; height: 120px">
-            <img :src="item.courseImages[0]" :alt="item.courseName" class="course-item-img">
+            <img :src="convertImageUrl(item.courseImages[0], item.courseName)" :alt="item.courseName" class="course-item-img">
           </div>
           <div class="course-item-content">
             <div style="font-weight: bold; font-size: 16px; margin: 5px 0">{{item.courseName}}</div>
@@ -33,7 +33,7 @@
       <div class="course-items-container">
         <el-card v-for="item in getCoursesSlice(5, 10)" :key="item.courseId" class="course-item active" @click="handleClick(item.courseId)">
           <div style="width: 200px; height: 120px">
-            <img :src="item.courseImages[0]" :alt="item.courseName" class="course-item-img">
+            <img :src="convertImageUrl(item.courseImages[0], item.courseName)" :alt="item.courseName" class="course-item-img">
           </div>
           <div class="course-item-content">
             <div style="font-weight: bold; font-size: 16px; margin: 5px 0">{{item.courseName}}</div>
@@ -70,6 +70,7 @@ import type {CourseQuery} from "@/types/query";
 import router from "@/router";
 import {useStore} from "@/store";
 import {Refresh, Search} from "@element-plus/icons-vue";
+import {convertImageUrl} from "@/utils/convertUtil";
 
 const apis = useApis()
 const store = useStore()
@@ -171,19 +172,12 @@ const fetchData = () => {
   }
 }
 
-const processData = () => {
-  for(let i:number = 0; i < pageInfo.courseData.length; i++){
-    console.log(pageInfo.courseData[i].courseImages[0])
-    pageInfo.courseData[i].courseImages[0] = pageInfo.courseData[i].courseImages[0].split("?")[0]
-  }
-}
 
 const fetchAllCourse = () => {
   apis.getAllCourse(query, queryInfo.pageNow, queryInfo.pageSize)
       .then((res: any) => {
         console.log(res)
         pageInfo.courseData = res.data.data.records
-        processData()
         pageInfo.total = res.data.data.total
         Object.assign(pageInfo2Show, pageInfo)
       })
@@ -199,7 +193,6 @@ const fetchCourseByUserId = () => {
         .then((res: any) => {
           console.log(res)
           pageInfo.courseData = res.data.data.records
-          processData()
           pageInfo.total = res.data.data.total
           Object.assign(pageInfo2Show, pageInfo)
         })
@@ -212,7 +205,6 @@ const fetchCourseByUserId = () => {
         .then((res: any) => {
           console.log(res.data.data)
           pageInfo.courseData = res.data.data.records
-          processData()
           pageInfo.total = res.data.data.total
           Object.assign(pageInfo2Show, pageInfo)
         })

src/views/CourseSquare/component/Course/index.vue

@@ -16,7 +16,7 @@
     <div class="course-items-container">
       <el-card v-for="item in getCoursesSlice()" :key="item.courseId" class="course-item active" @click="handleClick(item.courseId)">
         <div style="width: 200px; height: 120px">
-          <img :src="item.courseImages[0]" :alt="item.courseName" class="course-item-img">
+          <img :src="convertImageUrl(item.courseImages[0], item.courseName)" :alt="item.courseName" class="course-item-img">
         </div>
         <div class="course-item-content">
           <div style="font-weight: bold; font-size: 16px; margin: 5px 0">{{item.courseName}}</div>
@@ -48,6 +48,7 @@
   import router from "@/router";
   import type {CourseQuery} from "@/types/query";
   import {useStore} from "@/store";
+  import { convertImageUrl } from '@/utils/convertUtil';
 
   const apis = useApis()
   const store = useStore()
@@ -105,7 +106,6 @@
     apis.getAllCourse(query, 0, 10)
         .then((res: any) => {
           courses.course = res.data.data.records
-          processCourses()
         })
         .catch((err: any) => {
           console.error("错误信息",err);
@@ -118,7 +118,6 @@
       apis.getCourseByStudentId()
           .then((res: any) => {
             courses.course = res.data.data.records
-            processCourses()
           })
           .catch((err: any) => {
             console.error(err);
@@ -128,7 +127,6 @@
       apis.getCourseByTeacherId()
           .then((res: any) => {
             courses.course = res.data.data.records
-            processCourses()
           })
           .catch((err: any) => {
             console.error(err);
@@ -137,15 +135,6 @@
     }
   }
 
-  /*
-  * 处理课程图片
-   */
-  const processCourses = () => {
-    for(let i:number = 0; i < courses.course.length; i++){
-      courses.course[i].courseImages[0] = courses.course[i].courseImages[0].split("?")[0]
-    }
-  }
-
   onMounted(()=>{
     fetchData()
   })

src/views/CourseSquare/component/CourseDetails/index.vue

@@ -7,7 +7,7 @@
   <div class="course-details">
     <div class="course-details-info">
       <div>
-        <img  class="course-details-image" :src="dataForm.courseImages?.length > 0 ? dataForm.courseImages[0] : null" :alt="dataForm.courseName">
+        <img  class="course-details-image" :src="convertImageUrl(dataForm.courseImages[0], dataForm.courseName)" :alt="dataForm.courseName">
       </div>
       <div class="course-details-text">
         <div class="title">
@@ -38,7 +38,7 @@
     </div>
     <div class="course-tabs">
       <el-tabs v-model="activeTab" >
-        <el-tab-pane v-for="item in items" :name="item.key" :label="item.label">
+        <el-tab-pane v-for="item in items" :key="item.key" :name="item.key" :label="item.label">
           <template v-if="activeTab == '课程简介'">
             <div>
               {{dataForm.description}}
@@ -118,9 +118,6 @@ import {onMounted, reactive, ref} from 'vue';
 import {
   ElTabs,
   ElTabPane,
-  ElTable,
-  ElTableColumn,
-  ElAvatar,
   ElMessage,
   ElNotification,
   type UploadFiles, type UploadFile, type FormRules, type FormInstance
@@ -135,7 +132,7 @@ import {useStore} from "@/store";
 import type {CourseUpdateDTO, EnrollDTO} from "@/types/dto";
 import {UploadFilled} from "@element-plus/icons-vue"
 import type { UploadProps, UploadUserFile } from 'element-plus'
-import axiosInstance from "@/apis/axios.config";
+import { convertImageUrl } from '@/utils/convertUtil';
 
 const apis = useApis()
 const store = useStore()