使用Vue实现简单的用户登录界面，登录成功以后查询账号用户类型进行相应的页面路由跳转，效果如下图所示：
HTML部分：
<div class="loginbody">
<div class="login">
<div class="mylogin" align="center">
<h4>登录</h4>
<el-form
:model="loginForm"
:rules="loginRules"
ref="loginForm"
label-width="0px"
>
<el-form-item
label=""
prop="account"
style="margin-top:10px;"
>
<el-row>
<el-col :span='2'>
<span class="el-icon-s-custom"></span>
</el-col>
<el-col :span='22'>
<el-input
class="inps"
placeholder='账号'
v-model="loginForm.account">
</el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item
label=""
prop="passWord"
>
<el-row>
<el-col :span='2'>
<span class="el-icon-lock"></span>
</el-col>
<el-col :span='22'>
<el-input
class="inps"
type="password"
placeholder='密码'
v-model="loginForm.passWord"
></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item style="margin-top:55px;">
<el-button
type="primary"
round
class="submitBtn"
@click="submitForm"
>登录
</el-button>
</el-form-item>
<div class="unlogin">
<router-link :to="{ path: '/forgetpwd'}">
忘记密码?
</router-link>
|
<router-link :to="{path: '/register'}">
<a href="register.vue" align="right">注册新账号</a>
</router-link>
</div>
</el-form>
</div>
</div>
</div>JS部分
import {mapMutations} from "vuex";
export default {
name: "Login",
data: function () {
return {
loginForm: {
account: '',
passWord: ''
},
loginRules: {
account: [
{required: true, message: "请输入账号", trigger: "blur"}
],
passWord: [{required: true, message: "请输入密码", trigger: "blur"}]
}
}
},
methods: {
...mapMutations(['changeLogin']),
submitForm() {
let self = this;
const userAccount = this.loginForm.account;
const userPassword = this.loginForm.passWord;
const userForm = new FormData();
userForm.append('userAccount', userAccount);
userForm.append('userPassword', userPassword);
this.axios.post('URL1', userForm
).then((res) => {
if (res.data == 0) {
self.$message({
type: 'error',
message: '密码错误，登陆失败！'
})
}
//token
self.sessiontoken = res.headers['sessiontoken'];
self.PageToken = Math.random().toString(36).substr(2);
sessionStorage.setItem('PageToken', self.PageToken);
self.changeLogin({sessiontoken: self.sessiontoken});
//登录成功
if (res.data == 1) {
self.axios.get("URL2"
).then((res) => {
if (res.data == null) {
self.$message({
type: 'error',
message: '查询失败！'
})
} else {
if (res.data.userType == 0) {
self.$router.push({path: '/supermana', replace: true})
} else if (res.data.userType == 1) {
self.$router.push({path: '/manauser', replace: true})
} else if (res.data.userType == 2) {
self.$router.push({path: '/ordinauser', replace: true})
}
}
}).catch((error) => {
console.log(error)
})
}
})
},
}
}CSS部分
.loginbody {
overflow: scroll;
overflow-y: hidden;
overflow-x: hidden;
}
.login {
width: 100vw;
padding: 0;
margin: 0;
height: 100vh;
font-size: 16px;
background-position: left top;
background-color: #242645;
color: #fff;
font-family: "Source Sans Pro";
position: relative;
background-image: url('/static/images/background.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.mylogin {
width: 240px;
height: 280px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
padding: 50px 40px 40px 40px;
box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
opacity: 1;
background: linear-gradient(
230deg,
rgba(53, 57, 74, 0) 0%,
rgb(0, 0, 0) 100%
);
}
.inps input {
border: none;
color: #fff;
background-color: transparent;
font-size: 12px;
}
.submitBtn {
background-color: transparent;
color: #39f;
width: 200px;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
