设置路由跳转对接提交

src/api/index.ts

@@ -73,4 +73,12 @@ export const getExperiment = ()=>{
     url:'/experimental/xnExperimental/selectExperimental',
     method:'get',
   })
+}
+// 确认实验
+export const submitExperiment = (data:any) => {
+  return request({
+    url:'/xnRecords/verifyExperimentaInfo',
+    method:"POST",
+    data
+  })
 }

src/layout/index.vue

@@ -2,8 +2,9 @@
   <div class="container-bgc">
     <div class="top">
       <div class="loginBtn">
-        <p @click="loginFn">{{user.token?'已登录':'登录/注册'}}</p>
+        <p @click="loginFn">{{ user.token ? "已登录" : "登录/注册" }}</p>
       </div>
+      
       <div class="title">{{ setting.title }}</div>
     </div>
     <router-view v-slot="{ Component }">
@@ -17,19 +18,25 @@
 </template>
 
 <script lang="ts" setup>
-import { useRouter } from 'vue-router'
+import { useRouter } from "vue-router";
 // import { onMounted, reactive, ref, toRefs, watch } from "vue";
 import settingStore from "@/store/modules/setting";
-import userStore from '@/store/modules/user';
+import userStore from "@/store/modules/user";
 const user = userStore();
 const setting = settingStore();
-const router = useRouter()
+const router = useRouter();
 
 console.log(setting.title);
-user.token ? router.push('/spacePage') : ''
-const loginFn=()=>{
-  router.push('/login')
+const loginFn = () => {
+  // user.token ? router.push("/spacePage") : "";
+
+if(user.token){
+
+  router.push("/spacePage")
+  return
 }
+  router.push("/login");
+};
 </script>
 
 <style lang="scss" scoped>
@@ -58,30 +65,29 @@ const loginFn=()=>{
     }
 
     .loginBtn {
-     position: absolute;
-        /* 清除浮动影响 */
+      position: absolute;
+      /* 清除浮动影响 */
       float: left;
-       /* 向左浮动 */
+      /* 向左浮动 */
       top: 10px;
-         left: 230px;
-      border: 1px solid #33FEFE;
+      left: 230px;
+      border: 1px solid #33fefe;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
       width: 142px;
       height: 40px;
       line-height: 37px;
-      background: linear-gradient(to bottom, #08B9C1, #0758B8);
+      background: linear-gradient(to bottom, #08b9c1, #0758b8);
       transform: skew(-30deg);
       cursor: pointer;
-        /* 在X轴方向倾斜 -35 度 */
-        border-radius: 5%;
-        p{
-          transform: skew(30deg);
-            /* 反向倾斜，抵消父元素的变形 */
-            font-size: 18px;
-              color: #fff;
-        }
+      /* 在X轴方向倾斜 -35 度 */
+      border-radius: 5%;
+      p {
+        transform: skew(30deg);
+        /* 反向倾斜，抵消父元素的变形 */
+        font-size: 18px;
+        color: #fff;
+      }
     }
   }
-
 }
 </style>

src/layout/loginPage.vue

@@ -429,7 +429,7 @@ const login = async () => {
   };
   const res = await user.logIn(data);
   if (res) {
-    router.push('/')
+    router.push('/studyPage')
   }
 
 };

src/layout/studyPage.vue

@@ -1,157 +1,223 @@
 <template>
-    <div class="login_container">
-        <div class="top">
-            <div class="loginBtn">
-                <p @click="loginFn">{{ user.token ? '已登录' : '登录/注册' }}</p>
-            </div>
-            <div class="title">{{ setting.title }}</div>
-        </div>
-        <div class="main-content">
-            <div class="box" :style="{ backgroundImage: isBox1Clicked ? `url(${btn1})` : `url(${btn2})` }"
-                @click="handleBoxClick(1)">
-                知识点学习
-            </div>
-            <div class="box" :style="{ backgroundImage: isBox2Clicked ? `url(${btn1})` : `url(${btn2})` }"
-                @click="handleBoxClick(2)">学习</div>
-            <div class="box" :style="{ backgroundImage: isBox3Clicked ? `url(${btn1})` : `url(${btn2})` }"
-               style="margin-bottom: 80px;" @click="handleBoxClick(3)">仿真实验</div>
-        </div>
+  <div class="login_container">
+    <div class="top">
+      <div class="loginBtn">
+        <p @click="loginFn">{{ user.token ? "已登录" : "登录/注册" }}</p>
+      </div>
+      <div class="submit">
+        <p @click="submit">提交</p>
+      </div>
+      <div class="title">{{ setting.title }}</div>
     </div>
+    <div class="main-content">
+      <div
+        class="box"
+        :style="{
+          backgroundImage: isBox1Clicked ? `url(${btn1})` : `url(${btn2})`,
+        }"
+        @click="handleBoxClick(1)"
+      >
+        知识点学习
+      </div>
+      <div
+        class="box"
+        :style="{
+          backgroundImage: isBox2Clicked ? `url(${btn1})` : `url(${btn2})`,
+        }"
+        @click="handleBoxClick(2)"
+      >
+        学习
+      </div>
+      <div
+        class="box"
+        :style="{
+          backgroundImage: isBox3Clicked ? `url(${btn1})` : `url(${btn2})`,
+        }"
+        style="margin-bottom: 80px"
+        @click="handleBoxClick(3)"
+      >
+        仿真实验
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts" name="studyPage">
-import { ref } from "vue"
-import { useRouter } from 'vue-router'
+import { ref } from "vue";
+import { useRouter } from "vue-router";
 import settingStore from "@/store/modules/setting";
 const setting = settingStore();
-import userStore from '@/store/modules/user';
-import btn1 from '@/assets/images/btn1.png'
-import btn2 from '@/assets/images/btn2.png'
-console.log(btn1, 'btn1');
-
-const router = useRouter()
+import userStore from "@/store/modules/user";
+import btn1 from "@/assets/images/btn1.png";
+import btn2 from "@/assets/images/btn2.png";
+import { submitExperiment } from "@/api";
+import { ElMessage } from "element-plus";
+const router = useRouter();
 const user = userStore();
 const loginFn = () => {
-    router.push('/login')
-}
+  // user.token ? router.push("/spacePage") : "";
+
+  if (user.token) {
+    router.push("/spacePage");
+    return;
+  }
+  router.push("/login");
+};
 const isBox1Clicked = ref(false);
 const isBox2Clicked = ref(false);
 const isBox3Clicked = ref(false);
 const handleBoxClick = (boxNumber) => {
-    isBox1Clicked.value = false;
-    isBox2Clicked.value = false;
-    isBox3Clicked.value = false;
-    switch (boxNumber) {
-        case 1:
-            isBox1Clicked.value = true;
-            // router.push('/page1'); // 跳转到对应的页面，这里以 /page1 为例
-            router.push('/knowledgePage')
-            break;
-        case 2:
-            isBox2Clicked.value = true;
-            // router.push('/page2');
-            break;
-        case 3:
-            isBox3Clicked.value = true;
-            // router.push('/page3');
-            break;
-        default:
-            break;
+  isBox1Clicked.value = false;
+  isBox2Clicked.value = false;
+  isBox3Clicked.value = false;
+  switch (boxNumber) {
+    case 1:
+      isBox1Clicked.value = true;
+      // router.push('/page1'); // 跳转到对应的页面，这里以 /page1 为例
+      router.push("/knowledgePage");
+      break;
+    case 2:
+      isBox2Clicked.value = true;
+      router.push("/subjectTest");
+      break;
+    case 3:
+      isBox3Clicked.value = true;
+      router.push("/");
+      break;
+    default:
+      break;
+  }
+};
+
+const submit = async () => {
+  await submitExperiment({ getStudyRecords_id: user.userInfo.id }).then(
+    (res: any) => {
+      console.log(res);
+      if (res.code == 500) {
+        ElMessage.error(res.message);
+      } else {
+        ElMessage.success(res.message);
+      }
     }
+  );
 };
 </script>
 
 <style lang="less" scoped>
 .login_container {
-    position: relative;
+  position: relative;
+  width: 100%;
+  // height: 1080px;
+  min-height: 100vh;
+  background-color: #091d22;
+  background: url("../assets//images/bg1.png") no-repeat;
+  background-size: cover;
+
+  .top {
     width: 100%;
-    // height: 1080px;
-    min-height: 100vh;
-    background-color: #091d22;
-    background: url("../assets//images/bg1.png") no-repeat;
+    height: 75px;
+    text-align: center;
+    font-size: 42px;
+    line-height: 75px;
+    font-style: italic;
+    background: url("../assets/images/topbgc.png") no-repeat;
+    // background-position: center bottom -10px;
     background-size: cover;
 
-    .top {
-        width: 100%;
-        height: 75px;
-        text-align: center;
-        font-size: 42px;
-        line-height: 75px;
-        font-style: italic;
-        background: url("../assets/images/topbgc.png") no-repeat;
-        // background-position: center bottom -10px;
-        background-size: cover;
+    .title {
+      color: #fff;
+    }
 
-        .title {
-            color: #fff;
-        }
+    .loginBtn {
+      position: absolute;
+      /* 清除浮动影响 */
+      float: left;
+      /* 向左浮动 */
+      top: 10px;
+      left: 230px;
+      border: 1px solid #33fefe;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+      width: 142px;
+      height: 40px;
+      line-height: 37px;
+      background: linear-gradient(to bottom, #08b9c1, #0758b8);
+      transform: skew(-30deg);
+      cursor: pointer;
+      /* 在X轴方向倾斜 -35 度 */
+      border-radius: 5%;
 
-        .loginBtn {
-            position: absolute;
-            /* 清除浮动影响 */
-            float: left;
-            /* 向左浮动 */
-            top: 10px;
-            left: 230px;
-            border: 1px solid #33FEFE;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-            width: 142px;
-            height: 40px;
-            line-height: 37px;
-            background: linear-gradient(to bottom, #08B9C1, #0758B8);
-            transform: skew(-30deg);
-            cursor: pointer;
-            /* 在X轴方向倾斜 -35 度 */
-            border-radius: 5%;
+      p {
+        transform: skew(30deg);
+        /* 反向倾斜，抵消父元素的变形 */
+        font-size: 18px;
+        color: #fff;
+      }
+    }
+    .submit {
+      position: absolute;
+      /* 清除浮动影响 */
+      // float: right;
+      /* 向左浮动 */
+      top: 10px;
+      right: 230px;
+      border: 1px solid #33fefe;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+      width: 142px;
+      height: 40px;
+      line-height: 37px;
+      background: linear-gradient(to bottom, #08b9c1, #0758b8);
+      transform: skew(-30deg);
+      cursor: pointer;
+      /* 在X轴方向倾斜 -35 度 */
+      border-radius: 5%;
 
-            p {
-                transform: skew(30deg);
-                /* 反向倾斜，抵消父元素的变形 */
-                font-size: 18px;
-                color: #fff;
-            }
-        }
+      p {
+        transform: skew(30deg);
+        /* 反向倾斜，抵消父元素的变形 */
+        font-size: 18px;
+        color: #fff;
+      }
     }
+  }
 }
 
 .main-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0;
+  // background: url("../assets/images/login.png") no-repeat;
+  background-position: center;
+  background-size: 50% auto;
+  flex-direction: column;
+
+  .box {
+    width: 520px;
+    height: 162px;
+    // background-color: #007BFF;
+    // background: url("../assets/images/btn2.png") no-repeat;
+    background-repeat: no-repeat;
+    margin: 30px 0 0 25px;
+    cursor: pointer;
+    background-repeat: no-repeat;
+    background-size: contain;
+    /* 让图片完整显示在盒子内 */
+    background-position: center;
+    /* 图片在盒子中水平和垂直居中 */
     display: flex;
+    /* 使用 flex 布局 */
     justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    margin: 0;
-    // background: url("../assets/images/login.png") no-repeat;
-    background-position: center;
-    background-size: 50% auto;
-    flex-direction: column;
-
-    .box {
-
-        width: 520px;
-        height: 162px;
-        // background-color: #007BFF;
-        // background: url("../assets/images/btn2.png") no-repeat;
-        background-repeat: no-repeat;
-        margin: 30px 0 0 25px;
-        cursor: pointer;
-        background-repeat: no-repeat;
-            background-size: contain;
-            /* 让图片完整显示在盒子内 */
-            background-position: center;
-            /* 图片在盒子中水平和垂直居中 */
-        display: flex;
-        /* 使用 flex 布局 */
-        justify-content: center;
-        /* 水平居中 */
-        // align-items: center;
-        /* 垂直居中 */
-        color: white;
-        /* 设置文字颜色 */
-        text-align: center;
-        /* 文本居中对齐 */
-        font-size: 49px;
-        font-weight: 700;
-        line-height: 190px;
-    }
+    /* 水平居中 */
+    // align-items: center;
+    /* 垂直居中 */
+    color: white;
+    /* 设置文字颜色 */
+    text-align: center;
+    /* 文本居中对齐 */
+    font-size: 49px;
+    font-weight: 700;
+    line-height: 190px;
+  }
 }
-</style>
+</style>

src/permissions.ts

@@ -6,7 +6,7 @@ const store = userStore(pinia);
 router.beforeEach((to: any, from: any, next: any) => {
   if (to.path === "/login") {
     if (store.token) {
-      next("/");
+      next("/studyPage");
     } else {
       next();
     }

src/utils/request.ts

@@ -2,8 +2,9 @@
 import axios from "axios";
 import pinia from "@/store";
 import { ElMessage } from "element-plus";
-
+import {removeToken} from '@/utils/auth'
 import userStore from "@/store/modules/user";
+import router from '@/router'
 // 创建axios实例
 const server = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_API,
@@ -26,8 +27,14 @@ server.interceptors.response.use((response) => {
 //   useuserStore.clearStatus();
     // return Promise.reject(response);
   }
+  if(response.data.code=== 401){
+    ElMessage.error(response.data.message);
+    return Promise.reject(response);
+  }
   if (response.data.code === 412) {
     ElMessage.error(response.data.message);
+    removeToken()
+    router.push('/login')
     return Promise.reject(response);
   }
   return response.data;

src/views/subjectTest/index.vue

@@ -157,7 +157,7 @@ import { useRouter   } from 'vue-router';
     // 退出答题
     const router = useRouter()
     const resetAnswers = () => {
-        router.push('/spacePage')
+        router.push('/studyPage')
     };
     // 计时器相关变量
     const timer = ref<number | null>(null); // 用于存储 setInterval 的返回值