Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use vue ElementUI from form to achieve login effect, the article is very detailed, has a certain reference value, interested friends must read it!

1. Build basic styles through ElementUI

Do not know the official website of ElementUI https://element.eleme.cn/#/zh-CN to have a basic understanding of ElementUI.

1.1 the use of ElementUI first installs ElementUI in the project by directing npm I element-ui S

1.2 then find the from form on the official website and then you can have a basic layout.

So here's the framework I've already written.

Submit reset

The effect of these codes

Some ElementUI attributes are used here, but the editor does not explain that they are all on the official website, so I will put some screenshots to make it easier for you to see these attributes.

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

Then these two rules are bound to the account password box.

That's all the ElementUI layout can do.

two。 Use the click submit button to transfer the contents of the account password box to the background data

We can get the attributes in the tag better through ref.

Here is how to pass the contents of the input box to the background

Methods: {submitForm (fromName) {this.$ refs [fromName] .validate ((valid) = > {if (valid) {/ / if the proofreading passes Send the username and password login ({name:this.rulesForm.name, password:this.rulesForm.password}) .then ((data) = > {if (data.code==0) {localStorage.setItem ('token')) to the backend here Data.data.token) _ window.location.href='/'} if (data.code==1) {this.$message.error (data.mes)}})} else {console.log ('error submittance submission') Return false})}

One of the login is the method we obtained by encapsulating an interface at the back end.

This method is bound to the submit button

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

Then there is some information about our rendering login.

The above is all the contents of the article "how to use vue ElementUI's from form to achieve login effect". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.