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
修改 http/interface.js,把請求類型改成 post,並傳入 data 參數。git
export const login = data => { return axios({ url: '/login', method: 'post', data }) }
修改 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' // 其餘數據 } } } }
在 router/index.js 中添加導航守衛,以下圖所示,根據用戶登陸會話記錄,路由到主頁或登陸界面。axios
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.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/ 版權全部,歡迎轉載,轉載請註明原文做者及出處。