Ajax-hook拦截全局ajax请求操作

作者:matrix 发布时间:2017年12月13日星期三 分类: 零零星星

github项目地址:https://github.com/wendux/ajax-hook/blob/master/src/ajaxhook.js

项目页面中有很多ajax接口请求,每次需要手动判断数据code进行错误消息提示,再加上有些使用jQuery,有些使用fetch操作,要是能有一个统一的$.ajaxSetup那就爽翻。搜索下ajax的全局拦截,有大神好了,打开即食,NICE。代码量不大,大致的原理好像是把内置的XMLHttpRequest对象给代理了,克隆一份,进行伪装。请求操作都是通过的代理层,拦截、修改操作也都是可以的~

使用

加载ajaxhook.js文件,代码中给浏览器window对象注册全局方法:hookAjax,unHookAjax。

hookAjax //挂载拦截钩子
unHookAjax() //取消ajax请求代理

拦截处理操作

hookAjax方法注册拦截的切入点,执行回调操作。
这里用到onload 即请求完成获取数据的时候。
代码是放在vue项目里面,手动挂载DOM。若出现第一次错误请求没有成功拦截的情况,那就需要把代码放置在头部。

        //全局监听ajax请求,用于提示会话过期,和其他的错误消息。
        if ('function' === typeof(hookAjax)) {
            hookAjax({
                onload: function (xhr) {
                    if (xhr.status >= 500) return layer.alert('服务器报错,请联系管理员!'+"</br>请求地址:</br>"+xhr.responseURL, {icon: 2, title: '无形之刃 <3'});
                    var data = JSON.parse(xhr.responseText);
                    if (!!data) {
                        if (data.code !== 0) {
                            if (!!data.msg) {
                                layer.alert(data.msg, {icon: 2, title: 'ERROR'});
                            }
                        }
                    }
                }
            })
        }

拦截函数 如:onload 返回值是一个boolean,如果为true会阻断ajax请求,默认为false,不会阻断请求。

参考:
http://www.jianshu.com/p/9b634f1c9615

nginx配置proxy_cache缓存策略

作者:matrix 发布时间:2017年12月9日星期六 分类:

图片3703-nginx定向清理Proxy cache缓存
之前有使用脚本删除缓存的记录,但是没有留下下proxy的使用,今天正好配置下下。
>> nginx定向清理Proxy cache缓存

proxy是nginx的自带模块,作为前台代理后端的数据库请求,负载均衡啊什么的贼6

proxy配置

修改 nginx.conf文件配置 lnmp环境一般都是/usr/local/nginx/conf/nginx.conf
http代码块中添加proxy操作

> vi /usr/local/nginx/conf/nginx.conf #编辑文件

#添加如下内容
proxy_connect_timeout 2400;
proxy_read_timeout 240;
proxy_send_timeout 240;
proxy_buffer_size 16k;
proxy_buffers 4 64k;
proxy_busy_buffers_size 128k;
proxy_request_buffering off;
proxy_cache_lock on;
proxy_cache_valid 200 206 403 1d;#默认全局缓存200,206,403响应状态码 1天
proxy_cache_use_stale updating;
proxy_temp_file_write_size 128k;

#配置缓存目录,以及keys_zone作用域名称
proxy_temp_path /var/tmp/nginx/proxy_temp_dir;
proxy_cache_path /var/tmp/nginx/proxy_cache levels=1:2 keys_zone=link:2m inactive=1d max_size=1g;

#是否忽略后端返回的Cache-Control,Expires响应头。
#proxy_ignore_headers Cache-Control;
#proxy_ignore_headers Expires;
proxy_ignore_headers Set-Cookie;

#设置代理的客户端请求ip等数据
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Remote-Host $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

或者也可以在http代码块中使用 include "hhtjim_proxy.conf";方式载入。

#vhost配置proxy_pass
找到需要配置的vhost主机,修改conf文件中server代码块

        proxy_cache link;
        proxy_cache_valid 200 30d;
        proxy_cache_valid 301 302 303 10m;
        proxy_cache_valid any 5m;

        #添加返回响应头,X-Cache标记是否命中缓存。
        add_header X-Cache "$upstream_cache_status";

        #拦截所有请求 到link负载均衡策略
        location / {
        proxy_pass http://link;
        }

配置负载均衡

依旧在http块中添加上游upstream

#自定义link名称
upstream link { 
    ip_hash;#负载均衡ip hash定位
    server 127.0.0.1:8182 weight=3; #权重为3
    server 127.0.0.1:8084 weight=1; #权重为1
    keepalive 32;
}

若没有配置多余后端服务,直接使用当前nginx也是可以的。
完整vhost配置记录如下:

#入口拦截
server
    {
        listen 80;
        #listen [::]:80;
        server_name www.hhtjim.com ;
        index index.html index.htm index.php default.html default.htm default.php;
        root  /home/wwwroot/www.hhtjim.com/;

        include other.conf;


        include enable-php.conf;

        proxy_cache link;
        proxy_cache_valid 200 30d;
        proxy_cache_valid any 5m;


    add_header X-Cache "$upstream_cache_status";

        location / {
        proxy_pass http://link;
        }
    }


#模拟网站后台程序,数据库处理
server
    {
        listen 8182;
        #listen [::]:80;
        server_name localhost ;
        index index.html index.htm index.php default.html default.htm default.php;
        root  /home/wwwroot/www.hhtjim.com/;

        include other.conf;

        include enable-php.conf;

        #Slim Framework
        location / {
            try_files $uri $uri/ /index.php$is_args$args;
        }


        location ~ /.well-known {
            allow all;
        }

        location ~ /\.
        {
            deny all;
        }
        access_log off;
    }

重启nginx

lnmp nginx start 

#或者 reload 未尝试
# lnmp nginx reload
# ./nginx -s reload 

踩坑

第一次配置完,nginx各种错误,什么缓存目录不存在,proxy_pass放置代码块不正确。

还有需要注意:后台服务器返回的响应头若是有Cache-Control,Expires注意值,若是nocache,private 那就真的不缓存,也就全部MISS
最后,修改

1.修改后端程序返回的响应头,可控性最高。
2.设置proxy_ignore_headers 忽略掉头部
proxy_ignore_headers Cache-Control;
proxy_ignore_headers Expires;

参考:
http://blog.csdn.net/gamay/article/details/73613741
https://www.lvtao.net/server/224.html
http://blog.csdn.net/zstack_org/article/details/53940047
http://blog.csdn.net/wzx19840423/article/details/50474650
http://blog.51yip.com/apachenginx/1018.html

vagrant+LNMP一键安装包 报500错误

作者:matrix 发布时间:2017年9月28日星期四 分类:

图片3791-vagrant+Lnmp一键安装包的问题

问题

vagrant中的ubuntu环境安装了Lnmp一键安装包,TP5项目死活都无法访问,一直报错500,502。各种修改nginx.conf,最终还是需要查看nginx的error日志排查问题。

PHP message: PHP Warning:  require(/vagrant/bj-admin/thinkphp/start.php): failed to open stream: Operation not permitted in /vagrant/bj-admin/public/index.php on line 35
PHP message: PHP Fatal error:  require(): Failed opening required '/vagrant/bj-admin/public/../thinkphp/start.php' (include_path='.:/usr/local/php/lib/php') in /vagrant/bj-admin/public/index.php on line 35" while reading response header from upstream, client: 10.10.10.1, server: admin.esc.com, request: "GET / HTTP/1.1", upstream: "fastcgi://unix:/tmp/php-cgi.sock:", host: "admin.esc.com"
2017/09/28 13:19:09 [error] 1445#0: *1 FastCGI sent in stderr: "PHP message: PHP Warning:  require(): open_basedir restriction in effect. File(/vagrant/bj-admin/thinkphp/start.php) is not within the allowed path(s): (/vagrant/bj-admin/public/:/tmp/:/proc/) in /vagrant/bj-admin/public/index.php on line 35

就是如上的各种无法require,PHP中逐行exit. 用tail -f查看*error.log文件变化 太逗。
网上找好久解决办法,突然间发现关键字open_basedir,.user.ini 貌似这鬼东西有限制啊。早该想到Operation not permitted就是无权限和LNMP一键包的.user.ini有关就没这么多鸟事了。 因为TP5项目需要把的/public搞成web的root路径,LNMP默认使用.user.ini配置信息来防止跨站点目录访问 导致open_basedir的设置值限制了php的访问权限,也就not permitted。但是线上环境为什么没这个问题,这就不知道了。

解决方案

取消open_basedir限制
可以手动删除或者注释ini,最好使用lnmp一键包的工具脚本

> cd ~/lnmp1.4/tools  #进入lnmp一键包的tool目录
> ./remove_open_basedir_restriction.sh #执行脚本,按照选项操作
> ./remove_disable_function.sh #正巧这个我需要

P.S.
到现在用了差不多一个月的vagrant来模拟ubuntu生产环境,效果很棒。这个问题是上次遗留下来的,搞得我想打人了。一直等到今天接手TP5的项目继续搞 弄了一上午才好。 peace~

参考:
https://m.aliyun.com/yunqi/articles/34240
https://lnmp.org/faq/lnmp-vhost-add-howto.html

LNMP下防跨站、跨目录安全设置,仅支持PHP 5.3.3以上版本

ajax后退操作解决办法

作者:matrix 发布时间:2017年9月19日星期二 分类:

使用github项目

https://github.com/browserstate/history.js

问题场景

移动端网页列表(上拉加载执行ajax请求)中要在点击item详情页跳转后可返回,且返回页面中需要看到或定位到点击的来源位置。

测试

要实现准确定位,刚开始想的基本原理也就是俩页面之间跳转传递分页数和滚动条位置的数量,想过sessionstorage对象来存储或是用url中hash值、query参数来传递相关状态,列表页面中进行判断请求数据且修改ajax加载的分页起始数,但是url中的参数需要和后台进行协调才可以达到满意的效果,实现起来也麻烦。搜索找到好多方案 貌似history.js兼容各大浏览器,效果应该比较理想。

JQ后加载History的js文件:/history.js/scripts/bundled/html4+html5/jquery.history.js

测试分页使用scrollPagination的JQ插件实现翻页:

var urlscroll   = '';
var p = 1;

//获取缓存数据
//dom数据以及分页起始数
var dom = !!History.getState().data.dom?History.getState().data.dom:'';
var page = !!History.getState().data.p?History.getState().data.p:p;
p = page;
$(".test_list").append(dom);//追加缓存的dom
//end

$('.test_list').scrollPagination({
    'contentPage': urlscroll, // the url you are fetching the results
    'contentData': {'page':p}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
    'scrollTarget': $(window), // who gonna scroll? in this example, the full window
    'heightOffset': 0, // it gonna request when scroll is 10 pixels before the page ends
    'bottomHeight': $('.footer').height(), // it gonna request when scroll is 10 pixels before the page ends
    'beforeLoad': function(){ // before load function, you can display a preloader div
        //$('#loading-pic').show();
        this.flagRequesting = 0;
    },
    'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements

    //记录分页的dom数据
        for (var i = 0; i < elementsLoaded.length; i++) {
            dom += $(elementsLoaded[i]).html();
        }
        if(!!dom) History.pushState({'dom':dom,'p':this.contentData.page+1});//记录最后一次分页加载的dom数据以及下一页的起始数
        //end

        this.contentData.page++; 
         $(".test_list").append('<img src="/mobile/img/ads.jpg" class="ads_img">');

        }
    this.flagRequesting = 1;
    }
});

上面代码仅测试,需自行修改。
主要起作用的位置是 记录分页的dom数据获取缓存数据 两处注释块。
道理还是那样,只是更优化了些。这里缓存了所有ajax分页的DOM数据和请求的最后的页码,当返回到列表页面的时候获取缓存DOM并加载,起始的分页数也会还原。
history.js内部也是使用sessionstorage来缓存相关数据,所以设置state数据的时候需要将DOM对象转换为String字符串数据就可以缓存整个分页数据。
实际使用中会发现个别时候item详情页面中执行history.go(-1)或者点击A标签链接返回到列表页面的时候缓存的分页DOM数据可以正常的显示,但是滚动条定位就没达到想要的效果,所以要完美应该在获取缓存数据的时候添加一个scrollTop滚动条的复位操作,这样应该就巴适了。

嗯~~今天遇到的这个问题还好解决了,感谢开源奉献的人们。

peace~

参考:
http://www.cnblogs.com/songbyjson/p/4886615.html

五种解决方案:http://www.cnblogs.com/snandy/archive/2011/09/18/2180102.html

win平台使用vagrant搭建lnmp环境

作者:matrix 发布时间:2017年8月30日星期三 分类:

win10上面安装的phpStudy这些天有时候打不开网页 502,请求一直loading,就算是代码问题我也扶不住,安装个Redis,mongodb都超级麻烦,并且好多都模拟Linux做的东西,最终写出来的代码都要发布到linux的生产环境,倒不如就搞个服务器的克隆环境,有虚拟机+vagrant 简直是巴适。它可以实现文件的共享 从而方便宿主机到虚拟机的文件同步,也就是win上编代码,虚拟机测试运行,中间无需自行拷贝代码文件到虚拟环境。
PHP一键开发环境到目前用过phpnow phpstudy xampp,前两者仅限win平台,xampp可以跨win和mac平台。网上很多都推荐用vagrant搭建开发环境,可以完全模拟服务器环境,多平台支持 今天试试水。

安装VirtualBox虚拟机

官网:https://www.virtualbox.org/wiki/Downloads

安装vagrant

官网:https://www.vagrantup.com/downloads.html

挂载vagrant的box镜像文件

win下cmd命令进入你需要共享到虚拟环境的文件夹根目录 如:~/dev
阅读剩余部分 »

nginx定向清理Proxy Cache缓存

作者:matrix 发布时间:2017年8月22日星期二 分类: 零零星星

图片3703-nginx定向清理Proxy cache缓存
很多服务器是使用nginx内置的Proxy_cache来缓存资源,防止不必要的后端请求。有时候需要单独清理某个缓存,这就麻烦了。
按照大多数做法是给nginx安装purge模块,但是目前有更加精简的办法使用代码手动删除
道理很简单:获取nginx缓存url的文件路径,然后删除就可以了。

proxy_cache_key缓存的key

nginx 配置了proxy_cache_key的话需要根据自定义的key来获取url的缓存hash值,默认的key一般都是完整的访问url
具体自己的nginx是以什么作为缓存key的,具体随便找个缓存文件vi一下看看,有些设置了upstream负载均衡,就需要替换访问的host为对应主机上的upstream节点名,SO 随便找个缓存文件看看。

缓存路径的拼接

缓存根目录中一般是 单字母/俩字母/32位字符路径作为缓存的文件存储。
首先需要对key进行md5 Hash的计算,取出最后3位字符。
单字母:md5最后一位
双字母:md5最后2,3位
最后再拼接出完整路径,删除就可以了。

缓存根目录是nginx中配置的,默认路径就不清楚了。

PHP代码参考,其他语言还请大牛附言~

//去除服务器nginx缓存
$root = '/var/tmp/Tengine/proxy_cache/';

//之所以替换 使用为nginx服务器设置了反向代理proxy_pass
//具体缓存的key还需查看真实的缓存文件的key值
$map = array(
    'http://www.hhtjim.com/' => 'http://www_hhtjim_com_backend/',
);
$key =  @$args[0];//访问的url链接作为缓存的key
if(empty($key)) die("Please input the cache url eg:http://www.hhtjim.com\n");
$key = str_replace(array_keys($map), array_values($map), $key);
$md5 = md5($key);
$file = sprintf('%s%s/%s/%s', $root, substr($md5, -1), substr($md5, strlen($md5) - 3, 2), $md5);
if (@unlink($file)) {
    echo 'DEL SUCCESS:' . $key."\n";die;
}
echo 'FAILED:'.$file."\n";

最后再访问url看看自己服务器响应头配置的$upstream_cache_status变量X-cache缓存标记为MISS 其他状态参考:

MISS 未命中,请求被传送到后端
HIT 缓存命中
EXPIRED 缓存已经过期请求被传送到后端
UPDATING 正在更新缓存,将使用旧的应答
STALE 后端将得到过期的应答

参考:
http://www.jb51.net/article/74595.htm

缓存命中率:http://www.361way.com/nginx-cache/2665.html

peace

CI框架配置socketLog 远程调试

作者:matrix 发布时间:2017年4月28日星期五 分类:

github: https://github.com/luofei614/socketLog

SocketLog是开发api的debug神器,可以在完全不影响客户端调用的时候debug数据,非常NICE.

添加Slog.php文件

下载github项目中的Slog.php到libraries目录

common_helper.php全局函数中添加代码

/**
 * CI框架 socketLog 远程调试
 *
 * 使用:
 * slog($this->db->last_query());
 *
 * chrome安装相关插件之后控制台就能看到相关数据
 *
 * @URL https://github.com/luofei614/SocketLog
 */
use think\org\Slog;
if (!function_exists('slog')) {
    function slog($log, $type = 'log', $css = '')
    {
        require_once APPPATH . 'libraries' . DIRECTORY_SEPARATOR . 'Slog.php'; #注意这里的载入路径,请确保是上一步的操作位置
        if (is_string($type)) {
            $type = preg_replace_callback('/_([a-zA-Z])/', create_function('$matches', 'return strtoupper($matches[1]);'), $type);
            if (method_exists('\think\org\Slog', $type) || in_array($type, Slog::$log_types)) {
                return call_user_func(array('\think\org\Slog', $type), $log, $css);
            }
        }
        if (is_object($type) && 'mysqli' == get_class($type)) {
            return Slog::mysqlilog($log, $type);
        }
        if (is_resource($type) && ('mysql link' == get_resource_type($type) || 'mysql link persistent' == get_resource_type($type))) {
            return Slog::mysqllog($log, $type);
        }
        if (is_object($type) && 'PDO' == get_class($type)) {
            return Slog::pdolog($log, $type);
        }
        throw new Exception($type . ' is not SocketLog method');
    }

    //配置参数加载
    slog(array(
        'enable'=>true,//是否打印日志的开关
        'host'=>'slog.thinkphp.cn',//websocket服务器地址,默认localhost
        'optimize'=>true,//是否显示利于优化的参数,如果运行时间,消耗内存等,默认为false
        'show_included_files'=>true,//是否显示本次程序运行加载了哪些文件,默认为false
        'error_handler'=>false,//是否接管程序错误,将程序错误显示在console中,默认为false
        'force_client_ids'=>array('xxx'),//日志强制记录到配置的client_id,默认为空
        'allow_client_ids'=>array('xxx')//限制允许读取日志的client_id,默认为空,表示所有人都可以获得日志。
    ),'config');
}

配置浏览器以及接收debug的客户端

此工具是TP开发人员编,已经内置于TP5中。
此项功能需要有服务器提供websocket服务,为了避免不必要的折腾,TP也提供了公共服务:http://slog.thinkphp.cn

  1. 打开之后获取SocketLog帐号的client_id,粘贴到上一步的配置参数加载中.

  2. 安装chrome 插件 SocketLog
    https://chrome.google.com/webstore/detail/apkmbfpihjhongonfcgdagliaglghcod

  3. SocketLog 插件配置

监听地址:ws://slog.thinkphp.cn:1229
Client_ID:上面setup1中复制的id

使用

php代码中需要debug的地方slog('data');
然后chrome任意页面 打开Console,当有请求执行到debug的地方控制台即可看到数据

图片3676-CI框架配置socketLog 远程调试