Directorio de artículos
- 1. Implemente el nombre de usuario, la contraseña, el botón de inicio de sesión y recuerde el formulario de usuario.
- 2. Vinculación bidireccional de nombre de usuario, contraseña y usuario recordado
- 3. Si no hay ningún usuario, haga clic en la función de registro para realizar
- 4. Ingrese el nombre de usuario, la contraseña y haga clic en el botón de inicio de sesión para iniciar sesión.
- 5. Implementar la verificación de elementos del formulario.
- 6. Envíe el formulario de verificación previa
- 7. Recuerde el número de cuenta y la contraseña.
-
- 1. Guardar ficha
- 2. Guardar nombre de usuario
- 3. Determine si es necesario recordar la cuenta y la contraseña del usuario y guarde la cuenta y la contraseña en localStorage.
- 4. Lea la contraseña de la cuenta.
- 5. Si no necesita recordar la cuenta y la contraseña, elimine la información en localStorage.
- 8. Página de inicio de sesión escrita
1. Implemente el nombre de usuario, la contraseña, el botón de inicio de sesión y recuerde el formulario de usuario.
<template>
<LoginBackVue>
<div class="login_box">
<!-- 显示logo的地方 -->
<div class="log"></div>
<!-- 登录的表单 -->
<el-form>
<el-form-item>
<el-input prefix-icon="User" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item>
<el-input prefix-icon="Lock" placeholder="请输入密码"/>
</el-form-item>
<el-form-item label="记住用户">
<el-switch />
</el-form-item>
<el-form-item>
<el-button color="#00608c" style="width: 100%" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
</div>
</LoginBackVue>
</template>
<script>
import LoginBackVue from "@/components/LoginBack.vue";
export default{
components:{
LoginBackVue
}
}
</script>
<style scoped>
/* 设置登录框的宽高和位置居中 */
.login_box{
width: 500px;
height:350px;
margin: calc((100vh - 350px)/2) auto;
text-align: center;
color: white;
}
</style>
1. El código CSS global se define en afirmaciones/css/global.css
/* --------------------登录页面--------------------- */
/* 修改element-plus 输入框表单的样式*/
.login_box .el-input__wrapper{
background: none;
box-shadow: none;
border-bottom: solid 1px #00608c;
border-radius: 0;
}
/* 修改输入框图表样式 */
.login_box .el-input__prefix{
color: #fff;
font-size: 20px;
}
Importar a main.js y surtir efecto globalmente
2. Vinculación bidireccional de nombre de usuario, contraseña y usuario recordado
<template>
<LoginBackVue>
<div class="login_box">
<!-- 显示logo的地方 -->
<div class="log"></div>
<!-- 登录的表单 -->
<el-form>
<el-form-item>
<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item>
<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
</el-form-item>
<el-form-item label="记住用户">
<el-switch v-model="loginForm.status" />
</el-form-item>
<el-form-item>
<el-button color="#00608c" style="width: 100%" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
</div>
</LoginBackVue>
</template>
<script>
import LoginBackVue from "@/components/LoginBack.vue";
export default{
data(){
return{
loginForm:{
username:"",
password:"",
status:false
}
}
},
components:{
LoginBackVue
}
}
</script>
<style scoped>
/* 设置登录框的宽高和位置居中 */
.login_box{
width: 500px;
height:350px;
margin: calc((100vh - 350px)/2) auto;
text-align: center;
color: white;
}
</style>
3. Si no hay ningún usuario, haga clic en la función de registro para realizar
<template>
<LoginBackVue>
<div class="login_box">
<!-- 显示logo的地方 -->
<div class="log"></div>
<!-- 登录的表单 -->
<el-form>
<el-form-item>
<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item>
<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
</el-form-item>
<el-form-item label="记住用户">
<el-switch v-model="loginForm.status" />
</el-form-item>
<el-form-item>
<el-button color="#00608c" style="width: 100%" @click="onSubmit">登录</el-button>
</el-form-item>
</el-form>
<div class="isregister">没有账号？
<span @click="register">点击注册</span>
</div>
</div>
</LoginBackVue>
</template>
<script>
import LoginBackVue from "@/components/LoginBack.vue";
export default{
data(){
return{
loginForm:{
username:"",
password:"",
status:false
}
}
},
methods:{
register(){
this.$message({
type:'warning',
message:"平台未开放注册功能"
})
}
},
components:{
LoginBackVue
}
}
</script>
<style scoped>
/* 设置登录框的宽高和位置居中 */
.login_box{
width: 500px;
height:350px;
margin: calc((100vh - 350px)/2) auto;
text-align: center;
color: white;
}
.isregister{
width: 100%;
text-align: left;
}
.isregister span{
color: turquoise;
cursor: pointer;
}
</style>
4. Ingrese el nombre de usuario, la contraseña y haga clic en el botón de inicio de sesión para iniciar sesión.
1. Cuadro de entrada del formulario, vincule los datos ingresados
2. Haga clic en el botón de inicio de sesión y envíe una solicitud para completar el inicio de sesión
<template>
<LoginBackVue>
<div class="login_box">
<!-- 显示logo的地方 -->
<div class="log"></div>
<!-- 登录的表单 -->
<el-form>
<el-form-item>
<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item>
<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
</el-form-item>
<el-form-item label="记住用户">
<el-switch v-model="loginForm.status" />
</el-form-item>
<el-form-item>
<el-button color="#00608c" style="width: 100%" @click="submitLogin">登录</el-button>
</el-form-item>
</el-form>
<div class="isregister">没有账号？
<span @click="register">点击注册</span>
</div>
</div>
</LoginBackVue>
</template>
<script>
import LoginBackVue from "@/components/LoginBack.vue";
export default{
data(){
return{
loginForm:{
username:"",
password:"",
status:false
}
}
},
methods:{
// 点击登录的方法
async submitLogin(){
const response=await this.$api.login(this.loginForm)
if (response.status===200){
// 提示登录成功
this.$message({
type:"success",
message:"登录成功"
})
// 页面跳转(后面加)
this.$router.push({
"name":"home"})
}
},
// 点击注册
register(){
this.$message({
type:'warning',
message:"平台未开放注册功能"
})
}
},
components:{
LoginBackVue
}
}
</script>
<style scoped>
/* 设置登录框的宽高和位置居中 */
.login_box{
width: 500px;
height:350px;
margin: calc((100vh - 350px)/2) auto;
text-align: center;
color: white;
}
.isregister{
width: 100%;
text-align: left;
}
.isregister span{
color: turquoise;
cursor: pointer;
}
</style>
5. Implementar la verificación de elementos del formulario.
Pasos:
1. Vincular el atributo de reglas en la etiqueta el-form y especificar el objeto de regla de verificación
2. Definir la regla de verificación vinculante en datos
3. Especificar el campo de verificación en la etiqueta el-form-item.
<template>
<LoginBackVue>
<div class="login_box">
<!-- 显示logo的地方 -->
<div class="log"></div>
<!-- 登录的表单 -->
<el-form :rules="loginRules" :model="loginForm">
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
</el-form-item>
<el-form-item label="记住用户">
<el-switch v-model="loginForm.status" />
</el-form-item>
<el-form-item>
<el-button color="#00608c" style="width: 100%" @click="submitLogin">登录</el-button>
</el-form-item>
</el-form>
<div class="isregister">没有账号？
<span @click="register">点击注册</span>
</div>
</div>
</LoginBackVue>
</template>
<script>
import LoginBackVue from "@/components/LoginBack.vue";
export default{
data(){
return{
// 登录输入的数据
loginForm:{
username:"",
password:"",
status:false
},
// 登录表单的校验规则
loginRules:{
// username的校验规则
username:[{
required:true,
message:"用户名不能为空",
trigger:'blur'
}],
// password的校验规则
password:[{
required:true,
message:"密码不能为空",
trigger:'blur'
},
{
min:4,
max:18,
message:"密码长度需要在6-18位之间",
trigger:'blur'
}]
}
}
},
methods:{
// 点击登录的方法
async submitLogin(){
const response=await this.$api.login(this.loginForm)
if (response.status===200){
// 提示登录成功
this.$message({
type:"success",
message:"登录成功"
})
// 页面跳转(后面加)
this.$router.push({
"name":"home"})
}else{
this.$message({
type:"error",
message:response.data
})
}
},
// 点击注册
register(){
this.$message({
type:'warning',
message:"平台未开放注册功能"
})
}
},
components:{
LoginBackVue
}
}
</script>
<style scoped>
/* 设置登录框的宽高和位置居中 */
.login_box{
width: 500px;
height:350px;
margin: calc((100vh - 350px)/2) auto;
text-align: center;
color: white;
}
.isregister{
width: 100%;
text-align: left;
}
.isregister span{
color: turquoise;
cursor: pointer;
}
</style>
6. Envíe el formulario de verificación previa
vue——》Atributos globales $refs={}
Compruebe si hay un atributo de referencia en la página. Si es así, el atributo de referencia se agregará a $refs={}$
refs={ loginRef: elemento (componente) }
1. Vincule un método definido en métodos a través del atributo ref en la etiqueta el-form.
<el-form :model="loginForm" :rules="loginRules" ref="loginRef">
2. Definir una referencia en el método.
clickLogin(){
// 对登录的表单数据进行验证
this.$refs['loginRef'].validate((res)=>{
if(res){
this.submitLogin()
}
})
},
3. Verificar previamente el formulario
methods:{
clickLogin(){
// 对登录的表单数据进行验证
this.$refs['loginRef'].validate((res)=>{
if(res){
this.submitLogin()
}
})
},
// 发送请求到后端
async submitLogin(){
const response=await this.$api.login(this.loginForm)
if(response.status===200){
// 提示登录成功
this.$message({
type:'success',
message:'登录成功'
})
// 页面跳转(后面加)
this.$router.push({
name:'index'})
}else{
this.$message({
type:'error',
message:response.data
})
}
},
register(){
this.$message({
type:'warning',
message:'平台暂时未开放注册功能'
})
}
},
7. Recuerde el número de cuenta y la contraseña.
1. Guardar ficha
window.sessionStorage.setItem('token',response.data.token)
2. Guardar nombre de usuario
window.sessionStorage.setItem('username',response.data.username)
3. Determine si es necesario recordar la cuenta y la contraseña del usuario y guarde la cuenta y la contraseña en localStorage.
Preste especial atención
a la necesidad de convertir this.loginForm a datos en formato json
if(this.loginForm.status){
// 将账号密码转换为json字符串
const uinfo=JSON.stringify(this.loginForm)
// 进行编码（加密）
const u=window.btoa(unescape(encodeURIComponent(uinfo)))
// 存储到localStorage
window.localStorage.setItem('uinfo：',u)
}
4. Lea la contraseña de la cuenta.
created(){
const uinfo=window.localStorage.getItem('uinfo')
// 判断是否有账号密码
if(uinfo){
// 进行解密
// const u= decodeURIComponent(escape(window.atob(uinfo)))
// 转化位js对象,保存到loginForm
this.loginForm =JSON.parse(uinfo)
}
}
5. Si no necesita recordar la cuenta y la contraseña, elimine la información en localStorage.
window.localStorage.removeItem('uinfo')
8. Página de inicio de sesión escrita
<template>
<LoginBackVue>
<div class="login_box">
<!-- 显示logo的地方 -->
<div class="log"></div>
<!-- 登录的表单 -->
<el-form :rules="loginRules" :model="loginForm" ref="loginRef">
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="loginForm.password" prefix-icon="Lock" placeholder="请输入密码"/>
</el-form-item>
<el-form-item label="记住用户">
<el-switch v-model="loginForm.status" />
</el-form-item>
<el-form-item>
<el-button color="#00608c" style="width: 100%" @click="clickLogin">登录</el-button>
</el-form-item>
</el-form>
<div class="isregister">没有账号？
<span @click="register">点击注册</span>
</div>
</div>
</LoginBackVue>
</template>
<script>
import LoginBackVue from "@/components/LoginBack.vue";
export default{
data(){
return{
// 登录输入的数据
loginForm:{
username:"",
password:"",
status:false
},
// 登录表单的校验规则
loginRules:{
// username的校验规则
username:[{
required:true,
message:"用户名不能为空",
trigger:'blur'
}],
// password的校验规则
password:[{
required:true,
message:"密码不能为空",
trigger:'blur'
},
{
min:4,
max:18,
message:"密码长度需要在6-18位之间",
trigger:'blur'
}]
}
}
},
methods:{
clickLogin(){
// 对登录的表单数据进行校验
this.$refs['loginRef'].validate((res) =>{
if(res){
this.submitLogin()
}
})
},
// 点击登录的方法
async submitLogin(){
const response=await this.$api.login(this.loginForm)
if (response.status===200){
// 保存token,用户名
window.sessionStorage.setItem('token',response.data.token)
window.sessionStorage.setItem('uname',response.data.username)
// 判断是否需要记住用户名和密码
if(this.loginForm.status){
//将账号密码信息保存到localStorage中
// 将账号密码转换为json字符串
const uinfo=JSON.stringify(this.loginForm)
// 存储到localStorage
window.localStorage.setItem('uinfo',uinfo)
}else{
window.localStorage.removeItem('uinfo')
}
// 提示登录成功
this.$message({
type:"success",
message:"登录成功"
})
// 页面跳转(后面加)
this.$router.push({
"name":"index"})
}else{
this.$message({
type:"error",
message:response.data
})
}
},
// 点击注册
register(){
this.$message({
type:'warning',
message:"平台未开放注册功能"
})
}
},
components:{
LoginBackVue
},
created(){
const uinfo=window.localStorage.getItem('uinfo')
// 判断是否有账号密码
if(uinfo){
// 进行解密
// const u= decodeURIComponent(escape(window.atob(uinfo)))
// 转化位js对象,保存到loginForm
this.loginForm =JSON.parse(uinfo)
}
}
}
</script>
<style scoped>
/* 设置登录框的宽高和位置居中 */
.login_box{
width: 500px;
height:350px;
margin: calc((100vh - 350px)/2) auto;
text-align: center;
color: white;
}
.isregister{
width: 100%;
text-align: left;
}
.isregister span{
color: turquoise;
cursor: pointer;
}
</style>