开始开发登录页之前,我们先把上一节遗留的小问题解决下!
在面包屑上面点击跳转到对应的页面
接下来开始login登陆页的开发!
src/views/login/index.vue
<template>
<div class="login" :style="'background-image:url(' + Background + ');'">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
label-position="left"
label-width="0px"
class="login-form"
>
<h3 class="title">
GF-ADMIN 后台管理系统
</h3>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
placeholder="账号"
>
<svg-icon
slot="prefix"
icon-class="user"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
auto-complete="off"
placeholder="密码"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="password"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" />
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
记住我
</el-checkbox>
<el-form-item style="width:100%;">
<el-button
:loading="loading"
size="medium"
type="primary"
style="width:100%;background:#000;border:1px solid #000"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import Background from '@a/images/bg.jpeg'
export default {
data() {
return {
Background,
loginForm: {
username: 'admin',
password: '123456',
rememberMe: true,
code: '',
uuid: ''
},
loading: false,
codeUrl: '',
loginRules: {
username: [
{ required: true, trigger: 'blur', message: '用户名不能为空' }
],
password: [
{ required: true, trigger: 'blur', message: '密码不能为空' }
],
code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
}
}
},
methods: {
handleLogin() {},
getCode() {}
}
}
</script>
<style lang="scss" scoped>
.login {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-size: cover;
background-position: center;
.login-form {
border-radius: 6px;
background: #ffffff;
width: 385px;
padding: 25px 25px 5px 25px;
position: relative;
box-shadow: 0 0 10px #000;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
.title {
margin: 0 auto 30px auto;
text-align: center;
color: #707070;
font-size: 26px;
font-weight: 400;
}
}
}
</style>
这样我们的login页面效果就出来了。
接下来,我们要进行后台数据交互了,数据请求的方法我们要进行一次封装了!以我们项目中最常用的方法axios来前后端交互
yarn add axios