Vue + Element UI 實現權限管理系統 前端篇(四):優化登陸流程

完善登陸流程

1. 豐富登陸界面

1.1 從 Element 指南中選擇組件模板豐富登陸界面,放置一個登陸界面表單,包含帳號密碼輸入框和登陸重置按鈕。css

<template>
  <el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
    <h3 class="title">系統登陸</h3>
    <el-form-item prop="account">
      <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="帳號"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密碼"></el-input>
    </el-form-item>
    <!-- <el-checkbox v-model="checked" checked class="remember">記住密碼</el-checkbox> -->
    <el-form-item style="width:100%;">
      <el-button type="primary" style="width:48%;" @click.native.prevent="reset">重 置</el-button>
      <el-button type="primary" style="width:48%;" @click.native.prevent="login" :loading="logining">登 錄</el-button>
    </el-form-item>
  </el-form>
</template>

1.2 稍微調整一下界面樣式前端

<style lang="scss" scoped>
  .login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }
    .remember {
      margin: 0px 0px 35px 0px;
    }
  }
</style>

1.3 添加頁面組件顯示規則和操做響應,其中登陸成功後,把登陸用戶信息存儲到本地會話,用於配置路由跳轉目標。vue

<script>
  import Cookies from "js-cookie";
  export default {
    name: 'Login',
    data() {
      return {
        logining: false,
        loginForm: {
          account: 'admin',
          password: '123456'
        },
        fieldRules: {
          account: [
            { required: true, message: '請輸入帳號', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '請輸入密碼', trigger: 'blur' },
          ]
        },
        checked: true
      };
    },
    methods: {
      login() {
        let userInfo = {account:this.loginForm.account, password:this.loginForm.password}
        this.$api.login(JSON.stringify(userInfo)).then((res) => {
            Cookies.set('token', res.data.token) // 放置token到Cookie
            sessionStorage.setItem('user', userInfo.account) // 保存用戶到本地會話
            this.$router.push('/')  // 登陸成功,跳轉到主頁
          }).catch(function(res) {
            alert(res);
          });
      },
      reset() {
        this.$refs.loginForm.resetFields();
      }
    }
  }
</script>

1.4 最後效果以下圖所示。ios

2.修改接口

修改 http/interface.js,把請求類型改成 post,並傳入 data 參數。git

export const login = data => {
    return axios({
        url: '/login',
        method: 'post',
        data
    })
}

3.修改 mock 接口

修改 mock/modules/logins.js,把請求類型改成 post。web

// 登陸接口
export function login () {
  return {
    // isOpen: false,
    url: 'http://localhost:8080/login',
    type: 'post',
    data: {
      'msg': 'success',
      'code': 0,
      'data': {
        'token': '4344323121398'
        // 其餘數據
      }
    }
  }
}

4.添加導航守衛

在 router/index.js 中添加導航守衛,以下圖所示,根據用戶登陸會話記錄,路由到主頁或登陸界面。axios

5.修改主頁界面

 5.1 向 home.vue 添加組件,構建主界面。後端

<template>
    <el-row class="container">
        <el-col :span="24" class="header">
            <el-col :span="5" class="logo" :class="isCollapse?'logo-collapse-width':'logo-width'">
        <img :src="this.logo" /> {{isCollapse?sysName:sysName}}
            </el-col>
            <el-col :span="1">
                <div class="tools" @click.prevent="collapse">
                    <i class="el-icon-menu"></i>
                </div>
                    <!-- <i class="fa fa-align-justify"></i> -->
            </el-col>
            <el-col :span="13">
                <div class="hearNavBar">
          <el-menu :default-active="activeIndex" class="el-menu-demo" background-color="#4b5f6e" text-color="#fff"
              active-text-color="#ffd04b" mode="horizontal" @select="handleSelectHearNavBar">
            <el-menu-item index="1">首頁</el-menu-item>
            <el-menu-item index="2">消息中心</el-menu-item>
            <el-menu-item index="3">訂單管理</el-menu-item>
          </el-menu>
                </div>
            </el-col>
            <el-col :span="5" class="userinfo">
                <el-dropdown trigger="hover">
                    <span class="el-dropdown-link userinfo-inner"><img :src="this.userAvatar" /> {{username}}</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>個人消息</el-dropdown-item>
                        <el-dropdown-item>設置</el-dropdown-item>
                        <el-dropdown-item divided @click.native="logout">退出登陸</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-col>
        <el-col :span="24" class="main">
            <aside class="aside">
                <!--導航菜單-->
        <el-menu default-active="1-3" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" :collapse="isCollapse">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">導航一</span>
            </template>
            <el-menu-item index="1-1">選項1</el-menu-item>
            <el-menu-item index="1-2">選項2</el-menu-item>
            <el-menu-item index="1-3">選項3</el-menu-item>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">導航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">導航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">導航四</span>
          </el-menu-item>
        </el-menu>
            </aside>
            <section class="content-container">
                <div class="grid-content bg-purple-light">
                    <el-col :span="24" class="breadcrumb-container">
                        <el-breadcrumb separator="/" class="breadcrumb-inner">
                            <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
                                {{ item.name }}
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-col>
                    <el-col :span="24" class="content-wrapper">
                        <transition name="fade" mode="out-in">
                            <router-view></router-view>
                        </transition>
                    </el-col>
                </div>
            </section>
        </el-col>
    </el-row>
</template>

5.2 處理頁面事件和頁面數據顯示,主要是兩個事件和在 mounted 函數內獲取頁面數據。api

5.3 修飾調整 css 樣式,構建界面,樣式太多,就不貼了,直接看源碼 ,調整完效果以下圖所示。cookie

6.嵌套路由

6.1 在 views 目錄下新建 Main、User、Menu 頁面,用於菜單路由,內容隨便顯示點什麼就能夠。

6.2 在 router/index.js 文件中添加子路由,分別指向子頁面。

 6.3 在 views/Home.vue 頁面對應的導航菜單中添加點擊事件,路由到對應的子頁面。

6.4 登陸以後,點擊用戶管理,路由到用戶管理界面。

6.5 點擊菜單管理,路由到菜單管理界面。

 

6.5 這裏發現點擊導航菜單以後,菜單就不能點擊了,經查看是導航頁面座標樣式問題,把用戶管理等頁面的樣式去掉就行了。

6.6 同理添加機構管理、角色管理、日誌管理的菜單以後,效果以下。

 

 

源碼下載

後端:https://gitee.com/liuge1988/kitty

前端:https://gitee.com/liuge1988/kitty-ui.git


做者:朝雨憶輕塵
出處:https://www.cnblogs.com/xifengxiaoma/ 版權全部,歡迎轉載,轉載請註明原文做者及出處。

相關文章
相關標籤/搜索