1”设置路由：
//展示手机登录页面
Route::get('admin','admin\AdminController@admin');
2：html页面
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link href="/static/static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css"/>
<link href="/static/static/h-ui.admin/css/H-ui.login.css" rel="stylesheet" type="text/css"/>
<link href="/static/static/h-ui.admin/css/style.css" rel="stylesheet" type="text/css"/>
<link href="/static/lib/Hui-iconfont/1.0.8/iconfont.css" rel="stylesheet" type="text/css"/>
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>后台登录 - H-ui.admin v3.1</title>
<meta name="keywords" content="H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<meta name="description" content="H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
<input type="hidden" id="TenantId" name="TenantId" value=""/>
<div class="header"></div>
<div class="loginWraper">
<div id="loginform" class="loginBox">
<form class="form form-horizontal">
<div class="row cl">
<label class="form-label col-xs-3"><i class="Hui-iconfont"></i></label>
<div class="formControls col-xs-8">
<input id="phone" name="" type="text" value="18303550213" class="input-text size-L"
style="width: 200px">
<button type="button" class="btn btn-primary" style="width: 50px" id="dyMobileButton">发送</button>
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-3"><i class="Hui-iconfont"></i></label>
<div class="formControls col-xs-8">
<input id="test_code" name="" type="password" value="3898" placeholder="验证码"
class="input-text size-L" style="width: 200px">
</div>
</div>
<div class="row cl">
<div class="formControls col-xs-8 col-xs-offset-3">
<input name="" id="phoneLogin" type="button" class="btn btn-success radius size-L"
value=" 登 录 ">
<input name="" type="reset" class="btn btn-default radius size-L"
value=" 取 消 ">
</div>
</div>
</form>
</div>
</div>
>
<script type="text/javascript" src="/static/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/static/static/h-ui/js/H-ui.min.js"></script>
<!--此乃百度统计代码，请自行删除-->
<script>
$('#dyMobileButton').click(function () {
var _token = "{{csrf_token()}}";
var phone = $('#phone').val();
if (phone == '') {
alert('手机号不能为空');
return false;
} else if (!/^1[3-9]\d{9}$/.test(phone)) {
alert('手机号规则不正确');
return false;
}
//短信发送限制
var time = 60;
setInterval(function () {
time--;
if (time > 0) {
//开始倒计时
$('#dyMobileButton').html('重新发送，还剩：' + time + '秒');
$('#dyMobileButton').prop('disabled', true);
} else {
//结束倒计时
$('#dyMobileButton').html('发送验证码');
$('#dyMobileButton').prop('disabled', false);
}
}, 1000);
//请求短信接口
$.ajax({
'url': '{{url('sendMsg')}}',
'type': 'POST',
'data': {
_token: _token,
sendPhone: phone
},
'datatype': 'json',
'success': function (res) {
console.log(res);
return;
},
'error': function (error) {
console.log(error);
return false;
},
});
});
//点击登录按钮触发Ajax
$('#phoneLogin').click(function () {
var test_code = $('#test_code').val();
var _token = "{{csrf_token()}}";
var phone = $('#phone').val();
if (test_code == '') {
alert('验证码为填');
return false;
}
if (phone == '') {
alert('手机号为未填');
return false;
}
//请求短信接口
$.ajax({
'url': '{{url('phonelogin')}}',
'type': 'POST',
'data': {
_token: _token,
sendPhone: phone,
test_code: test_code
},
'datatype': 'json',
'success': function (res) {
console.log(res);
if (res.code == 500) {
alert('验证码错误，请重新填写')
}
if (res.code == 200) {
alert('登录成功')
window.location.href = "{{url('index')}}"
}
},
'error': function (error) {
console.log(error);
return false;
},
});
})
</script>
<!--/此乃百度统计代码，请自行删除
</body>
</html>
3：设置路由，后端验证
//手机验证码
Route::post('sendMsg','admin\AdminController@sendMsg');
//手机号登录
Route::post('phonelogin','admin\AdminController@phoneLogin');
4：控制器代码
public function sendMsg(Request $request)
{
//接受发送的手机号
$postsendPhone = $request->post('sendPhone');
// 数据库验证，如果没有手机号，先进行注册
$test_phone = User::where('phone', $postsendPhone)->first();
if ($test_phone == false) {
return ['code' => 500, 'meg' => '数据库没有这个手机号', 'data' => ''];
}
$statusStr = array(
"0" => "短信发送成功",
"-1" => "参数不全",
"-2" => "服务器空间不支持,请确认支持curl或者fsocket，联系您的空间商解决或者更换空间！",
"30" => "密码错误",
"40" => "账号不存在",
"41" => "余额不足",
"42" => "帐户已过期",
"43" => "IP地址限制",
"50" => "内容含有敏感词"
);
// 手机号发送验证码
$smsapi = "http://api.smsbao.com/";
$user = "yanbing"; //短信平台帐号
$pass = md5("bin18303550213"); //短信平台密码
$code = rand('1000', '9999');
$content = "【百味园】您的验证码是$code,30秒内有效.若非本人操作请忽略此消息。";//要发送的短信内容
$phone = $postsendPhone;//要发送短信的手机号码
$sendurl = $smsapi . "sms?u=" . $user . "&p=" . $pass . "&m=" . $phone . "&c=" . urlencode($content);
$result = file_get_contents($sendurl);
// 将验证码储在缓冲，设置过期时间为一分钟
cache([$phone => $code],1);
cache([$phone.'time'=>time()]);
return ['code' => 200, 'meg' => $statusStr[$result], 'data' => ''];
}
//登录触发
public function phoneLogin(Request $request)
{
$login=$request->post();
// 接受验证码
$test_code=$login['test_code'];
// 取出储的验证码
$redisCode= cache($login['sendPhone']);
// return ['code' => 200, 'meg' => 'ok', 'data' => $redisCode];
// 进行对比
if ($test_code!=$redisCode){
//返回前台
return ['code' => 500, 'meg' => '验证码错误', 'data' => ''];
}
// 验证成功，返回前台
return ['code' => 200, 'meg' => 'ok', 'data' => ''];
}
5：模型验证数据库有没有手机号
<?php
namespace App\models;
use Illuminate\Database\Eloquent\Model;
class User extends Model
{
//
protected $table='user';
}
效果图：