Article catalogue
preface
This article mainly explains how to use vue to realize the jump between three pages and the realization of login status. css is still studying hard, so the interface is ugly lol
requirement:
1. Three pages: Login, Register and Home
2. Use route route to realize logical jump of different pages
3. Login status
- When opening a web page, regardless of the route entered, first judge whether it is already in login status. If the user is in login status, the home page will be displayed directly; Otherwise, the login page is forced to be displayed
- If the user does not choose to remain logged in, it will be logged in when the browser is closed and the page is accessed again
- If the user chooses to remain logged in, it will be logged in when the browser is closed and the page is accessed again
- After exiting the login, change the status to not keep the login status
1, Simple implementation of page
1. Login page
code implementation
<template>
<div id="background">
<div class="container">
<form action="">
<h1>Login</h1>
<div class="form">
<div class="item">
<label>user name:</label><input type="text" name="username" v-model.trim="name" placeholder="enter one user name">
<!-- v-model Transfer the input value to name variable -->
<br/>
</div>
<div class="item">
<label>password:</label><input type="password" name="password" v-model.trim="password" placeholder="Please input a password">
<br/>
</div>
<div class="keep">
<input @click="handlesave" id="yes" type="radio" value="0" ><!-- Click Select -->
<label for="yes">Stay logged in</label>
</div>
</div>
</form>
<button type="submit" @click.prevent="handlelogin">Sign in </button>
<!-- v-on Click the button to trigger handlelogin method -->
<button @click.prevent="handleregister">register</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. Registration page
code implementation
<template>
<div id="background">
<div id="contain">
<h1>Register</h1>
<div class="form">
<label>user name:</label><input type="text" v-model.trim="name"><br/>
</div>
<div class="form">
<label>password:</label><input type="password" v-model.trim="password"><br/>
</div>
<div class="form">
<label>Email:</label><input type="email" v-model.trim="mail"><br/>
</div>
<div class="form">
<label>cell-phone number:</label><input type="tel" v-model.trim="tel"><br/>
</div>
<button @click.prevent="handlefinish">Submit</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. Home page (display personal information)
code implementation
<template>
<div id="bg">
<div id="container">
<h1>personal information</h1>
<p><span>full name:</span>{{sname}}</p>
<p><span>mailbox:</span>{{smail}}</p>
<p><span>cell-phone number:</span>{{stel}}</p>
<button @click.prevent="logout">sign out</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;
}
2, Logical implementation
Note: localStorage is used to store data here
Use of localstorage.1
localStorage.setItem(string key,string value) adds a key value pair to the store
localStorage.getItem(string key) gets the corresponding key value
2. Function realization
Sign in
<script>
export default {
data(){
return{
name:"",//Name, bind and listen with v-model, and assign the input string to the name variable
password:"",//password
st:"false",//false means do not save login
};
},
methods:{
handlelogin:function()
{
if(this.name===localStorage['name'] && this.password===localStorage['password'])
{
this.$router.replace('/Home');//If the entered name and password are correct, the route jumps to the personal page
}
else if(this.name==='')//Name is empty
{
alert('User name cannot be empty');
}
else if(this.password==='')//Password is empty
{
alert('Password is not empty');
}
else{
alert('The account does not exist. Please login after registering');//No such number found
}
},
handleregister:function()
{
this.$router.replace('/register')//Click the registration button to jump to the registration page
},
//Click keep login to trigger handlesave
handlesave:function(){
this.st="true";//Modify login status to true
localStorage.setItem('s',this.st);
console.log(localStorage.s);
}
}
};
</script>
register
<script>
export default {
name:'register',
props: {
msg: String
},
data(){
return{
name:"",
password:"",
mail:"",
tel:""
};
},methods:{
//Click the finish button to trigger handlefinish
handlefinish:function()
{
if(localStorage['name']===this.name)
{
alert("User name already exists");//Cannot register if user name already exists
}
else if(this.name==='')
{
alert("User name cannot be empty");
}
else{//Store new user information to localStorage
localStorage.setItem('name',this.name);
localStorage.setItem('password',this.password);
localStorage.setItem('mail',this.mail);
localStorage.setItem('tel',this.tel);
localStorage.setItem('s',"false");
alert("login was successful");
this.$router.replace('/Login');//After registration, jump to the login page
}
}
}
};
</script>
homepage
<script>
export default {
name:'Home',
data(){
return{//Get user information to the home page
sname:localStorage.getItem('name'),
smail:localStorage.getItem('mail'),
stel:localStorage.getItem('tel'),
isAuth:"",//Do you want to stay logged in
};
},
methods:{
//When you click the exit button, the login status will not be saved
logout:function()
{
this.isAuth="false";//Modify login status
localStorage.setItem('s',this.isAuth);
this.$router.replace('/login');//Page Jump to login page
}
}
}
</script>
Routing profile
The global front guard of the navigation guard is used to maintain the login status. When users visit the page again, they can directly enter the home page without logging in again.
The general syntax is as follows:
router.beforeEach((to,from,next)=>{
//Specific operations are performed here
//next call
})
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 = [
{
//Here, you need to default the root directory to Home, so that users can directly jump to the main page when logging in again while maintaining the login status
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)=>
{
//The login and registration pages can be accessed directly, and the main page needs to be divided into different situations
if(to.path=='/login')
{
next();
console.log(localStorage.s);
}
else if(to.path=='/register')
{
next();
}
else
{
if(from.path=="/login")//From the login page, you can directly enter the main page through login
{
next();
}
else{
//Enter from / and directly enter the main page next if the login status is true
if(localStorage.s === "true")
{
next();
console.log(localStorage['s'])
}
else {//If the login status is false, you will jump to the login page and need to log in to enter the main page
next('/login');
console.log("Login required")
}
}
}
})
export default router;
summary
In this task, we need to pay attention to the difference between localStorage and sessionStorage. Both can be used to store data, but localStorage will retain the original data. Even if the browser is closed, the data still exists. sessionStorage will not be retained, and the data will be destroyed after closing the browser. Since the user is required to reopen the browser while staying logged in, he can directly enter the main page without logging in, so he needs to use localStorage.