簡(jiǎn)單說(shuō)下背景：為了實(shí)現(xiàn)本人一個(gè)云開(kāi)發(fā)小程序《微作簡(jiǎn)歷》的簡(jiǎn)歷下載，不得不自己摸索著搞一搞簡(jiǎn)單服務(wù)端。于是就有了這一次的爬坑經(jīng)歷。在決定通過(guò)接口下載文件之后。選了選使用的技術(shù)（++加黑字體是我最終選用的技術(shù)++）.
- 搭建簡(jiǎn)易后臺(tái)服務(wù)器：nodejs+express
- 實(shí)現(xiàn)html轉(zhuǎn)pdf的工具：html-pdf,wkhtmltopdf,phantom
- phantom要爬取的web網(wǎng)頁(yè)以便生成pdf: 繪制簡(jiǎn)歷模板頁(yè)面放入web服務(wù)器上
一，實(shí)現(xiàn)需求的思路
a: 小程序客戶(hù)端
b: 小程序云開(kāi)發(fā)
c: nodejs+express后臺(tái)服務(wù)
d: nodejs web 網(wǎng)頁(yè)服務(wù)
==a== 長(zhǎng)按事件觸發(fā)下載接口調(diào)用 ==c== 的接口觸發(fā)==d==網(wǎng)頁(yè)請(qǐng)求==c==向==b==請(qǐng)求數(shù)據(jù)返回渲染頁(yè)面后由==d==抓取頁(yè)面并生成pdf文件后返回流至==a==
graph LR
a --> c
c --> d
d --> c
c --> b
二，問(wèn)題及處理
1. web服務(wù)器通過(guò)ip+端口號(hào)訪(fǎng)問(wèn)可行，通過(guò)域名加端口號(hào)訪(fǎng)問(wèn)不可行？
可以看出之所以域名+端口號(hào)訪(fǎng)問(wèn)不成功是因?yàn)閯傞_(kāi)始啟動(dòng)的serve.js中l(wèi)isten()未入?yún)ostname,加入hostname之后就可以了。參照nodejs/server.listen
web 服務(wù)器啟動(dòng)腳本serve.js
let http = require("http");
let fs = require("fs");
let url = require("url");
let path = require("path");
let root = path.resolve(process.argv[2]||'.')
let dir = process.argv[2] || ''
console.log("path/root:"+root)
console.log(__dirname)
// 問(wèn)題產(chǎn)生及解決 start
// const hostname = '0.0.0.0';
const port = normalizePort(process.env.PORT || '8081');
const server = http.createServer(app);
server.listen(port, () => {
console.log(`Server running at prot:${port}/`);
});
// server.listen(port, hostname, () => {
// console.log(`Server running at http://${hostname}:${port}/`);
// });
// 問(wèn)題產(chǎn)生及解決 end
function normalizePort(val) { // 判斷有無(wú)端口號(hào)
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
function app(request, response) {
// 解析請(qǐng)求
let pathName = __dirname + url.parse(request.url).pathname
let pageUrl = pathName.charAt(pathName.length - 1) == "/"?(pathName+="index.html"):pathName
// 獲得對(duì)應(yīng)本地文件路徑
// let filepath = path.join(root, pageUrl)
// 獲取文件狀態(tài)
fs.stat(pageUrl,(err, stats)=>{
if(!err && stats.isFile()) {
// 文件存在且正常
response.writeHead(200);
fs.createReadStream(pageUrl).pipe(response)
} else {
response.writeHead(404);
// response.end('404 Page')
fs.createReadStream(__dirname + "/index.html").pipe(response)
}
})
}
- 后臺(tái)服務(wù)器phantom做的html2pdf接口，本地測(cè)試可行，上傳服務(wù)器后不可行，具體問(wèn)題細(xì)分如下：(后臺(tái)服務(wù)器搭建參照nodejs,express,mysql搭建web服務(wù)器（提供api接口）)
- linux cents os系統(tǒng) npm安裝phantom失敗
代碼上傳至服務(wù)器，npm i。會(huì)報(bào)錯(cuò)phantomjs-2.1.1-linux-x86_64.tar.bz2解壓失敗
經(jīng)排查.bz2解壓需要安裝bzip2，yum -y install bzip2.x86_64。安裝成功之后再次npm就可以了
- 服務(wù)器上 phantom 執(zhí)行報(bào)錯(cuò)EPIPE Write
stark overflow / PhantomJS from Node on Windows
Linux/Centos下安裝部署phantomjs 及使用
此錯(cuò)誤，查詢(xún)半天在stark overflow的一篇相關(guān)問(wèn)答中，回答者提出依賴(lài)環(huán)境相關(guān)概念，而后在一篇博客中有著linux/cents os下部署phantomjs。
yum install fontconfig freetype2
執(zhí)行語(yǔ)句安裝依賴(lài)之后，該問(wèn)題解決
- 本地轉(zhuǎn)化生成pdf數(shù)據(jù)健全，服務(wù)器上生成pdf缺失
phantomjs亂碼問(wèn)題生產(chǎn)環(huán)境處理方案
服務(wù)器上生成pdf，打開(kāi)一看里面只有數(shù)字，或者英文，數(shù)據(jù)殘缺。
一開(kāi)始我以為是phantomjs在頁(yè)面未渲染完畢前轉(zhuǎn)化導(dǎo)致，后經(jīng)一位
后端開(kāi)發(fā)朋友提醒可能是缺失中文字體導(dǎo)致的。遂按照這個(gè)思路在csdn上的一篇文章中按照步驟安裝字體后成功解決。
- http添加ssl使用https供小程序調(diào)用
本人使用的阿里云服務(wù)器，按照相關(guān)文檔使用了免費(fèi)的ssl.不做細(xì)說(shuō)
- 參數(shù)路由傳遞過(guò)程中，解析報(bào)錯(cuò)
http://url?testObj={"a":123,"b":456}
解析testObj時(shí)報(bào)錯(cuò)
string轉(zhuǎn)obj的三種方式
1，JSON.parse(str)
2, new Function('return '+str)()
3, eval("(" + str + ")");
最終解決，嚴(yán)格按照J(rèn)SON格式傳入數(shù)據(jù){"key":"value","key2":"value2"}采用JSON.parse(str)
end
以上為本次dome所遇到的問(wèn)題，以及翻閱的相關(guān)文章。
