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信息
<?php 
 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);//关闭数据库
 ?>

这里写图片描述

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

  • 5
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值