Home Explore Help
Sign In
WisdomCity-Web
/
SaaS-DataScreen
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat：登录

wqb2017 5 years ago
parent
af70d38098
commit
7ea2309778
18 changed files with 175 additions and 326 deletions
Unified View Show Diff Stats
  1. 2 2
      public/index.html
  2. 3 0
      src/assets/css/function.scss
  3. 0 36
      src/components/header/index.scss
  4. 0 61
      src/components/header/index.vue
  5. 0 28
      src/components/main/index.scss
  6. 5 36
      src/components/main/index.vue
  7. 0 0
      src/components/navbar/index.scss
  8. 0 69
      src/components/navbar/index.vue
  9. 0 27
      src/components/tags-nav/index.scss
  10. 0 41
      src/components/tags-nav/index.vue
  11. 5 1
      src/route/index.js
  12. 1 1
      src/route/permis-list.js
  13. 19 1
      src/route/white-list.js
  14. 0 5
      src/views/About.vue
  15. 0 18
      src/views/Home.vue
  16. 20 0
      src/views/login/index.scss
  17. 73 0
      src/views/login/index.vue
  18. 47 0
      src/views/no-login/index.vue

+ 2 - 2
public/index.html
View File 

@@ -2,7 +2,7 @@
 
  * @Author: WangQiBiao
 
  * @Author: WangQiBiao
 
  * @Date: 2019-09-24 17:50:53
 
  * @Date: 2019-09-24 17:50:53
 
  * @LastEditors: WangQiBiao
 
  * @LastEditors: WangQiBiao
 
- * @LastEditTime: 2019-09-25 09:15:31
 
+ * @LastEditTime: 2019-10-08 15:46:17
 
  * @Description:
 
  * @Description:
 
  -->
 
  -->
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
@@ -12,7 +12,7 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
-    <title>绘享云</title>
 
+    <title>绘享云大数据展示平台</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <noscript>
 
     <noscript>

+ 3 - 0
src/assets/css/function.scss
View File 

@@ -1,3 +1,6 @@
 
+// 适配
 
+// 分辨率为 1920*1080
 
+// 对应的单位大小不变，方法直接计算
 
 @function halfW($num) {
 
 @function halfW($num) {
 
   @return ($num / 1920) * 100 + vw;
 
   @return ($num / 1920) * 100 + vw;
 
 }
 
 }

+ 0 - 36
src/components/header/index.scss
View File 

@@ -1,36 +0,0 @@
 
-@import '@/assets/css/mixin';
 
-
 
-.header{
 
-  @include clearBox;
 
-  position: relative;
 
-  .header-logo{
 
-    float: left;
 
-    &.mini-logo{
 
-      width: 60px;
 
-      height: 60px;
 
-    }
 
-  }
 
-  .menu-collapse{
 
-    padding: 15px 10px;
 
-    font-size: 30px;
 
-    color: #797979;
 
-    font-weight: 300;
 
-    cursor: pointer;
 
-  }
 
-  .header-right{
 
-    position: absolute;
 
-    right: 20px;
 
-    top: 0;
 
-    .user-sec{
 
-      line-height: 60px;
 
-      cursor: pointer;
 
-      .user-sec-name{
 
-        padding-right: 8px;
 
-        font-size: 12px;
 
-      }
 
-      .user-sec-avatar{
 
-        border-radius: 50%;
 
-      }
 
-    }
 
-  }
 
-}

+ 0 - 61
src/components/header/index.vue
View File 

@@ -1,61 +0,0 @@
 
-<!--
 
- * @Author: WangQiBiao
 
- * @Date: 2019-09-18 15:47:50
 
- * @LastEditors: WangQiBiao
 
- * @LastEditTime: 2019-09-20 16:53:19
 
- * @Description:
 
- -->
 
-<template>
 
-  <div class="header">
 
-    <img :class="['header-logo', isCollapse ? 'mini-logo' : 'big-logo']" src="https://via.placeholder.com/220x60" alt="">
 
-    <i :class="['menu-collapse', isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="handleIsCollapse"></i>
 
-    <div class="header-right">
 
-      <div class="user-sec">
 
-        <el-dropdown>
 
-          <span class="el-dropdown-link">
 
-            <span class="user-sec-name">钢铁虾</span>
 
-            <img class="user-sec-avatar" src="https://via.placeholder.com/30x30" alt="">
 
-            <i class="el-icon-caret-bottom el-icon--right"></i>
 
-          </span>
 
-          <el-dropdown-menu slot="dropdown">
 
-            <el-dropdown-item>修改密码</el-dropdown-item>
 
-            <el-dropdown-item @click.native="exitLogin">退出登录</el-dropdown-item>
 
-          </el-dropdown-menu>
 
-        </el-dropdown>
 
-      </div>
 
-    </div>
 
-  </div>
 
-</template>
 
-<script>
 
-import { mapState, mapActions } from 'vuex'
 
-export default {
 
-  computed: {
 
-    ...mapState('menu', {
 
-      isCollapse: state => state.isCollapse
 
-    })
 
-  },
 
-  methods: {
 
-    ...mapActions([
 
-      'menu/handleIsCollapse',
 
-      'menu/handleClearPermisStorage'
 
-    ]),
 
-    /**
 
-     * 展开伸缩菜单
 
-     */
 
-    handleIsCollapse () {
 
-      this['menu/handleIsCollapse'](!this.isCollapse)
 
-    },
 
-    /**
 
-     * 退出登录
 
-     */
 
-    exitLogin () {
 
-      this['menu/handleClearPermisStorage']()
 
-      this.$router.push({ path: '/' })
 
-    }
 
-  }
 
-}
 
-</script>
 
-
 
-<style lang="scss" scoped>
 
-@import './index.scss';
 
-</style>

+ 0 - 28
src/components/main/index.scss
View File 

@@ -1,28 +0,0 @@
 
-@import '@/assets/css/theme';
 
-@import '@/assets/css/mixin';
 
-
 
-.main{
 
-  .main-left{
 
-    width: $left-width;
 
-    background: $menu-color;
 
-    color: #fff;
 
-    float: left;
 
-    position: fixed;
 
-    top: 60px;
 
-    left: 0;
 
-    bottom: 0;
 
-  }
 
-  .main-header{
 
-    background: #fff;
 
-    position: fixed;
 
-    top: 0;
 
-    left: 0;
 
-    right: 0;
 
-    padding: 0;
 
-    @include border-divider(bottom, 5px, solid, $primary-color);
 
-  }
 
-  .main-index{
 
-    padding-left: $left-width;
 
-    padding-top: 65px;
 
-  }
 
-}

+ 5 - 36
src/components/main/index.vue
View File 

@@ -1,43 +1,12 @@
 
 <!--
 
 <!--
 
  * @Author: WangQiBiao
 
  * @Author: WangQiBiao
 
- * @Date: 2019-09-18 12:37:05
 
+ * @Date: 2019-10-08 16:00:59
 
  * @LastEditors: WangQiBiao
 
  * @LastEditors: WangQiBiao
 
- * @LastEditTime: 2019-09-19 20:57:54
 
+ * @LastEditTime: 2019-10-08 16:01:16
 
  * @Description:
 
  * @Description:
 
  -->
 
  -->
 
 <template>
 
 <template>
 
-  <el-container class="main">
 
-    <el-header class="main-header" style="height: 65px">
 
-      <HeaderCom/>
 
-    </el-header>
 
-    <el-aside class="main-left" :style="[{width: isCollapse ? '60px' : '220px'}]">
 
-      <NavbarCom/>
 
-    </el-aside>
 
-    <el-main class="main-index" :style="[{'padding-right': 0, 'padding-left': isCollapse ? '60px' : ''}]">
 
-      <TagsNavCom/>
 
-      <router-view />
 
-    </el-main>
 
-  </el-container>
 
+  <div class="main">
 
+    <router-view/>
 
+  </div>
 
 </template>
 
 </template>
 
-<script>
 
-import NavbarCom from '@/components/navbar'
 
-import HeaderCom from '@/components/header'
 
-import TagsNavCom from '@/components/tags-nav'
 
-import { mapState } from 'vuex'
 
-export default {
 
-  components: {
 
-    NavbarCom,
 
-    HeaderCom,
 
-    TagsNavCom
 
-  },
 
-  computed: {
 
-    ...mapState('menu', {
 
-      isCollapse: state => state.isCollapse
 
-    })
 
-  }
 
-}
 
-</script>
 
-
 
-<style lang="scss" scoped>
 
-@import "./index.scss";
 
-</style>

+ 0 - 0
src/components/navbar/index.scss
View File


+ 0 - 69
src/components/navbar/index.vue
View File 

@@ -1,69 +0,0 @@
 
-<!--
 
- * @Author: WangQiBiao
 
- * @Date: 2019-09-18 14:35:18
 
- * @LastEditors: WangQiBiao
 
- * @LastEditTime: 2019-09-20 16:00:14
 
- * @Description: 菜单
 
- -->
 
-<template>
 
-  <div class="navbar">
 
-    <el-menu
 
-      :router="true"
 
-      :default-active="defaultActive"
 
-      background-color="#072848"
 
-      text-color="#fff"
 
-      active-text-color="#1890ff"
 
-      :collapse="isCollapse"
 
-      :collapse-transition="false"
 
-      style="width: 100%;"
 
-    >
 
-      <el-submenu
 
-        v-for="(menu, index) in permisList"
 
-        :key="index"
 
-        :index="menu.path"
 
-      >
 
-        <template slot="title">
 
-          <i class="el-icon-message"></i>
 
-          <span>{{menu.meta.title}}</span>
 
-        </template>
 
-        <el-menu-item
 
-          v-for="(child, childIdx) in menu.children"
 
-          :key="childIdx"
 
-          :index="'/' + menu.path + '/' +child.path"
 
-          style="padding-left: 50px;"
 
-        >{{child.meta.title}}</el-menu-item>
 
-      </el-submenu>
 
-    </el-menu>
 
-  </div>
 
-</template>
 
-<script>
 
-import { mapState } from 'vuex'
 
-export default {
 
-  components: {
 
-  },
 
-  data () {
 
-    return {
 
-      defaultActive: ''
 
-    }
 
-  },
 
-  computed: {
 
-    ...mapState('menu', {
 
-      isCollapse: state => state.isCollapse,
 
-      permisList: state => state.permisList
 
-    })
 
-  },
 
-  watch: {
 
-    '$route': {
 
-      immediate: true,
 
-      handler (route) {
 
-        if (route) {
 
-          this.defaultActive = route.path
 
-        }
 
-      }
 
-    }
 
-  }
 
-}
 
-</script>
 
-<style lang="scss">
 
-@import './index.scss';
 
-</style>

+ 0 - 27
src/components/tags-nav/index.scss
View File 

@@ -1,27 +0,0 @@
 
-@import '@/assets/css/mixin.scss';
 
-
 
-.tags-nav{
 
-  width: 100%;
 
-  height: 40px;
 
-  // line-height: 40px;
 
-  background: #ddd;
 
-  @include boxShadow;
 
-  position: relative;
 
-  overflow: hidden;
 
-  user-select: none;
 
-  .tags-nav-scroll{
 
-    position: absolute;
 
-    .tags-nav-item{
 
-      float: left;
 
-      cursor: pointer;
 
-      background: #fff;
 
-      padding: 0 20px;
 
-      line-height: 40px;
 
-      color: #333;
 
-      margin-right: 1px;
 
-      .tags-nav-item-txt{
 
-        padding-right: 8px;
 
-      }
 
-    }
 
-  }
 
-}

+ 0 - 41
src/components/tags-nav/index.vue
View File 

@@ -1,41 +0,0 @@
 
-<!--
 
- * @Author: WangQiBiao
 
- * @Date: 2019-09-19 20:45:29
 
- * @LastEditors: WangQiBiao
 
- * @LastEditTime: 2019-09-20 17:58:50
 
- * @Description:
 
- -->
 
-<template>
 
-  <div class="tags-nav" id="tagsNav" ref="tagsNav">
 
-    <div class="tags-nav-scroll" :style="{left: scrollLeft + 'px'}">
 
-      <div class="tags-nav-item" v-for="(item, index) in 20" :key="index" @click="onClickNav">
 
-        <span class="tags-nav-item-txt">标签 {{index+1}}</span>
 
-        <i class="el-icon-close"></i>
 
-      </div>
 
-    </div>
 
-  </div>
 
-</template>
 
-<script>
 
-export default {
 
-  data () {
 
-    return {
 
-      scrollLeft: 0
 
-    }
 
-  },
 
-  methods: {
 
-    onClickNav (e) {
 
-      // console.log(window.screen.width)
 
-      const tagsNavWidth = this.$refs.tagsNav.clientWidth
 
-      const curNodeX = e.clientX
 
-      // console.log(curNodeX, tagsNavWidth, e)
 
-      if (curNodeX > tagsNavWidth) {
 
-        this.scrollLeft = tagsNavWidth - curNodeX - 200
 
-      }
 
-    }
 
-  }
 
-}
 
-</script>
 
-
 
-<style lang="scss" scoped>
 
-@import './index.scss';
 
-</style>

+ 5 - 1
src/route/index.js
View File 

@@ -2,7 +2,7 @@
 
  * @Author: WangQiBiao
 
  * @Author: WangQiBiao
 
  * @Date: 2019-09-18 09:37:48
 
  * @Date: 2019-09-18 09:37:48
 
  * @LastEditors: WangQiBiao
 
  * @LastEditors: WangQiBiao
 
- * @LastEditTime: 2019-09-20 16:27:58
 
+ * @LastEditTime: 2019-10-08 16:28:07
 
  * @Description:
 
  * @Description:
 
  */
 
  */
 
 import Vue from 'vue'
 
 import Vue from 'vue'
 
@@ -24,6 +24,10 @@ let isFlag = false // 是否第一次添加权限路由表，默认不是；【
 
 
 
 router.beforeEach(async (to, from, next) => {
 
 router.beforeEach(async (to, from, next) => {
 
   const { permisList } = store.state.menu
 
   const { permisList } = store.state.menu
 
+  if ((!sessionStorage.getItem('token')) && !['/login', '/no-login'].includes(to.path)) {
 
+    next('/no-login')
 
+    return
 
+  }
 
   if (whiteList.map(item => item.path).indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
 
   if (whiteList.map(item => item.path).indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
 
     next()
 
     next()
 
   } else if (permisList.length) {
 
   } else if (permisList.length) {

+ 1 - 1
src/route/permis-list.js
View File 

@@ -2,7 +2,7 @@
 
  * @Author: WangQiBiao
 
  * @Author: WangQiBiao
 
  * @Date: 2019-09-18 11:31:29
 
  * @Date: 2019-09-18 11:31:29
 
  * @LastEditors: WangQiBiao
 
  * @LastEditors: WangQiBiao
 
- * @LastEditTime: 2019-09-20 16:06:37
 
+ * @LastEditTime: 2019-10-08 16:01:18
 
  * @Description: 权限菜单
 
  * @Description: 权限菜单
 
  */
 
  */
 
 import _import from './_import'
 
 import _import from './_import'

+ 19 - 1
src/route/white-list.js
View File 

@@ -2,7 +2,7 @@
 
  * @Author: WangQiBiao
 
  * @Author: WangQiBiao
 
  * @Date: 2019-09-18 09:40:26
 
  * @Date: 2019-09-18 09:40:26
 
  * @LastEditors: WangQiBiao
 
  * @LastEditors: WangQiBiao
 
- * @LastEditTime: 2019-09-24 18:07:51
 
+ * @LastEditTime: 2019-10-08 16:14:50
 
  * @Description: 白名单菜单
 
  * @Description: 白名单菜单
 
  */
 
  */
 
 import _import from './_import'
 
 import _import from './_import'
 
@@ -30,6 +30,24 @@ export default [
 
       icon: ''
 
       icon: ''
 
     }
 
     }
 
   },
 
   },
 
+  {
 
+    path: '/login',
 
+    component: _import('login'),
 
+    meta: {
 
+      title: '登录',
 
+      hideInMenu: false,
 
+      icon: ''
 
+    }
 
+  },
 
+  {
 
+    path: '/no-login',
 
+    component: _import('no-login'),
 
+    meta: {
 
+      title: '没有登录权限',
 
+      hideInMenu: false,
 
+      icon: ''
 
+    }
 
+  },
 
   {
 
   {
 
     path: '*',
 
     path: '*',
 
     component: _import('not-found')
 
     component: _import('not-found')

+ 0 - 5
src/views/About.vue
View File 

@@ -1,5 +0,0 @@
 
-<template>
 
-  <div class="about">
 
-    <h1>This is an about page</h1>
 
-  </div>
 
-</template>

+ 0 - 18
src/views/Home.vue
View File 

@@ -1,18 +0,0 @@
 
-<template>
 
-  <div class="home">
 
-    <img alt="Vue logo" src="../assets/logo.png">
 
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
 
-  </div>
 
-</template>
 
-
 
-<script>
 
-// @ is an alias to /src
 
-import HelloWorld from '@/components/HelloWorld.vue'
 
-
 
-export default {
 
-  name: 'home',
 
-  components: {
 
-    HelloWorld
 
-  }
 
-}
 
-</script>

+ 20 - 0
src/views/login/index.scss
View File 

@@ -0,0 +1,20 @@
 
+@import '@/assets/css/function';
 
+
 
+.login{
 
+  color: #fff;
 
+  .login-form{
 
+    width: halfW(400);
 
+    padding: halfW(40);
 
+    background: #959FCD;
 
+    position: absolute;
 
+    left: 50%;
 
+    top: 50%;
 
+    transform: translate(-50%, -50%);
 
+    border-radius: halfW(10);
 
+    .login-form-label{
 
+      padding-bottom: halfH(40);
 
+      font-size: halfH(32);
 
+      text-align: center;
 
+    }
 
+  }
 
+}

+ 73 - 0
src/views/login/index.vue
View File 

@@ -0,0 +1,73 @@
 
+<!--
 
+ * @Author: WangQiBiao
 
+ * @Date: 2019-10-08 15:33:28
 
+ * @LastEditors: WangQiBiao
 
+ * @LastEditTime: 2019-10-08 16:31:25
 
+ * @Description: 登录
 
+ -->
 
+<template>
 
+  <div class="login">
 
+    <el-form class="login-form" :model="formRule" :rules="rules" ref="formRule">
 
+      <h1 class="login-form-label">绘享云大数据展示平台</h1>
 
+      <el-form-item prop="user">
 
+        <el-input v-model="formRule.user" placeholder="请输入用户名"></el-input>
 
+      </el-form-item>
 
+      <el-form-item prop="pwd">
 
+        <el-input v-model="formRule.pwd" show-password placeholder="请输入登录密码"></el-input>
 
+      </el-form-item>
 
+      <el-form-item>
 
+        <el-button type="primary" v-loading="isLoading" style="width: 100%" @click="onSubmit">登录</el-button>
 
+      </el-form-item>
 
+    </el-form>
 
+  </div>
 
+</template>
 
+<script>
 
+export default {
 
+  data () {
 
+    return {
 
+      formRule: {
 
+        user: '',
 
+        pwd: ''
 
+      },
 
+      rules: {
 
+        user: [
 
+          { required: true, message: '请输入账号' }
 
+        ],
 
+        pwd: [
 
+          { required: true, message: '清输入密码' }
 
+        ]
 
+      },
 
+      whiteUser: ['wisdomcity', 'wisdomcity2019'], // 白名单账号
 
+      isLoading: false
 
+    }
 
+  },
 
+  methods: {
 
+    onSubmit () {
 
+      this.$refs['formRule'].validate((valid) => {
 
+        if (valid) {
 
+          this.isLoading = true
 
+          if (this.whiteUser.includes(this.formRule.user)) {
 
+            sessionStorage.setItem('token', 'fdsfas41234123fdsf4132423vsvd134')
 
+            setTimeout(() => {
 
+              this.isLoading = false
 
+              this.$router.push({ path: '/index' })
 
+            }, 1)
 
+          } else {
 
+            this.isLoading = false
 
+            this.$message({
 
+              message: `您输入的账号或者密码有误，请重新输入正确的账号和密码！`,
 
+              type: 'warning'
 
+            })
 
+          }
 
+        } else {
 
+          return false
 
+        }
 
+      })
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+@import "./index.scss";
 
+</style>

+ 47 - 0
src/views/no-login/index.vue
View File 

@@ -0,0 +1,47 @@
 
+<!--
 
+ * @Author: WangQiBiao
 
+ * @Date: 2019-10-08 16:13:47
 
+ * @LastEditors: WangQiBiao
 
+ * @LastEditTime: 2019-10-08 16:24:30
 
+ * @Description: 没有权限
 
+ -->
 
+<template>
 
+  <div class="no-login">
 
+    <el-alert
 
+      title="您没有登录权限，请联系管理员申请权限"
 
+      type="warning"
 
+      show-icon
 
+      center
 
+      class="no-login-label"
 
+    >
 
+    </el-alert>
 
+    <el-row class="no-login-btn">
 
+      <el-button type="primary" @click="goLogin">返回登录页面</el-button>
 
+    </el-row>
 
+  </div>
 
+</template>
 
+<script>
 
+export default {
 
+  methods: {
 
+    goLogin () {
 
+      this.$router.push({ path: '/login' })
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="scss">
 
+@import "@/assets/css/function";
 
+.no-login {
 
+  color: #fff;
 
+  margin: auto;
 
+  .no-login-label {
 
+    border-radius: 0;
 
+  }
 
+  .no-login-btn{
 
+    padding-top: 200px;
 
+    margin: auto;
 
+    text-align: center;
 
+  }
 
+}
 
+</style>