页面布局随比例变化，

.env.development

@@ -1,4 +1,4 @@
 # 变量必须以 VITE_ 为前缀才能暴露给外部读取
 NODE_ENV = 'development'
 VITE_APP_TITLE = '无糖运营平台'
-VITE_APP_BASE_API = '/api'
+VITE_APP_BASE_API = 'http://127.0.0.1:8080'

src/api/user/crouse.js

@@ -1,10 +1,10 @@
 import request from '@/utils/request'
 export const getCourseListApi = () => {
-  request.get('/coursesTeacher/page')
+ return request.get('/coursesteacher/page?teacherId=2140110334')
 }
-export const editCourse = () => {
+export const editCourseApi = () => {
-  request.put('/coursesTeacher')
+return  request.put('/coursesTeacher')
 }
-export const addCourse = (data) => {
+export const addCourseApi = (data) => {
-  request.post('/courseTeacher/addCourse', data)
+ return request.post('/courseTeacher/addCourse', data)
 }

src/layout/index.vue

@@ -17,7 +17,7 @@
           text-color="#fff"
           :collapse="LayoutSettingStoe.fold"
         >
-          <Menu :menuList="usePermissionStore.asyncRouter" />
+          <Menu :menuList="constantRoute" />
         </el-menu>
       </el-scrollbar>
     </div>
@@ -49,6 +49,7 @@ import { useRoute } from 'vue-router'
 import Tabbar from './tabbar/index.vue'
 import LoGo from './logo/index.vue'
 import Menu from './menu/index.vue'
+import {constantRoute} from '@/router/routers'
 // 获取路由数据
 // import userUserStore from '@/store/modules/user'
 // import { onMounted, reactive, ref, toRefs, watch } from 'vue'

src/permission.ts

@@ -9,62 +9,64 @@ import 'nprogress/nprogress.css'
 const userStore = useUserStore(pinia)
 const usePermissionStore = permissionStore(pinia)
 // const whitelist = ['/login', '/404']
-router.beforeEach(async (to, form, next) => {
+// router.beforeEach(async (to, form, next) => {
-  // 进度条开始\
+//   // 进度条开始\
-  nprogress.configure({ showSpinner: false })
+//   nprogress.configure({ showSpinner: false })
-  nprogress.start()
+//   nprogress.start()
-  //   判断是否登录
+//   //   判断是否登录
-  if (userStore.token) {
+//   if (userStore.token) {
-    // 登录成功访问登录页则跳转到首页
+//     // 登录成功访问登录页则跳转到首页
-    if (to.path == '/login') {
+//     if (to.path == '/login') {
-      next({ path: '/' })
+//       next({ path: '/' })
-    } else {
+//     } else {
-      // 登录成功判断是否获取到了用户信息
+//       // 登录成功判断是否获取到了用户信息
-      if (userStore.userName) {
+//       if (userStore.userName) {
-        next()
+//         next()
-      } else {
+//       } else {
-        try {
+//         try {
-          // 没有获取到用户信息 就获取用户信息 然后放行
+//           // 没有获取到用户信息 就获取用户信息 然后放行
-          await userStore.getUserInfo()
+//           await userStore.getUserInfo()
-          // 获取筛选到的路由
+//           // 获取筛选到的路由
-          const asyncRouter = await usePermissionStore.getAsyncRoutes(
+//           const asyncRouter = await usePermissionStore.getAsyncRoutes(
-            userStore.routes,
+//             userStore.routes,
-          )
+//           )
-          // 遍历筛选出来的路由通过addRoute添加到路由表
+//           // 遍历筛选出来的路由通过addRoute添加到路由表
-          asyncRouter.forEach((item: any) => {
+//           asyncRouter.forEach((item: any) => {
-            router.addRoute(item)
+//             router.addRoute(item)
-          })
+//           })
-          // 在最后向路由表添加一个404规则
+//           // 在最后向路由表添加一个404规则
-          // 切记不要写到路由表内 否者刷新页面会跳转到404页面
+//           // 切记不要写到路由表内 否者刷新页面会跳转到404页面
-          router.addRoute({
+//           router.addRoute({
-            path: '/:pathMatch(.*)*',
+//             path: '/:pathMatch(.*)*',
-            component: () => import('@/views/404/index.vue'),
+//             component: () => import('@/views/404/index.vue'),
-            name: 'Any',
+//             name: 'Any',
-            meta: {
+//             meta: {
-              title: '任意',
+//               title: '任意',
-              hidden: true,
+//               hidden: true,
-            },
+//             },
-          })
+//           })
-          next({ ...to, replace: true }) // 这里相当于push到一个页面 不在进入路由拦截
+//           next({ ...to, replace: true }) // 这里相当于push到一个页面 不在进入路由拦截
-        } catch (error) {
+//         } catch (error) {
-          // 如果获取用户信息失败了则执行登出操作让重新登录
+//           // 如果获取用户信息失败了则执行登出操作让重新登录
-          console.log(error)
+//           console.log(error)
-          userStore.logout()
+//           userStore.logout()
-          next({ path: '/login' })
+//           next({ path: '/login' })
-        }
+//         }
-      }
+//       }
-    }
+//     }
-  } else {
+//   } else {
-    // 没有token访问登录页放行
+//     // 没有token访问登录页放行
-    if (to.path == '/login') {
+//     if (to.path == '/login') {
-      next()
+//       next()
-    } else {
+//     } else {
-      // 访问其他页面则阻止
+//       // 访问其他页面则阻止
-      next({ path: '/login', query: { redirect: to.path } })
+//       next({ path: '/login', query: { redirect: to.path } })
-    }
+//     }
-  }
+//   }
+// })
+router.beforeEach((to,form,next) => {
+  next()
 })
-
 router.afterEach((to, form, next) => {
   nprogress.done()
 })

src/router/index.ts

@@ -1,6 +1,6 @@
 // 导入路由插件
 import { createRouter, createWebHashHistory } from 'vue-router'
-
+import {constantRoute} from './routers.ts'
 const routerList = [
   {
     path: '/login',
@@ -14,7 +14,7 @@ const routerList = [
 ]
 const router = createRouter({
   history: createWebHashHistory(),
-  routes: routerList,
+  routes: [...routerList,...constantRoute],
   scrollBehavior() {
     return {
       left: 0,

src/views/course/basicCourseInformation.vue

@@ -1,117 +1,131 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
-// import axios from 'axios'
+import axios from 'axios'
 import courseEdit from './components/courseEdit.vue'
-// import { addCourseApi } from '@/api/course'
+import { getCourseListApi } from '../../api/user/crouse.js'
-// const courseList = ref([])
-// const getCourseList = async () => {
-//   const res = await addCourseApi()
-//   courseList.value = res.data
-// }
-// onMounted(() => {
-//   getCourseList()
-// })
-
 const courseList = ref([
-  {
+  // id: 1,
-    id: 1,
+  //     category: '',
-    category: '1',
+  //     nature: '',
-    nature: '1',
+  //     code: '',
-    code: '1',
+  //     assessmenttype: '',
-    assessmenttype: '1',
+  //     assessmentway: '',
-    assessmentway: '1',
+  //     teachermethod: '',
-    teachermethod: '',
+  //     teacherway: '',
-    teacherway: '',
+  //     description: '',
-    description: '',
+  //     name: '',
-    name: '课程名称',
+  //     credit: '',
-    credit: '课程学分',
+  //     classhours: '',
-    classhours: '课程学时',
-  },
-  {
-    id: 2,
-    category: '1',
-    nature: '1',
-    code: '1',
-    assessmenttype: '1',
-    assessmentway: '1',
-    teachermethod: '',
-    teacherway: '',
-    description: '',
-    name: '课程名称',
-    credit: '课程学分',
-    classhours: '课程学时',
-  },
-  {
-    id: 3,
-    category: '1',
-    nature: '1',
-    code: '1',
-    assessmenttype: '1',
-    assessmentway: '1',
-    teachermethod: '',
-    teacherway: '',
-    description: '',
-    name: '课程名称',
-    credit: '课程学分',
-    classhours: '课程学时',
-  },
-  {
-    id: 4,
-    category: '1',
-    nature: '1',
-    code: '1',
-    assessmenttype: '1',
-    assessmentway: '1',
-    teachermethod: '',
-    teacherway: '',
-    description: '',
-    name: '课程名称',
-    credit: '课程学分',
-    classhours: '课程学时',
-  },
-  {
-    id: 5,
-    category: '1',
-    nature: '1',
-    code: '1',
-    assessmenttype: '1',
-    assessmentway: '1',
-    teachermethod: '',
-    teacherway: '',
-    description: '',
-    name: '课程名称',
-    credit: '课程学分',
-    classhours: '课程学时',
-  },
-  {
-    id: 6,
-    category: '1',
-    nature: '1',
-    code: '1',
-    assessmenttype: '1',
-    assessmentway: '1',
-    teachermethod: '',
-    teacherway: '',
-    description: '',
-    name: '课程名称',
-    credit: '课程学分',
-    classhours: '课程学时',
-  },
-  {
-    id: 7,
-    category: '1',
-    nature: '1',
-    code: '1',
-    assessmenttype: '1',
-    assessmentway: '1',
-    teachermethod: '',
-    teacherway: '',
-    description: '',
-    name: '课程名称',
-    credit: '课程学分',
-    classhours: '课程学时',
-  },
 ])
+const getCourseList = async () => {
+  const res = await getCourseListApi()
+  courseList.value = res.result.list
+}
+
+onMounted(() => {
+  getCourseList()
+})
+
+// const courseList = ref([
+//   {
+//     id: 1,
+//     category: '1',
+//     nature: '1',
+//     code: '1',
+//     assessmenttype: '1',
+//     assessmentway: '1',
+//     teachermethod: '',
+//     teacherway: '',
+//     description: '',
+//     name: '课程名称',
+//     credit: '课程学分',
+//     classhours: '课程学时',
+//   },
+//   {
+//     id: 2,
+//     category: '1',
+//     nature: '1',
+//     code: '1',
+//     assessmenttype: '1',
+//     assessmentway: '1',
+//     teachermethod: '',
+//     teacherway: '',
+//     description: '',
+//     name: '课程名称',
+//     credit: '课程学分',
+//     classhours: '课程学时',
+//   },
+//   {
+//     id: 3,
+//     category: '1',
+//     nature: '1',
+//     code: '1',
+//     assessmenttype: '1',
+//     assessmentway: '1',
+//     teachermethod: '',
+//     teacherway: '',
+//     description: '',
+//     name: '课程名称',
+//     credit: '课程学分',
+//     classhours: '课程学时',
+//   },
+//   {
+//     id: 4,
+//     category: '1',
+//     nature: '1',
+//     code: '1',
+//     assessmenttype: '1',
+//     assessmentway: '1',
+//     teachermethod: '',
+//     teacherway: '',
+//     description: '',
+//     name: '课程名称',
+//     credit: '课程学分',
+//     classhours: '课程学时',
+//   },
+//   {
+//     id: 5,
+//     category: '1',
+//     nature: '1',
+//     code: '1',
+//     assessmenttype: '1',
+//     assessmentway: '1',
+//     teachermethod: '',
+//     teacherway: '',
+//     description: '',
+//     name: '课程名称',
+//     credit: '课程学分',
+//     classhours: '课程学时',
+//   },
+//   {
+//     id: 6,
+//     category: '1',
+//     nature: '1',
+//     code: '1',
+//     assessmenttype: '1',
+//     assessmentway: '1',
+//     teachermethod: '',
+//     teacherway: '',
+//     description: '',
+//     name: '课程名称',
+//     credit: '课程学分',
+//     classhours: '课程学时',
+//   },
+//   {
+//     id: 7,
+//     category: '1',
+//     nature: '1',
+//     code: '1',
+//     assessmenttype: '1',
+//     assessmentway: '1',
+//     teachermethod: '',
+//     teacherway: '',
+//     description: '',
+//     name: '课程名称',
+//     credit: '课程学分',
+//     classhours: '课程学时',
+//   },
+// ])
 
 const drawer = ref()
 const onAddCourse = () => {
@@ -120,9 +134,9 @@ const onAddCourse = () => {
 const onEditCourse = (item) => {
   drawer.value.open(item)
 }
-// const onSuccess = () => {
+const onSuccess = () => {
-//   getCourseList()
+  getCourseList()
-// }
+}
 </script>
 <template>
   <div class="header">
@@ -171,6 +185,7 @@ const onEditCourse = (item) => {
   display: flex;
   flex-direction: row;
 }
+
 .btn {
   // display: flex;
   width: 50%;
@@ -181,11 +196,13 @@ const onEditCourse = (item) => {
   // margin: 20px;
   // padding-left: 50px;
 }
+
 .search {
   width: 50%;
-  // display: flex;
+  display: flex;
   height: 100%;
   padding: 10px 0 0 630px;
+
   // flex-direction: row-reverse;
   // padding: 0 40px 0;
   input {
@@ -196,7 +213,9 @@ const onEditCourse = (item) => {
     font-size: 14px;
   }
 }
+
 .course {
+
   // display: flex;
   // flex: 0 0 25%;
   // justify-content: space-between;
@@ -204,23 +223,29 @@ const onEditCourse = (item) => {
   .course_list {
     display: flex;
     // flex: 0 0 25%;
-    justify-content: space-between;
+    // justify-content: space-between;
     flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    column-gap: 50px;
   }
 
   li {
-    margin: 40px;
+    margin: 40px 0;
     width: 349px;
+    width: 100%;
     height: 297px;
     background: white;
     transition: all 0.5s;
     border-radius: 6px;
+
     // flex: 1; /* 子元素按比例伸缩 */
     &:hover {
       transform: translate3d(0, -3px, 0);
       box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
       cursor: pointer;
     }
+
     .course_name {
       font-family: Inter-Bold;
       color: #333;
@@ -229,11 +254,13 @@ const onEditCourse = (item) => {
       margin-top: 10px;
       font-weight: bold;
     }
+
     img {
       background-color: #cccccc;
-      width: 349px;
+      width: 100%;
       height: 178px;
     }
+
     p {
       margin-left: 30px;
       margin-top: 10px;
@@ -243,10 +270,12 @@ const onEditCourse = (item) => {
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
+
       span {
         color: #0052ff;
       }
     }
+
     h2 {
       font-family: Inter-Bold;
       color: #333;

src/views/course/components/courseEdit.vue

@@ -2,8 +2,8 @@
 import { ElMessage } from 'element-plus'
 import { requiredNumber } from 'element-plus/es/components/table-v2/src/common.mjs'
 import { ref } from 'vue'
-// import { addCourseApi } from '@/api/course'
+import { editCourseApi } from '../../../api/user/crouse'
-// import { editCourseApi } from '@/api/course'
+import { addCourseApi } from '../../../api/user/crouse'
 const formModel = ref({
   id: '',
   name: '',
@@ -96,19 +96,19 @@ const open = async (item) => {
 // 组件对外暴露一个open,基于open传过来的参数判断是添加还是编辑
 defineExpose({ open })
 // 新增数据子传父
-// const emit = defineEmits(['success'])
+const emit = defineEmits(['success'])
 const onSubmit = async () => {
   await formRef.value.validate()
   const isEdit = formModel.value.id
   if (isEdit) {
-    // await editCourseApi(formModel.value)
+    await editCourseApi(formModel.value)
     ElMessage.success('编辑成功')
   } else {
-    // await addCourseApi(formModel.value)
+    await addCourseApi(formModel.value)
     ElMessage.success('添加成功')
   }
   visibleDrawer.value = false
-  // emit('success')
+  emit('success')
 }
 </script>