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

This article mainly explains "vue plus php how to achieve login", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "vue plus php how to achieve login" bar!

Vue plus php login method: 1, create the login part of the code file; 2, create Javascript code; 3, in the vue project to use PHP to do user registration and login function.

This article operating environment: Windows7 system, PHP7.1 version, Dell G3 computer.

Vue + PHP for user registration and login function

For an application, the most basic is the user registration and login function, this blog summarizes how to use PHP to do user registration and login function in the vue project.

Login section: HTML

{{errorMsg}} login to retrieve the password ©vchenzhe Min ICP 19008574-1 Javascriptimport $from'. / js/jquery.js';import'. / css/mobilecommon.css' Import Vue from'.. / node_modules/vue/dist/vue.js';$ (function () {var vm = new Vue ({el: "# app", data: {userid:'', usercode:'', errorFlag:false, errorMsg:''}, methods: {login () {var thisvue = this) If (thisvue.userid=='' | | thisvue.usercode=='') {thisvue.errorMsg = 'Please enter your user name and password'; thisvue.errorFlag = true } else {$.ajax ({type:'POST', url:'../server/login.php', data: {userid:thisvue.userid Usercode:thisvue.usercode}, success:function (res) {if (res [0] .code = = 1) {thisvue.errorFlag = false _ window.location.href= ". / homemobile.html";} else {thisvue.errorMsg = 'wrong account or password'; thisvue.usercode ='' Thisvue.errorFlag = true;})}}) PHP Registration part HTML returns registration {{errorMsg}}

Get CAPTCHA get CAPTCHA sent ({{clock}} s) Registration × Message {{errorMsg}} confirm that the computer version of Fujian ICP is available at 19008574. -1 Javascriptimport $from'. / js/jquery.js' Import'. / css/mobilecommon.css';import Vue from'.. / node_modules/vue/dist/vue.js' $(function () {var vm = new Vue ({el: "# app", data: {errorMsg:'', errorFlag:0, / / enter the registration information userid:'', username:'', usercode:'', usercodes:'', usermail:'' / / verify the registration information code:'', btnGetCode:0, / / used to determine whether a CAPTCHA has been obtained The default is 0. After obtaining it once, it is changed to 1 testcode:0. / / it is used to determine whether the verification of CAPTCHA has been completed. The default is 0. Verify that through 1 clock:60, testUserId:false,// detects whether the current user name has been registered, testpass:false,// detects password security testmail:false, / / detects whether the mailbox has been registered}, methods: {testUserIdFunc () {/ / detect whether the user name has been registered var thisvue = this Var testall = / ^ [a-zA-Z] [a-zA-Z0-9] * $/; / / can only be numbers and letters if (thisvue.userid=='') {thisvue.testUserId = false; return 0 } else if (! testall.test (thisvue.userid)) / / check English and the number {this.errorFlag = 1; this.errorMsg = 'user name must start with English and can only be composed of English and numbers' } else if (thisvue.userid.length) Thank you for your reading, the above is the content of "vue plus php how to achieve login". After the study of this article, I believe you have a deeper understanding of how to achieve login with vue and php, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.