直播app系統原始碼,使用者登入後選擇記住密碼,下次自動填充密碼
阿新 • • 發佈:2022-04-14
直播app系統原始碼,使用者登入後選擇記住密碼,下次自動填充密碼實現的相關程式碼
HTML程式碼:
<div class="login">
<el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-loginForm">
<h1 class="title">
<i class="el-icon-s-promotion"></i>
管理系統
</h1>
<el-form-item label="賬號" prop="userId">
<el-input type="text" v-model="loginForm.userId" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="passWord">
<el-input type="password" v-model="loginForm.passWord" autocomplete="off"></el-input>
</el-form-item>
<el-form-item prop="rememberPwd">
<div style="float:left;">
<el-checkbox v-model="loginForm.remember" />
記住密碼
</div>
</el-form-item>
<el-form-item class="box">
<el-button type="primary" @click="submitForm('loginForm')">登入</el-button>
<el-button @click="resetForm('loginForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
元件化開發,使用elementUI來開發頁面,容易上手,效果也能達到。
JS程式碼:
return {
loginForm: {
remember:false
},
created() {
let account = sessionStorage.getItem("userId")
let password = sessionStorage.getItem("passWord")
// 如果存在賦值給表單,並且將記住密碼勾選
if(account){
this.loginForm.userId = account
this.loginForm.passWord = password
this.loginForm.remember = true
}
},
methods:{
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let _this=this;
this.axios.post('/api/checklogin',{
userId:_this.loginForm.userId,
passWord:_this.loginForm.passWord
}).then(response=>{
if(response.data.length){
if(this.loginForm.remember==true) {
sessionStorage.setItem("userId", this.loginForm.userId);
sessionStorage.setItem("passWord", this.loginForm.passWord);
}
_this.$store.commit('SAVE_USERINFO',response.data)//儲存
this.$message({
message: '恭喜你,登入成功',
type: 'success'
});
//頁面跳轉
this.$router.push("/Home");
}
else{
this.$message.error('請檢查使用者名稱或密碼');
}
})
} else {
return false;
}
});
}
}
HTML5的WebStorage提供了兩種API:localStorage(本地儲存)和sessionStorage(會話儲存),不同瀏覽器無法共享localStorage或sessionStorage中的資訊。相同瀏覽器的不同頁面間可以共享相同的 localStorage(頁面屬於相同域名和埠),但是不同頁面或標籤頁間無法共享sessionStorage的資訊。這裡需要注意的是,頁面及標籤頁僅指頂級視窗,如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面,那麼他們之間是可以共享sessionStorage的。我這裡是用sessionStorage進行功能測試,具體怎麼用根據功能要求來。
CSS程式碼:
.login{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.el-form{
width: 400px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 50px 45px ;
}
.el-form,.title{
font-size: 20px;
font-weight: bold;
text-align: center;
padding-bottom: 20px;
}
.el-form,.box{
padding-right:55px;
}
以上就是直播app系統原始碼,使用者登入後選擇記住密碼,下次自動填充密碼實現的相關程式碼, 更多內容歡迎關注之後的文章