前言

本文主要讲解用vue来实现三个页面之间的跳转以及登录状态的实现，css还在努力学习中，所以界面做的很丑lol

要求：

1.三个页面，登录页面Login，注册页面Register，主页Home
2.用route路由实现不同页面逻辑跳转
3.登录状态

打开网页时，不论输入的路由是什么，先判断是否已是登录状态，如果用户为登录状态，则直接显示主页；否则强制显示登录页

如果用户未选保持登录状态，则要在关闭浏览器后，再重新访问页面时，为未登录状态

如果用户选择了保持登录状态，则在关闭浏览器后，再重新访问页面时，为已登录状态

退出登录后，更改状态为不保持登录状态

一、页面的简单实现

1.登录页面

代码实现

<template>
<div id="background"><div class="container"><form action=""><h1>Login</h1><div class="form"><div class="item"><label>用户名：</label><input type="text" name="username" v-model.trim="name" placeholder="请输入用户名"><!-- v-model把输入的值传输给name变量 --><br/></div><div class="item"><label>密码：</label><input type="password" name="password" v-model.trim="password" placeholder="请输入密码"><br/></div><div class="keep"><input @click="handlesave" id="yes" type="radio" value="0" ><!-- 点击选中 --><label for="yes">保持登录状态</label></div></div></form><button  type="submit" @click.prevent="handlelogin">登录           </button><!-- v-on点击按钮触发handlelogin方法 --><button  @click.prevent="handleregister">注册</button><router-view></router-view></div>
</div>
</template>
//css
<style scoped>
#background{width: 100%;height: 100%;background: url("../assets/bg2.jpg");background-size:100% 100%;position: fixed;top: 0;left: 0;
}.container{width: 480px;height: 300px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background:#00000090;text-align: center;border-radius: 20px;margin-top: 10px;
}
.container h1{color: aliceblue;margin-left: 20px;
}
.item {color: white;margin-left: 15%;margin-top: 35px;font-size: 20px;text-align: left;
}
.item label{float:left;width: 5em;margin-right: 1em;text-align: right;
}
input{margin-left: -5px;padding: 4px;border: solid 1px #4e5ef3;outline: 0;font: normal 13px/100% Verdana,Tahoma,sans-serif;width: 200px;height: 23px;background:#f1f1f190;box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
button{position: relative;height: 33px;width: 100px;background: rgba(35, 19, 252, 0.425);border-radius: 10px;margin-top: 18px;box-shadow: none;color: white;margin-left: 40px;margin-right: 10px;}
.keep{color: white;
}
.keep input{width: 15px;height: 15px;margin-top: 7px;margin-left: 10px;margin-right: 10px;
}</style>

2.注册页面

代码实现

<template><div id="background"><div id="contain"><h1>Register</h1><div class="form"><label>用户名：</label><input type="text" v-model.trim="name"><br/></div><div class="form"><label>密码：</label><input type="password" v-model.trim="password"><br/></div><div class="form"><label>邮箱：</label><input type="email" v-model.trim="mail"><br/></div><div class="form"><label>手机号：</label><input type="tel" v-model.trim="tel"><br/></div><button @click.prevent="handlefinish">提交</button></div></div>
</template>
//css
<style scoped>
#background{width: 100%;height: 100%;background: url("../assets/bg2.jpg");background-size:100% 100%;position: fixed;top: 0;left: 0;
}
#contain{width: 580px;height: 560px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background:#00000090;text-align: center;border-radius: 20px;
}
#contain h1{color: white;
}
.form{color: white;margin-left: 20%;margin-top: 60px;font-size: 20px;text-align: left;
}
label{float:left;width: 5em;margin-right: 1em;text-align: right;
}
input,textarea{margin-left: 10px;padding: 4px;border: solid 1px #4e5ef3;outline: 0;font: normal 13px/100% Verdana,Tahoma,sans-serif;width: 200px;height: 20px;background:#f1f1f190;box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
input:hover,textarea:hover,input:focus,textarea:focus{border-color:#0d0aa1;}
button{position: relative;height: 33px;width: 150px;background: rgba(35, 19, 252, 0.425);border-radius: 10px;margin-top: 38px;box-shadow: none;color: white;margin-left: 40px;
}
</style>

3.主页（显示个人信息）

代码实现

<template><div id="bg"><div id="container"><h1>个人信息</h1><p><span>姓名：</span>{{sname}}</p><p><span>邮箱:</span>{{smail}}</p><p><span>手机号：</span>{{stel}}</p><button @click.prevent="logout">退出</button></div></div>
</template>
//css
<style scoped>
#container{width: 480px;height: 300px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background:#00000090;text-align: center;border-radius: 20px;margin-top: 10px;color: white;
}
#bg{width: 100%;height: 100%;background: url("../assets/bg2.jpg");background-size:100% 100%;position: fixed;top: 0;left: 0;
}
p{font-size: 20px;margin-top: 20px;text-align: left;margin-left: 32%;}
button{position: relative;height: 33px;width: 150px;background: rgba(35, 19, 252, 0.425);border-radius: 10px;margin-top: 10px;box-shadow: none;color: white;margin-left: 10px;
}

二、逻辑实现

说明：这里存储数据用的是localStorage

1.localStorage的使用

localStorage.setItem(string key,string value) 将键值对添加到存储中
localStorage.getItem(string key) 获取对应的键值

2.功能实现

<script>
export default {data(){return{name:"",//姓名，用v-model绑定监听，将输入的字符串赋值给name变量password:"",//密码st:"false",//false为不保存登录};},methods:{handlelogin:function(){if(this.name===localStorage['name'] && this.password===localStorage['password']){this.$router.replace('/Home');//如果输入的名字以及密码正确路由跳转至个人页面} else if(this.name==='')//名字为空{alert('用户名不为空');}else if(this.password==='')//密码为空{alert('密码不为空');}else{alert('账号不存在，请注册后登录');//查无此号}},handleregister:function(){this.$router.replace('/register')//点击注册按钮，跳转至注册页面},//点击保持登录状态触发handlesavehandlesave:function(){this.st="true";//修改登录状态为truelocalStorage.setItem('s',this.st);console.log(localStorage.s);}}
};
</script>

注册

<script>
export default {name:'register',props: {msg: String},data(){return{name:"",password:"",mail:"",tel:""};},methods:{//点击完成按钮触发handlefinishhandlefinish:function(){if(localStorage['name']===this.name){alert("用户名已存在");//如果用户名已存在则无法注册}else if(this.name===''){alert("用户名不能为空");}else{//将新用户信息存储到localStoragelocalStorage.setItem('name',this.name);localStorage.setItem('password',this.password);localStorage.setItem('mail',this.mail);localStorage.setItem('tel',this.tel);localStorage.setItem('s',"false");alert("注册成功");this.$router.replace('/Login');//完成注册后跳转至登录页面}}}
};
</script>

主页

<script>
export default {name:'Home',data(){return{//获取用户信息到主页sname:localStorage.getItem('name'),smail:localStorage.getItem('mail'),stel:localStorage.getItem('tel'),isAuth:"",//是否保持登录状态};},methods:{//当点击退出按钮，将不保存登录状态logout:function(){this.isAuth="false";//修改登录状态localStorage.setItem('s',this.isAuth);this.$router.replace('/login');//页面跳转至登录页面}}
}
</script>

路由配置文件

通过使用导航守卫的全局前置守卫来实现保持登录状态下，用户重新访问页面时直接进入主页，无需再次登录。
大致语法如下：
router.beforeEach((to,from,next)=>{
//这里执行具体操作
//next调用
})

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/components/Home.vue";
import login from "@/components/login.vue";
Vue.use(VueRouter);const routes = [{//这里需要将根目录默认为Home，方便实现用户在保持登录 状态下再次登录时直接跳转至主页面path:"/",redirect:{name:"Home"}},{path: "/Home",name: "Home",component: Home,},{path: "/login",name: "login",component:login},{path: "/register",name: "register",component: () =>import("@/components/register.vue")}
];const router = new VueRouter({mode:'history',routes
});router.beforeEach((to,from,next)=>
{//登录及注册页面可以直接进入,而主页面需要分情况if(to.path=='/login'){next();console.log(localStorage.s);}else if(to.path=='/register'){next();}else{if(from.path=="/login")//从登录页面可以直接通过登录进入主页面{next();}else{//从/进入,如果登录状态是true，则直接next进入主页面if(localStorage.s === "true"){next();console.log(localStorage['s'])}else {//如果登录状态是false，那么跳转至登录页面,需要登录才能进入主页面next('/login');console.log("需要登录")}}}
})
export default router;

总结

在此次任务中，需要注意的是localStorage和sessionStorage的区别，两者都可用来存储数据，但是localStorage会保留原始数据，即使关闭浏览器，数据仍然存在。而sessionStorage不会保留，关闭浏览器后数据被销毁。由于要求用户在保持登录状态下重新打开浏览器可以不用登录直接进入主页面，所以要用localStorage。

用vue实现注册页面、登录页面、主页之间跳转并保持登录状态【完整代码】相关推荐

计算机跳过密码直接登录密码,小编传授win10免密码自动登录怎么设置 win10跳过密码直接登录电脑的操作教程...
要是你在用系统的时候遇到了win10免密码自动登录怎么设置 win10跳过密码直接登录电脑的情况你会怎么办呢?有可能我们都会遇到win10免密码自动登录怎么设置 win10跳过密码直接登录电脑这样的情 ...
html页面数字滚动,Vue.js大屏可视化数据数字滚动翻转跳转效果（通俗易懂附完整代码）...
原文:Vue.js大屏可视化数据数字滚动翻转跳转效果(通俗易懂附完整代码) 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果 ...
OAuth2.0 社交登录-Gitee springboot项目整合（微服务分布式）完整代码包括数据库、前、后端
文章目录社交登录(Gitee) 1.模拟请求项目整合 1.数据库增加字段 2.前端 2.后端社交登录(Gitee) 完成这个踩了很多坑,包括第一时间忘了浏览器缓存这回事以及微博一些平台申请社交登 ...
Django 20购物商城项目（注册、登录页面：生成动态验证码）
dDjango 20购物商城项目 1.安装pillow 2.在注册页面加入验证码 2.1.register.html (增加内容) 2.2.register.js(增加内容) 2.2.路由.视图(增加 ...
这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）...
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这 ...
用vue+element-ui快速写一个注册登录页面
vue+element-ui可以快速开发一个页面,免除大部分的css代码. 一.用表单来做: 1.代码:  <template><div ...
如何构建一个vue登录系统之登录页面
1. 在assets中新建一个css文件夹和imgs文件夹 2. 在src/views文件夹下新建一个Login.vue页面 3. 在src/main.js中引入全局公共样式文件style_publi ...
Vue + Spring Boot 项目实战（四）：前后端结合测试（登录页面开发）
前面我们已经完成了前端项目 DEMO 的构建,这一篇文章主要目的如下: ①打通前后端之间的联系,为接下来的开发打下基础 ②登录页面的开发(无数据库情况下) 文章目录一.后端项目创建 1.1. 项目/ ...
谷粒学院 Day12.登录页面模式、整合JWT、整合QQ邮箱、用户登录注册接口【后端】、用户登录注册【前端】
项目结构: 配置文件 application.properties配置类 spring.jackson.time-zone=GMT+8# nacos注册中心 spring.cloud.nacos.di ...

用vue实现注册页面、登录页面、主页之间跳转并保持登录状态【完整代码】

文章目录

前言

一、页面的简单实现

1.登录页面

2.注册页面

3.主页（显示个人信息）

二、逻辑实现

1.localStorage的使用

2.功能实现

登录

注册

主页

路由配置文件

总结

用vue实现注册页面、登录页面、主页之间跳转并保持登录状态【完整代码】相关推荐

最新文章

热门文章