Example of implementing login effect with vue ElementUI's from form

1. Build basic styles through ElementUI

If you don’t know ElementUI, please visit the official website https://element.eleme.cn/#/zh-CN to get a basic understanding of ElementUI.

1.1 Use of ElementUI First install ElementUI in the project through the command npm i element-ui S

1.2 Then find the from form on the official website and then you can do the basic layout

So here is the framework I have written

<el-form
      label-position="top"
      label-width="100px" class="demo-ruleForm"
      :rules='rules'
      :model='rulesForm'
      status-icon
      ref='ruleForm'
    >
        <el-form-item label="username" prop="name">
            <el-input type="text" v-model="rulesForm.name"></el-input>
        </el-form-item>
 
        <el-form-item label="password" 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')">Submit</el-button>
            <el-button>Reset</el-button>
        </el-form-item>
    </el-form>

The effects of these codes

Some ElementUI properties are used here, so I won’t explain them here. They are all on the official website. So I’ll put some screenshots for you to check these properties.

Then the rules and model are used together to make some input boxes to enter rules

Then bind these two rules to the account and password box

ElementUI layout is just a few clicks

2. Click the Submit button to pass the contents of the account and password box to the background data

We can better get the attributes in the tag through ref

The following is the method to pass the content in the input box to the background

methods: {
    submitForm(fromName){
      this.$refs[fromName].validate((valid)=>{
          if(valid){
            //If the check passes, send the username and password to the backend 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.message)
              }
            })
          }else{
            console.log('error submit!!')
            return false
          }
      })
    }
  }

One of them is login, which is a method obtained by encapsulating an interface of the backend

This method is bound to the submit button

Then we enter the existing account password and click the submit button to log in.

Then we render some login information

Summarize

There are two steps to achieve a login effect: first use ElementUI to build the corresponding style --- "Click the submit button to pass the content in the account and password box to the background data

This is the end of this article about the example of using vue ElementUI's from form to achieve login effects. For more relevant vue Element from form login content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!