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
链接：https://www.jianshu.com/p/8bc99a89fadf