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());}//用戶不存在或者用戶存在狀態不為1if(!$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);//把用戶信息記錄到sessionsession('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){//回掉函數返回成功，則組裝信息，填充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的文件上傳機制，借助于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){// 不是正整數，則自動為1if(!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使用，點擊查閱。

百度地圖加載.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(); // 初始化// 設置選項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
鏈接：http://www.jianshu.com/p/8bc99a89fadf
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。