refine

src/router/index.js

 import Vue from 'vue';
 import Router from 'vue-router';
 const _import = require('./_import_' + process.env.NODE_ENV);
-// in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow
+// in development env not use Lazy Loading,because Lazy Loading large page will cause webpack hot update too slow.so only in production use Lazy Loading
-// so only in production use Lazy Loading
 
 /* layout */
 import Layout from '../views/layout/Layout';
 /* error page */
 const Err404 = _import('404');
 
+/* demo page */
 const Form = _import('page/form');
 const Table = _import('table/index');
 
 
  /**
   * icon : the icon show in the sidebar
-  * hidden : if hidden:true will not show in the sidebar
+  * hidden : if `hidden:true` will not show in the sidebar
-  * redirect : if redirect:noredirect will not redirct in the levelbar
+  * redirect : if `redirect:noredirect` will not redirct in the levelbar
-  * noDropdown : if noDropdown:true will not has submenu
+  * noDropdown : if `noDropdown:true` will not has submenu in the sidebar
-  * meta : { role: ['admin'] }  will control the page role
+  * meta : `{ role: ['admin'] }`  will control the page role
   **/
 export const constantRouterMap = [
   { path: '/login', component: Login, hidden: true },
     path: '/',
     component: Layout,
     redirect: '/dashboard',
-    name: '首页',
+    name: 'Home',
     hidden: true,
     children: [{ path: 'dashboard', component: dashboard }]
   }
       { path: 'index', component: Form, name: 'Form', icon: 'zonghe' }
     ]
   },
+
   {
     path: '/table',
     component: Layout,
     noDropdown: true,
     children: [{ path: 'index', component: Table, name: 'Table', meta: { role: ['admin'] } }]
   },
+
   { path: '*', redirect: '/404', hidden: true }
 ];

src/store/modules/user.js

       });
     },
 
-    // 第三方验证登录
-    LoginByThirdparty({ commit, state }, code) {
-      return new Promise((resolve, reject) => {
-        commit('SET_CODE', code);
-        loginByThirdparty(state.status, state.email, state.code, state.auth_type).then(response => {
-          commit('SET_TOKEN', response.data.token);
-          Cookies.set('Admin-Token', response.data.token);
-          resolve();
-        }).catch(error => {
-          reject(error);
-        });
-      });
-    },
-
-
     // 登出
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {
         Cookies.remove('Admin-Token');
         resolve();
       });
-    },
-
-    // 动态修改权限
-    ChangeRole({ commit }, role) {
-      return new Promise(resolve => {
-        commit('SET_ROLES', [role]);
-        commit('SET_TOKEN', role);
-        Cookies.set('Admin-Token', role);
-        resolve();
-      })
     }
   }
 };

src/utils/fetch.js

 import axios from 'axios';
 import { Message } from 'element-ui';
 import store from '../store';
-// import router from '../router';
+
 
 // 创建axios实例
 const service = axios.create({
 
 // request拦截器
 service.interceptors.request.use(config => {
-  // Do something before request is sent
   if (store.getters.token) {
-    config.headers['X-Token'] = store.getters.token; // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
+    config.headers['X-Token'] = store.getters.token; // 让每个请求携带自定义token 请根据实际情况自行修改
   }
   return config;
 }, error => {
 service.interceptors.response.use(
   response => {
   /**
-  * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
+  * code为非20000是抛错 可结合自己业务进行修改
-  * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
   */
     const res = response.data;
     if (res.code !== 20000) {
         type: 'error',
         duration: 5 * 1000
       });
+
       // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
         MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {

src/utils/index.js

      return d.getMonth() + 1 + '月' + d.getDate() + '日' + d.getHours() + '时' + d.getMinutes() + '分'
    }
  }
-
- export function scrollTo(element, to, duration) {
-   if (duration <= 0) return;
-   const difference = to - element.scrollTop;
-   const perTick = difference / duration * 10;
-   setTimeout(() => {
-     console.log(new Date())
-     element.scrollTop = element.scrollTop + perTick;
-     if (element.scrollTop === to) return;
-     scrollTo(element, to, duration - 10);
-   }, 10);
- }

src/views/404.vue

 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  .wscn-http404 {
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  margin: 20px auto 60px;
+  padding: 0 100px;
+  overflow: hidden;
+  .pic-404 {
     position: relative;
-    width: 1200px;
+    float: left;
-    margin: 20px auto 60px;
+    width: 600px;
-    padding: 0 100px;
+    padding: 150px 0;
     overflow: hidden;
-    .pic-404 {
+    &__parent {
-      position: relative;
+      width: 100%;
-      float: left;
+    }
-      width: 600px;
+    &__child {
-      padding: 150px 0;
+      position: absolute;
-      overflow: hidden;
+      &.left {
-      &__parent {
+        width: 80px;
-        width: 100%;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
       }
-      &__child {
+      &.mid {
-        position: absolute;
+        width: 46px;
-        &.left {
+        top: 10px;
-          width: 80px;
+        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;
-          animation-name: cloudLeft;
-          animation-duration: 2s;
-          animation-timing-function: linear;
-          animation-fill-mode: forwards;
-          animation-delay: 1s;
         }
-        &.mid {
+        20% {
-          width: 46px;
+          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;
-          animation-name: cloudMid;
-          animation-duration: 2s;
-          animation-timing-function: linear;
-          animation-fill-mode: forwards;
-          animation-delay: 1.2s;
         }
-        &.right {
+        20% {
-          width: 62px;
+          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;
-          animation-name: cloudRight;
-          animation-duration: 2s;
-          animation-timing-function: linear;
-          animation-fill-mode: forwards;
-          animation-delay: 1s;
         }
-        @keyframes cloudLeft {
+        20% {
-          0% {
+          top: 120px;
-            top: 17px;
+          left: 460px;
-            left: 220px;
+          opacity: 1;
-            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 {
+        80% {
-          0% {
+          top: 180px;
-            top: 10px;
+          left: 340px;
-            left: 420px;
+          opacity: 1;
-            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 {
+        100% {
-          0% {
+          top: 200px;
-            top: 100px;
+          left: 300px;
-            left: 500px;
+          opacity: 0;
-            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;
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 150px 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: #1482f0;
+      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: 300px;
+      width: 110px;
-      padding: 150px 0;
+      height: 36px;
-      overflow: hidden;
+      background: #1482f0;
-      &__oops {
+      border-radius: 100px;
-        font-size: 32px;
+      text-align: center;
-        font-weight: bold;
+      color: #ffffff;
-        line-height: 40px;
+      opacity: 0;
-        color: #1482f0;
+      font-size: 14px;
-        opacity: 0;
+      line-height: 36px;
-        margin-bottom: 20px;
+      cursor: pointer;
-        animation-name: slideUp;
+      animation-name: slideUp;
-        animation-duration: 0.5s;
+      animation-duration: 0.5s;
-        animation-fill-mode: forwards;
+      animation-delay: 0.3s;
-      }
+      animation-fill-mode: forwards;
-      &__headline {
+    }
-        font-size: 20px;
+    @keyframes slideUp {
-        line-height: 24px;
+      0% {
-        color: #1482f0;
+        transform: translateY(60px);
-        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 {
+      100% {
-        0% {
+        transform: translateY(0);
-          transform: translateY(60px);
+        opacity: 1;
-          opacity: 0;
-        }
-        100% {
-          transform: translateY(0);
-          opacity: 1;
-        }
       }
     }
   }
+}
+
 </style>

src/views/layout/Layout.vue

                     }
                 }
             }
-            .main-container{
+            .main-container {
                 margin-left: 40px;
             }
         }

src/views/layout/Levelbar.vue

 
 <style rel="stylesheet/scss" lang="scss" scoped>
     .app-levelbar.el-breadcrumb {
-        display: inline-block;
+      display: inline-block;
-        font-size: 14px;
+      font-size: 14px;
-        line-height: 50px;
+      line-height: 50px;
-        margin-left: 10px;
+      margin-left: 10px;
-        .no-redirect{
+      .no-redirect {
-          color: #97a8be;
+        color: #97a8be;
-          cursor:text;
+        cursor: text;
-        }
+      }
     }
 </style>

src/views/layout/Navbar.vue

             <el-dropdown-menu class="user-dropdown" slot="dropdown">
                 <router-link class='inlineBlock' to="/">
                     <el-dropdown-item>
-                        首页
+                        Home
                     </el-dropdown-item>
                 </router-link>
                 <el-dropdown-item divided><span @click="logout" style="display:block;">退出登录</span></el-dropdown-item>
       computed: {
         ...mapGetters([
           'sidebar',
-          'name',
           'avatar'
         ])
       },
         },
         logout() {
           this.$store.dispatch('LogOut').then(() => {
-            location.reload();// 为了重新实例化vue-router对象 避免bug
+            location.reload();  // 为了重新实例化vue-router对象 避免bug
           });
         }
       }
             position: absolute;
             right: 150px;
         }
-        .screenfull{
+        .screenfull {
-             position: absolute;
+            position: absolute;
-             right: 90px;
+            right: 90px;
-             top: 16px;
+            top: 16px;
-             color: red;
+            color: red;
         }
         .avatar-container {
             height: 50px;
             right: 35px;
             .avatar-wrapper {
                 cursor: pointer;
-                margin-top:5px;
+                margin-top: 5px;
                 position: relative;
                 .user-avatar {
                     width: 40px;

src/views/layout/Sidebar.vue

 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-    .el-menu {
+.el-menu {
-        min-height: 100%;
+    min-height: 100%;
-    }
+}
+
 </style>

src/views/layout/SidebarItem.vue

 </template>
 
 <script>
-
     export default {
       name: 'SidebarItem',
       props: {

src/views/login/index.vue

 <template>
-    <div class="login-container">
+  <div class="login-container">
-        <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
+    <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
-                 label-width="0px"
+      class="card-box login-form">
-                 class="card-box login-form">
+      <h3 class="title">系统登录</h3>
-            <h3 class="title">系统登录</h3>
+      <el-form-item prop="email">
-            <el-form-item prop="email">
+        <span class="svg-container">
-                <span class="svg-container">
                   <icon-svg icon-class="jiedianyoujian"></icon-svg>
                 </span>
-                <el-input name="email" type="text" v-model="loginForm.email" autoComplete="on"
+        <el-input name="email" type="text" v-model="loginForm.email" autoComplete="on" placeholder="邮箱"></el-input>
-                          placeholder="邮箱"></el-input>
+      </el-form-item>
-            </el-form-item>
+      <el-form-item prop="password">
-            <el-form-item prop="password">
+        <span class="svg-container">
-                <span class="svg-container">
                   <icon-svg icon-class="mima" ></icon-svg>
                 </span>
-                <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password"
+        <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
-                          autoComplete="on" placeholder="密码"></el-input>
+          placeholder="密码"></el-input>
-            </el-form-item>
+      </el-form-item>
-            <el-form-item>
+      <el-form-item>
-                <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
+        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
-                    登录
+          登录
-                </el-button>
+        </el-button>
-            </el-form-item>
+      </el-form-item>
-            <div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
+      <div class='tips'>admin账号为:admin@wallstreetcn.com 密码随便填</div>
-            <div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
+      <div class='tips'>editor账号:editor@wallstreetcn.com 密码随便填</div>
-        </el-form>
+    </el-form>
-    </div>
+  </div>
 </template>
 
 <script>
         return {
           loginForm: {
             email: 'admin@wallstreetcn.com',
-            password: ''
+            password: '111111'
           },
           loginRules: {
             email: [
 
 <style rel="stylesheet/scss" lang="scss">
     @import "src/styles/mixin.scss";
-    .tips{
+    .tips {
       font-size: 14px;
       color: #fff;
       margin-bottom: 5px;
     }
-    .login-container {
-        @include relative;
-        height: 100vh;
-        background-color: #2d3a4b;
-
-        input:-webkit-autofill {
-            -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
-            -webkit-text-fill-color: #fff !important;
-        }
-        input {
-            background: transparent;
-            border: 0px;
-            -webkit-appearance: none;
-            border-radius: 0px;
-            padding: 12px 5px 12px 15px;
-            color: #eeeeee;
-            height: 47px;
-        }
-        .el-input {
-            display: inline-block;
-            height: 47px;
-            width: 85%;
-        }
-        .svg-container {
-            padding: 6px 5px 6px 15px;
-            color: #889aa4;
-        }
-
-        .title {
-            font-size: 26px;
-            font-weight: 400;
-            color: #eeeeee;
-            margin: 0px auto 40px auto;
-            text-align: center;
-            font-weight: bold;
-        }
-
-        .login-form {
-            position: absolute;
-            left: 0;
-            right: 0;
-            width: 400px;
-            padding: 35px 35px 15px 35px;
-            margin: 120px auto;
-        }
-
-        .el-form-item {
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            background: rgba(0, 0, 0, 0.1);
-            border-radius: 5px;
-            color: #454545;
-        }
 
-        .forget-pwd {
+    .login-container {
-            color: #fff;
+      @include relative;
-        }
+      height: 100vh;
+      background-color: #2d3a4b;
+      input:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
+        -webkit-text-fill-color: #fff !important;
+      }
+      input {
+        background: transparent;
+        border: 0px;
+        -webkit-appearance: none;
+        border-radius: 0px;
+        padding: 12px 5px 12px 15px;
+        color: #eeeeee;
+        height: 47px;
+      }
+      .el-input {
+        display: inline-block;
+        height: 47px;
+        width: 85%;
+      }
+      .svg-container {
+        padding: 6px 5px 6px 15px;
+        color: #889aa4;
+      }
+      .title {
+        font-size: 26px;
+        font-weight: 400;
+        color: #eeeeee;
+        margin: 0px auto 40px auto;
+        text-align: center;
+        font-weight: bold;
+      }
+      .login-form {
+        position: absolute;
+        left: 0;
+        right: 0;
+        width: 400px;
+        padding: 35px 35px 15px 35px;
+        margin: 120px auto;
+      }
+      .el-form-item {
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        background: rgba(0, 0, 0, 0.1);
+        border-radius: 5px;
+        color: #454545;
+      }
+      .forget-pwd {
+        color: #fff;
+      }
     }
-
 </style>

src/views/table/index.vue

 </template>
 
 <script>
-import { getList } from '@/api/table';
+  import { getList } from '@/api/table';
-export default {
+
-  data() {
+  export default {
-    return {
+    data() {
-      list: null,
+      return {
-      listLoading: true
+        list: null,
-    }
+        listLoading: true
-  },
+      }
-  created() {
+    },
-    this.fetchData();
+    created() {
-  },
+      this.fetchData();
-  methods: {
+    },
-    fetchData() {
+    methods: {
-      this.listLoading = true;
+      fetchData() {
-      getList(this.listQuery).then(response => {
+        this.listLoading = true;
-        this.list = response.data.items;
+        getList(this.listQuery).then(response => {
-        this.listLoading = false;
+          this.list = response.data.items;
-      })
+          this.listLoading = false;
+        })
+      }
     }
-  }
+  };
-};
 </script>