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;
}到这里，就暂时休息休息。今天天气，阳光中有些许的微风，还是很适合出门的。出门撒欢去，周末快乐。
作者：采风JS
链接：https://www.jianshu.com/p/8bc99a89fadf