我的数据添加面包屑，返回首页时要恢复项目

package-lock.json

@@ -6917,6 +6917,11 @@
       "resolved": "https://registry.npm.taobao.org/js-base64/download/js-base64-2.5.2.tgz",
       "integrity": "sha1-MTtidN2nGPcU0AszMLuubjjpAgk="
     },
+    "js-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw=="
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",

package.json

@@ -13,6 +13,7 @@
         "core-js": "^3.19.3",
         "element-ui": "^2.15.6",
         "jquery": "^3.6.0",
+        "js-cookie": "^3.0.1",
         "lib-flexible": "^0.3.2",
         "postcss-px2rem": "^0.3.0",
         "postcss-pxtorem": "^5.1.1",

src/api/http.js

@@ -3,7 +3,7 @@ import {
     Message
 } from 'element-ui'
 import router from '../router/index'
-import util from '@/util'
+import Cookie from 'js-cookie'
 import config from '@/config'
 
 const service = axios.create({
@@ -15,7 +15,7 @@ const service = axios.create({
 service.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
 // 请求拦截器
 service.interceptors.request.use(config => {
-    const token = util.getCookie('token')
+    const token = Cookie.get('admin-token')
     if (token) {
       config.headers.token = token
     }
@@ -49,7 +49,10 @@ service.interceptors.response.use(
             switch (error.response.status) {
                 // 401: 未登录
                 case 401:
+                    Message.error('登录过期，请重新登录')
+                    setTimeout(() => {
                         history.back()
+                    }, 1500)
                     break;
                 default:
                     // Message.error(error.response.data.message)

src/components/TestPanel.vue

@@ -127,21 +127,22 @@
 <script>
 import newmain from "../util/newMain";
 import util from '@/util'
+import Cookie from 'js-cookie'
 export default {
   data() {
     return {
-      systemId: util.getCookie('systemId') || 1,
-      classId: util.getCookie('classId'),
-      className: util.getCookie('className') ? decodeURI(util.getCookie('className')) : '',
-      courseId: util.getCookie('courseId'),
-      projectId: util.getCookie('projectId') ? Number(util.getCookie('projectId')) : '',
-      assessmentId: util.getCookie('assessmentId'),
+      systemId: Cookie.get('admin-systemId') || 1,
+      classId: Cookie.get('admin-classId'),
+      className: Cookie.get('admin-className') ? decodeURI(Cookie.get('admin-className')) : '',
+      courseId: Cookie.get('admin-courseId'),
+      projectId: Cookie.get('admin-projectId') ? Number(Cookie.get('admin-projectId')) : '',
+      assessmentId: Cookie.get('admin-assessmentId'),
       curSystemId: 1,
       projectPermissions: 0, // 项目权限(0、练习 1、考核 2、竞赛)
       isSubmit: false, // 是否提交的标识
       entryTime: new Date(),
-      startTime: util.getCookie('startTime'),
-      endTime: util.getCookie('stopTime'),
+      startTime: Cookie.get('admin-startTime'),
+      endTime: Cookie.get('admin-stopTime'),
       pannelVisible: true, // 实验面板显示标识
       grade: '00', // 得分
       text: '', // 倒计时前面的文字，练习：所用；考核：剩余。练习是计时，考核是倒计时
@@ -310,6 +311,12 @@ export default {
         // 深拷贝判分列表，下面接口获取到有缓存代码就直接存进去，如果用户选择了恢复代码，再用这个列表替换原来的判分列表
         points = JSON.parse(JSON.stringify(this.points))
       }
+      // 如果是没有代码的缓存，则只需要恢复项目，否则，就调接口查询缓存代码
+      if (cache.empty) {
+        this.projectId = projectId
+        this.closeLoad()
+        localStorage.removeItem('codeCache')
+      } else {
         let newJudgmentId = '' // 要恢复到第一个有代码的判分规则，因为有代码的规则可能不是第一个，所以要判断如果这个为空，才把索引赋给该变量
         const promiseList = [] // promise数组
         let hasCache = 0 // 是否有缓存
@@ -369,7 +376,7 @@ export default {
             localStorage.removeItem('codeCache')
             // 删除该项目下所有判分规则的缓存代码
             points.map(e => {
-            e.code && this.$post(`${this.api.delCache}`, {
+              e.code && this.$post(this.api.delCache, {
                 assessmentId,
                 bcId: e.judgmentId,
                 projectId,
@@ -378,6 +385,7 @@ export default {
             })
           })
         })
+      }
     },
     // 定时查询考核状态（只有考核才需要定时查，查到考核如果结束后，直接提交考核）
     getStatus() {

src/components/breadcrumb/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <!-- 面包屑 -->
+  <div class="breadcrumb">
+    <el-breadcrumb separator=">">
+      <template v-for="(item, index) in pages">
+        <el-breadcrumb-item
+          v-if="index != pages.length - 1"
+          :key="index"
+          >
+          <span @click="toPath">{{item}}</span>
+        </el-breadcrumb-item>
+        <el-breadcrumb-item
+          v-else
+          :key="index">
+          {{item}}
+        </el-breadcrumb-item>
+      </template>
+    </el-breadcrumb>
+  </div>
+</template>
+
+<script>
+export default {
+    props: {
+      data: {
+        type: String,
+        required: true
+      },
+      route: {
+        type: String,
+        default: '/'
+      },
+      query: {
+        type: Object
+      }
+    },
+    data() {
+      return {
+        pages: this.data.split('/')
+      };
+    },
+    methods: {
+      update(data){
+        this.pages = data.split('/')
+      },
+      toPath() {
+        console.log(33)
+        this.$router.back()
+      }
+    }
+};
+</script>
+<style lang="scss" scoped>
+.breadcrumb {
+  margin: 4px 0 16px;
+  /deep/.el-breadcrumb__item {
+    &:first-child {
+      span {
+        font-weight: 400;
+        color: #007eff;
+        cursor: pointer;
+      }
+    }
+    &:last-child {
+      .is-link {
+        color: #0B1D30;
+      }
+    }
+  }
+}
+</style>

src/components/codemirror.vue

@@ -82,6 +82,7 @@
 </template>
 
 <script>
+import Cookie from 'js-cookie'
 import newmain from "../util/newMain";
 import { codemirror } from "vue-codemirror";
 import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式
@@ -132,9 +133,9 @@ export default {
   props: ['judgmentId', 'code', 'codeId', 'projectId', 'systemId', 'retResult', 'modelIsShow'],
   data() {
     return {
-      token: util.getCookie('admin-token'),
-      assessmentId: util.getCookie('assessmentId'), // 考核id
-      courseId: util.getCookie('courseId'), // 课程id
+      token: Cookie.get('admin-token'),
+      assessmentId: Cookie.get('admin-assessmentId'), // 考核id
+      courseId: Cookie.get('admin-courseId'), // 课程id
       showTips: false, // 显示隐藏提示按钮
       answer: '', // 正确答案
       codeVal: this.code,

src/config/index.js

@@ -5,7 +5,7 @@ const isBeta = process.env.NODE_ENV === 'development' || location.host.includes(
 
 let host = location.origin + ':9000/'
 // 39.108.250.202 | 192.168.31.151
-if (process.env.NODE_ENV === 'development') host = 'http://192.168.31.151:9000/'
+if (process.env.NODE_ENV === 'development') host = 'http://39.108.250.202:9000/'
 const systemId = util.getCookie('systemId')
 /**
  * python8个系统的id和名称

src/views/Data.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="wrap" v-loading="loading">
       <div class="inner">
-      <el-page-header @back="$router.back()" content="我的数据"></el-page-header>
+        <breadcrumb data="首页/我的数据"></breadcrumb>
         <div class="tool">
           <el-input style="width: 250px" placeholder="请输入文件名称" v-model="keyword" suffix-icon="el-icon-search" clearable size="small"></el-input>
           <div class="action">
@@ -44,12 +44,14 @@
     </div>
 </template>
 <script>
+import Cookie from 'js-cookie'
 import util from '@/util'
 import clipboard from '@/util/clipboard'
+import breadcrumb from '@/components/breadcrumb'
 export default {
     data() {
         return {
-          token: util.getCookie('token'),
+          token: Cookie.get('admin-token'),
           loading: false,
           list: [],
           multipleSelection: [],
@@ -59,6 +61,9 @@ export default {
           total: 0
         };
     },
+    components: {
+      breadcrumb
+    },
     watch: {
         keyword: function(val) {
           clearTimeout(this.searchTimer)
@@ -178,6 +183,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .wrap {
+  min-height: 100vh;
   padding: 20px;
   background-color: #f3f6fa;
   .inner {

src/views/Home.vue

@@ -12,7 +12,7 @@
         <p>编程语言</p>
         <el-input placeholder="请输入内容" v-model="language" :disabled="true"></el-input>
       </div>
-      <el-button type="primary" size="small" @click="toData">我的数据</el-button>
+      <el-button type="primary" size="small" icon="el-icon-document" @click="toData">我的数据</el-button>
     </div>
 
     <div class="tab">
@@ -54,16 +54,16 @@
 <script>
 import testPanel from "../components/TestPanel";
 import codemirror from "../components/codemirror";
-import util from '@/util'
+import Cookie from 'js-cookie'
 import { Loading } from 'element-ui'
 export default {
   data() {
     return {
       loaded: false, // 页面是否加载完的标识，页面默认隐藏，一进来先显示加载条，接口加载完后再显示页面，不然一开始会一闪而过没有样式的页面
       loadIns: null, // loading实例
-      courseId: util.getCookie('courseId'), // 课程id
-      curriculumName: util.getCookie('curriculumName') ? unescape(util.getCookie('curriculumName')) : 'python', // 课程名称
-      assessmentId: util.getCookie('assessmentId'), // 考核id
+      courseId: Cookie.get('admin-courseId'), // 课程id
+      curriculumName: Cookie.get('admin-curriculumName') ? unescape(Cookie.get('admin-curriculumName')) : 'python', // 课程名称
+      assessmentId: Cookie.get('admin-assessmentId'), // 考核id
       projectId: '',
       systemId: '',
       modelIsShow: false, // 导入模型按钮是否显示
@@ -88,16 +88,22 @@ export default {
       this.leavePage()
     }
   },
+  beforeRouteLeave(to, from, next) {
+    next(this.leavePage())
+  },
   methods: {
     // 页面离开的时候缓存未提交的代码（只有未提交状态下才会调用该接口）
-    leavePage(){
+    leavePage() {
       const list = this.workbench
-      if(!this.$refs.mainindex.isSubmit && list.length && list.some(e => e.code)){
+      console.log("🚀 ~ file: Home.vue ~ line 95 ~ leavePage ~ this.workbench", this.workbench)
+      // 未提交，且有判分点，才需要缓存
+      if (!this.$refs.mainindex.isSubmit && list.length) {
         const cache = {
           projectId: Number(this.projectId),
           judgmentIdList: this.workbench.map(e => e.judgmentId)
         }
-        localStorage.setItem('codeCache', JSON.stringify(cache)) // 在本地缓存里保存项目id和判分点id，下次进来通过这两个id去查找缓存代码。之所以不在前端缓存代码是预防更换了浏览器或电脑后依然可以找回缓存代码，只不过更换了客户端后本地缓存就消失了，这种情况就做一个向下处理，就切换项目的时候去恢复代码
+        // 如果有输入代码，则要入库，否则，只保存到本地
+        if (list.some(e => e.code)) {
           list.map(e => {
             if (e.code) {
               let data = {
@@ -110,6 +116,10 @@ export default {
               this.$post(this.api.saveCache,data).then(res => {}).catch(e => {})
             }
           })
+        } else {
+          cache.empty = true // 没有输入代码的，加个标识，回到页面的时候不需要调接口了，只需要恢复项目和判分点即可
+        }
+        localStorage.setItem('codeCache', JSON.stringify(cache)) // 在本地缓存里保存项目id和判分点id，下次进来通过这两个id去查找缓存代码。之所以不在前端缓存代码是预防更换了浏览器或电脑后依然可以找回缓存代码，只不过更换了客户端后本地缓存就消失了，这种情况就做一个向下处理，就切换项目的时候去恢复代码
       }
     },
     // 获取导入模型按钮展示状态
@@ -123,7 +133,7 @@ export default {
       this.$router.push('/data')
     },
     // 长时间未点击页面，就自动退出页面
-    autoLogout(){
+    autoLogout() {
       let lastTime = new Date().getTime()
       let logout = false
       // 页面点击后赋值当前时间
@@ -148,7 +158,7 @@ export default {
       })
     },
     // 重置编辑器
-    recoveryCode(curTab = '0'){
+    recoveryCode(curTab = '0') {
       this.curTab = curTab
       this.codeKey++
     },