vue实现登录界面

使用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" 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(
? ? ? 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;
? }

来源：https://blog.csdn.net/Helloyaling/article/details/106794815