SpringBoot + Spring Cloud +Vue 管理系統前端搭建（六、完善登錄流程）

這里我們簡單做一個登錄界面,界面如圖：

話不多說直接上代碼

首先我們修改登錄界面

login.vue

<template>
<el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
<span class="tool-bar">
</span>
<h2 class="title" style="padding-left:22px;" >系統登錄</h2>
<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-form-item >
<el-col :span="12">
<el-form-item prop="captcha">
<el-input type="test" v-model="loginForm.captcha" auto-complete="off" placeholder="驗證碼, 單擊圖片重繪"
style="width: 100%;">
</el-input>
</el-form-item>
</el-col>
<el-col class="line" :span="1">&nbsp;</el-col>
<el-col :span="11">
<el-form-item>
<img style="width: 100%;" class="pointer" :src="loginForm.src" @click="refreshCaptcha">
</el-form-item>
</el-col>
</el-form-item>
<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="loading">登 錄</el-button>
</el-form-item>
</el-form>
</template>

<script>
import Cookies from "js-cookie"
export default {
name: 'Login',
data() {
return {
loading: false,
loginForm: {
account: 'admin',
password: 'admin',
captcha:'',
src: ''
},
fieldRules: {
account: [
{ required: true, message: '請輸入賬號', trigger: 'blur' }
],
password: [
{ required: true, message: '請輸入密碼', trigger: 'blur' }
]
},
checked: true
}
},
methods: {
login() {
this.loading = true
let userInfo = { account:this.loginForm.account, password:this.loginForm.password,
captcha:this.loginForm.captcha }
this.$api.login.login(userInfo).then((res) => { // 呼叫登錄介面
if(res.msg != null) {
this.$message({ message: res.msg, type: 'error' })
} else {
Cookies.set('token', res.data.token) // 放置token到Cookie
sessionStorage.setItem('user', userInfo.account) // 保存用戶到本地會話
this.$router.push('/') // 登錄成功，跳轉到主頁
}
this.loading = false
}).catch((res) => {
this.$message({ message: res.message, type: 'error' })
})
},
refreshCaptcha: function(){
this.loginForm.src = this.global.baseUrl + "/captcha.jpg?t=" + new Date().getTime();
},
reset() {
this.$refs.loginForm.resetFields()
}
},
mounted() {
this.refreshCaptcha()
}
}
</script>

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

修改主界面

Home.vue

<template>
<div class="container">
<!-- 導航選單欄 -->
<nav-bar></nav-bar>
<!-- 頭部區域 -->
<head-bar></head-bar>
<!-- 主內容區域 -->
<main-content></main-content>
</div>
</template>

<script>
import HeadBar from "./HeadBar"
import NavBar from "./NavBar"
import MainContent from "./MainContent"
export default {
components:{
HeadBar,
NavBar,
MainContent
}
};
</script>

<style scoped lang="scss">
.container {
position:absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
// background: rgba(224, 234, 235, 0.1);
}
</style>

在views下添加導航選單欄、頭部區域、內容區域

左測導航選單欄

NavBar.vue

<template>
<div class="menu-bar-container">
<!-- logo -->
<div class="logo" style="background:#14889A" :class="'menu-bar-width'"
@click="$router.push('/')">
<img src="@/assets/logo.png"/> <div>Mango</div>
</div>
</div>
</template>

<script>
export default {
methods: {
}
}
</script>

<style scoped lang="scss">
.menu-bar-container {
position: fixed;
top: 0px;
left: 0;
bottom: 0;
z-index: 1020;
.logo {
position:absolute;
top: 0px;
height: 60px;
line-height: 60px;
background: #545c64;
cursor:pointer;
img {
width: 40px;
height: 40px;
border-radius: 0px;
margin: 10px 10px 10px 10px;
float: left;
}
div {
font-size: 25px;
color: white;
text-align: left;
padding-left: 20px;
}
}
.menu-bar-width {
width: 200px;
}
}

</style>

頭部區域：

HeadBar.vue

<template>

<div class="headbar" style="background:#14889A" :class="'position-left'">

<!-- 工具列 -->

<span class="toolbar">

<el-menu class="el-menu-demo" background-color="#14889A" text-color="#14889A" active-text-color="#14889A" mode="horizontal">

<el-menu-item index="1">

<!-- 用戶資訊 -->

<span class="user-info"><img :src="user.avatar" />{{user.name}}</span>

</el-menu-item>

</el-menu>

</span>

</div>

</template>

<script>

import mock from "@/mock/index"

export default {

data() {

return {

user: {

name: "Louis",

avatar: "",

role: "超級管理員",

registeInfo: "注冊時間：2018-12-20 "

},

activeIndex: '1',

langVisible: false

}

},

methods: {

selectNavBar(key, keyPath) {

console.log(key, keyPath)

}

},

mounted() {

var user = sessionStorage.getItem("user")

if (user) {

this.user.name = user

this.user.avatar = require("@/assets/user.png")

}

}

}

</script>

<style scoped lang="scss">

.headbar {

position: fixed;

top: 0;

right: 0;

z-index: 1030;

height: 60px;

line-height: 60px;

border-color: rgba(180, 190, 190, 0.8);

border-left-width: 1px;

border-left-style: solid;

}

.navbar {

float: left;

}

.toolbar {

float: right;

}

.user-info {

font-size: 20px;

color: #fff;

cursor: pointer;

img {

width: 40px;

height: 40px;

border-radius: 10px;

margin: 10px 0px 10px 10px;

float: right;

}

}

.position-left {

left: 200px;

}

</style>

主內容區域：

MainContent.vue

<template>
<div id="main-container" class="main-container" :class="'position-left'">
<!-- 標簽頁 -->
<div class="tab-container"></div>
<!-- 主內容區域 -->
<div class="main-content">
<keep-alive>
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</keep-alive>
</div>
</div>
</template>

<script>
export default {
data () {
return {
}
},
methods: {

}
}
</script>

<style scoped lang="scss">
.main-container {
padding: 0 5px 5px;
position: absolute;
top: 60px;
left: 1px;
right: 1px;
bottom: 0px;
background: rgba(67, 69, 70, 0.1);
.main-content {
position: absolute;
top: 45px;
left: 5px;
right: 5px;
bottom: 5px;
padding: 5px;
}
}
.position-left {
left: 200px;
}
</style>

修改App.vue

<template>

<div id="app">

<router-view/>

</div>

</template>

<script>

export default {

name: 'App'

}

</script>

<style>

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style>

測驗：

修改完代碼后訪問：http://localhost:8080/#/login

如下圖，可以看到我們的登錄界面已經出來了

然后我們點擊登錄，進入主界面

好啦，到此我們就完成了一個簡單的登錄流程，在實際開發程序中，在登錄后可能會有一些操作要進行，我們這里就不細說了，

看完記得點贊哦！