用前端渐进式Vue.js实现登录功能

使用Vue实现简单的用户登录界面，登录成功以后查询账号用户类型进行相应的页面路由跳转，效果如下图所示：

HTML部分：

登录

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;
}

注册功能实现

2、下面看一下具体的代码实现（使用的开发工具是HBuilder，有非常强大的提示功能，推荐）

首先是登录界面，我命名为login.html（这在代码的跳转中有作用），有几个我认为比较重要的地方我直接用//来注释了，但是小伙伴复制粘贴的时候需要把注释去掉，因为HTML注释语法不是这样的：

然后是注册页面，我把它命名为register.html