评论缓存实现，添加解密加密函数(按需求引用)

个人页面缓存未实现，因为多重嵌套路由使得keepalive失效，暂未解决。
OnGoingLzy · Jul 18, 2022 · 6179ac0 · 6179ac0
1 parent 6f479fe
commit 6179ac0
Show file tree

Hide file tree

Showing 12 changed files with 81 additions and 46 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -12,7 +12,8 @@
 <!--    <button @click="showComponents(true)">显示</button>-->
 <!--    <button @click="showComponents(false)">隐藏</button>-->
 <!--    keepalive会缓存组件而不是销毁 其中key是用来控制刷新的，以免出现退出登录后但还是保持存活 -->
-    <keep-alive include="HomeView" v-if="headerkey === 0">
+<!--    <keep-alive include="HomeView" v-if="headerkey === 0">-->
+    <keep-alive include="HomeView">
     <router-view :key="headerkey+1" @visibleEvent="showComponents" >
     </router-view>
       </keep-alive>
@@ -31,7 +32,6 @@
 <script>
   import header_ from "@/components/header_";
   import login from "@/components/login";
-  import HomeView from "@/views/HomeView";
   import footer_ from "@/components/footer_";
   import '@vant/touch-emulator';//组件只监听了移动端的 touch 事件，没有监听桌面端的 mouse 事件。使用他适配
   import './assets/iconfont/iconfont.css'
@@ -57,7 +57,7 @@
       header_,
       footer_,
       login,
-      HomeView
+      // HomeView
     },
     methods:{
       footerReload(){

diff --git a/src/assets/commonjs/des.js b/src/assets/commonjs/des.js
@@ -0,0 +1,32 @@
+import cryptoJs from 'crypto-js'
+export default {
+    /*
+* message:需要加密的字符串，对象加密需要转成json字符串
+* key： 密钥（加密解密密钥同一个）
+*/
+    encryptDes : function (message, key = '51522zzwlwlbb') {
+        const keyHex = cryptoJs.enc.Utf8.parse(key)
+        const option = { mode: cryptoJs.mode.ECB, padding: cryptoJs.pad.Pkcs7 }
+        const encrypted = cryptoJs.DES.encrypt(message, keyHex, option)
+        return encrypted.ciphertext.toString() // 返回hex格式密文，如需返回base64格式：encrypted.toString()
+    },
+    /*
+* message:需要解密的字符串，
+* key： 密钥（加密解密密钥同一个）
+*/
+    decryptDes : function (message, key = '51522zzwlwlbb') {
+        const keyHex = cryptoJs.enc.Utf8.parse(key)
+        const decrypted = cryptoJs.DES.decrypt(
+            {
+                ciphertext: cryptoJs.enc.Hex.parse(message)
+            },// 若message是base64格式，则无需转16进制hex，直接传入message即可
+            keyHex,
+            {
+                mode: cryptoJs.mode.ECB,
+                padding: cryptoJs.pad.Pkcs7
+            }
+        )
+        return decrypted.toString(cryptoJs.enc.Utf8)
+    }
+
+}
diff --git a/src/assets/commonjs/video.js b/src/assets/commonjs/video.js
@@ -7,7 +7,6 @@ export default {
                 sessionStorage.setItem("selectVideoId",videoid)
                 //带/从根路由开始，不带从当前路由开始
                 this.$router.push("/videoFrame")
-
         },
         getCid : function (){
                 return sessionStorage.getItem("cid")

diff --git a/src/components/commentComponent.vue b/src/components/commentComponent.vue
@@ -112,8 +112,8 @@ export default {
 
     }
   },
-  async beforeMount() {
-    await this.$http.post("getMsgImg", this.comment.cid).then(res => {
+  async mounted() {
+    this.$http.post("getMsgImg", this.comment.cid).then(res => {
       this.commenter = res.data
     })
 

diff --git a/src/components/header_.vue b/src/components/header_.vue
@@ -8,11 +8,11 @@
                     input-align="center"
         />
       </van-col>
-      <van-col span="4" class="icondiv" v-if="cid === 0">
+      <van-col span="4" class="icondiv" v-if="cid === '0'">
         <div class="child" />
         <van-icon name="user-circle-o" size="34" @click="iconClick" />
       </van-col>
-      <van-col span="4" class="icondiv" v-if="cid !== 0">
+      <van-col span="4" class="icondiv" v-if="cid !== '0'">
         <van-image
             round
             width="34"
@@ -29,7 +29,7 @@
         </van-badge>
       </van-col>
 <!--     退出登录 logout-->
-      <van-col span="4" class="icondiv" v-if="cid !== 0">
+      <van-col span="4" class="icondiv" v-if="cid !== '0'">
           <div class="child" />
           <van-icon name="close" size="34" @click="logout"/>
       </van-col>
@@ -48,7 +48,7 @@ export default {
   data(){
     return{
       search: '',
-      cid: 0,
+      cid: '0',
       cAvatar: 'default.png',
       key: 0,
     }
@@ -104,15 +104,18 @@ export default {
   },//挂载
   mounted() {
     console.log("挂载.....")
-    this.cid = Number(sessionStorage.getItem('cid'))
+    this.cid = sessionStorage.getItem('cid')
 
     //获取消息和头像等
     console.log("header里的avatar1:" + this.cAvatar)
     if (sessionStorage.getItem('cid') !== null) {
       this.$http.post("getMsgImg", sessionStorage.getItem('cid')).then(res => {
         this.cAvatar = res.data.avatarName
       })
-    }
+      // this.$http.post("getMsgImg", this.desjs.decryptDes(sessionStorage.getItem('cid'))).then(res => {
+      //   this.cAvatar = res.data.avatarName
+      // })
+    }else this.cid = '0'
   }
 }
 </script>

diff --git a/src/components/login.vue b/src/components/login.vue
@@ -64,19 +64,13 @@ export default {
       this.$router.push('/register')
     },
     async onSubmit() {
-      if(this.loginForm.email==="admin" && this.loginForm.cpwd==="666"){
-        sessionStorage.setItem("cid","404")
-        sessionStorage.setItem("cname","离线管理员")
-        sessionStorage.setItem("currentPage",'1')
-        this.reload()
-        this.$router.push('/')
-        return
-      }
+
       const {data: res} = await this.$http.post("/login",this.loginForm);  //出现undifine是data写成date
       this.user = res
       if(res !== ""){
         this.$store.commit('upUserData',res)
         sessionStorage.setItem("cid",res.cid)
+        // sessionStorage.setItem("cid",this.desjs.encryptDes(JSON.stringify(res.cid)))
         sessionStorage.setItem("cname",res.cname)
         sessionStorage.setItem("email",res.email)
         sessionStorage.setItem("ctype",res.ctype)

diff --git a/src/components/personalComponents/SpaceHeader.vue b/src/components/personalComponents/SpaceHeader.vue
@@ -12,7 +12,7 @@
 import personalBackground from "@/components/personalComponents/HeaderComponents/personalBackground";
 import personalBar from "@/components/personalComponents/HeaderComponents/personalBar";
 import personalMessage from "@/components/personalComponents/HeaderComponents/personalMessage";
-import PersonalSpace from "@/views/personalSpace";
+import PersonalSpace from "@/views/PersonalSpace";
 export default {
   name: "SpaceHeader",
   provide(){

diff --git a/src/components/videoFrame.vue b/src/components/videoFrame.vue
@@ -28,7 +28,7 @@
         </van-col>
       </van-row>
 
-      <div class="jianjie" v-if="jianjie">
+      <div class="jianjie" v-show="jianjie">
         <div>
           <van-row>
             <van-col span="16" class="jianjie-author">
@@ -176,7 +176,7 @@
 <!--      </van-popup>-->
 
 
-      <div class="pinglun" v-if="!jianjie" style="max-height: 550px;overflow: auto">
+      <div class="pinglun" v-show="!jianjie" style="max-height: 550px;overflow: auto">
         <div>
           <div style="display: inline-block;padding: 10px">
             <span>热门评论</span>
@@ -188,8 +188,11 @@
         </div>
 
 
-        <div v-for="(comment,index) of commentlist" v-if="commentkey" style="overflow:hidden;box-shadow: 0 1px 1px darkgrey;">
-          <comment-component v-bind:comment="comment" :key="index" v-if="comment.tocommentid===null" ></comment-component>
+        <div v-for="(comment,index) of commentlist" v-show="commentkey" style="overflow:hidden;box-shadow: 0 1px 1px darkgrey;">
+          <keep-alive>
+            <comment-component v-bind:comment="comment" :key="index"  ></comment-component>
+          </keep-alive>
+
         </div>
         <div style="height: 40px;width: 100%">
 

diff --git a/src/main.js b/src/main.js
@@ -27,7 +27,8 @@ Vue.use(VueCoreVideoPlayer)
 //使用公共js函数
 import videojs from "@/assets/commonjs/video";
 Vue.prototype.videojsx = videojs
-
+import des from "@/assets/commonjs/des";
+Vue.prototype.desjs = des
 
 
 new Vue({

diff --git a/src/router/index.js b/src/router/index.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 import login from "@/components/login";
-import personalSpace from "@/views/personalSpace";
+import PersonalSpace from "@/views/PersonalSpace";
 import mainZhuye from "@/components/personalComponents/mainComponents/mainZhuye";
 import mainTougao from "@/components/personalComponents/mainComponents/Tougao";
 import mainShoucang from "@/components/personalComponents/mainComponents/mainShoucang";
@@ -12,9 +12,8 @@ import videoSetMsg from "@/components/personalComponents/mainComponents/TougaoCo
 import mainAddFolder from "@/components/personalComponents/mainComponents/mainAddFolder";
 import videoFrame from "@/components/videoFrame";
 import mainMyTougao from "@/components/personalComponents/mainComponents/mainMyTougao";
-import shoucangFrame from "@/components/personalComponents/mainComponents/shoucangFrame";
 import register from "@/components/register";
-import adminView from "@/views/adminView";
+import AdminView from "@/views/AdminView";
 import adminVanGrid from "@/components/adminComponents/adminVanGrid";
 import adminVideoAudit from "@/components/adminComponents/adminVideoAudit";
 
@@ -30,14 +29,16 @@ VueRouter.prototype.push = function push(location) {
 const routes = [
   {
     path: '/',
-    name: 'menu',
-    component: HomeView
+    component: HomeView,
+    meta: {
+
+    }
 
   },
   {
     path: '/adminManagement',
     redirect: '/adminManagement/navigation',
-    component: adminView,
+    component: AdminView,
     meta: {
       isAdmin: true
     },
@@ -101,20 +102,15 @@ const routes = [
   {
     path: '/personalSpace/',
     redirect:'/personalSpace/zhuye',
-    name: 'personalSpace',
     meta:{
-      islogin: true
+      islogin: true,
     },
-    component: personalSpace, //二级路由配置
+    component: PersonalSpace, //二级路由配置
     //注意:下面子路由中加不加‘/’ 的区别：当去到fe的时候加 ‘/'会在地址栏中显示 #/fe;不加 ‘/'的时候回在地址栏中显示#/position/fe
     children: [
       {
         path: 'zhuye',
         component: mainZhuye,
-        children: [{
-          path: 'shoucangFrame',
-          component: shoucangFrame
-        }],
         meta:{
           islogin: true
         },

diff --git a/src/views/adminView.vue → src/views/AdminView.vue b/src/views/adminView.vue → src/views/AdminView.vue
@@ -5,13 +5,16 @@
         left-text=""
         right-text=""
     />
-    <router-view></router-view>
+    <KeepAlive>
+      <router-view></router-view>
+    </KeepAlive>
+
   </div>
 </template>
 
 <script>
 export default {
-  name: "adminView",
+  name: "AdminView",
   inject:['setVisible'],
   data(){
     return{

diff --git a/src/views/personalSpace.vue → src/views/PersonalSpace.vue b/src/views/personalSpace.vue → src/views/PersonalSpace.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="personalSpace">
-    <keep-alive v-if="key===0">
-      <SpaceHeader ></SpaceHeader>
+    <keep-alive>
+      <SpaceHeader v-if="key===0"></SpaceHeader>
+    </keep-alive>
+
+    <keep-alive>
+    <router-view v-if="key2===1"> </router-view>
     </keep-alive>
-      <router-view></router-view>
   </div>
 </template>
 
@@ -12,15 +15,16 @@ import SpaceHeader from "@/components/personalComponents/SpaceHeader";
 
 export default {
   inject:['setVisible'],
-  name: "personalSpace",
+  name: "PersonalSpace",
   provide(){
     return{
       changeBar : this.changeBar
     }
   },
   data(){
     return{
-      key: 0
+      key: 0,
+      key2:1
     }
   } ,
   methods:{