vue ElementUI的from表单实现登录效果的示例

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

1.通过ElementUI构建基本的样式

不了解ElementUI官方网站 https://element.eleme.cn/#/zh-CN 对 ElementUI 进行基本的了解.

1.1 ElementUI的使用首先在项目中通过指令 npm i element-ui S 安装ElementUI

1.2 然后在官网中找到 from表单然后就可以基本的布局了

那么下面是我已经写好的框架

<el-form
      label-position="top"
      label-width="100px" class="demo-ruleForm"
      :rules='rules'
      :model='rulesForm'
      status-icon
      ref='ruleForm'
    >
        <el-form-item label="用户名" prop="name">
            <el-input type="text" v-model="rulesForm.name"></el-input>
        </el-form-item>
 
        <el-form-item label="密码" prop="password">
            <el-input type="password"  v-model="rulesForm.password"></el-input>
        </el-form-item>
 
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button>重置</el-button>
        </el-form-item>
    </el-form>

这些代码对应的效果

其中有用到一些 ElementUI 一些属性此处小编就不解释了官网上都有那么我就放一些截图方便大家查看这些属性

然后其中 rules和model 配合使用做一些input框输入规则

然后这两个规则绑定给账号密码框

ElementUI 布局就这么点操作

2.用点击提交按钮将将账号密码框内的内容传给后台数据

我们通过 ref 可以更好的拿到标签内的属性

下面是将输入框内的内容传给后台的方法

methods: {
    submitForm(fromName){
      this.$refs[fromName].validate((valid)=>{
          if(valid){
            //如果校检通过，在这里向后端发送用户名和密码
            login({
              name:this.rulesForm.name,
              password:this.rulesForm.password
            }).then((data)=>{
              if(data.code==0){
                localStorage.setItem('token',data.data.token)
                window.location.href='/'
              }
              if(data.code==1){
                this.$message.error(data.mes)
              }
            })
          }else{
            console.log('error submit!!')
            return false
          }
      })
    }
  }

其中有一个 login 是我们封装后端的一个接口所得的方法

这个方法绑定给提交按钮

然后我们输入已有的账号密码点击提交按钮就可以登录了

然后就是我们渲染登录的一些信息了