今年的春節(jié)
注定是一個(gè)不一般的春節(jié)
沒有熱熱鬧鬧的過年氣氛
陪伴我們的只有冷冷清清的街道
以及不斷刷新的疫情消息
從春節(jié)開始
疫情是每個(gè)人關(guān)心的重中之重
真希望铣卡，明天一睜眼
小N就能看到以下的好消息
· 火神山最后一位患者出院
· 各地援鄂人員平安返航
· 疫情結(jié)束了 口罩還在路上
· 各企業(yè)單位正式復(fù)工
· 今日全國累計(jì)治愈出院超過1000例
· 全國中小學(xué)開學(xué)時(shí)間
· 全國交通今日恢復(fù)正常
………………
小N相信，這一切都會(huì)很快實(shí)現(xiàn)Ｆ埂煮落！
小N秉承“在家躺著也是做貢獻(xiàn)”的深邃理念天天在床上看疫情圖數(shù)據(jù)但宅在家里實(shí)在沒事干某日實(shí)在“技癢”就研究了下如何制作這份疫情地圖。
△（效果預(yù)覽）
一
準(zhǔn)備工作
1. 進(jìn)入騰訊云控制臺(tái)踊谋，在左上角云產(chǎn)品菜單里蝉仇，選擇【管理與審計(jì)】-> 【訪問管理】，進(jìn)入后在左邊菜單欄中選擇【訪問密鑰】->【API 密鑰管理】殖蚕，生成并獲取一對(duì) API 密鑰轿衔。
2. 在電腦安裝 Node.js 語言運(yùn)行環(huán)境，建議大于 8.0 版本睦疫。
- 安裝
VS Code以及Tencent Serverless Toolkit插件害驹，或者安裝命令行工具。
前者可參考文檔：https://cloud.tencent.com/document/product/583/38106
后臺(tái)可參考文檔：https://cloud.tencent.com/document/product/583/33445
通過了解文檔蛤育，或者本課程之前的章節(jié)宛官，學(xué)習(xí)如何用VS Code插件或命令行工具創(chuàng)建和上傳云函數(shù)葫松。
學(xué)習(xí)完后，請(qǐng)創(chuàng)建一個(gè)名為 yiqing 的云函數(shù)摘刑。
4. 用以下網(wǎng)址下載本課程的代碼包进宝，目錄是 scr/yiqing，并將里面的代碼覆蓋剛才新創(chuàng)建的yiqing云函數(shù)中的文件枷恕。然后在該目錄中命令行運(yùn)行npm i党晋，安裝代碼包的依賴。
https://github.com/lcxfs1991/tencentcloudcourse
二
任務(wù)一 補(bǔ)充云函數(shù)邏輯
在云函數(shù)yiqing的index.js文件中徐块，根據(jù)步驟提示未玻，補(bǔ)充以下的邏輯。其中值得注意的是胡控，該云函數(shù)除了承擔(dān)渲染 html 的能力扳剿，還承擔(dān)了輸出數(shù)據(jù)的能力，這完全是通過鏈接中的api參數(shù)決定昼激。通過這樣的區(qū)別輸出庇绽，就省了多制作一個(gè)云函數(shù)的麻煩，可謂是一舉兩得橙困。
// 1. 接受鏈接上的query參數(shù)api瞧掺，用于判斷是輸出html，還是輸出數(shù)數(shù)
let api = event.queryString.api || false;
// 2. 請(qǐng)求疫情數(shù)據(jù)
let result = await axios.get(
`https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5}`
);
// 3. 中國地圖數(shù)據(jù)
let china_map = JSON.stringify(require('./china.json'));
// 4. 解析并渲染 html 頁面
let html = fs.readFileSync(path.resolve(__dirname, './index.html'), {
encoding: 'utf-8'
});
html = render(html, { disease_data: result.data.data, china_map });
除此以外凡傅，由于后面創(chuàng)建網(wǎng)關(guān)的時(shí)候辟狈，要使用網(wǎng)關(guān)的集成響應(yīng)，因此必須按照以下的格式對(duì)云函數(shù)進(jìn)行輸出夏跷，而不能直接返回一段數(shù)據(jù)哼转。
if (!api) {
return {
isBase64Encoded: false,
statusCode: 200,
headers: { 'Content-Type': 'text/html' },
body: html
};}// 5. 輸出疫情數(shù)據(jù)return {
isBase64Encoded: false,
statusCode: 200,
headers: { 'Content-Type': 'application/json' },
body: result.data.data};
三
任務(wù)二 給模板補(bǔ)充邏輯
在云函數(shù)yiqing的index.html文件中，根據(jù)步驟提示槽华，補(bǔ)充以下的邏輯壹蔓。
// 1. 填充地圖模板變量
let china_map = ${china_map} || null;
// 2. 填充確診、疑似猫态、治愈庶溶、死亡數(shù)據(jù)
let chinaTotal = disease_data.chinaTotal;
let chinaAdd = disease_data.chinaAdd;
$('.confirm .add span').html(`+${chinaAdd.confirm}`);
$('.suspect .add span').html(`+${chinaAdd.suspect}`);
$('.cure .add span').html(`+${chinaAdd.heal}`);
$('.dead .add span').html(`+${chinaAdd.dead}`);
$('.confirm .number').html(`${chinaTotal.confirm}`);
$('.suspect .number').html(`${chinaTotal.suspect}`);
$('.cure .number').html(`${chinaTotal.heal}`);
$('.dead .number').html(`${chinaTotal.dead}`);
// 3. 處理疫情地圖中的確診數(shù)據(jù)格式
/**
* 需要 {name: 'xxx', value: 'xxx'} 這樣的格式
*/
let province = disease_data.areaTree[0].children;
let confirmData = province.map(function(item) {
return {
name: item.name,
value: item.total.confirm
};
});
// 4. 給疫情地圖添加標(biāo)題title: {
text: '疫情地圖',
subtext: `${disease_data.lastUpdateTime} 更新`,
left: 'right'},
// 5. 添加數(shù)據(jù)分段
pieces: [
{ min: 10000, label: '10000人及以上' },
{ min: 1000, max: 9999, label: '1000-9999人' },
{ min: 500, max: 999, label: '500-999人' },
{ min: 100, max: 499, label: '100-499人' },
{ min: 10, max: 99, label: '10-99人' },
{ min: 1, max: 9, label: '1-9人' }
],
// 6. 填寫疫情地圖的數(shù)據(jù)及懸浮框的展示信息
series: [
{
name: '確診病例',
type: 'map',
roam: true,
map: 'china',
label: {
show: true
},
emphasis: {
label: {
show: true
}
},
data: confirmData
}
];
// 7. 定時(shí)拉取
setInterval(function() {
updateMap();
}, 60000);
需要簡單說明的是，該模板是使用了EChart的模板進(jìn)行改造懂鸵，模板地址如下：
https://www.echartsjs.com/examples/zh/editor.html?c=map-usa
下圖是模板的效果。你也可以點(diǎn)擊該模板右下角的Download按鈕將模板的html文件下載下來行疏，然后按自己的喜歡進(jìn)行編輯改造匆光。
完成模板的改造后，請(qǐng)用插件或者命令行工具酿联，上傳云函數(shù)终息。下圖是通過VS Code插件上傳云函數(shù)的示例：
四
任務(wù)三 創(chuàng)建API網(wǎng)關(guān)觸發(fā)器
進(jìn)入控制臺(tái)夺巩，找到云函數(shù)的控制臺(tái)，并選擇云函數(shù)所在的地區(qū)以及命名空間周崭，然后進(jìn)入云函數(shù)的編輯界面柳譬，選擇觸發(fā)方式菜單，然后點(diǎn)擊“添加觸發(fā)方式”续镇，按以下的內(nèi)容添加一個(gè) API 網(wǎng)關(guān)觸發(fā)器美澳。注意，請(qǐng)務(wù)必勾選“啟用集成響應(yīng)”摸航，這樣網(wǎng)關(guān)才能正確渲染HTML的內(nèi)容制跟。
創(chuàng)建完畢后，可以 API 網(wǎng)關(guān)觸發(fā)器中酱虎，拿到訪問路徑路徑雨膨，在瀏覽器中進(jìn)行訪問。如果驗(yàn)證過沒問題后读串，建議將云函數(shù)聊记，通過VS Code插件同步下來，將舊的template.yaml文件替換掉恢暖，這樣避免下次上傳云函數(shù)的時(shí)候排监，生成重復(fù)的 API 網(wǎng)關(guān)觸發(fā)器。只有像下面的Events觸發(fā)事件那樣胀茵，將系統(tǒng)生成的網(wǎng)關(guān)貼上去社露，才不會(huì)重復(fù)生成新的網(wǎng)關(guān)，造成資源浪費(fèi)琼娘。
Events:
service-8lqamcni:
Type: APIGW
Properties:
Enable: true
StageName: release
ServiceId:
HttpMethod: GET
IntegratedResponse: true
五
任務(wù)四 添加自定義域名
如果覺得網(wǎng)關(guān)提供的域名過長峭弟，又或者擔(dān)心這種域名由于安全問題會(huì)被微信等大平臺(tái)封禁，可以自己自行配置自定義域名脱拼。首先瞒瘸，在云函數(shù)yiqing的控制臺(tái)面板里，找到【觸發(fā)方式】熄浓，然后點(diǎn)擊任務(wù)三中添加過的觸發(fā)器里的【API 服務(wù)名】情臭，進(jìn)入更詳細(xì)的網(wǎng)關(guān)配置控制臺(tái)。
進(jìn)入【自定義域名】菜單赌蔑，新建自定義域名俯在，如果想配置 HTTPS 協(xié)議，則需要去申請(qǐng) HTTPS 證書（騰訊云有免費(fèi)的可以申請(qǐng)娃惯，可以跟著提示跳轉(zhuǎn)到證書配置菜單）跷乐。
可以按照下圖的示例進(jìn)行配置。要注意的是趾浅，如果想訪問的路徑更扁平化一點(diǎn)愕提，請(qǐng)選擇“自定義路徑映射”馒稍，路徑填入/，環(huán)境選擇發(fā)布浅侨。如果不這樣配置纽谒，如果原本網(wǎng)關(guān)的域名是：
https://service-lltf3zya-1253970226.gz.apigw.tencentcs.com/release/demo_yiqing
那么配置好之后，訪問的路徑就是：
https://yiqing.docschina.org/release/demo_yiqing
但如果配置了/如输，那么后面的路徑就只剩下demo_yiqing了鼓黔。
在保存配置信息之前，請(qǐng)首先在域名解析服務(wù)商挨决，根據(jù)彈窗的提示请祖，先把域名的 CNAME 配置好。比如這里使用的是下面的域名：
https://yiqing.docschina.org
提示要 CNAME 到service-lltf3zya-1253970226.gz.apigw.tencentcs.com.脖祈。做完 CNAME 后肆捕，就可以保存自定義域名的添加配置。稍等片刻盖高，就可以訪問了慎陵。
如果看到配置列表上顯示“解析成功”，那表明一切的陪著已經(jīng)妥當(dāng)喻奥，請(qǐng)嘗試訪問下面的網(wǎng)址進(jìn)行體驗(yàn)吧~
https://yiqing.docschina.org/demo_yiqing
作為程序員
小N還是建議大家
“勤洗手席纽、少出門”
多在家提升自我
等疫情過去，再一起出去嗨呀~
