ThinkPhp5框架是一款基于MVC的輕量級(jí)開發(fā)框架，其模塊化的搭建，簡(jiǎn)單有效，相比于之前的版本，是一次顛覆性的改變。本文，結(jié)合一些網(wǎng)站的常用功能，簡(jiǎn)要分析一下基本原理，小試牛刀一把。

相比于ThinkPhp3完全開發(fā)，ThinkPhp5快速入門，更加適合快速學(xué)習(xí)，掌握其主要組成，有一攬全局的開闊。

一、登錄模塊

• 填寫登陸用戶名和密碼，登陸成功后跳轉(zhuǎn)；關(guān)閉頁面，在一定時(shí)間內(nèi)重新登錄，不用重新登錄，直接跳轉(zhuǎn)；原因在于服務(wù)器端保存包含該用戶信息的session。

百度糯米登錄.png// 登錄 public function login() {// 登錄檢測(cè)用戶session是否存在，存在直接跳轉(zhuǎn)頁面，不存在繼續(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)不為1if(!$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);//把用戶信息記錄到sessionsession('o2o_user', $user, 'o2o');$this->success('登錄成功', url('index/index')); }

二、驗(yàn)證碼機(jī)制

• ThinkPhp5中的驗(yàn)證碼使用靈活，學(xué)會(huì)使用即可，具體參照手冊(cè)

//1- composer依賴管理工具安裝驗(yàn)證碼類庫，自動(dòng)安裝到vendor文件夾 composer require topthink/think-captcha //2- 頁面中調(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)常填寫的注冊(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ù)返回成功，則組裝信息，填充htmlif(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ù)填充到頁面中$("#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)

• 在電商的商品詳情頁中，存在著購買數(shù)量的選擇，此處存在著前端校驗(yàn)和動(dòng)態(tài)頁面，如下圖：

前端數(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)為1if(!isNaN(num)){$(".buycount-ctrl input").val("1");}// 是正整數(shù)，則保留原值else{$(".buycount-ctrl input").val(num);// 值為1，則自動(dòng)過濾，使左側(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)購網(wǎng)站，以及在滴滴、Uber等快車軟件中，總是可以看到很多地圖加載，簡(jiǎn)單學(xué)習(xí)使用一些百度地圖接口，加載地址圖片，Geocoding API使用，點(diǎn)擊查閱。

百度地圖加載.pngpublic 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; }

作者：采風(fēng)JS
鏈接：http://www.jianshu.com/p/8bc99a89fadf
來源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。 與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的ThinkPhp5 | 模块分析的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。