How to use the from form of vue ElementUI to achieve login effect
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!
