feat:增加了管理员可以修改轮播图的功能

src/api/course/course.js

@@ -86,6 +86,26 @@ function uploadCourseImage(name, image) {
   });
 }
 
+function uploadCarouselChart(files){
+  let file = new FormData();
+  for (let i=0;i<files.length;i++){
+    file.append("files",files[i].raw);
+  }
+  return axios.post("/admin/uploadImage",file,{
+    headers: {
+      "Content-Type": "multipart/form-data"
+    }
+  });
+}
+
+function queryCarouselChart(){
+  return axios.get("/admin/queryImage",{
+    params:{
+
+    }
+  });
+}
+
 const courseAPIs = {
   createCourse,
   getAllCourses,
@@ -102,6 +122,8 @@ const courseAPIs = {
   checkCourseCodeUnique,
   getCourseByEvalId,
   uploadCourseImage,
+  uploadCarouselChart,
+  queryCarouselChart
 };
 
 export default courseAPIs;

src/views/PortalPage/PortalPage.vue

@@ -1,4 +1,6 @@
 <template>
+
+  <PhotoChange></PhotoChange>
   <div id="portal-body">
 
     <CarouselCard style="grid-column-start: 1; grid-column-end: 3;"/>
@@ -171,6 +173,7 @@ import MyCourseCard from "@/views/PortalPage/components/MyCourseCard";
 import MyTestCard from "@/views/PortalPage/components/MyTestCard";
 import { FolderOpened, Lock, SetUp, ShoppingCart } from "@element-plus/icons-vue";
 import TestCard from "@/components/TestCard";
+import PhotoChange from "@/views/PortalPage/components/PhotoChange";
 
 export default {
   //数据
@@ -184,7 +187,8 @@ export default {
     MyTestCard,
     CourseCard,
     CarouselCard,
-    MyCourseCard
+    MyCourseCard,
+    PhotoChange
   },
   data() {
     return {
@@ -211,6 +215,9 @@ export default {
     isStudent() {
       return this.$store.getters.isStudent;
     },
+    isAdmin(){
+      return this.$store.state.user.role==="ADMIN";
+    },
     myTestList() {
       return []
         .concat(this.myEvalExamList)

src/views/PortalPage/components/CarouselCard.vue

@@ -17,14 +17,19 @@ export default {
         require("@/assets/carousel-SE2.png"),
         require("@/assets/seec-banner.png"),
       ],
-      link:[]
+      link:[],
     };
   },
   async created() {
+    const rootPoint = (await this.$apis.queryCarouselChart()).data.data;
     const exampleClasses = (await this.$apis.getExampleCourses()).data.data;
-    for (let i=0; i<Math.min(exampleClasses.length,3); i++){
-      this.contents[i]=exampleClasses[i].imageUrl;
-      this.link[i]=exampleClasses[i].id;
+    for (let i = 0; i < rootPoint.length; i++) {
+      this.contents[i] = rootPoint[i];
+    }
+    this.$forceUpdate();
+    for (let i = rootPoint.length; i < Math.min(rootPoint.length+exampleClasses.length, 3); i++) {
+      this.contents[i] = exampleClasses[i-rootPoint.length].imageUrl;
+      this.link[i] = exampleClasses[i-rootPoint.length].id;
     }
     this.$forceUpdate();
   },

src/views/PortalPage/components/PhotoChange.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-card style="text-align: center;" v-if="isAdmin" @click="this.seeDialog=true">
+    点我修改轮播图
+  </el-card>
+  <el-dialog v-model="seeDialog">
+    <div>请慎重上传！上传到服务器后会直接覆盖原有图片！</div>
+    <el-upload
+        class="upload-demo"
+        action=""
+        :auto-upload="false"
+        :limit="3"
+        :on-exceed="handleExceed"
+        :file-list="fileList"
+        list-type="picture"
+        :on-remove="handleChange"
+        :on-change="handleChange">
+      <el-button size="small" type="primary" style="margin: 10px">点击上传</el-button>
+    </el-upload>
+    <el-button style="margin: 10px;" size="small" type="success" @click="updatePictures" >上传到服务器</el-button>
+  </el-dialog>
+</template>
+
+<script>
+import {ElMessage} from "element-plus";
+
+export default {
+  name: "PhotoChange",
+  data() {
+    return {
+      fileList: [],
+      seeDialog: false,
+    };
+  },
+  computed:{
+    isAdmin(){
+      return this.$store.state.user.role==="ADMIN";
+    },
+  },
+  methods: {
+    handleExceed(files, fileList) {
+      ElMessage.error("最多展示3个文件！");
+    },
+    async updatePictures() {
+      const message=await this.$apis.uploadCarouselChart(this.fileList);
+      if (message.data.data==="成功"){
+        ElMessage.success("上传成功！");
+      }else {
+        ElMessage.error("上传失败！");
+      }
+      this.seeDialog=false;
+    },
+    handleChange(file, fileList) {
+      this.fileList = fileList;
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+</style>