未来往事
你不需要完美,你需要的是行动与完成。 [2017年 第21周/共52周]

  html5桌面消息通知 不指定

Rinald 本站原创 WEB前端 2014/09/19 00:10
html5桌面通知,html5(Notification)桌面通知通知API接口,浏览器消息通知.
传统实现方式
常用方法1:页面右下角写个div层,页面定时ajax请求服务器数据,返回true,div层显示。
常用方法2:浏览器标题闪烁通知,示例demo:
上述方法在使用中你会发现这种提示有个严重的缺陷,就是需要用户的浏览器一直打开。比方说用户浏览器最小化,标题就看不见,自然就无法及时get到有新消息的信息。正是缺陷存在,所以新技术也会伴随这出现:Web Notification通知API接口

html5 Web Notification
HTML5 Web Notification通知是属于桌面性质的通知,有点类似于显示器右下角蹦出的QQ弹框,杀毒提示之类的,跟浏览器是脱离的,消息是置顶的。Notification生成的消息不依附于某个页面,仅仅依附于浏览器。如果你在特定版本的浏览器上进行开发,那么我建议你先到 caniuse 查看浏览器对Notification API的支持情况,避免你将宝贵时间浪费在了一个无法使用的API上,附图为兼容支持情况,但是我仍建议你去caniuse 查看最新的兼容支持:
点击在新窗口中浏览此图片

关于使用推荐你参考:
[html5] (Notification) 桌面通知
How To Use The HTML5 Notification API》,这里不再过多赘述。

demo参考:
http://codepen.io/imprakash/pen/ZYLayY/
https://paulund.co.uk/playground/demo/html5-notification-api/

示例图片:
点击在新窗口中浏览此图片

php/java网页快照(网页截屏) 晴

Rinald 本站原创 PHP 2017/05/10 18:28
网页生成快照、网页截屏、网页转图片、网页转pdf——本文基于wkhtmltopdf工具编写。

服务器端
为实现网页快照或截图的程序须借助服务器端程序:wkhtmltopdf,可将网页转换为pdf或者图片,32和64位有区别,找个适合自己服务器的版本,安装过程很简单:解压后找个合适的路径放下,windows下需要运行安装程序。

命令调用示例:
网页转图片:
linux下:/opt/wkhtmltopdf/wkHtmlToImage fity.cn fity.cn.png
windows下:D:\Program Files\wkhtmltopdf\bin>wkhtmltoimage.exe fity.cn fity.cn.png
网页转PDF:
linux下:/opt/wkhtmltopdf/wkHtmlToPdf fity.cn fity.cn.png
windows下:D:\Program Files\wkhtmltopdf\bin>wkhtmltopdf.exe fity.cn fity.cn.png

然后结合php、java或其他语言实现自己的业务逻辑。

PS:
1.linux环境下如遇到中文乱码,请安装fonts-chinese
2.wkhtmltopdf官网 https://wkhtmltopdf.org

衍生,思考:
wkhtmltopdf对flash支持较为不友好?
可以尝试xvfb 容器 chrome/firefox渲染?

如果实际使用你可能需要考虑以何种形式进行并发,如何提高效率并减少对目标服务器的影响。如何根据目标服务器的响应动态调整并发数和并发方法,并减少错误反馈。

tp5 Excel表格导入_tp5导出Excel 不指定

Rinald 本站原创 PHP 2017/04/28 21:50
thinkphp5使用PHPExcel导入Excel、csv表格,thinkphp5表格导入导出

tp5使用PHPExcel导入Excel表格文件:

tp5使用PHPExcel导出数据为Excel表格:

tp5使用自定义函数导出数据为Excel表格:

thinkphp5.0分页 搜索条件不保留/失效解决

一般写法:分页跳转不包含搜索条件的

需要保留搜索条件的正确写法:query参数


tp5上传文件自定义名称 不指定

Rinald 本站原创 PHP 2017/04/28 20:36
thinkphp5上传文件自定义名称
$file->move($path,自定义的名称); //指定名称
$file->validate(['size'=>1048576,'ext'=>'jpeg,jpg'])->rule('uniqid')->move($path); //唯一命名,validate为验证

tp5附件上传示例

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重试,如有问题欢迎补充。
第1页 / 共35页 第一页 1 2 3 4 5 6 7 8 9 10 下一页 » 最后页 [ 显示模式: 摘要 | 列表 ]