redSun's Notes

发表于 | 分类于 |

前言

目前我所知道的两种跨域方式，一种是JSONP，一种是CORS

JSONP原理

JSONP，也就是JSON with Padding的意思，这是一种利用script标签可以跨域的漏洞实现的数据交互协议，但是这种协议是非官方的，下面先看看实际上是怎么实现数据交互的。

首先，我们先在html中预定义一个回调函数：

1
2
3
function sayhello(data){
   alert(data.message);
}

之后，操作dom元素，动态添加一个script元素，这也是我们实现跨域的最重要的部分。

1
2
3
var scriptElement= document.createElement("script");
scriptElement.src = "http://www.example.com/test?callback=sayhello";
document.getElementsByTagName("HEAD")[0].appendChild(scriptElement);

在html中动态添加一个script元素后，浏览器会发起一个GET请求，地址是 http://www. example.com/test? callback=sayhello 。

服务器收到请求后，将需要返回的JSON数据使用回调方法的形式包裹成一个js脚本，方法名也就是上面传入callback查询参数值，这里是sayhello。

sayhello({message:’hello’});

所以，返回如上的js脚本给浏览器，浏览器会立即执行这段代码，我们也就可以通过回调函数回去到数据了，果然程序员们的智慧是无穷的: )。

JSONP的缺点就是只支持GET请求，不支持诸如POST，PATCH,DELETE等请求。

CORS

简单的说就是服务端通过对HTTP响应增加响应头来实现，需要服务器和浏览器都支持才行。

安装

安装依赖包 barryvdh/laravel-cors :

1
$ composer require barryvdh/laravel-cors

修改文件 config/app.php 添加 Cors\ServiceProvider :

1
Barryvdh\Cors\ServiceProvider::class,

全局使用

修改文件 app/Http/Kernel.php class 添加CORS中间件支持:

1
2
3
4
protected $middleware = [
    // ...
    \Barryvdh\Cors\HandleCors::class,
];

中间件组

修改路由组 支持CORS

1
2
3
4
5
6
7
8
9
10
protected $middlewareGroups = [
    'web' => [
       // ...
    ],
    'api' => [
        // ...
        \Barryvdh\Cors\HandleCors::class,
    ],
];

修改cors配置

默认的配置文件在 config/cors.php. 你可以使用下面的命令把它拷贝到自己的配置文件目录下:

1
$ php artisan vendor:publish --provider="Barryvdh\Cors\ServiceProvider"

提示:如果使用了自定义头, 像 X-Auth-Token or X-Requested-With, 你必须设置 allowedHeaders 包含这些头. 或者设置成 array('*') 容许所有的自定义头.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
return [
     /*
     |--------------------------------------------------------------------------
     | Laravel CORS
     |--------------------------------------------------------------------------
     |
     | allowedOrigins, allowedHeaders and allowedMethods can be set to array('*')
     | to accept any value.
     |
     */
    'supportsCredentials' => false,
    'allowedOrigins' => ['*'],
    'allowedHeaders' => ['Content-Type', 'X-Requested-With'],
    'allowedMethods' => ['*'], // ex: ['GET', 'POST', 'PUT',  'DELETE']
    'exposedHeaders' => [],
    'maxAge' => 0,
]

allowedOrigins, allowedHeaders and allowedMethods 如果设置成 array('*') 表示其他任何网站都可以访问.

redSun's Notes

发表于 | 分类于 |

前言

前面一篇文章介绍了在github上使用hexo搭建博客的基本环境和hexo相关参数设置等,博客基本上是可以完美运行了。但是，有一点是不太好，就是源码同步问题，如果在不同的电脑上写文章会非常不方便,必须借助U盘,因为我的linux环境是配在虚拟机里面的 ,要把虚拟机文件装在U盘里面,这样才能解决家里和公司写博客的麻烦,后来搜索发现大家都用Travis CI 自动部署博客,简单说就是把网站源码放在dev分支,hexo生成的静态文件还是保留在master分支,这个没办法改变 ,本地增加.travis.yml文件,只要有了这个文件,你每次push代码Travis CI都能帮你从dev分支取出代码部署到master分支去，代码部署后的效果请点击，https://github.com/wangxujun163163/wangxujun163163.github.io/

Travis CI 工作原理

简单来说，Travis CI原理就是当你每次提交commit到在github后，它会自动检测你的提交，同时根据的配置文件，生成一个Linux虚拟机来运行你的命令，通常这些命令用于测试，构建等。在我们的要求下，就可以用它运行一些hexo g d之类的命令来自动生成、部署我静态网页。

设置Personal Access Token

Personal Access Token 是github API访问的token ,利用这个token 可以让Travis CI check 你的代码 ，push 你的代码.
新建Personal Access Token,点击右上角头像旁边的三角，在菜单中点击“Setting”，进入设置页面
image
点击左侧栏的最下面的“Personal access tokens”，创建Personal access tokens,点击右上角的“Generate new token”，输入用户密码，进入“New personal access token”页面,
image
设置Token description（其实就是名称），选择相应的权限，如下图所示,
image

点击“Generate token”按钮，生成Personal access tokens。如下图中红线标注的部分。注意：这行token只会在刚刚创建完成后显示一次，以后不再显示。因此，复制并保存到本地。

配置Travis CI

登录并配置Travis CI(https://travis-ci.org/)将鼠标放在用户名上，在弹出的菜单中点击“Accounts”，将会显示你在GitHub上的仓库。 找到自己的博客项目，点击X号，将其变成√号。再点击右侧的齿轮，进入该仓库的配置页面。 在项目的设置中开启Build only if .travis.yml is present这一项,
image

本地安装Travis

1
2
3
4
5
6
7
8
9
10
11
#删除旧版ruby
yum remove ruby ruby-devel -y
wget  http://cache.ruby-lang.org/pub/ruby/ruby-2.4-stable.tar.bz2
tar xvf  ruby-2.4-stable.tar.bz2 
cd ruby-2.4.0/
yum install  openssl-devel
./configure --prefix=/usr/local/ruby --with-opessl
make && make install
# 安装travis
gem isntall travis

新建配置文件

首先打开博客项目文件夹，在项目根目录新建.travis.yml配置文件。

1
2
$ cd /root/blog
$ touch .travis.yml

登录travis

1
travis login --auto

然后会提示输入github的用户名和密码

新建变量

在项目根目录下执行:

1
2
3
# 这里的 REPO_TOKEN 是变量名,在后面的配置文件中会用到
# TOKEN 是上面github生成的Token
travis encrypt 'REPO_TOKEN=<TOKEN>' --add

此操作会在.travis.yml文件中添加下面的信息

1
2
3
env:
global:
  secure: fxBE17yzFhC2+FjwVLYbgIhggyfliv3dFCDozTJD7U3n...

Travis配置文件

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
vim  .travis.yml
language: node_js
node_js:
  - "4"  # nodejs的版本
branches:
  only:
  - dev  # 设置自动化部署的源码分支
env:
  global:
    secure: oQSAOgn7y+FUjwpudsPYKKpxOAiIbztL4RB80vZjX05X0c52+S1nsfxtC6nkvNHfhr4WsX/qY6CE+h0rFyYvMXXjVsGgq9HH4wYgi7xPl7w+b+HQo6bc8tu3JHrx+cML9prfz2BwqjaCmKlMff7ciif+Gf75fgLi9g0o+pF8gWATwi4wfb4YB+zIRU/lisbLt+M2FZp9+rY/B0Bl1fMuBZv6+J53b3BJJ3ZvCS7ifLcnXBowKqpk+ubRJUcsYT0qRjE7/++9ipKpiQvTt1ItkDKDAqxe+ISMbBL4UwNIJD/PpqEIrxFpljEn/BRtn4XX3QI3RWnqxlDBv/ojHzvI4UTz83rR+iYgTAqaPokByV+1m+BQtTtjbTYnCGBpLtFDXec8NvAY0DD64cCXhhjouRPSinEqEMOxxcQ6f5OYhEG1zQ3l1paLyBKGpcjuydD0tlefcXUO/6Kb8zQRLFadeJ1VfWAZVfOX68I9o4SgE/d8TPZi/d8XaHc1646eWb8UVr4GUz2oj1tot8+NI+3J4IwTT5okXLAQpcWqveNin5+yegWeef6aBydoy7NtA/yZYdAgRbPJUa7Mq5fwO498Wx1vY8lJpKCsJlwFYqj1sX365PsWcHiVB9K+KMoZFhlk3BXpPPeHgpxR6vt6QyrouD23tU6ZBJXjuRDT4INSjEQ=
    
before_install:
- export TZ='Asia/Shanghai'  # 设置时区
- npm install -g hexo
- npm install -g hexo-cli
- npm install hexo-server
before_script:
# 设置github账户信息
- git config --global user.name "wangxujun163163" #设置github用户名
- git config --global user.email wangxujun163163@163.com #设置github用户邮箱
# github仓库操作
- sed -i'' "s~git@github.com:wangxujun163163/wangxujun163163.github.io.git~https://${REPO_TOKEN}:x-oauth-basic@github.com/wangxujun163163/wangxujun163163.github.io.git~" _config.yml
# 安装依赖组件
install:
- npm install
# 执行的命令
script:
- hexo clean
- hexo generate
# 执行的成功后执行 
after_success:
- hexo deploy

上传网站源码到github dev分支

新建仓库blog，将原来博客目录下的以下内容复制到blog文件夹中

1
2
3
4
5
mkdir  github
cd github/
git init blog
cd blog
cp  /root/blog/*   .  -r

修改.gitignore文件，取消对node_modules文件夹的忽略。（即删除对应的行）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 将github仓库改为自己的博客仓库
git remote add origin git@github.com:wangxujun163163/wangxujun163163.github.io.git
# 添加文件
git add .
# 提交修改
$ git commit -m "test travis"
# 推送至远程仓库dev分支
[root@localhost blog]# git push -u origin dev
error: src refspec dev does not match any.
error: 无法推送一些引用到 'git@github.com:wangxujun163163/wangxujun163163.github.io.git'
[root@localhost blog]# git branch  -a  #查看本地仓库的分支
* master
[root@localhost blog]# git push origin master:dev
git  commit  -m   "modify nodejs version"   .travis.yml 
[root@localhost blog]# git push origin master:dev

我push代码的时候发生了错误,忘记指定本地的分支了

push本地的代码至远程仓库之后，在https://travis-ci.org后台查看相关情况。
image

redSun's Notes

发表于 | 分类于 |

什么是Hexo

Hexo 是一个简单地、轻量地、基于Node的一个静态博客框架，可以方便的生成静态网页托管在github和Heroku上，引用Hexo作者 @tommy351 的话：

快速、简单且功能强大的 Node.js 博客框架。A fast, simple & powerful blog framework, powered by Node.js.

什么是GitHub Pages

GitHub Pages 可以被认为是用户编写的、托管在github上的静态网页。由于它的空间免费稳定， 可以用于介绍托管在github上的Project或者搭建网站。有两种形式: Project Site 和 User/Org Site，二者之间的差异可以戳 GitHub Pages 。

配置环境

安装 epel源

1
rpm -Uvh http://dl.fedoraproject.org/pub/epel/beta/7/x86_64/epel-release-7-0.2.noarch.rpm

安装nodejs

1
2
curl -sL https://rpm.nodesource.com/setup | bash -
yum install -y nodejs

安装HEXO

1
npm install -g hexo

初始化

创建一个文件夹，如：Blog，cd到Blog里执行hexo init的。命令：

1
hexo init

生成静态页面

1
hexo generate（hexo g也可以）

启动本地服务，进行文章预览调试，命令：

1
hexo server

浏览器输入http://10.10.3.61:4000/ (因为我的linux 装在虚拟机上 ,如果你的linux是实体机,直接访问 http://localhost:4000),本地已经简单的设置好了，但是现在域名和服务器都是基于自己的电脑，接下来需要跟github进行关联.

建立Repository

建立与你用户名对应的仓库，仓库名必须为【your_user_name.github.io】，固定写法 然后建立关联，目录结构如下：

1
2
3
4
5
6
7
8
9
10
11
.
├── .deploy       #需要部署的文件
├── node_modules  #Hexo插件
├── public        #生成的静态网页文件
├── scaffolds     #模板
├── source        #博客正文和其他源文件, 404 favicon CNAME 等都应该放在这里
|   ├── _drafts   #草稿
|   └── _posts    #文章
├── themes        #主题
├── _config.yml   #全局配置文件
└── package.json

编辑配置文件_config.yml

翻到最下面，改成我这样子的，注意： : 后面要有空格

1
2
3
4
deploy:
  type: git
  repository: https://github.com/wangxujun163163/wangxujun163163.github.io.git
  branch: master

执行如下命令才能使用git部署

1
npm install hexo-deployer-git --save

发布博客到github

1
hexo deploy

现在个人博客就建立好了
然后再浏览器中输入https://wangxujun163163.github.io/就行了，我的 github 的账户叫 wangxujun163163 ,把这个改成你 github 的账户名就行了

添加博文

1
hexo new "postName"  #新建博文,其中postName是博文题目

博文会自动生成在博客目录下source/_posts\postName.md

文件自动生成格式:

1
2
3
4
5
6
7
8
9
title: "first article"  #博文题目
date: 2014-11-21 11:25:38      #生成时间
tags:                    #标签, 多个标签也可以使用格式[tag1, tag2, tag3,...]
- tag1
- tag2
- tag3
---
正文, 使用 Markdown 语法书写

如果不想博文在首页全部显示, 并能出现阅读全文按钮效果, 需要在你想在首页显示的部分下添加

1
<!--more-->

主题更改

1
git clone git@github.com:litten/hexo-theme-yilia.git themes/yilia

在./_config.yml，修改主题为yilia
theme: yilia
这是yilia主题的预览效果
image

如果觉得不好看可以换next主题

1
git clone https://github.com/iissnan/hexo-theme-next themes/next

在./_config.yml，修改主题为next
theme: next
在切换主题之后 我们最好使用 hexo clean 来清除 Hexo 的缓存。

验证主题

首先启动 Hexo 本地站点，并开启调试模式（即加上 –debug），整个命令是 hexo s –debug。 在服务启动的过程，注意观察命令行输出是否有任何异常信息
当命令行输出中提示出：

1
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时即可使用浏览器访问 http://localhost:4000，检查站点是否正确运行。

设置 站点语言

在./_config.yml，设置简体中文
language: zh-Hans

设置 头像

编辑 站点配置文件_config.yml， 新增字段 avatar， 值设置成头像的链接地址。
avatar: https://avatars3.githubusercontent.com/u/3031198?v=3&s=460

添加多说评论

使用多说前需要先在 多说 创建一个站点，填写站点相关信息。 多说域名 这一栏填写的即是你的 duoshuo_shortname
编辑 站点配置文件_config.yml， 新增字段 duoshuo_shortname
duoshuo_shortname: wangxujun163163

添加百度统计

登录 百度统计， 定位到站点的代码获取页面

1
2
3
4
5
6
7
8
9
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?54d6bb2751acd80aacb143d98697dce2";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

编辑 站点配置文件， 新增字段 baidu_analytics 字段，值设置成你的百度统计脚本 id

发布静态代码到github

1
2
3
hexo clean  #删除缓存
hexo g #生成静态页
hexo d  #发布代码

next 主题的详细配置请参考 http://theme-next.iissnan.com/theme-settings.html

开启打赏功能

只需要 主题配置文件 中填入 微信 和 支付宝 收款二维码图片地址 即可开启该功能。
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /path/to/wechat-reward-image
alipay: /path/to/alipay-reward-image

腾讯公益404页面

腾讯公益404页面，寻找丢失儿童，让大家一起关注此项公益事业！效果如下 https://wangxujun163163.github.io/404.html

使用方法，新建 404.html 页面，放到主题的 source 目录下，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
</head>
<body>
<script type="text/javascript" src="http://www.qq.com/404/search_children.js"
        charset="utf-8" homePageUrl="your site url "
        homePageName="回到我的主页">
</script>
</body>
</html>

添加「标签」页面

1
hexo new page tags

注意：如果有启用 多说 或者 Disqus 评论，页面也会带有评论。 若需要关闭的话，请添加字段 comments 并将值设置为 false，如：

1
2
3
4
5
6
---
title: tags
date: 2017-02-14 17:38:06
type: "tags"
comments: false
---

添加「分类」页面

1
2
3
4
5
6
7
hexo new page categories
---
title: categories
date: 2017-02-14 17:39:40
type: "categories"
comments: false
---

订阅微信公众号

在每篇文章的末尾显示微信公众号二维码，扫一扫，轻松订阅博客。

在微信公众号平台下载您的二维码，并将它存放于博客source/uploads/目录下。

然后编辑 主题配置文件，如下：

配置示例

1
2
3
4
5
# Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

``

阅读全文 »