未来往事
人生的苦难是那么多,为了在灾难不期而至时不至于毫无能力,你必须更加努力! [2017年 第17周/共52周]
thinkphp5 save循环新增数据第二次变为update问题解决


元素容器

下拉载入更多处理方法

jQuery图片裁剪插件Cropper 多云

Rinald 本站原创 WEB前端 2017/03/18 18:15
Cropper:一个简单的jQuery前端图片裁剪插件。
功能特性:
支持选项
支持方法
支持事件
支持触屏 (移动端)
支持缩放
支持旋转
支持翻转
支持 canvas
支持多个 croppers
跨浏览器支持

主要文件Main:
dist/
├── cropper.css     ( 5 KB)
├── cropper.min.css ( 4 KB)
├── cropper.js      (67 KB)
└── cropper.min.js  (24 KB)

使用介绍:


已知问题:
1.关于getCroppedCanvas方法:canvas.drawImage API 在某些 Mac OS / iOS 浏览器上将会根据 EXIF 方向自动旋图片,所以输出的剪裁画布可能不正确。要修复这个问题,你需要上传剪裁的数据到服务器上完成剪裁的操作,查看例子:Crop Avatar。或者你也可以在使用 cropper 之前处理一下 EXIF方向。
PS:cropper EXIF照片旋转方向前端处理方法参考:
 (a)Exif.js读取图像的元数据
 (b)利用exif.js解决IOS系统手机上传竖拍照片旋转90度问题
 (c)H5中图片上传的那些坑
2.已知的 iOS 资源限制: 由于 IOS 设备会限制内存,浏览器也许会在你剪裁一张大图(iPhone 相机分辨率)的时候崩溃掉。要避免这个问题,你需要在使用 cropper 之前重置图片大小(小于1024 px,如使用localResizeIMG4压缩图片)。

Demo案例参考:
本站Demo参考-建议使用手机浏览器打开测试
点击在新窗口中浏览此图片
+阅读全文
背景/需求:
恶意攻击、恶意采集、恶意刷页面
秒杀、抢购并发连接限制、队列缓冲
web下载带宽限制、web请求速率限制

Nginx连接数限制模块:
说明:Nginx有很多模块、模块下面又分很多指令,下面就说说limit_conn_zone和limit_conn两指令

limit_conn_zone模块指令配置
Nginx http模块中添加
http{
  ……………………
  limit_conn_zone $binary_remote_addr zone=perip:10m;
  limit_conn_zone $server_name zone=perserver:10m;

  server{
    ……………………
  }
}
PS:配置区域名称为perip、perserver,需要写在http里面;
对于关系:
key => $binary_remote_addr #二进制的IP地址
name => perip #随便取的一个名字,比如,你可以取成fity
size => 10m #空间大小,这里是10MB
一个二进制的ip地址在32位机器上占用32个字节,在64位机器上占用63个字节,那么10M可以存放多少呢,计算一下,10x1024x1024/32 = 327680,意思就是可以存放326780个ip地址(32位),64位可以存放163840个ip
1、key:键,可以说是一个规则,就是对客服端连接的一个标识,比如上面用的是IP地址
2、zone:共享内存空间,作用:保存每个key对应的连接数
3、size:共享内存空间大小,如1M、10M、100K
当共享内存空间被耗尽,服务器将会对后续所有的请求返回503 (Service Temporarily Unavailable) 错误。来源:未来往事 http://fity.cn


Nginx server主机模块中添加
server{
  ……………………
  limit_conn perip 3;  #调用nginx http区段中定义的perip,该指令需要写在server里面,限制除了白名单外的IP,每个IP最大并发为3个连接;
  #limit_conn perserver 1000; #限制该主机最大并发连接数;
  #PS:什么是并发呢?请求到达并已经读取了请求头信息到响应头信息发送完毕
  #limit_rate 256k;  #限制每个连接的带宽,可以单独定义这条指令,与连接数无关;
  #limit_req zone=perreq nodelay  #如果请求不需要被延迟,添加nodelay参数,服务器会立刻返回503状态码。
  ……………………
}
PS:参数补充说明:
$binary_remote_addr是限制同一客户端ip地址;
$server_name是限制同一server最大并发数;
limit_conn为限制并发连接数;
limit_rate为限制下载速度。来源:未来往事 http://fity.cn


你也可以使Nginx limit只针对执行PHP时有效:
location ~ .*\.(php|php5)?$ {
  limit_conn perip 3;
  ……………………
}

白名单功能配置:
nginx的限速白名单需要结合geo和map指令来实现,其中map指令使用ngx_http_map_module模块提供的。ngx_http_map_module模块可以创建变量,这些变量的值与另外的变量值相关联。允许分类或者同时映射多个值到多个不同值并储存到一个变量中,map指令用来创建变量,但是仅在变量被接受的时候执行视图映射操作,对于处理没有引用变量的请求时,这个模块并没有性能上的缺失。配置参考:
http{
  ……………………
  geo $whiteiplist  {        
    default 1;    #如果客户端地址不能匹配任意一个定义的地址,nginx将使用此值。来源:未来往事<http://fity.cn>
    127.0.0.1 0;  #白名单: 127.0.0.1
    172.16.0.0/16 0;  #白名单 172.16.0.0 ~ 172.16.255.255
    10.252.0.0/24 0;  #白名单 10.252.0.0 ~ 10.252.0.255
  }                          
            
  map $whiteiplist $limit {
    1 $binary_remote_addr;
    0 "";                  
  }
  ……………………
}
PS:1)geo指令定义一个白名单$whiteiplist, 默认值为1, 所有都受限制。 如果客户端IP与白名单列出的IP相匹配,则$whiteiplist值为0也就是不受limit限制。通常白名单内的IP是你自己的IP、CND IP、负载均衡IP或反向代理IP地址等。
2)map指令是将$whiteiplist值为1的,也就是受限制的IP,映射为客户端IP。将$whiteiplist值为0的,也就是白名单IP,映射为空的字符串。
3)limit_conn_zone和limit_req_zone指令对于键为空值的将会被忽略,从而实现对于列出来的IP不做限制。
4)geo指令使用ngx_http_geo_module模块提供的。默认情况下,nginx有加载这个模块,除非人为的 --without-http_geo_module。ngx_http_geo_module模块可以用来创建变量,其值依赖于客户端IP地址。geo指令主要是根据IP来对变量进行赋值的。因此geo块下只能定义IP或网络段,否则会报错。
5)map指令使用ngx_http_map_module模块提供的。默认情况下,nginx有加载这个模块,除非人为的 --without-http_map_module。


完整的配置示例
附:部分配置代码
http{
  ……………………
  geo $whiteiplist  {        
    default 1;            
    127.0.0.1 0;  #白名单: 127.0.0.1
    172.16.0.0/16 0;  #白名单 172.16.0.0 ~ 172.16.255.255
    10.252.0.0/24 0;  #白名单 10.252.0.0 ~ 10.252.0.255
  }                          
            
  map $whiteiplist $limitlist {
    1 $binary_remote_addr;
    0 "";                  
  }
  
  limit_conn_zone $limitlist zone=perip:10m;
  limit_conn_zone $limitlist zone=perserver:10m;
  
  server{
    ……………………
    limit_conn perip 3;  #调用nginx http区段中定义的perip,该指令需要写在server里面,限制除了白名单外的IP,每个IP最大并发为3个连接;
    #limit_conn perserver 1000; #限制该主机最大并发连接数;
    #PS:什么是并发呢?请求到达并已经读取了请求头信息到响应头信息发送完毕。来源:未来往事<http://fity.cn>
    #limit_rate 256k;  #限制每个连接的带宽,可以单独定义这条指令,与连接数无关;
    ……………………
  }
}

ngx_http_limit_req_module模块
ngx_http_limit_req_module模块的使用和ngx_http_limit_conn_module模块差不多,不在赘述,可查看本文底部推荐的文章。

未来往事编写本文的背景及初衷:解决网站遭受恶意攻击的过程及方法思路分享,希望对你有所帮助^_^
[root@web ~]#netstat -n &#124; awk '/^tcp/ {++state[$NF]} END {for(key in state) print key,"t",state[key]}'
([root@web ~]#netstat -n &#124; awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}')
ESTABLISHED t 681
TIME_WAIT t 155
………………
[root@web ~]#netstat -ntu &#124; awk '{print $5}' &#124; cut -d: -f1 &#124; sort &#124; uniq -c &#124; sort -n
通过上述命令也可以查看有许多连接的ip,如:
1 61.190.80.226
1 68.180.228.183
2 36.5.133.7
2 36.6.64.229
3 218.75.39.58
3 223.247.41.168
4 112.238.71.202
4 112.65.135.38
5 10.165.13.170
5 103.40.223.63
6 117.69.251.81
………………
limit_zone处理前后服务器性能监控对比图:
点击在新窗口中浏览此图片

推荐阅读:
Tengine限制连接数和白名单功能
nginx利用geo模块做限速白名单以及geo实现全局负载均衡的操作记录
Module ngx_http_limit_req_module
Nginx模块 ngx_http_limit_req_module限制请求速率
nginx 的限制连接模块limit_zone与limit_req_zone

直白的说就是降低单IP的并发连接数提升整体IP并发连接个数,在一定程度上可能会存在可用率的下降情况。如果上述方法在没能解决你的问题,建议你联系你的运营商提供安全增值服务或增加硬件安全设备进行解决问题,欢迎补充。

phpmyadmin Error during session start 不指定

Rinald 本站原创 Linux 2017/02/27 17:55
错误详细描述:
phpMyAdmin - Error
Error during session start; please check your PHP and/or webserver log file and configure your PHP installation properly. Also ensure that cookies are enabled in your browser.
错误截图:
点击在新窗口中浏览此图片

系统环境:
centos7 apache

错误原因分析:
服务端无法写入session或客户端禁用cookie导致

错误解决思路:
1.查看php.ini配置文件session.save_path参数设定,需要启用,并注意设定的path目录,可以设置为:/var/lib/php/session
session.save_path="/var/lib/php/session"
2.查看session.save_path设定的目录/var/lib/php/session/是否具有写入权限(当前web服务运行用户),如果没有请更改调整权限,如:
drwxrwx---. 2 www www 4096 2月  27 12:30 session

至此,问题解决。刷新phpmyadmin重试,如有问题欢迎补充。
mysql用户自定义变量:可以先在用户变量中保存值然后在以后引用它;这样可以将值从一个语句传递到另一个语句。用户变量与连接有关。也就是说,一个客户端定义的变量不能被其它客户端看到或使用。当客户端退出时,该客户端连接的所有变量将自动释放。

用户变量的形式为@var_name,其中变量名var_name可以由当前字符集的文字数字字符、‘.’、‘_’和‘$’组成。 默认字符集是cp1252 (Latin1)。可以用mysqld的--default-character-set选项更改字符集。用户变量名对大小写不敏感。

设置用户变量的一个途径是执行SET语句:
SET @var_name = expr [, @var_name = expr] ...
对于SET,可以使用=或:=作为分配符。分配给每个变量的expr可以为整数、实数、字符串或者NULL值。
也可以用语句代替SET来为用户变量分配一个值。在这种情况下,分配符必须为:=而不能用=,因为在非SET语句中=被视为一个比较 操作符:

Demo One:对查出的结果数据自定义加一列序号

Demo Two:对查出的结果数据自定义加一个新列
php图片加水印,php文字水印,php平铺水印,php图片水印,php图片添加图文 平铺水印。
图片添加文字水印
点击在新窗口中浏览此图片

图片合成 图片水印
点击在新窗口中浏览此图片
关于水印图片不透明可以参考本博客另外一篇文章《imagecopymerge合成图片 黑色背景问题解决

文字水印平铺 图片水印平铺
方法一:相对来说该方式较为传统~~~
点击在新窗口中浏览此图片

方法二:使用php_imagick扩展类库
PS:使用该方式需要先配置php环境支持imagick扩展类库,类库下载:
http://pecl.php.net/package/imagick

综合Demo示例
点击打开,建议使用手机浏览器打开测试
点击在新窗口中浏览此图片

URL数字随机重组校验,URL地址id随机加密生成及逆向校验
PHP版本:

jquery版本:
+阅读全文

jquery web流程图拖拽构建 晴

Rinald 本站原创 WEB前端 2016/12/09 01:10
js/jquery实现流程拖拽,js/jquery实现web流程设计器,js/jquery动态流程图构建

实现意义:
管理员可以随时根据企业的运营发展情况便捷动态调整企业的组织架构(审批)流程、可视化流程建模,通过流程设计器,快速通过“拖、拉、拽”实现流程定义建模,通过流程监控实时分析流程实例的运行数据分析,提供企业流程的不断优化的依据,同时智能流程版本管理功能,当流程变化较大时旧的实例按旧的流程定义运转,新启动的流程按新版本的流程运转,新旧隔离互不影响。从而降低系统维护人力投入及维护时间。

正文:
JQuery UI的拖拽功能:
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互、动画、特效等API,并且封装了一些Web小部件(Widget)。同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能。
JQuery UI提供的API极大简化了拖拽功能的开发。只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可。
拖拽原理:
首先要明确几个概念。
  ource:拖拽源,要拖动的元素。
  taerget:拖放目标,能够放入source的容器。
拖拽的动作分解如下:
  1. drag start:在拖拽源(source)上按下鼠标并开始移动
  2. drag move: 移动过程中
  3. drag enter:  移动进入目标(target)容器
  4. drag leave: 移出目标(target)容器
  5. drop: 在目标(target)容器上释放鼠标
  6. drag end: 结束
在html5之前,页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。如:
点击在新窗口中浏览此图片

jsPlumb的流程拖拽功能:
jsPlumb是一个强大的JavaScript连线库,它可以将html中的元素用箭头、曲线、直线等连接起来,适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架,十分强大,大家可以在官网的Demo中看看它的功能。如:
+阅读全文
第1页 / 共35页 第一页 1 2 3 4 5 6 7 8 9 10 下一页 » 最后页 [ 显示模式: 摘要 | 列表 ]