welcomeRegister_web/src/components/login/Login.vue

<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <div id="login_form">
          <div class="title-item">
            <div id="logo"></div>
            <div id="title">学费缴纳对账管理平台</div>
          </div>
          <el-form label-width="0px" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
            <el-form-item prop="uname">
              <el-input placeholder="请输入账号" maxlength="16" v-model="ruleForm.uname" prefix-icon="el-icon-login-user">
              </el-input>
            </el-form-item>
            <el-form-item prop="upass">
              <el-input placeholder="请输入密码" maxlength="16" type="password" v-model="ruleForm.upass"
                prefix-icon="el-icon-login-pass"></el-input>
            </el-form-item>
            <el-form-item>
              <!-- <el-button type="primary" @click="submitForm('ruleForm')">登 陆</el-button> -->
              <el-button type="primary" @click="onSubmit()">登 陆</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      var checkName = (rule, value, callback) => {
        console.log(rule, value, callback);
        if (!value) {
          return callback(new Error('请输入账号'));
        }
        setTimeout(() => {
          if (value.length < 5) {
            callback(new Error('账号长度不小于5位'));
          } else {
            callback();
          }
        }, 30);
      };
      var validatePass = (rule, value, callback) => {
        console.log(rule, value, callback);
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          uname: '',
          upass: ''
        },
        rules: {
          uname: [{
            validator: checkName,
            trigger: 'blur'
          }],
          upass: [{
            validator: validatePass,
            trigger: 'blur'
          }]
        },
        user_info: {}
      };
    },
    methods: {
      onSubmit() {
        this.getLogin(this.$Api.login)
      },
      //登录
      getLogin(url) {
        this.$axios.post(url + '?' + this.$qs.stringify({
            userName: this.ruleForm.uname,
            password: this.ruleForm.upass
          }), {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
              'Author': 'codingliang'
            }
          })
          .then(res => {
            if (res.data.code == 1) {
              this.user_info.userName = this.ruleForm.uname
              this.user_info.password = this.ruleForm.upass
              this.user_info.token = res.data.data.token
              let user_info_Str = JSON.stringify(this.user_info)
              sessionStorage.setItem('usr_info', user_info_Str)
              this.$message.success('用户登录成功')
              this.$router.push({
                path: '/index'
              })
            } else {
              this.$message.error('用户名或密码错误');
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
    }
  }
</script>

<style scoped>
  @import url("./login.css");
</style>