大概想要实现:从vue前端获取用户名密码信息,post给后台,经后台验证返回json信息,可以验证用户是否存在,可以完成登录操作(进阶设想实现:登录自动生成验证码、加密传输用户名密码(md5)、写cookie、session、了解vue声明周期(在页面载入时自动登录各种场景运用))
要点总结
- 写PHP接口文件,接收前台post过来的json文件,验证用户信息是否存在数据库(进阶:防止恶意SQL注入),返回给后台验证结果
- 写前端页面,先前端验证登录信息合法,post给后台PHP接口
- 前端接受到后台的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);//关闭数据库
?>
小结:进度有点慢,很多逻辑关系搞不清楚,代码都是一个个手打的,优化型有待提高