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

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

一、登錄模塊

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

百度糯米登錄.png

// 登錄
public function login()
{
        // 登錄檢測用戶session是否存在，存在直接跳轉(zhuǎn)頁面，不存在繼續(xù)登錄
        $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('提交不合法');
        }
       //獲取表單數(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('密碼不正確');
        }
        // 登錄成功，更新用戶登錄時間
        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- 頁面中調(diào)用助手函數(shù)captcha_img()
<input type="text" name="verifycode" placeholder="請輸入驗證碼">
<div>{:captcha_img()}</div>
//3- 在后臺實現(xiàn)驗證碼校驗，調(diào)用助手函數(shù)captcha_check()
if(!captcha_check($data['verifycode'])) {
      // 校驗失敗
      $this->error('驗證碼不正確');
}
//4- 實現(xiàn)點擊自動刷新驗證碼圖片
$js_src = "this.src='".captcha_src()."'";
return '![](' . captcha_src($id) . ')';
//5- 助手函數(shù)位于vendor文件夾下面的helper.php中

三、Ajax異步獲取數(shù)據(jù)

• Ajax用于于后臺服務器進行少量的數(shù)據(jù)交互，被廣泛使用，下面以我們經(jīng)常填寫的注冊信息為例，點擊左側(cè)，右側(cè)數(shù)據(jù)自動更新。

點擊左側(cè)，右側(cè)自動更新.png

$(".cityId").change(function(){
    //獲取class為cityId的值
    city_id = $(this).val();
    //此為拋送到后端服務器的請求地址
    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的文件上傳機制，借助于uplodify插件，實現(xiàn)圖片上傳功能，uplodify插件學習。

圖片上傳.png

$(function() {
    $("#file_upload").uploadify({
        'swf'             : SCOPE.uploadify_swf,
        //自動跳轉(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() {
        //實例化一個文件對象
        $file = Request::instance()->file('file');
        // 給定一個圖片存儲的文件目錄
        $info = $file->move('upload');
        if($info && $info->getPathname()) {
            return show(1, 'success','/'.$info->getPathname());
        }
        return show(0,'upload error');
    }

五、前端校驗

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

前端數(shù)量校驗.png

//1- 如果在數(shù)量框內(nèi)輸入非數(shù)字的內(nèi)容，自動更細為1
//2- 如果數(shù)量為1，則左側(cè)的數(shù)量'-'按鈕則會失效

// 判斷是否為正整數(shù)
function isNaN(number){
    var reg = /^[1-9]\d*$/;
    return reg.test(number);
  }
// 事件更改機制
  function inputChange(num){
    // 不是正整數(shù)，則自動為1
    if(!isNaN(num)){
      $(".buycount-ctrl input").val("1");
    }
   // 是正整數(shù)，則保留原值
    else{
      $(".buycount-ctrl input").val(num);
      // 值為1，則自動過濾，使左側(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);
  });

六、百度地圖加載

• 在美團、糯米等團購網(wǎng)站，以及在滴滴、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);
    }
    //執(zhí)行并獲取內(nèi)容
    $output = curl_exec($ch);
    // 釋放curl句柄
    curl_close($ch);
    return $output;
}

到這里，就暫時休息休息。今天天氣，陽光中有些許的微風，還是很適合出門的。出門撒歡去，周末快樂。