更新404

package-lock.json

@@ -6610,6 +6610,11 @@
         }
       }
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz",
+      "integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npm.taobao.org/js-message/download/js-message-1.0.7.tgz",

package.json

@@ -17,6 +17,7 @@
     "element-ui": "^2.15.1",
     "express-jwt": "^6.0.0",
     "express-session": "^1.17.1",
+    "js-cookie": "^2.2.1",
     "jsonwebtoken": "^8.5.1",
     "moment": "^2.29.1",
     "stompjs": "^2.3.3",

src/main.js

@@ -11,7 +11,7 @@ import 'regenerator-runtime/runtime';
 import '@tools/elUI'
 
 import axios from "@api/axios"; // API接口访问
-Vue.prototype.API = axios;
+Vue.prototype.API = axios;//全局注册
 
 import base from "@tools/base"; // 公共方法
 Vue.prototype.BASE = base;

src/store/getters.js

@@ -0,0 +1,6 @@
+const getters = {
+  token: state => state.user.token,  //建立token的快捷访问   user 是因为index.js中导入的时候名称定义为user
+  submitDDTag: state => state.submitDDTag,
+  loading:state =>state.loading,
+}
+export default getters

src/store/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-
+import getters from './getters'
+import user from './modules/user'
 Vue.use(Vuex)
 
 const state = {
@@ -17,6 +18,10 @@ const mutations = {
   },
 };
 var vuexStore = new Vuex.Store({
+  module:{
+    user//调用this['user/login']()  引用 ...mapActions(['user/login']),
+  },
+  getters,
   state,
   mutations
 });

src/store/modules/user.js

@@ -0,0 +1,30 @@
+import {getToken,setToken,removeToken} from '@/utils/auth'
+const state = {
+  token:getToken //设置token为共享状态   初始化vuex的时候 就先从缓存中读取
+}
+const mutations = {
+  setToken(state,token){
+    state.token=token//将数据设置给vuex
+    //同步给缓存
+    setToken(token)
+  },
+  removeToken(state){
+    state.token = null//将vuex的数据置空
+    removeToken()//同步到缓存
+  }
+}
+const actions = {
+  async login(context,data){
+    const result = await login(data)
+    if(result.data.sucess){
+      //调用vuex中setToken方法
+      context.commit('setToken',result.data.data)
+    }
+  }
+}
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+}

src/tools/base.js

@@ -180,6 +180,23 @@ export function cascaderBugRepair(data) {
   return data;
 }
 
+/**
+ * 将列表数据转化为树形结构  递归调用
+ */
+export function tranListToTreeData(list , rootValue){
+  var arr = [];
+  list.forEach(item => {
+    if(item.pid === rootValue){
+      //找到之后判断有没有子节点 list中id 与 pid 相同为其子节点   根节点id为''
+      const children = tranListToTreeData(list,item.id)
+      if(children.length){
+        item.children = children
+      }
+      arr.push(item);
+    }
+  });
+}
+
 export default {
   numberCeil,
   getBzDate,
@@ -188,4 +205,5 @@ export default {
   dateQjChange,
   getBztime,
   numberB0,
+  tranListToTreeData,
 };

src/utils/auth.js

@@ -0,0 +1,15 @@
+import Cookies from 'js-cookie'
+
+const TokenKey = 'hrsaas-bjgy-token'
+
+export function getToken() {
+  return Cookies.get(TokenKey)
+}
+
+export function setToken(token) {
+  return Cookies.set(TokenKey, token)
+}
+
+export function removeToken() {
+  return Cookies.remove(TokenKey)
+}

src/views/404.vue

@@ -1,34 +1,227 @@
 <template>
-  <div class="frame">
-    
-    <h1 style="font-size: 100px;">404</h1>
-    <el-button @click="goIndex" type="success">返回首页</el-button>
+  <div class="wscn-http404-container">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" src="@/assets/images/404_images/404.png" alt="404">
+        <img class="pic-404__child left" src="@/assets/images/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child mid" src="@/assets/images/404_images/404_cloud.png" alt="404">
+        <img class="pic-404__child right" src="@/assets/images/404_images/404_cloud.png" alt="404">
+      </div>
+      <div class="bullshit">
+        <div class="bullshit__oops">OOPS!</div>
+        <div class="bullshit__info">All rights reserved
+           </div>
+        <div class="bullshit__headline">{{ message }}</div>
+        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
+        <a href="/" class="bullshit__return-home">Back to home</a>
+      </div>
+    </div>
   </div>
 </template>
 
-
 <script>
-export default {
-  name: 'error',
-  data() {
-    return {
 
+export default {
+  name: 'Page404',
+  computed: {
+    message() {
+      return 'The webmaster said that you can not enter this page...'
     }
-  },
-  created() {
-  },
-  methods: {
-    // 回首页
-    goIndex(){
-      this.$router.replace({
-        path: "/"
-      });
-    },
   }
 }
-
 </script>
 
 <style lang="scss" scoped>
-  @import "@assets/css/404.scss";
+.wscn-http404-container{
+  transform: translate(-50%,-50%);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+}
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  padding: 0 50px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 30px 0;
+    overflow: hidden;
+    &__oops {
+      font-size: 32px;
+      font-weight: bold;
+      line-height: 40px;
+      color: #1482f0;
+      opacity: 0;
+      margin-bottom: 20px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+    }
+    &__headline {
+      font-size: 20px;
+      line-height: 24px;
+      color: #222;
+      font-weight: bold;
+      opacity: 0;
+      margin-bottom: 10px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;
+    }
+    &__info {
+      font-size: 13px;
+      line-height: 21px;
+      color: grey;
+      opacity: 0;
+      margin-bottom: 30px;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.2s;
+      animation-fill-mode: forwards;
+    }
+    &__return-home {
+      display: block;
+      float: left;
+      width: 110px;
+      height: 36px;
+      background: #1482f0;
+      border-radius: 100px;
+      text-align: center;
+      color: #ffffff;
+      opacity: 0;
+      font-size: 14px;
+      line-height: 36px;
+      cursor: pointer;
+      animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
 </style>

vue.config.js

@@ -67,7 +67,18 @@ module.exports = {
     }
   },
   devServer: {
+    //代理配置
+    proxy:{
+      //这里的api表示请求的地址有apizzzs,就触发代理机制
+      '/apizzz':{
+        target:'www.baidu.com',//我们要代理的地址
+        changeOrigin:true,//是否跨域
+        pathRewrite:{
+          //'^/api',''//假设想把 localhost:8080/api/login 变成www.baidu.com/login就需要这么做
+        }
+      }
+    },
     open: true, // 是否打开浏览器
   }
 
-}
+}