php前台页面功能分析,ThinkPhp5 | 模块分析

ThinkPhp5框架是一款基于MVC的轻量级开发框架,其模块化的搭建,简单有效,相比于之前的版本,是一次颠覆性的改变。本文,结合一些网站的常用功能,简要分析一下基本原理,小试牛刀一把。

相比于ThinkPhp3完全开发,ThinkPhp5快速入门,更加适合快速学习,掌握其主要组成,有一揽全局的开阔。

一、登录模块

填写登陆用户名和密码,登陆成功后跳转;关闭页面,在一定时间内重新登录,不用重新登录,直接跳转;原因在于服务器端保存包含该用户信息的session。

8bc99a89fadf

百度糯米登录.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()

{:captcha_img()}

//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用于于后台服务器进行少量的数据交互,被广泛使用,下面以我们经常填写的注册信息为例,点击左侧,右侧数据自动更新。

8bc99a89fadf

点击左侧,右侧自动更新.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 += ""+this.name+"";

});

$('.se_city_id').html(city_html);

}else if(result.status == 0) {

$('.se_city_id').html('');

}

}, 'json');

});

四、图片上传

基于ThinkPhp5的文件上传机制,借助于uplodify插件,实现图片上传功能,uplodify插件学习。

8bc99a89fadf

图片上传.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');

}

五、前端校验

在电商的商品详情页中,存在着购买数量的选择,此处存在着前端校验和动态页面,如下图:

8bc99a89fadf

前端数量校验.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使用,点击查阅。

8bc99a89fadf

百度地图加载.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;

}

到这里,就暂时休息休息。今天天气,阳光中有些许的微风,还是很适合出门的。出门撒欢去,周末快乐。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值