簡單記錄下網站首頁的搭建過程。 背景 自從網站功能變數名稱備案成功下來，一直以來都沒想好首頁應該怎麼寫。其實不是沒想好，而是沒有準備好首頁的多張大背景圖片應該存放在那，畢竟是最廉價的雲伺服器，應該本著勤儉持家的理念，能省就省嘛。不過還好， "bing中文搜索" 官網的背景圖片每天都會更新，於是萌生出了用no ...
簡單記錄下網站首頁的搭建過程。
背景
自從網站功能變數名稱備案成功下來，一直以來都沒想好首頁應該怎麼寫。其實不是沒想好，而是沒有準備好首頁的多張大背景圖片應該存放在那，畢竟是最廉價的雲伺服器，應該本著勤儉持家的理念，能省就省嘛。不過還好，bing中文搜索官網的背景圖片每天都會更新，於是萌生出了用nodejs爬別人圖片的方法~
環境準備
首先，需要給伺服器安裝nodejs,centOS下通過yum install nodejs方式安裝的nodejs是0.10版本的，根本無法寫es6代碼。沒辦法，只能通過源碼安裝了
wget http://nodejs.org/dist/v4.5.0/node-v4.5.0.tar.gz
tar -zxvf node-v4.5.0.tar.gz
cd node-v4.5.0
./configure
make
make installps：過程中如果報找不到g++編譯器，則請先安裝g++yum install gcc-c++
輸入node -v檢驗是否安裝成功
這裡再順便提一下安裝npm的方法吧：
curl https://npmjs.com/install.sh | sudo sh
輸入npm -v檢驗是否安裝成功
爬圖片
咳咳，接下來說到重點了，準備爬cn.bing.com網站的背景圖片。
第一步
進入bing中文網址，cmd+alt+i打開開發者工具選項，Network選項,cmd+r刷新網頁，找到網站的背景圖片Ajax選項，這就是我們要找的Ajax請求url
返回的結果如下所示
第二步
github上有很多開源的nodeje抓包庫，如superagent
而這次我所使用的是nodejs原生api
http.get(url, (res)=>{}): get請求
https.get(url, (res)=>{}): https方式
ps: 其實上面兩種都是http(s).request(options, (res)=>{})的GET方式簡化版，只是因為當前大部分網站都是GET請求方式。
通過上面的圖片，我們此處使用http.get():
const http = require('http');
const ajaxUrl = 'http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1';
http.get(ajaxUrl, (res) => {
res.on('data', (d) => {
console.log(d)
})
})此處終端的列印出來的是buffer對象，所以我們需要將其轉為字元串，然後轉為json對象取到需要的圖片url,代碼如下：
const json = JSON.parse(d.toString());
const src = json.images[0].url;上面中的src就是我們需要的圖片url地址。
第三步
通過以上方式，雖然我們獲取到了目標圖片的url，但如何把它應用到首頁還是個問題。
本人採取的方法是通過nodejs啟動一個服務，返回目標字元串background-image：url(' + src + ')，首頁通過ajax請求之後添加到body的style對象上。
查看效果：https://qingguoing.com:3000
等等，有個坑，首頁是通過nginx跑在80埠，而nodejs服務是跑在3000埠，於是就涉及到ajax跨域的問題。解決方法也很簡單，nodejs設置返回頭Access-Control-Allow-Origin: *。所以nodejs最終代碼如下所示：
const https = require('https');
const http = require('http');
const fs = require('fs');
const options = {
key: fs.readFileSync('./ssl/privkey1.pem'),
cert: fs.readFileSync('./ssl/fullchain1.pem')
};
const ajaxUrl = 'http://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1';
https.createServer(options, function(request, response) {
response.writeHead(200, {
'Content-Type': 'text/html',
'Access-Control-Allow-Origin': 'https://qingguoing.com'
});
http.get(ajaxUrl, (res) => {
res.on('data', (d) => {
const json = JSON.parse(d.toString());
const url = json.images[0].url;
response.write('background-image:url('+ url +')');
response.end();
})
})
}).listen(3000);
console.log('server is listening on the port 3000');ps1: 個人網站採用的是https鏈接，ssl證書是通過letsencrypt免費生成。
ps2: ajax跨域頭只設置了個人網站的首頁，所以大家如果想按我這種窮屌絲方式爬去圖片，還是去爬微軟大廠的吧。既然都看到這了，相信對您來說，這些都是小菜一碟
最後
最後當然就是運行node程式了。不過如果你像我一樣，通過終端命令遠程連接到伺服器端，那麼你應該按照如下方式執行node命令：
node app.js&
此時開啟的服務是後臺跑起的，直接退出並不會終止已跑起的node程式
