ThinkPhp5 | 模块分析

 
 

  
  

   
   
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 '![](' . captcha_src($id) . ')';
//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
链接：http://www.jianshu.com/p/8bc99a89fadf
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。