登录页效果图:
主要思路是利用浏览器Cookie来存储用户登录信息。除了存储用户名和密码外,还存储了一个记住密码的标志位,如果勾选了,则为true,反之为false。当用户登录时,不论用户有没有勾选“记住密码”,都会先将信息存入Cookie,区别在于,如果没勾选,则会在用户退出登录时,清除Cookie。当然存储信息的方法还有很多种,Cookie一般适用于存储数据量很小的数据。
登录页代码如下:
<style scoped>
.m-container {
background: url("../assets/bg.jpg");
background-size: cover;
height: 100%;
min-height: 1000px;
text-align: center;
min-width: 420px;
}
.h200{
height: 200px
}
.global{
color: white;width: 500px;margin: auto;height: 300px;border: 1px solid gray;
}
.wel{
font-size: 18px;font-weight:bold;margin: auto;width: 100px;padding: 20px 10px;
}
.mt10{
margin-top: 10px
}
</style>
<template>
<div class="m-container">
<div class="h200"></div>
<div class="global">
<div class="wel">欢迎登陆</div>
<el-form class="mt10">
<el-form-item>
<el-input :maxlength="128" placeholder="用户名" style="width: 60%;" v-model="username"></el-input>
</el-form-item>
<el-form-item>
<el-input :maxlength="128" placeholder="密码" type="password" style="width: 60%" v-model="password"></el-input>
</el-form-item>
<el-checkbox v-model="checked">记住密码</el-checkbox>
<br>
<br>
&