HTTP与缓存相关的字段

1. 通用字段

2. response字段

3. request字段

4. 实体字段

协商缓存（304）

If-modified-Since/Last-Modified

• 浏览器在发送请求的时候服务器会检查请求头request header里面的If-modified-Since，如果最后修改时间相同则返回304，否则给返回头(response header)添加last-Modified并且返回数据(response body)。

  1 2	if-modified-since:Wed, 31 May 2017 03:21:09 GMT if-none-match:"42DD5684635105372FE7720E3B39B96A"

If-None-Match/Etag

• 浏览器在发送请求的时候服务器会检查请求头(request header)里面的if-none-match的值与当前文件的内容通过hash算法（例如 nodejs: cryto.createHash('sha1')）生成的内容摘要字符对比，相同则直接返回304，否则给返回头(response header)添加etag属性为当前的内容摘要字符，并且返回内容。

  1 2	etag:"42DD5684635105372FE7720E3B39B96A" last-modified:Wed, 31 May 2017 03:21:09 GMT

请求头last-modified的日期与响应头的last-modified一致
请求头if-none-match的hash与响应头的etag一致
所用会返回Status Code: 304

强缓存（200 from cache）

• 如果设置了Expires(XX时间过期)或者Cache-Control（http1.0不支持）(经历XX时间后过期)且没有过期，命中cache的情况下，from cache不去发出请求。如果强刷（如ctrl+r）会发起请求，但是如果没有修改会返回304内容未修改，如果已经改变则返回新内容。max-age > Expires。

• expires/cache-control虽然是强缓存，但用户主动触发的刷新行为，还是会采用缓存协商的策略，主动触发的刷新行为包括点击刷新按钮、右键刷新、f5刷新、ctrl+f5刷新等。

• 当然如果在控制台里面选中了disable cahce则无论如何都会请求最新内容(304协商缓存、强缓存都无效)，因为1.不会检查本地是否有缓存。2.请求头信息(request header)既没有If-Modified-Since也没有If-None-Match来让服务端判断。地址栏输入的地址按下回车键，该地址页面请求（仅仅是该url）的request header都会带上cache-contro:max-age=0，所以不会命中强缓存，但是通过链接点击的地址会命中缓存

• chrome下查看所有的from cache文件：chrome://view-http-cache/

区别

• 触发 200 from cache：

1. 直接点击链接访问
2. 输入网址按回车访问
3. 二维码扫描

• 触发 304：

1. 刷新页面时触发
2. 设置了长缓存、但Entity Tags没有移除时触发

流程图

前言

本篇文章主要是记录本人在微信扫码支付过程中所遇到的问题，给大家一个借鉴作用，希望对你们有帮助

开发环境

• nodejs v8.1.0
• egg v1.1.0

准备工作

• 微信公众号-appid
• 微信商户号-mch_id
• key值(签名算法所需,其实就是一个32位的密码，可以用md5生成一个)(key设置路径：微信商户平台(pay.weixin.qq.com)–>账户设置–>API安全–>密钥设置)

扫码支付-统一下单

以下才用的是微信模式二，因为比较简单

写在前面

由于最近公司业务不是很忙，空闲时间比较多，于是就在纠结Vue.js（之前就学习过）和Node.js先专研哪个比较好，最终选择了先玩玩Node.js。经过一段时间的学习，就有了教程 Node+Koa2+Mysql 搭建简易博客 GitHub地址，想要了解的可以先看看，个人水平有限，希望可以帮到你。
大概过来一个多月，我决定两路开工。使用Node.js给前端写接口，配备后台管理功能，先把后台搭建好。大概几天过后，后台一些简单的功能实现后，就开始用Vue.js开始搭建前台，也一直在想做点什么比较好，于是就做了个豆瓣评分类似的项目。

前端项目地址 https://github.com/wclimb/vue-video
前端预览 http://video.wclimb.site

后端项目地址 https://github.com/wclimb/video-admin
后台管理 http://vue.wclimb.site

API接口地址 https://github.com/wclimb/video-admin/blob/master/API.md

技术栈(Vue2.js + Node.js 全栈项目)

由于页面不是很多，vuex用的不多，关键掌握怎么实现就好了

vue2 + vuex + vue-router + webpack + fetch + sass + flex + svg + 阿里字体图标

运行

1
2
3
4
5
6
7
8
9
10
11

git clone https://github.com/wclimb/vue-video.git

cd vue-video

npm install  建议使用淘宝镜像(https://npm.taobao.org/) =>  cnpm i

npm run dev (运行项目)

npm run build (打包项目)

ps: 如果打包之后文件运行不了，请打包之前把路由的 mode:'history'注释掉，该功能去掉了url中丑陋的 # 号

转载自 mysql-tutorial

开始使用

MySQL 为关系型数据库(Relational Database Management System)，一个关系型数据库由一个或数个表格组成, 如图所示的一个表格：

• 表头(header): 每一列的名称;
• 列(col): 具有相同数据类型的数据的集合;
• 行(row): 每一行用来描述某个人/物的具体信息;
• 值(value): 行的具体信息, 每个值必须与该列的数据类型相同;
• 键(key): 表中用来识别某个特定的人\物的方法, 键的值在当前列中具有唯一性。

  登录MySQL

1
2
3
4
5
6

mysql -h 127.0.0.1 -u 用户名 -p
mysql -D 所选择的数据库名 -h 主机名 -u 用户名 -p
mysql> exit # 退出 使用 “quit;” 或 “\q;” 一样的效果
mysql> status;  # 显示当前mysql的version的各种信息
mysql> select version(); # 显示当前mysql的version信息
mysql> show global variables like 'port'; # 查看MySQL端口号

创建数据库

对于表的操作需要先进入库use 库名;

1
2
3
4
5
6
7
8

-- 创建一个名为 samp_db 的数据库，数据库字符编码指定为 gbk
create database samp_db character set gbk;
drop database samp_db; -- 删除 库名为samp_db的库
show databases;        -- 显示数据库列表。
use samp_db;     -- 选择创建的数据库samp_db
show tables;     -- 显示samp_db下面所有的表名字
describe 表名;    -- 显示数据表的结构
delete from 表名; -- 清空表中记录

本篇着重讲选择器$()选择器
本例我们主要修改wclimb.init=function(selector){}里面的代码
将wclimb.init代码修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

var dom
if (!selector) return wclimb.Z()
else if (typeof selector == 'string') {
	dom = wclimb.qsa(document, selector)
}
else if (typeof selector == 'function'){
	return wclimb.ready(selector)
}
else{
	if (isArray(selector)) {
		dom = compact(selector) 
	}
	else if (wclimb.isZ(selector)) return selector		
	else{
		if (isObject(selector)) dom = [selector], selector = null ;
		else dom=wclimb.qsa(document,selector)
	}

}
return wclimb.Z(dom, selector)

距离上一篇zepto源码分析已经过去大半个月，想想自己都过意不去，不过之前分享了一篇node博客教程，还算干了点正事。接下来我们继续封装自己的库吧

上节代码概览

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
30
31
32
33
34

(function(){

	var wclimb = {},$

	$ = function(selector){
		return wclimb.init(selector)
	}
	wclimb.init = function(selector){
		var dom;
		dom = document.querySelectorAll(selector);

		return wclimb.Z(dom,selector)

	}

	wclimb.Z = function(dom,selector){
		return new Z(dom,selector)
	}
	wclimb.Z.prototype  =  Z.prototype  =  {
		test:function(){
			alert(1)
		}
	}
	function Z(dom,selector) {
		for (var i  =  0; i < dom.length; i++) {
			this[i] = dom[i]
		}
		this.selector = selector;
		this.length = dom.length
	}

	window.$ = window.wclimb = $

})()

each方法

Koa2-blog

2018-1-5 更新教程（新增上传头像、新增分页、样式改版、发布文章和评论支持markdown语法）

Node+Koa2+Mysql 搭建简易博客

预览地址

http://blog.wclimb.site

写在前面

本篇教程一方面是为了自己在学习的过程加深记忆，也是总结的过程。另一方面给对这方面不太了解的同学以借鉴经验。如发现问题还望指正，
如果你觉得这篇文章帮助到了你，那就赏脸给个star吧，https://github.com/wclimb/Koa2-blog
下一篇可能是 Node + express + mongoose 或 zepto源码系列
感谢您的阅读^_^
ps：关于markdown代码缩进问题，看起来不太舒服，但复制到编辑器是正常的哟！

演示效果

开发环境

• nodejs v8.1.0
• koa v2.3.0
• mysql v5.7.0

准备工作

文中用到了promise、async await等语法，所以你需要一点es6的语法，传送门当然是阮老师的教程了 http://es6.ruanyifeng.com/

如果你已经配置好node和mysql可以跳过

经常会有人问报错的问题，运行出错大部分是因为不支持async，升级node版本可解决

1

$ node -v   查看你的node版本，如果过低则去nodejs官网下载替换之前的版本

下载mysql，并设置好用户名和密码，默认可以为用户名：root，密码：123456

1

进入到 bin 目录下 比如 cd C:\Program Files\MySQL\MySQL Server 5.7\bin

然后开启mysql

1

$ mysql -u root -p

输入密码之后创建database(数据库)，nodesql是我们创建的数据库

1

$ create database nodesql;

记住sql语句后面一定要跟;符号，接下来看看我们创建好的数据库列表

1

$ show databases;

启用创建的数据库

1

$ use nodesql;

查看数据库中的表

写在前面

读zepto源码，封装自己的zepto库系列是自己在读zepto源码的一些理解，有错误的地方还望指出。如果觉得本系列对你有所帮助，还请持续关注wclimb，谢谢。

zepto的整体架构

首先来看看整体代码结构

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
30
31
32
33

(function(){

	var wclimb = {},$

	$ = function(selector){
		return wclimb.init(selector)
	}
	wclimb.init = function(selector){
		var dom;
		dom = document.querySelectorAll(selector);

		return wclimb.Z(dom,selector)

	}
	wclimb.Z = function(dom,selector){
		return new Z(dom,selector)
	}
	wclimb.Z.prototype  =  Z.prototype  =  {
		test:function(){
			alert(1)
		}
	}
	function Z(dom,selector) {
		for (var i  =  0; i < dom.length; i++) {
			this[i] = dom[i]
		}
		this.selector = selector;
		this.length = dom.length
	}

	window.$ = window.wclimb = $

})()

首先我们设置了一个闭包，避免产生全局变量

canvas仿微信红包照片 By wclimb

HTML

1

<canvas id="cav" width="500" height="500"></canvas>

CSS

设置canvas的背景图

1
2
3
4

canvas{
    background:url(https://b-ssl.duitang.com/uploads/item/201501/22/20150122203239_Cfr58.thumb.700_0.jpeg) no-repeat;
    background-size:100% 100%;
}

JS

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
30
31
32
33
34
35
36
37

var canvas = document.querySelector("#cav")
var context = canvas.getContext("2d");

var randomX = Math.floor(Math.random()*440+30)
var randomY = Math.floor(Math.random()*440+30)

context.globalAlpha = 0.96;
context.fillStyle = '#333'
context.rect(0,0,canvas.width,canvas.height);
context.fill();

context.save()
context.beginPath()
context.arc(randomX,randomY,30,0,Math.PI*2,false);
context.clip();
context.clearRect(0,0,canvas.width,canvas.height)
context.restore();

var num = 30;
var time = null;
document.body.onclick = function(){
    function circle(){
        num += 5
        context.save()
        context.beginPath()
        context.arc(randomX,randomY,num,0,Math.PI*2,false);
        context.clip();
        context.clearRect(0,0,canvas.width,canvas.height)
        context.restore();
        console.log(num)

        if (num >= 677){
        	clearInterval(timer)
        }
    }
    timer = setInterval(circle,10)
}

入门指南–引用gulp官网示例

全局安装 gulp：

1

$ npm install --global gulp

作为项目的开发依赖（devDependencies）安装：

1

$ npm install --save-dev gulp

在项目根目录下创建一个名为 gulpfile.js 的文件：