界面
<template>
<div class="login-wrap">
<div class="ms-login">
<div class="ms-title">後臺管理系統</div>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="請輸入用戶名">
<el-button slot="prepend" icon="el-icon-lx-people"></el-button>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" placeholder="請輸入密碼" v-model="ruleForm.password"
@keyup.enter.native="submitForm('ruleForm')">
<el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
</el-input>
</el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm('ruleForm')">登錄</el-button>
</div>
</el-form>
</div>
</div>
</template>
邏輯
<script>
export default {
data: function () {
return {
ruleForm: {
username: '',
password: ''
},
rules: {
username: [
{required: true, message: '請輸入用戶名', trigger: 'blur'}
],
password: [
{required: true, message: '請輸入密碼', trigger: 'blur'}
]
}
}
},
//頁面加載調用獲取cookie值
mounted() {
this.getCookie();
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$axios.post('admin/login',this.$qs.stringify(this.ruleForm))
.then((res) => {
console.log(res);
if (res.data.code == 0) {
localStorage.setItem('ms_username', this.ruleForm.username);
//保存用戶名和密碼到cookie
this.setCookie(this.ruleForm.username,this.ruleForm.password,7);
//跳轉
this.$router.push('/');
this.$message.success(res.data.message);
} else {
console.log(res.data.message);
this.$message.warning(res.data.message);
}
}).catch((res) => {
console.log(res);
});
} else {
console.log('error submit!!');
return false;
}
});
},
//設置cookie
setCookie(c_name, c_pwd, exdays) {
var exdate = new Date(); //獲取時間
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天數
//字符串拼接cookie
window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
},
//讀取cookie
getCookie: function() {
if (document.cookie.length > 0) {
var arr = document.cookie.split('; '); //這裏顯示的格式需要切割一下自己可輸出看下
for (var i = 0; i < arr.length; i++) {
var arr2 = arr[i].split('='); //再次切割
//判斷查找相對應的值
if (arr2[0] == 'userName') {
this.ruleForm.username = arr2[1]; //保存到保存數據的地方
} else if (arr2[0] == 'userPwd') {
this.ruleForm.password = arr2[1];
}
}
}
},
}
}
</script>
參考鏈接https://www.cnblogs.com/nxmin/p/8386031.html