本人也是第一次写这个功能,受下方博主博客启发机demo完成此功能,自己想重新归纳一下此代码,以防忘记。
原博客:[http://blog.csdn.net/chwow/article/details/78358784#comments]
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" href="login/css/normalize.css">
<link rel="stylesheet" href="login/css/style.css">
</head>
<body>
<div class="top">
<img src="login/img/1.png" alt="">
</div>
<div class="middle">
<div class="login_div">
<img src="login/img/3.png" alt="" class="change_login">
<img src="login/img/9.png" alt="" class="change_txt">
<div class="change_div">
<div class="con_top">
<img src="login/img/8.png" alt="">
<span>管理员登录</span>
</div>
<div class="con_bottom">
<div id="account">
<br>
<img src="login/img/6.png" alt="" class="userimg">
<input type="text" id="username" placeholder="请输入用户名">
<br>
<br>
<br>
<img src="login/img/7.png" alt="" class="passimg">
<input type="password" id="password" placeholder="请输入密码">
<br>
<br>
<br>
<br>
<div id="btnSubmit" class="btnSubmit">登录</div>
<br>
</div>
<div id="code" style="display: none;">
<div class="code_div">
<img src="" alt="" id="qrcodeimg" width="144px" height="145px">
</div>
<div class="code_txt">
<img src="login/img/18.png" alt="">
<div>
<p> 打开APP</p>
<p> 扫一扫登录</p>
</div>
</div>
</div>
<div class="hint">
<span>二维码有效期2分钟</span>
</div>
</div>
</div>
</div>
</div>
</body>
<script src='login/js/jquery-1.9.0.min.js'></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script src='login/js/index.js'></script>
<script src='static/h-ui.admin/js/login.js'></script>
</html>
js页面
$.ajax({
type: "GET",
url: "er/qrcodelogin/getqruuid.php",
data: {},
success: function (result) {
console.log(result);
var data = JSON.parse(result);
// console.log(data.code);
if (data.code == 1) {
$("#qrcodeimg").attr('src', 'http://qr.liantu.com/api.php?text=' + result);
console.log(data.data);
var min=0;
interval1= setInterval(function () {
min=min+1000;
$.ajax({
type: "GET",
url: "er/qrcodelogin/checkqruuid.php",
data: {'qruuid': data.data},
success: function (result) {
min=min+1000;
if(min==36000){
console.log(min);
alert("二维码已过期!");
clearInterval(interval1);
location.replace(location.href);
min=1000;
interval1();
}else{
console.log(min);
var data = JSON.parse(result);
if (data.code == 1) {
// alert('扫码成功(即登录成功),进行跳转.....');
//停止轮询
clearInterval(interval1);
location.href="index.html";
//TODO 拿到需要的信息 然后跳转什么的
}else if(data.code == 300){
alert('无此后台用户!');
//停止轮询
clearInterval(interval1);
location.href="login.html";
}
}
}
});
}, 1000);//1秒钟 频率按需求
}
}
});
getqruuid.php页面
<?php
/**
* 用于前端获取qruuid(二维码唯一ID)使用
*
* Created by PhpStorm.
* User: caohan
* Date: 2017/10/15
* Time: 下午2:59
*/
require('config.php');
//生成随机的UUID 用于二维码显示的内容 和 绑定用
$qruuid = substr(md5(uniqid(mt_rand(), true)), 0, 15);//生成uuid
//将生成的随机数保存至数据库
$sql="INSERT into t_pc_code(randnumber) values ('$qruuid')";
$query = sqlsrv_query($conn, $sql);
if (!$query) {
die(print_r(sqlsrv_errors(), true));
}
$arr = ['code'=>1, 'msg' => '生成qruuid成功','data'=>$qruuid];
echo json_encode($arr);
exit();
checkqruuid.php页面
<?php
session_start();
/**
* Created by PhpStorm.
* User: caohan
* Date: 2017/10/15
* Time: 下午3:17
*/
require('config.php');
// $mysqli = new mysqli($db_host, $db_user, $db_pwd, $db_name);
// if (mysqli_connect_error())
// echo mysqli_connect_error();
// $mysqli->set_charset("utf8");
$qruuid = $_GET['qruuid'];
$sql = "SELECT * from t_pc_code where randnumber='" . $qruuid . "'";
$result = sqlsrv_fetch_array(sqlsrv_query($conn, $sql));
if (!$result) {
die(print_r(sqlsrv_errors(), true));
}
if (!is_null($result['username'])){
$nowusername=$result['username'];
$sql2="SELECT * from t_webuser where username = '$nowusername' and isDeleted=0";
$result2 = sqlsrv_query($conn, $sql2);
if($row=sqlsrv_fetch_array($result2)){
$_SESSION['sydsdj_name']=$row['username'];
$_SESSION['sydsdj_roleType']=$row['roleType'];
$_SESSION['sydsdj_orgId']=$row['orgId'];
$_SESSION['sydsdj_orgName']=$row['orgName'];
$_SESSION['sydsdj_manage_id']=$row['id'];
$arr = ['code' => 1, 'msg' => '登录成功', 'data' => $result];
}else{
$arr = ['code' => 300, 'msg' => '账号未注册!', 'data' => $result];
}
}else{
$arr = ['code' => 500, 'msg' => 'qruuid暂时未被绑定','data'=>$qruuid];
}
echo json_encode($arr);
exit();
?>
写给客户端存储用户账号的接口
<?php
// 指定允许其他域名访问
header('Access-Control-Allow-Origin:*');
require('config.php');
$username = $_REQUEST['username'];
$randnumber = $_REQUEST['randnumber'];
$result = sqlsrv_query($conn,"UPDATE t_pc_code set username='$username' where randnumber= '$randnumber'");
if (!$result) {
die(print_r(sqlsrv_errors(), true));
$arr = ['code' => 0, 'msg' => 'sy'];
}else{
$arr = ['code' => 1, 'msg' => 'sy'];
}
echo json_encode($arr);
?>
如有疑问可在下方评论——