laravel处理跨域请求

写webapi总离开不跨域问题,总结下自己在做laravel开发的处理跨域请求方案。

推荐使用dingo/api扩展包

1、用laravel中间件,基于CORS

创建中间件CrossDomainMiddleware.php,代码如下:

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
<?php

namespace App\Http\Middleware;

use Closure;

class CrossDomainMiddleware
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
$response = $next($request);
$response->header('Access-Control-Allow-Origin', '*');
$response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, Accept');
$response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
$response->header('Access-Control-Allow-Credentials', 'true');
return $response;
}
}

mongoose使用中查不出定义的virtual字段

定义了指定为virtual属性的post_count字段统计文章数

1
2
3
4
5
6
7
8
9
10
11
12
// model
var TagSchema = new Schema({
name: String,
slug: String,
posts: [{ type:Schema.ObjectId, ref:"Post" }],
created_at: {type: Date, default: Date.now }
});

// virtual
TagSchema.virtual('post_count').get(function(){
return this.posts ? this.posts.length : 0;
});

使用find查询的时候居然查不出post_count出来。查看手册后是因为document 对象的toJSON和toObject方法里面 默认将virtual 属性排除了。 原文是这样的:

Note that if the resulting record is converted to an object or JSON, virtuals are not included by default. Pass virtuals : true to either toObject() or to toJSON() to have them returned.

需要对Schama做下面的配置:

1
2
TagSchema.set('toJSON', { virtuals: true });
TagSchema.set('toObject', { virtuals: true });

在centos7上安装php

###默认安装

1
yum install php

默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案:

检查当前安装的PHP包
1
yum list installed | grep php

如果有安装的PHP包,先删除他们

1
yum remove php.x86_64 php-cli.x86_64 php-common.x86_64 php-gd.x86_64 php-ldap.x86_64 php-mbstring.x86_64 php-mcrypt.x86_64 php-mysql.x86_64 php-pdo.x86_64

循环中正确绑定事件的N种方法

面试中常考的题,把想到的方法都整理一下,代码如下:

1
2
<ul id="list">
</ul>
1
2
3
4
5
6
7
8
9
10
var list = document.getElementById("list");
for (var i = 1; i <= 5; i++) {
var item = document.createElement("li");
item.appendChild(document.createTextNode("列表 " + i));

item.onclick = function (e) {
console.log("列表 " + i + " 被点击.");
};
list.appendChild(item);
}

上面这段代码的意图是创建5个li,点击不同的li能够打印出当前li的序号。但是点击任何li打印出来的都是“列表 6 被点击“,因为i是函数级变量,5个内部函数都指向了同一个i ,而i最后一次赋值是5,当点击时i已经是6了。

触发display为none元素的动画效果

写模态框时,当模态框show的时候动画没有,原来是元素有display:none时添加样式里css3的变幻效果无法生效,解决的方法总结,测试代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
.modal{
z-index: 100;
height: 200px;
width: 200px;
background: yellow;
transition: all 1s;
display:none;
}
.modal.active{
background: red;
transform: translateX(100px);
}
1
2
<a href="javascript:" id="trigger" data-target="#model1">运行动画</a>
<div id="model1" class="modal"></div>

同时使用flex、white-space和overflow的bug

写这个博客文章列表标题时遇到的bug,当flex和white-space、overflow一起用的时候,发现overflow:hidden失效了。代码如下:

1
2
3
4
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

解决办法:再加上min-width: 0属性。

1
2
3
4
5
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width:0;

使用$.ajax上传文件到七牛

用jquery的ajax方法上传文件到七牛和常规的ajax有点区别,直接上代码:

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
var $input = $('#upload-qiniu');
var token = 'sMTdcnRxls_IaTJ1uSOR1Rb7zFkcdJq3LK0MPjR1:4k547QcZwzo2fK7zPJeu28UgXNM=:eyJzY29wZSI6Im9haGEiLCJkZWFkbGluZSI6MTQ0MTk2NzY1Mn0=';
var url = 'http://up.qiniu.com/';
var prefix = 'http://7vii28.com1.z0.glb.clouddn.com/';

$input.on('change', function(){
var me = $(this);
var file = this.files[0];
var formData = new FormData(),
filename = file.name;
formData.append('token', token);
formData.append("file", file);
$.ajax({
url : url,
type : 'POST',
data : formData,
processData : false, // 对数据不作处理
contentType : false // 使用原始类型
}).done(function(json){
console.log(json);
}).fail(function(json){
console.log(json.responseJSON.error);
});
});

lodash集合的sortBy排序

lodash sortBy的用法

数组对象:

1
2
3
4
5
6
7
8
9
10
11
var tags = [ 
{ name: 'php', post_count: 2 },
{ name: 'html', post_count: 3 },
{ name: 'lua', post_count: 5 },
{ name: 'css', post_count: 2 },
{ name: 'python', post_count: 2 },
{ name: 'javascript', post_count: 1 },
{ name: 'express', post_count: 4 },
{ name: 'css3', post_count: 6 },
{ name: 'mongoose', post_count: 0 }
]

以post_count升序排序:

1
2
3
tags = _.sortBy(tags, function(item){
return item.post_count;
});

以post_count降序排序,排序项加个负号:

1
2
3
tags = _.sortBy(tags, function(item){
return -item.post_count;
});

如何关闭微信内置浏览器

做微信开发中发现window.close失效,不能关闭浏览器,解决如下:

1
2
3
4
5
6
7
8
9
10
function closeWindow() {   
if (wx != undefined) {
wx.closeWindow();
}
else if (typeof(WeixinJSBridge) != "undefined") {
WeixinJSBridge.call('closeWindow');
} else {
window.close();
}
}

hexo自定义404页面

要自定义hexo的404页面,只要根目录下只要个404.html页面就行了。创建404页面的方法同样适用于创建hexo所有自定义页面。