使用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 rel="external nofollow" href="register.vue" target="_blank" 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( nqdxm, 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; }