Vue+PHP做用户注册登录功能

Vue + PHP 做用户注册登录功能

对于一款应用来说，最基本的就是用户的注册和登录功能，这篇博客就总结一下在vue项目中如何使用PHP来做用户的注册和登录功能。

登录部分：

HTML

<div id="app" class="container">
   <div style="text-align:center;margin-top:60px;">
       <img src="../src/icon/vlogo.png" style="width:20rem;height:auto;" alt="">
   </div>
   <form class="form middle">
       <br>
       <div class="form-group">
           <input type="text" class="form-control input100" v-model="userid" placeholder="用户名 / 邮箱"/>
       </div>
       <div class="form-group">
           <input type="password" class="form-control input100" v-model="usercode" placeholder="密码" @keyup.13="login" />
       </div>
       <label class="errorMsg" v-if="errorFlag" v-cloak >{
  { errorMsg }}</label>
       
       <div class="form-group btn100">
           <button type="button" @click="login" class="btn btn-primary btn100">登陆</button>
       </div>
       <div class="form-group btn100">
           <a href="./registermobile.html" class="btn btn-default btn100">注册</a>
       </div>
       <h6 style="text-align:right;">
           <a href="./findpassword.html" style="margin-right:2rem;">找回密码</a>
       </h6>
       <hr>         
       <h6 style="text-align:center;margin-top:3rem;">
           <a style="margin-right:2rem;">© vchenzhe</a>
           <a href='http://www.beian.gov.cn' style="text-decoration:none;color:black;" target='_blank'>闽ICP备19008574号-1</a>
       </h6> 
   </form>    
</div>

Javascript

import $ 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 = '请输入用户名和密码';
                    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 = '账号或密码错误';
                                thisvue.usercode = '';
                                thisvue.errorFlag = true;
                            }
                        }
                    })

                }
            }
        }
    })
})

PHP

<?php
	session_start();
	header('Content-Type:application/json; charset=utf-8');
	$myid = $_POST[userid]; 
	$mycode = md5($_POST[usercode]);
	if($myid!=''