未来往事
人生的苦难是那么多,为了在灾难不期而至时不至于毫无能力,你必须更加努力! [2017年 第13周/共52周]

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:对查出的结果数据自定义加一个新列
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中看看它的功能。如:
+阅读全文

jQuery甘特图开发基础 不指定

Rinald 本站原创 WEB前端 2016/12/09 00:58
jQuery.Gantt插件是一个非常轻量级的插件,使用纯HTML代码创建甘特图,不需要矢量图形或图像。插件支持拖拽调整甘特块和回调函数更新数据。

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

关于使用场景的很少案例:项目管理排期、广告系统排期等,欢迎补充

【参考文献】
jQuery.Gant:http://taitems.github.io/jQuery.Gantt/
https://github.com/thegrubbsian/jquery.ganttView
专利技术交底书(涉及计算机软件的发明)范例 编写格式要求说明

发明名称
(25个字以内) 简明、准确地表明专利请求保护的主题。名称中不应含有非技术性词语,不得使用商标、型号、人名、地名或商品名称等

本专利属于以下哪一种:
1、纯软件的算法发明,如一个能实现游客在室内外精确定位的导航软件; 2、软硬结合,即通过算法对相关硬件的功能进行改进,如采用某一算法使内存读取速率大为改进。

一、所属技术领域(即其直接所属或应用的技术领域)
本技术所属的技术领域为……
示例:本技术所属的技术领域为计算机领域,其涉及到一种GIS应用系统开发中,数据编辑时的图形节点坐标捕捉方式的设计与实现。

二、背景技术(即现有技术)
指对专利的理解、检索、审查有用的技术,可以引证反映这些背景技术的文件。 简要说明与本发明的工艺或方法最接近的现有技术的相关内容,涉及科技术语的话需要给出明确定义。如果可能,客观地指出现有技术(包括市场上的产品、技术、现有已公开的专利文件、公开发表的期刊论文等等)存在的问题和缺点(要着重笔墨针对本专利要重点解决的技术问题、而现有技术中存在的该缺点做描述,其他本专利不能解决的现有技术缺点可以不写),并结合其工艺或原理说明存在这些问题和缺点的原因。引证文献、资料的,应写明其出处;需要引用已公开专利文件的,请写明专利名称与申请号。

三、本专利要解决的主要技术问题(即发明主要目的)
即本专利最重要的改进是解决了现有技术中哪些问题,对应前面的“背景技术”的缺点来写。

四、技术方案【核心部分】
+阅读全文
免费稳定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连接引起的网络故障。
第1页 / 共35页 第一页 1 2 3 4 5 6 7 8 9 10 下一页 » 最后页 [ 显示模式: 摘要 | 列表 ]