填写默认账号密码模拟登录

Posted 2021-05-21 sunshineG

开发时，不用每次登录都输入账号密码,j节省很多开发时间

方法一：js实现，直接获取页面输入账号、输入密码、登录按钮，赋值点击事件就ok了

<input type="text" class="input_box"><input>
<input type="password" class="input_box"><input>
<input type="submit" id="login-btn" value="立即登录" />

(function(){
    document.getElementsByClassName(\'input_box\')[0].value="admin";
    document.getElementsByClassName(\'input_box\')[1].value="123456";
    document.getElementById(\'login-btn\').click()
})()

方法二：vue 项目中实现,只需要在data中forminfo 写下默认值就可以了

 <div class="login">
    <el-row class="login_bg">
      <el-col :span="8" class="login-box">
        <h3>xxxx管理系统</h3>
        <el-form :model="forminfo" ref="form" :rules="rules">
          <el-form-item prop="username">
            <el-input v-model="forminfo.username" placeholder="请输入用户名">
              <!--输入框前面的小图标，利用插槽添加图标组件  -->
              <template slot="prepend">
                <i class="el-icon-user"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="forminfo.password" show-password placeholder="请输入密码">
              <template slot="prepend">
                <i class="el-icon-lock"></i>
              </template>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="login-btn" @click="submit">立即登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>

<script>
import { mapActions } from "vuex";
export default {
  components: {},
  data() {
    return {
      forminfo: {
        username: "小呆呆",
        password: "123"
      },
      rules: {
        // 验证规则对象
        username: [{ required: true, message: "必填！", trigger: "blur" }],
        password: [{ required: true, message: "必填！", trigger: "blur" }]
      }
    };
  },
  methods: {
    ...mapActions({
      login: "user/login"
    }),
    submit() {
      //   表单验证
      this.$refs.form.validate(valid => {
        if (valid) {
          this.login(this.forminfo);
        }
      });
    }
  },
  created() {},
  mounted() {}
};
</script>