验证码的使用,tp5.02自带了一个验证码类,在我的项目中我是这样用的,官方手册中已经说的很详细了,下面请看具体文件;
login.html模板
<form action="login" method="post">
<ul>
<li><span class="glyphicon glyphicon-user"> </span> <input type="text" name="username" placeholder="账号"></li>
<li><span class="glyphicon glyphicon-lock"> </span> <input type="password" name="password" placeholder="密码"></li>
<li><span class="glyphicon glyphicon-envelope"></span> <input class="verify" type="text" name="verify" placeholder="验证码"><div class="verify v-img">{:captcha_img()}</div></li>
<li><input class="btn btn-info sub" type="submit" value="登录"></li>
</ul>
</form>
这是login.html表单部分,其中验证码的引入可以用两种方式
<div>{:captcha_img()}</div>
或者
<div><img src="{:captcha_src()}" alt="captcha" /></div>
我采用了第一种方式,两种方式随意选择;
点击更换验证码,我写在了外部js里面
login.html引用了jquery3.0.1
<script src="/js/jquery-3.1.0.min.js"></script>
说到这里,tp5.0.2,默认引用问public文件夹,不用再像tp3.2那样用__PUBLIC__的方式,直接把js,cs,img等文件夹放入public文件夹中就可以了,我是前端界面的css,js等内容放在了public文件夹下,后台的js,css文件放在了public文件夹下面的static文件夹中,例如如果要引用static文件中的js文件;
就要这样写<script src="/static/js/login.js"></script>;如果写成"./static.js/...“ 前面多个点;引用则不成功;
tp5.0.2还有另一种写法;这里暂时不做介绍,引入模板的时候会细说;
点击切换验证码的js我写在了login.js文件中
$(function() {
//验证码更换
var img = $('.v-img').find('img');
img.click(function() {
var src = img.attr('src');
src = src.substr(0,8) + '/' + Math.random();
$(this).attr('src', src);
// console.log(src);
})
})
表单提交的处理方法,写在了本控制器Index的login方法中,具体index.php控制器内容:
<?php
namespace app\admin\controller;
class Index extends Common {
/*
* 首页
*/
public function index(){
p('你好');
}
/*
* 登录
*/
public function login() {
if (request()->isPost()) {
$captcha = input('post.verify')?input('post.verify'):$this->error('请输入验证码');
if(!captcha_check($captcha)){
$this->error('验证码错误');
}else{
return '验证码正确:'. $captcha;
};
}else{
return view();
}
}
}
tp5.0.2中,用助手函数request()->isPost();判断是否为post方式提交;
类比就知道request()->isGet();request()->isAjax();为判断get方式和ajax方式;其他具体可以查看手册详细了解;
input(),可以理解为tp3.2中的 I 函数;
今天暂时写到这里,如果有错误的地方,请指正,我会进款把整个项目写完,觉得有用的地方分享到这里。