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


    开发时,不用每次登录都输入账号密码,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>
    
  • 相关阅读:
    浏览器组成
    Go!!!
    产假计算器地址
    flex 纵向布局,垂直换行,没有撑开父盒子宽度,求解??
    毕业档案
    进程与线程
    事件循环
    回调地狱
    错误优先回调
    组件 v-if 小心哦
  • 原文地址:https://www.cnblogs.com/lige1234/p/14792817.html
Copyright © 2020-2023  润新知