centos安装nginx+php-fpm

好久没装过PHP环境了,好久没有手动配置LNMP环境了,今天就让我头疼了一把!

不过随着时间的推移,yum的源里越来越多的库可以直接使用了,现在自己在配置nginx和php环境就不再需要源码编译,也不再需要往yum中添加啥源了,直接就可以通过下面的命令完成安装:

1
yum install -y nginx php php-fpm

若系统之前yum安装过php,可以先卸载了:

1
yum remove httpd* php*

安装完毕后,需要稍微修改一下配置文件来完成最后的工作,php-fpm需要修改一下权限:

1
vi /etc/php-fpm.d/www.conf

Unix user/group of processes改成你os对应的设置,例如:

1
2
user = www 
group = www

然后需要开启nginx对应的php配置项:

1
vi /etc/nginx/conf.d/default.conf

开启下面这部分配置:

1
2
3
4
5
6
location ~ \.php$ {  
include /etc/nginx/fastcgi_params;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}

一切就绪,就可以分别开启对应服务了:

1
2
/etc/init.d/php-fpm restart 
/etc/init.d/nginx restart

nginx File not found 错误

这个时候如果你访问本地的nginx服务,如果看到了”File not found”错误提醒,原因多半是:php-fpm进程找不到SCRIPT_FILENAME配置的要执行的.php文件

由于默认nginx将root参数放在了location内部,所以你得注意一下对应设置的文件目录是否正确,或者推荐你将root参数从location中移到server中,这样所有的子location将使用统一的web根目录。

此外,为了避免一些php cms系统的默认行为,你还是最好将index参数里增加index.php,来适配系统的默认首页匹配规范,避免不必要的麻烦。

只谈服务切分问题

一直以来都对“架构”非常感兴趣,早在大学期间,逃课成瘾的我连css都不会但就已经对架构师产生了浓厚的兴趣!

阴差阳错的成了程序员后,又稀里糊涂的做了这么久。工作重心一直围绕着web方向:网站,系统。随着2014年底开始,“微服务”这三个字就好像病毒广告一样烂大街了,丝毫不输于它的前辈“大数据”。

之所以要从“微服务”这个广告语开始谈起,除了因为我自身性格的缘故(总是不自觉的对主流事物感到莫名的反感)外,主要是因为这和我们今天谈的主题非常相关。

阅读全文

gmailWatcher之node

Email是一个可能比很多人岁数都大的“上古神器”,尽管和它同期出生的小伙伴很多都已经寿终正寝,但它却依然坚挺,可见其代表了多大的用户刚需!

最近热映的《北京遇上西雅图2》讲的就是邮件的爱情故事,正巧又碰上项目新需求包含mail的收发要求,就借此良机好好学习一下这个陪伴我们很久的大伙伴。

阅读全文

ztree如何优雅自定义ajax的header参数

很久很久以前,我就把ztree夸成一朵花了,现在依然对它点赞!

不过之前在ng中使用它时就碰到了一个小麻烦,直至昨天同事问我,我再次翻阅ztree的文档依然没有提供自定义ajax的header的功能,这让基于REST风格的api在使用起来很不方便。

当然,直接修改ztree的源码也十分简单,但这并不是一个追求完美的coder可以接受的!那我们来看看到底该怎么做来最优雅的解决这个问题!

阅读全文

vue-validator初体验

之前一直都是做SPA项目,不过最近由于种种原因,需要返璞归真来基于jquery做项目!但无奈之前一直使用像ng或react这样的大杀器在编程,思维上已经有了一定的模式,突然回到jquery时代,感觉不会写代码了!真是感叹前端发展的迅猛啊~

其实react已算很轻了,但jsx语法我感觉确实是一个坎,虽然在我看来是精华也是趋势,但在业务量面前我实在不忍心再给团队成员加砝码了!

之所以考虑让项目基于jquery,是因为目前的前端开发人员和我所在的城市的前端开发人员整体程度比较低(只熟悉jquery),所以这么抉择,虽然保守,但让项目可以更快的完成,也有利于扩员,算是一种权衡!

但jquery确实太老了,只用jquery显然不能满足项目的需求,尤其是我这种生活在美好的数据绑定环境下的人,确实无法接受老旧的dom操作!

我在github上搜索:”jquery data binding”,推荐给我的一款基于jquery的数据绑定库是真尼玛难用,所以我就不贴链接了,怕被打脸!总之,我们的目的是尽量找学习成本低,侵入性低的库,哪怕功能比较弱一些,哪怕性能比较差一些(我们的项目是内部系统,so~)!

结果,偶然间哥注意到了Vue.js,完美!!!学习成本非常的低,而且十分的优雅,社区也很繁荣,简直了!那么接下来就是掌握一下它的使用方法,由于它出生在和react差不多一个时代,所以思路和用法都类似,看看官方文档就能上手做项目了!(希望没有大坑在等我~)

单用vue,肯定也还是不够的,既然我们引入了它,自然要发挥它最大功效,回到今天的主题:表单验证!(别嫌我啰嗦,我就是话多!)

之前用过不少表单验证插件,但实话说,看完vue-validator的官方文档,真的让我非常的震撼,基本上属于扩展性非常强的插件了,作者考虑到了绝大多数适配的场景,堪称完美!

不过,在实际使用的时候,还是有一些文档上没有写太详细的小坑,我的任务就是把我使用的时候碰到的问题记录下来,我们开始吧!

安装

由于我没有使用任何加载框架,只是简单的在浏览器上使用vue和vue-validator,所以我们只需要直接加载它们即可,不需要做额外的工作,这里我使用的是bootcdn提供的cdn,代码如下:

1
2
<script src="//cdn.bootcss.com/vue/1.0.17/vue.js"></script>
<script src="//cdn.bootcss.com/vue-validator/2.0.0-alpha.22/vue-validator.js"></script>

需要注意的是加载顺序和版本,我测试加载vue-validator的1.X版本的话并不会自动装载到vue中,不清楚是版本的事儿还是其它问题,总之,使用最新的版本即可。

绑定model

最新的vue-validator下,在使用时已经不支持下面的写法:

1
2
3
4
<input
type="text"
v-model="test"
v-validate="{required:true}"/>

会提示:
Uncaught TypeError: Cannot read property ‘replace’ of undefined

所以你只能老老实实的写成:

1
2
3
<input
type="text"
v-validate:test="{required:true}"/>

结构复杂的model如何绑定

我的例子中model的结构比较恶心,是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var blockBox = new Vue({
el: "#blockBox",
data: {
table: {
rowA: {
columnA: "a-a",
columnB: 'a-b',
columnC: 'a-c'
},
rowB: {
columnA: 'b-a',
columnB: 'b-b',
columnC: 'b-c'
}
}
});

那我总不能写成这样吧:

1
2
3
<input
type="text"
v-validate:table.rowA.columnA="{required:true}"/>

丑不说,何况这么写也是错误的!

怎么办?按照官方的说法应该这么写:

1
2
3
4
5
6
7
8
<input
class="form-control"
type="text"
v-model="table.rowA.columnA"
v-validate:message-aa="{required:true}"/>

<div class="errors">
<p v-if="$blockBoxValidator.messageAa.required" class="lang" data-key="blockBoxAA" />
</div>

完美,注意我在v-validate:message-aa中的写法!千万不能写成驼峰式的,如v-validate:messageAA,这么做会报错哟~原因我才和vue解析有关,这应该牵扯到了html属性的格式规范问题!总之你避免这么写就ok了!

和jquery配合

我不想说我下面的这个场景是否合理,但为了快糙猛的把项目demo搞出来,我遇到了下面的问题。

场景是我们的项目需要多语言支持,界面上能看到的元素(不包括用户输入)都应该支持切换语言,包括表单错误提醒!目前我所使用的切换语言的方法很简单:

1
2
3
4
5
6
7
8
9
<p v-if="$blockBoxValidator.message_aa.required" class="lang" data-key="blockBoxAA" />
<script type="text/javascript">
$(function(){
//多语言处理
$(".lang").each(function(node){
$(this).html($langCFG[$(this).data("key")]);
});
});
</script>

利用jquery的domready事件来第一时间替换需要显示的文字!这就有个问题出现了,若你在domready事件触发前就初始化了vue和vue-validator,根据表单验证逻辑很可能导致v-if指令直接干掉表示错误信息的那个p标签,所以自然也不会正确的执行多语言替换的逻辑。

在不考虑花时间研究vue-validator生命周期的前提下,我们如何更快的绕过这个问题呢?第一感觉是,将初始化vue和vue-validator的工作也放在domready中(但注意一定要放在多语言处理的代码之后)。不过你还会遇到另外一个问题,这个时候你在浏览器调试终端中按照vue官方的例子打印你创建的vm时,会报错提示变量定义不存在~具体原因不清楚,不过我们依然可以搞定这个问题,最终的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<p v-if="$blockBoxValidator.message_aa.required" class="lang" data-key="blockBoxAA" />
<script type="text/javascript">
var blockBox = null; //变量声明,这样能保证在调试终端中可以直接使用'blockBox.$log()'
$(function(){
//多语言处理
$(".lang").each(function(node){
$(this).html($langCFG[$(this).data("key")]);
});

//放在多语言处理下面,且在domready事件内
blockBox = new Vue({
el: "#blockBox",
data: {
table: {
rowA: {
columnA: "a-a",
columnB: 'a-b',
columnC: 'a-c'
},
rowB: {
columnA: 'b-a',
columnB: 'b-b',
columnC: 'b-c'
}
}
}
);
});
</script>

理论上,你只要把你想用js做的业务逻辑代码都放在domready事件的回调方法中的vue初始化之后,就可以像和单独使用vue写代码一样的流程来进行开发了!

页面初次加载显示问题

这应该不是vue-validator的问题,这应该属于vue的问题域。之前angular推荐的解决方案是提供了一个指令来监听模版解析完毕的事件。
我搜了一圈没找到官方或第三方提供的类似功能的实现,不过自己来做也不是什么难事儿:

1
2
3
4
5
6
7
8
9
10
11
<body id="body" style="display:none">
{{test}}
</body>
<script type="text/javascript">
new Vue({
el:"#body",
ready: function(){
$("#body").show();
}
});
</script>

其实思路就是借助vue组件的生命周期hook来及时的修改css样式,你也可以添加loading动画等高级特效,我懒我就不弄了~

$resetValidation()

重置验证的场景是这样的:当你的表单被用户合法修改保存后,用户并没有跳转到其他页面,仍然在当前页面下,由于表单内容已经和最原始的版本不一样,你需要resetValidation一下从而使vue-validator的各个状态匹配业务场景(包括但不限于dirty,modified等状态)。不过这里有两个小插曲:

  1. 我直接使用的bootcdn提供的版本导致js报错说$resetValidation()未定义,切换成官方的最新版本即可解决;
  2. 应该是跟vue的vm更新机制有关:
1
2
3
4
var that = this;
setTimeout(function(){
that.$resetValidation();
},0);

否则呢,你无法看到期望的结果~

lazy的正确使用方法

有些表单的初始化数据需要异步获取,太正常不过了,对吧?vue-validator提供了lazy模式,刚好匹配这种场景。所以,你只需要在validator标签上添加lazy属性即可,官方例子简单明了,似乎没有什么要解释的!不过,问题来了,官方的例子代码是基于vue的动态组件写的,动态组件才有activate事件,而如果你像我一样是用在普通组件下的,那么自然不会触发activate事件,那回调逻辑自然不会被执行,this.$activateValidator()不会执行的话,看看vue-validator会提示什么:

1
[vue-validator] validator element directive need to specify 'name' param attribute: (e.g. <validator name="validator1">...</validator>)

看起来提示的非常不准确,让我排查了好久,甚至去联系作者来查看这个问题!其实你只要确保在正确的时机调用$activateValidator()方法就可以了,那什么叫正确的时机:

  • 普通组件的ready事件回调中
  • 动态组件的activate事件回调中

否则你一定会看到上面的那个提醒,特别提醒,下面的写法依然会看到提醒:

1
2
3
4
5
ready: function(){
setTimeout(function(){
this.$activateValidator();
}.bind(this), 3000);
},

这应该是作者好心办的”错事儿”吧,他要求你只能在组件渲染前把该做的都做了(数据获取),不然你就是在自讨苦吃~当然,这种设计哲学并非没有道理,全看权衡和喜好!


好了,先总结到这里,如果以后有啥新的结论,再说~

如何禁止chrome自动跳转https

首先我声明,我非常支持https。

之所以要写这篇文章,主要是因为我碰到了一个很尴尬的事儿!待我慢慢道来~

之前给网上看到一篇文章,是教你如何简单的借助一个服务(我忘记名字了)为你的github pages项目来开通https支持,我的博客是hexo的,所以当然也是放在github pages上的!

那个服务确实很给力,在我根据指南,配置好后(域名解析)几乎是一键开启https!美翻了!但是我发现可能小众问题吧,我的博客没过多久访问时就提示域名解析异常,再次到那个服务后台去配置,就发现提示域名所属权校验失败!

本以为重新配置一下就可以了,结果又碰到了二级域名导致它提供的配置无法通过校验(首次没问题我也很纳闷!)~好了,说道这里,基本上这件事儿的背景也就差不多解释清楚了!

既然如此,我自然会放弃使用那个服务,所以我把域名解析重新直接解析到github pages上!但是,问题来了,之前所有使用过https访问我域名的chrome再也无法使用http来访问我的网站了!

一直提示网站出现安全异常,阿西吧!

后来网上搜了一下,找到了解决方案,其实很简单,请在chrome的地址栏输入:

chrome://net-internals/#hsts

在打开的页面中,Delete domain栏的输入框中输入:blog.kazaff.me(注意这里是二级域名),然后点击“delete”按钮,即可完成配置。

然后你可以在Query domain栏中搜索刚才输入的域名,点击“query”按钮后如果提示“Not found”,那么你现在就可以使用http来访问我的网站了!

虽然,你可能从来没有访问过我的网站~~哇哈哈哈哈