ThinkPhp5框架是一款基于MVC的輕量級(jí)開(kāi)發(fā)框架稽煤，其模塊化的搭建，簡(jiǎn)單有效轧简，相比于之前的版本匾二，是一次顛覆性的改變。本文皮璧，結(jié)合一些網(wǎng)站的常用功能分飞，簡(jiǎn)要分析一下基本原理譬猫，小試牛刀一把。
相比于ThinkPhp3完全開(kāi)發(fā)染服，ThinkPhp5快速入門柳刮，更加適合快速學(xué)習(xí)，掌握其主要組成痢毒，有一攬全局的開(kāi)闊站宗。
一益愈、登錄模塊
- 填寫(xiě)登陸用戶名和密碼，登陸成功后跳轉(zhuǎn)敏释；關(guān)閉頁(yè)面摸袁，在一定時(shí)間內(nèi)重新登錄靠汁，不用重新登錄闽铐，直接跳轉(zhuǎn)奶浦；原因在于服務(wù)器端保存包含該用戶信息的session澳叉。
百度糯米登錄.png
// 登錄
public function login()
{
// 登錄檢測(cè)用戶session是否存在，存在直接跳轉(zhuǎn)頁(yè)面五督，不存在繼續(xù)登錄
$user = session('o2o_user','', 'o2o');
if($user && $user->id) {
$this->redirect(url('index/index'));
}
return $this->fetch();
}
// 登錄檢測(cè)
public function logincheck()
{
//判定是否為post表單請(qǐng)求
if(!request()->isPost()) {
$this->error('提交不合法');
}
//獲取表單數(shù)據(jù)
$data = input('post.');
//基于模型獲取用戶數(shù)據(jù)
try {
$user = model('User')->getUserByUsername($data['username']);
}catch (\Exception $e){
$this->error($e->getMessage());
}
//用戶不存在或者用戶存在狀態(tài)不為1
if(!$user || $user->status != 1) {
$this->error('該用戶不存在');
}
// 基于加鹽字符串充包，md5加密判斷密碼
if(md5($data['password'].$user->code) != $user->password) {
$this->error('密碼不正確');
}
// 登錄成功遥椿，更新用戶登錄時(shí)間
model('User')->updateById(['last_login_time'=>time()], $user->id);
//把用戶信息記錄到session
session('o2o_user', $user, 'o2o');
$this->success('登錄成功', url('index/index'));
}
二修壕、驗(yàn)證碼機(jī)制
- ThinkPhp5中的驗(yàn)證碼使用靈活，學(xué)會(huì)使用即可蓝谨，具體參照手冊(cè)
//1- composer依賴管理工具安裝驗(yàn)證碼類庫(kù)青团，自動(dòng)安裝到vendor文件夾
composer require topthink/think-captcha
//2- 頁(yè)面中調(diào)用助手函數(shù)captcha_img()
<input type="text" name="verifycode" placeholder="請(qǐng)輸入驗(yàn)證碼">
<div>{:captcha_img()}</div>
//3- 在后臺(tái)實(shí)現(xiàn)驗(yàn)證碼校驗(yàn)，調(diào)用助手函數(shù)captcha_check()
if(!captcha_check($data['verifycode'])) {
// 校驗(yàn)失敗
$this->error('驗(yàn)證碼不正確');
}
//4- 實(shí)現(xiàn)點(diǎn)擊自動(dòng)刷新驗(yàn)證碼圖片
$js_src = "this.src='".captcha_src()."'";
return ' . ')';
//5- 助手函數(shù)位于vendor文件夾下面的helper.php中
三芦昔、Ajax異步獲取數(shù)據(jù)
- Ajax用于于后臺(tái)服務(wù)器進(jìn)行少量的數(shù)據(jù)交互咕缎，被廣泛使用料扰，下面以我們經(jīng)常填寫(xiě)的注冊(cè)信息為例，點(diǎn)擊左側(cè)嫂伞，右側(cè)數(shù)據(jù)自動(dòng)更新。
點(diǎn)擊左側(cè)撰豺，右側(cè)自動(dòng)更新.png
$(".cityId").change(function(){
//獲取class為cityId的值
city_id = $(this).val();
//此為拋送到后端服務(wù)器的請(qǐng)求地址
url = SCOPE.city_url;
//組裝數(shù)據(jù)
postData = {'id':city_id};
$.post(url,postData,function(result){
//回掉函數(shù)返回成功郑趁，則組裝信息姿搜，填充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的文件上傳機(jī)制，借助于uplodify插件致份，實(shí)現(xiàn)圖片上傳功能氮块，uplodify插件學(xué)習(xí)。
圖片上傳.png
$(function() {
$("#file_upload").uploadify({
'swf' : SCOPE.uploadify_swf,
//自動(dòng)跳轉(zhuǎn)到該地址'{: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);
// 將返回的數(shù)據(jù)填充到頁(yè)面中
$("#upload_org_code_img").attr("src", obj.data);
$("#file_upload_image").attr("value", obj.data);
$("#upload_org_code_img").show();
}
}
});
// 后端跳轉(zhuǎn)地址的處理邏輯
public function upload() {
//實(shí)例化一個(gè)文件對(duì)象
$file = Request::instance()->file('file');
// 給定一個(gè)圖片存儲(chǔ)的文件目錄
$info = $file->move('upload');
if($info && $info->getPathname()) {
return show(1, 'success','/'.$info->getPathname());
}
return show(0,'upload error');
}
五、前端校驗(yàn)
- 在電商的商品詳情頁(yè)中阳谍，存在著購(gòu)買數(shù)量的選擇螃概，此處存在著前端校驗(yàn)和動(dòng)態(tài)頁(yè)面，如下圖：
前端數(shù)量校驗(yàn).png
//1- 如果在數(shù)量框內(nèi)輸入非數(shù)字的內(nèi)容训貌，自動(dòng)更細(xì)為1
//2- 如果數(shù)量為1冒窍，則左側(cè)的數(shù)量'-'按鈕則會(huì)失效
// 判斷是否為正整數(shù)
function isNaN(number){
var reg = /^[1-9]\d*$/;
return reg.test(number);
}
// 事件更改機(jī)制
function inputChange(num){
// 不是正整數(shù)超燃，則自動(dòng)為1
if(!isNaN(num)){
$(".buycount-ctrl input").val("1");
}
// 是正整數(shù)拘领，則保留原值
else{
$(".buycount-ctrl input").val(num);
// 值為1，則自動(dòng)過(guò)濾届良，使左側(cè)樣式失效
if(num == 1){
$(".buycount-ctrl a").eq(0).addClass("disabled");
}
// 值不為1，左側(cè)樣式有效
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);
});
六乞而、百度地圖加載
- 在美團(tuán)爪模、糯米等團(tuán)購(gòu)網(wǎng)站荚藻，以及在滴滴、Uber等快車軟件中共郭，總是可以看到很多地圖加載疾呻，簡(jiǎn)單學(xué)習(xí)使用一些百度地圖接口，加載地址圖片尉咕，Geocoding API使用璃岳，點(diǎn)擊查閱。
百度地圖加載.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(); // 初始化
// 設(shè)置選項(xiàng)
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);
}
//執(zhí)行并獲取內(nèi)容
$output = curl_exec($ch);
// 釋放curl句柄
curl_close($ch);
return $output;
}
到這里，就暫時(shí)休息休息缓溅。今天天氣赁温，陽(yáng)光中有些許的微風(fēng)，還是很適合出門的袜匿。出門撒歡去稚疹，周末快樂(lè)。
