第一次提交3

src/App.vue

@@ -0,0 +1,13 @@
+<template>
+  <router-view/>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<script lang="ts">
+ export default {
+   name: "App"
+ }
+</script>

src/apis/assignment.ts

@@ -0,0 +1,38 @@
+import axiosInstance from "@/apis/axios.config";
+import type {AssignmentQuery} from "@/types/query";
+import type {AssignmentDTO} from "@/types/dto";
+
+const ASSIGNMENT_PREFIX = "/api/assignment"
+
+const assignmentApis = {
+    getAssignmentById(assignmentId: number) {
+        return axiosInstance.get(`${ASSIGNMENT_PREFIX}/byAssignment/${assignmentId}`)
+    },
+    getAssignmentByQuery(query:AssignmentQuery, page: number=0, size: number=10){
+        return axiosInstance.post(`${ASSIGNMENT_PREFIX}/query`, {
+            ...query
+        }, {
+            params: {
+                page,
+                size
+            }
+        })
+    },
+    createAssignment(courseId:number, assignment: AssignmentDTO){
+        return axiosInstance.post(`${ASSIGNMENT_PREFIX}`, assignment, {
+            params: {
+                courseId
+            }
+        });
+    },
+    getAssignmentByCourseId(courseId:number, page: number=0, size: number=10){
+        return axiosInstance.get(`${ASSIGNMENT_PREFIX}/byCourse/${courseId}`, {
+            params: {
+                page,
+                size
+            }
+        })
+    },
+}
+
+export default assignmentApis

src/apis/axios.config.ts

@@ -0,0 +1,53 @@
+import axios from "axios";
+
+// const BASEURL = 'http://47.111.23.171:8081'
+const BASEURL = 'http://localhost:8080'
+
+const axiosInstance = axios.create({
+    baseURL: BASEURL,
+    headers: {
+        'Content-Type': 'application/json',
+    },
+})
+
+//请求拦截器
+axiosInstance.interceptors.request.use(
+    config => {
+        // const token = JSON.parse(sessionStorage.getItem('user-storage') as string).state.token
+        let token = null
+        if(sessionStorage.getItem('user-storage')){
+            token = JSON.parse(sessionStorage.getItem('user-storage') as string).token
+        }
+
+        console.log(token, "axios.configs")
+        // 如果存在token，则每次请求前加入到请求头中
+        if (token) config.headers["Authorization"] = token
+        return config
+
+        // let token = null;
+        //
+        // if(localStorage.getItem('Authorization')){
+        //     token = localStorage.getItem('Authorization');
+        // }
+        // // 如果存在token，则每次请求前加入到请求头中
+        // if (token) config.headers["Authorization"] = token
+        // return config
+    },
+    error => {
+        return Promise.reject(error)
+    }
+)
+
+axiosInstance.interceptors.response.use(
+    response => {
+        // if (response.data.code === 200) {
+        //     return response.data.data as any
+        // }
+        return response
+    },
+    error => {
+        return Promise.reject(error)
+    }
+)
+
+export default axiosInstance

src/assets/base.css

@@ -0,0 +1,86 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

src/image/back.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6395" height="1079" viewBox="0 0 6395 1079"><defs><clipPath id="clip-path"><rect width="6395" height="1079" transform="translate(-5391)" fill="#fff"/></clipPath><linearGradient id="linear-gradient" x1="0.747" y1="0.222" x2="0.973" y2="0.807" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#2c41b4"/><stop offset="1" stop-color="#1b4fab"/></linearGradient></defs><g id="Mask_Group_1" data-name="Mask Group 1" transform="translate(5391)" clip-path="url(#clip-path)"><g id="Group_118" data-name="Group 118" transform="translate(-419.333 -1.126)"><path id="Path_142" data-name="Path 142" d="M6271.734-6.176s-222.478,187.809-55.349,583.254c44.957,106.375,81.514,205.964,84.521,277,8.164,192.764-156.046,268.564-156.046,268.564l-653.53-26.8L5475.065-21.625Z" transform="translate(-4876.383 0)" fill="#f1f5f8"/><path id="Union_6" data-name="Union 6" d="M-2631.1,1081.8v-1.6H-8230.9V.022H-2631.1V0H-1871.4s-187.845,197.448-91.626,488.844c49.167,148.9,96.309,256.289,104.683,362.118,7.979,100.852-57.98,201.711-168.644,254.286-65.858,31.29-144.552,42.382-223.028,42.383C-2441.2,1147.632-2631.1,1081.8-2631.1,1081.8Z" transform="translate(3259.524 0.803)" fill="url(#linear-gradient)"/></g></g></svg>

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

@@ -0,0 +1,117 @@
+<template>
+  <div class="course-content">
+    <div class="course-content-container">
+      <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">
+          </div>
+          <div class="course-item-content">
+            <div style="font-weight: bold">{{item.courseName}}</div>
+            <div>{{item.description}}</div>
+            <div>{{item.teacherIds.join("\n")}}</div>
+          </div>
+        </el-card>
+
+        <template v-if="getCoursesSlice(0, 5).length < 5">
+          <el-card v-for="item in 5 - getCoursesSlice(0, 5).length" :key="item" class="course-item-hidden">
+          </el-card>
+        </template>
+
+      </div>
+      <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">
+          </div>
+          <div class="course-item-content">
+            <div style="font-weight: bold">{{item.courseName}}</div>
+            <div>{{item.description}}</div>
+            <div>{{item.teacherIds.join("\n")}}</div>
+          </div>
+        </el-card>
+
+        <template v-if="getCoursesSlice(5, 10).length < 5">
+          <el-card v-for="item in 5 - getCoursesSlice(5, 10).length" :key="item" class="course-item-hidden">
+          </el-card>
+        </template>
+      </div>
+
+      <el-pagination
+          small
+          style="font-size: 16px;margin-top: 10px;margin-left: 450px"
+          @current-change="handleCurrentChange"
+          :current-page="queryInfo.pageNow"
+          :page-size="queryInfo.pageSize"
+          layout="total, prev, pager, next, jumper"
+          :total="pageInfo.total">
+      </el-pagination>
+
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import './AllCourse.scss'
+import {onMounted, reactive} from "vue";
+import useApis from "@/apis";
+import type {CourseQuery} from "@/types/query";
+import router from "@/router";
+
+const apis = useApis()
+
+const queryInfo = reactive({
+  pageNow: 1,
+  pageSize: 10,
+})
+
+let pageInfo = reactive({
+  total: 0,
+  courseData: []
+})
+
+// 处理课程卡片的点击事件
+const handleClick = (value:number) => {
+  router.push(`/home/courseDetail/${value}`)
+}
+
+const handleCurrentChange =(index:number)=>{
+  queryInfo.pageNow=index;
+  fetchAllCourse();
+}
+
+const fetchAllCourse = () => {
+  const query = reactive<CourseQuery>({
+    courseId:null,
+    teacherId:null,
+    studentId:null,
+    courseName:null,
+    semester:null,
+  })
+  apis.getAllCourse(query, queryInfo.pageNow, queryInfo.pageSize)
+      .then((res: any) => {
+        console.log(res)
+        pageInfo.courseData = res.data.data.records
+        pageInfo.total = res.data.data.total
+      })
+      .catch((err: any) => {
+        console.error("错误信息",err);
+      })
+      .finally(() => {});
+}
+
+//只获取前五个课程
+const getCoursesSlice = (start:number, end:number) => {
+  return pageInfo.courseData.slice(start, end)
+}
+
+onMounted(()=>{
+  fetchAllCourse()
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: "AllCourse"
+}
+</script>

src/views/CourseSquare/component/Banner/Banner.tsx

@@ -0,0 +1,63 @@
+import {Swiper, SwiperSlide, SwiperClass} from "swiper/react";
+import ArrowLeft from "../../../../image/ArrowLeft.png";
+import ArrowRight from "../../../../image/ArrowRight.png"
+import "./index.scss"
+import {useRef} from "react";
+
+export function Banner() {
+    const current = useRef<SwiperClass>()
+
+
+    function onClickPre() {
+        current.current.slidePrev()
+    }
+
+    function onClickNext() {
+        current.current.slideNext()
+    }
+
+    return <div className="swiper-banner">
+        <Swiper
+            slidesPerView={1}
+            onSlideChange={() => console.log('slide change')}
+            onSwiper={(swiper: SwiperClass) => current.current = swiper}
+            loop
+            autoplay
+        >
+            <div className="arrow left">
+                <img src={ArrowLeft} className="arrow-image" alt="" onClick={onClickPre}/>
+            </div>
+            <div className="arrow top">
+                <img src={ArrowRight} className="arrow-image" alt="" onClick={onClickNext}/>
+            </div>
+            <SwiperSlide className="slide-items">
+                <img
+                    src="https://cdn.pixabay.com/photo/2024/03/04/16/44/barberry-8612696_960_720.jpg"
+                    alt=""
+                    className="slider-image"
+                />
+            </SwiperSlide>
+            <SwiperSlide className="slide-items">
+                <img
+                    src="https://cdn.pixabay.com/photo/2023/11/24/17/22/pigeon-8410348_1280.jpg"
+                    alt=""
+                    className="slider-image"
+                />
+            </SwiperSlide>
+            <SwiperSlide className="slide-items">
+                <img
+                    src="https://cdn.pixabay.com/photo/2024/01/29/13/00/rabbit-8539830_960_720.jpg"
+                    alt=""
+                    className="slider-image"
+                />
+            </SwiperSlide>
+            <SwiperSlide className="slide-items">
+                <img
+                    src="https://cdn.pixabay.com/photo/2024/02/05/10/48/red-kite-8554201_960_720.jpg"
+                    alt=""
+                    className="slider-image"
+                />
+            </SwiperSlide>
+        </Swiper>
+    </div>
+}

src/views/CourseSquare/component/Banner/Banner.vue

@@ -0,0 +1,53 @@
+<!--
+  Description: 课程广场走马灯组件
+  Author: BaiQi
+  Created Date: 2024-6-30
+-->
+<template>
+  <div class="carousel-banner">
+    <el-carousel :interval="4000" type="card" >
+      <el-carousel-item class="carousel-items" v-for="item in pictureItems" :key="item.id">
+        <img class="carousel-image" :src="item.src" :alt="item.alt"/>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {reactive} from "vue";
+  import './index.scss'
+
+  const pictureItems = reactive([
+    {
+      id: 1,
+      src:"https://oimagec5.ydstatic.com/image?id=-6825419190637093228&product=xue",
+      alt:""
+    },
+    {
+      id: 2,
+      src:"https://oimagea7.ydstatic.com/image?id=6277590164074153542&product=xue",
+      alt:""
+    },
+    {
+      id: 3,
+      src:"https://oimageb4.ydstatic.com/image?id=2909276266566708157&product=xue",
+      alt:""
+    },
+    {
+      id: 4,
+      src:"https://oimagea4.ydstatic.com/image?id=-5223116784561408160&product=xue",
+      alt:""
+    },
+    {
+      id: 7,
+      src:"https://ts1.cn.mm.bing.net/th/id/R-C.b560e47c90e405b1a86175664b585e48?rik=mV4YsdwHAwpxnQ&riu=http%3a%2f%2fp6.itc.cn%2fq_70%2fimages03%2f20201025%2f498e8932fb724cff93141bb889fd3156.jpeg&ehk=CiqXxYrG292FftMNzIbGKWsVRy2K8Sg35uShW2HNXSs%3d&risl=&pid=ImgRaw&r=0",
+      alt:""
+    },
+  ])
+</script>
+
+<script lang="ts">
+export default {
+  name: "Banner"
+}
+</script>