vue入门：php+mysql+axios+vue写登录页面技术总结（待更新）

大概想要实现：从vue前端获取用户名密码信息，post给后台，经后台验证返回json信息，可以验证用户是否存在，可以完成登录操作（进阶设想实现：登录自动生成验证码、加密传输用户名密码（md5）、写cookie、session、了解vue声明周期（在页面载入时自动登录各种场景运用））

要点总结

1. 写PHP接口文件，接收前台post过来的json文件，验证用户信息是否存在数据库（进阶：防止恶意SQL注入），返回给后台验证结果
2. 写前端页面，先前端验证登录信息合法，post给后台PHP接口
3. 前端接受到后台的json会作出相应的登录响应

一直在想登录过程的逻辑关系，先想到一个不太成熟的逻辑方案，接下来还要边查资料边完善了QAQ

关键代码

• 在post数据前，函数会做相关验证（字段合法性验证待补），接着前端post给后台的数据，直接把用户名密码写在post参数里面，axios会把这些参数自动封装成json文件（所以后台PHP接收是json文件，而不是数组）

 login(){
        //前端验证数据
        if(!this.name || !this.password){   //若任意一个参数为空，则返回并提示错误
          this.errortip=true;
          this.errorTip='账号或密码有误';
          return;
         }
       //直接把参数写在post头部，还有好几种写法，区别不大
        axios.post('/api/test01/user.php',{
          Name:this.name,
          userPwd:this.password            
                }).then(response => {         //用户名和密码将转为json传到后台接口              
          let res = response.data;   //用res承接返回后台的json文件(像使用数组那样)
       if(res.status=='1'){   //显示登录结果             
           console.log('登录成功');
           this.errortip=true;
           this.errorTip='登录成功';
         }else {
           console.log('登录失败');
           this.errortip=true;
           this.errorTip='登录失败';

         }
        })
      },

• 后台PHP接口主要是判断前端传来的信息是否正确，写cookie、session，返回json信息

 
 header("Content-type: text/html; charset=utf-8");
 header('Access-Control-Allow-Origin:http:*');
 //写监听端口文件,还在调试中，目标限制特定端口访问，提高安全性


 $ro =file_get_contents('php://input');        //获取json文件
 $user=json_decode($ro,true);     //将json转为PHP数组，供操作
 $name=$user['Name'];
 $userPwd=$user['userPwd'];
 //注意！这里神坑，原本打算在SQL查询语句中直接用$user['Name']作为变量，结果语句中的符号识别特别严格，应用数组里面的还需要转义符，直接用会有错误，调试了很多次失败后还是老老实实赋值给变量传过去好了

 // 操作数据库
    $conn = mysql_connect('localhost','root','123456');   //连接数据库，根据自己的数据库填写
    $select = mysql_select_db('bianquan'); //选择数据库表
 $sql="select * from user where (u_name='$name') and (u_pwd='$userPwd')";
    //操作数据库，查询用户表是否存在该用户
     $result = mysql_query($sql,$conn) ; //执行数据库
     $re = mysql_num_rows($result);  //返回结果集的函数，若存在则返回1（一行结果集）
     mysql_free_result($result);   //释放查询结果内存（养成良好习惯）
     //官网对这个用法解释：mysql_free_result() 仅需要在考虑到返回很大的结果集时会占用多少内存时调用。在脚本结束后所有关联的内存都会被自动释放。

    //判断结果集，返回相应的查询结果给前端
    if($re!=0){
        $row['status']="1";
        $row['err']="0";
    }else{
        $row['status']="0";
        $row['err']="fail";
    }
echo(json_encode($row));
mysql_close($conn);//关闭数据库
 ?>

小结：进度有点慢，很多逻辑关系搞不清楚，代码都是一个个手打的，优化型有待提高