vue和element-ui实例

登陆界面

<template>
    <div class="login-box fillconctain">
      <section class="form-contianer">
        <div class="login-header">
          <h4>HXC后台管理系统</h4>
        </div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <h4 class="title">欢迎登录平台</h4>
          <el-input class="input-text" type="username" placeholder="用户名" v-model="ruleForm.username" autocomplete="off"></el-input>
          <el-input class="input-text" type="password" placeholder="密码" v-model="ruleForm.pass" autocomplete="off"></el-input>
          <el-checkbox v-model="checked">记住我</el-checkbox>
          <el-button class="submit_btn" type="primary" @click="submitForm('ruleForm')">登录</el-button>
          <p class="tip">温馨提示:</p>
          <p class="tip">未登录过的用户,自动注册</p>
          <p class="tip">注册过的用户可以凭借账户密码登录</p>
        </el-form>
        
      </section>
    </div>
</template>

<script>
import {
   mapActions,mapState} from 'vuex'
  export default {
   
    data() {
   
      return {
   
        ruleForm: {
   
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
   
          username: [
            {
    trigger: 'blur' }
          ],
          pass: [
            {
    trigger: 'blur' }
          ]
        },
        checked: true
      };
    },
    //声明周期钩子函数
    mounted(){
   
      if(!this.adminInfo.id){
   
        this.getAdminData();
      }
    },
    computed:{
   
      ...mapState(['adminInfo'])
    },
    //计算属性  => 监听 adminInfo的变化
    methods: {
   
      ...mapActions(["getAdminData"]),
      async submitForm(formName) {
   
        this.$refs[formName].validate((valid) => {
   
          if (valid) {
   
            this.$message({
   
              type:'success',
              message:'登录成功'
            })
            this.$router.push("manage");
          } else {
   
            this.$notify.error({
   
              title:"错误",
              message:'请输入正确的用户名或密码',
              offset:100
            })
            return false;
          }
        });
      },
      watch:{
   
        adminInfo:function(newValue){
   
          console.log('ssa')
          if(newValue.id){
   
            this.$message({
   
              type:'success',
              message:'检测到您之前登陆过,将自动登录'
            })
            this.$router.push('manage')