未来往事

  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/

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

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

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

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

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

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

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并发连接个数,在一定程度上可能会存在可用率的下降情况。如果上述方法在没能解决你的问题,建议你联系你的运营商提供安全增值服务或增加硬件安全设备进行解决问题,欢迎补充。
URL数字随机重组校验,URL地址id随机加密生成及逆向校验 URL加密解密
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中看看它的功能。如:
+阅读全文
免费稳定SSL证书申请网站,ssl证书服务器部署,HTTPS协议配置支持

更新支持HTTPS协议的初衷/背景:
谷歌从 2017 年起,Chrome 浏览器将也会把采用 HTTP 协议的网站标记为「不安全」网站;苹果从 2017 年 iOS App 将强制使用 HTTPS;在国内热火朝天的微信小程序也要求必须使用 HTTPS 请求。

基于上述需求实现HTTPS对于可以说是势在必行,而HTTPS的起点则是获取一张SSL证书。所以亲测了下推荐以下两个免费稳定SSL证书申请地址:
1.SSL For Freehttps://www.sslforfree.com
默认签发有效期3个月的DV SSL证书,到期需续约。
2.Let's Encrypthttps://letsencrypt.org/
默认签发有效期90天的DV SSL证书,到期续约。
3.腾讯云https://console.qcloud.com/ssl
默认有效期1年的DV SSL证书,到期需续约。
4.阿里云https://www.aliyun.com/product/cas?spm=5176.7742221.416540.120.RoOmE6
默认签发有效期1年的DV SSL证书,到期需续约。备注:如果使用免费的需要你把域名转移到阿里云上或者购买收费的。
5.StartSSLhttps://www.startssl.com/
默认签发有效期3年的DV SSL证书。备注:不推荐优先选择,毕竟之前有沃通ssl证书被苹果封的前例。
…………

综合证书有效期及操作的简便性,未来往事(http://fity.cn)选择是在腾讯云平台上申请的DV证书。
点击在新窗口中浏览此图片

关于服务器web环境证书安装配置可以参考:
https://www.qcloud.com/document/product/400/4143

服务器配置安装完毕后可以使用腾讯云提供的苹果ATS检测工具在线检测对ATS是否通过:
https://www.qcloud.com/product/ssl
点击在新窗口中浏览此图片

PS:
1.CA机构颁发的证书有几种类型:
域名型SSL证书(DV SSL):信任等级普通,只需验证网站的真实性便可颁发证书保护网站;
企业型SSL证书(OV SSL):信任等级强,须要验证企业的身份,审核严格,安全性更高;
增强型SSL证书(EV SSL):信任等级最高,一般用于银行证券等金融机构,审核严格,安全性最高,同时可以激活绿色网址栏。
2.关于百度对HTTPS网站的收录疑惑参考:
http://zhanzhang.baidu.com/wiki/392
linux TIME-WAIT相关参数:
net.ipv4.tcp_tw_reuse = 0    表示开启重用。允许将TIME-WAIT sockets重新用于新的TCP连接,默认为0,表示关闭
net.ipv4.tcp_tw_recycle = 0  表示开启TCP连接中TIME-WAIT sockets的快速回收,默认为0,表示关闭
net.ipv4.tcp_syncookies = 0   表示关闭SYN Cookies。
PS:/sbin/sysctl -a可以查看Linux各项内核参数

修改TIME-WAIT相关参数配置:
#vi /etc/sysctl.conf
net.ipv4.tcp_syncookies = 1 表示开启SYN Cookies。当出现SYN等待队列溢出时,启用cookies来处理,可防范少量SYN攻击,默认为0,表示关闭;
net.ipv4.tcp_tw_reuse = 1 表示开启重用。允许将TIME-WAIT sockets重新用于新的TCP连接,默认为0,表示关闭;
net.ipv4.tcp_tw_recycle = 1 表示开启TCP连接中TIME-WAIT sockets的快速回收,默认为0,表示关闭。

让配置修改即刻生效
#/sbin/sysctl -p
注意:
1. tw_reuse,tw_recycle 必须在客户端和服务端timestamps 开启时才管用(默认打开)
2. tw_reuse 只对客户端起作用,开启后客户端在1s内回收
3. tw_recycle 对客户端和服务器同时起作用,开启后在 3.5*RTO 内回收,RTO 200ms~ 120s 具体时间视网络状况。内网状况比tw_reuse 稍快,公网尤其移动网络大多要比tw_reuse 慢,优点就是能够回收服务端的TIME_WAIT数量


查看服务器的TCP连接状态:
#netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}'
(或#netstat -ntu|awk -F '[ :]+' '/^tcp/{arr[$8]++}END{for(key in arr){print arr[key],key}}'|sort -rn -k1)
TIME_WAIT 71
CLOSE_WAIT 1
FIN_WAIT1 3
FIN_WAIT2 12
ESTABLISHED 186
PS:处于TIME_WAIT状态的sockets从原来的600多减少到70左右。处于SYN_RECV等待处理状态的sockets为0。

合理的优化linux系统内核参数可以提高服务器的并发 负载处理能力、可用率。如本文的优化可以有效降低因TIME_WAIT连接引起的网络故障。

php分卷备份恢复mysql数据库 不指定

Rinald 本站原创 PHP 2016/08/24 18:25
本文主要阐述在大数据量下通过php程序分卷备份恢复mysql数据库的方法,代码已合并为一个文件,即为php页面版MySQL大数据库分卷备份恢复工具。由于时间关系,代码未做整理,结构相对混乱,如果你在该结构基础上做了整理也欢迎你反馈给我~~~

工具实现功能:
1.支持MySQL数据库按指定大小分卷备份和恢复;
2.支持单文件备份及下载
3.分卷备份存储在服务器端,可以直接上传导入

操作过程截图:
输入mysql链接配置信息
点击在新窗口中浏览此图片
当前权限链接下的数据库表信息
点击在新窗口中浏览此图片
选择导出备份方式
点击在新窗口中浏览此图片
导出备份选项
+阅读全文
php获取当前自然周,php获取当前为第几周,php获取自然周开始结束日期时间,php date()函数

示例:
echo getTotalWeek(); //输出当前年份全年共有多少自然周
echo getWeekNum(); //输出当前为本年的第几周
echo getWeekNum('2016-7-31');  //输出2016年7月31日为本年的第几周
print_r(getWeekDate(2016,32)); //输出2016年第32周的起止日期

PHP根据年份获取全年共多少自然周、PHP获取一年共有多少自然周(考虑闰年)

PHP根据日期时间获取为当前的第几周、PHP获取当前是一年的第几周

PHP根据日期时间及第几周获取开始日期和结束日期、PHP获取自然周的开始日期和结束日期
+阅读全文
第1页 / 共7页 第一页 1 2 3 4 5 6 7 下一页 » 最后页 [ 显示模式: 摘要 | 列表 ]