vue中使用基于客户端的缓存

在写基于express、vuejs博客的小项目过程中，折腾了下在vuejs中怎么使用浏览器缓存请求。

原理是利用vue-resource拦截器interceptor，判断当前请求是否存在localStorage里，有则返回缓存的内容；没有则请求服务器，并在localStorage写入缓存。

用到的依赖包：

详细代码在https://github.com/liukaijv/lnode-blog/tree/master/frontend。

查看详情»

laravel处理跨域请求

  • 分类 php ·
  • 发表于 2016-05-29 10:50:38

写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字段

  • 分类 nodejs ·
  • 发表于 2016-04-29 14:06:19

定义了指定为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;
		});