ThinkPhp5框架是一款基于MVC的轻量级开发框架，其模块化的搭建，简单有效，相比于之前的版本，是一次颠覆性的改变。本文，结合一些网站的常用功能，简要分析一下基本原理，小试牛刀一把。
相比于ThinkPhp3完全开发，ThinkPhp5快速入门，更加适合快速学习，掌握其主要组成，有一揽全局的开阔。
一、登录模块
- 填写登陆用户名和密码，登陆成功后跳转；关闭页面，在一定时间内重新登录，不用重新登录，直接跳转；原因在于服务器端保存包含该用户信息的session。
百度糯米登录.png
// 登录
public function login()
{
// 登录检测用户session是否存在，存在直接跳转页面，不存在继续登录
$user = session('o2o_user','', 'o2o');
if($user && $user->id) {
$this->redirect(url('index/index'));
}
return $this->fetch();
}
// 登录检测
public function logincheck()
{
//判定是否为post表单请求
if(!request()->isPost()) {
$this->error('提交不合法');
}
//获取表单数据
$data = input('post.');
//基于模型获取用户数据
try {
$user = model('User')->getUserByUsername($data['username']);
}catch (\Exception $e){
$this->error($e->getMessage());
}
//用户不存在或者用户存在状态不为1
if(!$user || $user->status != 1) {
$this->error('该用户不存在');
}
// 基于加盐字符串，md5加密判断密码
if(md5($data['password'].$user->code) != $user->password) {
$this->error('密码不正确');
}
// 登录成功，更新用户登录时间
model('User')->updateById(['last_login_time'=>time()], $user->id);
//把用户信息记录到session
session('o2o_user', $user, 'o2o');
$this->success('登录成功', url('index/index'));
}
二、验证码机制
- ThinkPhp5中的验证码使用灵活，学会使用即可，具体参照手册
//1- composer依赖管理工具安装验证码类库，自动安装到vendor文件夹
composer require topthink/think-captcha
//2- 页面中调用助手函数captcha_img()
<input type="text" name="verifycode" placeholder="请输入验证码">
<div>{:captcha_img()}</div>
//3- 在后台实现验证码校验，调用助手函数captcha_check()
if(!captcha_check($data['verifycode'])) {
// 校验失败
$this->error('验证码不正确');
}
//4- 实现点击自动刷新验证码图片
$js_src = "this.src='".captcha_src()."'";
return ' . ')';
//5- 助手函数位于vendor文件夹下面的helper.php中
三、Ajax异步获取数据
- Ajax用于于后台服务器进行少量的数据交互，被广泛使用，下面以我们经常填写的注册信息为例，点击左侧，右侧数据自动更新。
点击左侧，右侧自动更新.png
$(".cityId").change(function(){
//获取class为cityId的值
city_id = $(this).val();
//此为抛送到后端服务器的请求地址
url = SCOPE.city_url;
//组装数据
postData = {'id':city_id};
$.post(url,postData,function(result){
//回掉函数返回成功，则组装信息，填充html
if(result.status == 1) {
// 将信息填充到html中
data = result.data;
city_html = "";
$(data).each(function(i){
city_html += "<option value='"+this.id+"'>"+this.name+"</option>";
});
$('.se_city_id').html(city_html);
}else if(result.status == 0) {
$('.se_city_id').html('');
}
}, 'json');
});
四、图片上传
- 基于ThinkPhp5的文件上传机制，借助于uplodify插件，实现图片上传功能，uplodify插件学习。
图片上传.png
$(function() {
$("#file_upload").uploadify({
'swf' : SCOPE.uploadify_swf,
//自动跳转到该地址'{:url('api/image/upload')}'
'uploader': SCOPE.image_upload,
'buttonText' : '图片上传',
'fileTypeDesc' : 'Image files',
'fileObjName' : 'file',
'fileTypeExts' : '*.gif; *.jpg; *.png',
'onUploadSuccess' : function(file, data, response) {
console.log(file);
console.log(data);
console.log(response);
if(response) {
var obj = JSON.parse(data);
// 将返回的数据填充到页面中
$("#upload_org_code_img").attr("src", obj.data);
$("#file_upload_image").attr("value", obj.data);
$("#upload_org_code_img").show();
}
}
});
// 后端跳转地址的处理逻辑
public function upload() {
//实例化一个文件对象
$file = Request::instance()->file('file');
// 给定一个图片存储的文件目录
$info = $file->move('upload');
if($info && $info->getPathname()) {
return show(1, 'success','/'.$info->getPathname());
}
return show(0,'upload error');
}
五、前端校验
- 在电商的商品详情页中，存在着购买数量的选择，此处存在着前端校验和动态页面，如下图：
前端数量校验.png
//1- 如果在数量框内输入非数字的内容，自动更细为1
//2- 如果数量为1，则左侧的数量'-'按钮则会失效
// 判断是否为正整数
function isNaN(number){
var reg = /^[1-9]\d*$/;
return reg.test(number);
}
// 事件更改机制
function inputChange(num){
// 不是正整数，则自动为1
if(!isNaN(num)){
$(".buycount-ctrl input").val("1");
}
// 是正整数，则保留原值
else{
$(".buycount-ctrl input").val(num);
// 值为1，则自动过滤，使左侧样式失效
if(num == 1){
$(".buycount-ctrl a").eq(0).addClass("disabled");
}
// 值不为1，左侧样式有效
else{
$(".buycount-ctrl a").eq(0).removeClass("disabled");
}
}
}
$(".buycount-ctrl input").keyup(function(){
var num = $(".buycount-ctrl input").val();
inputChange(num);
});
$(".minus").click(function(){
var num = $(".buycount-ctrl input").val();
num--;
inputChange(num);
});
$(".plus").click(function(){
var num = $(".buycount-ctrl input").val();
num++;
inputChange(num);
});
六、百度地图加载
- 在美团、糯米等团购网站，以及在滴滴、Uber等快车软件中，总是可以看到很多地图加载，简单学习使用一些百度地图接口，加载地址图片，Geocoding API使用，点击查阅。
百度地图加载.png
public static function staticimage($center) {
if(!$center) {
return '';
}
// 由配置文件提供
$data = [
'ak' => config('map.ak'),
'width' => config('map.width'),
'height' => config('map.height'),
'center' => $center,
'markers' => $center,
];
$url = config('map.baidu_map_url').config('map.staticimage').'?'.http_build_query($data);
$result = doCurl($url);
return $result;
}
// 由common.php文件提供
function doCurl($url, $type=0, $data=[]) {
$ch = curl_init(); // 初始化
// 设置选项
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HEADER,0);
if($type == 1) {
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
}
//执行并获取内容
$output = curl_exec($ch);
// 释放curl句柄
curl_close($ch);
return $output;
}
到这里，就暂时休息休息。今天天气，阳光中有些许的微风，还是很适合出门的。出门撒欢去，周末快乐。
