[Node.js實作] 幹話產生器-2
建置網頁畫面與功能實作
main.handlebars
在</head>前引入bootstrap CDN與FontAweomse CDN
在</body>前引入bootstrap相關script
<body>中加入navbar
index.handlebars
加入卡片模板，把外觀大致刻一下…
把產生幹話的地方先寫為身為一個{{target}}，{{task}}，{{phrase}}
這樣等等可以用js return這三個參數來構成一句幹話。
現在的外觀大概看起來像這樣：
如果把「對他說幹話」的按鈕按下去…
會出現傳說中的Cannot POST /
因為還沒指定給表單用的POST路由，所以要回到app.js來加入該路由。
一般處理資料量較大、或保密性較高的資料時，就會使用 POST 方法，不會像GET方法將相關的input列在網址上。
設定POST路由
app.js
加入上述程式碼來設定post路由，設定好之後按下按鈕就不會出現Cannot POST /了，但是如果要取得POST的資料(也就是使用者的選擇)，還需要安裝body-parser來取得post資料。
安裝body-parser
於終端機下的專案根目錄進行安裝
$ npm install body-parser回到app.js引入body-parser
const bodyParser = require('body-parser')接著使用app.use()，規定任何路由的請求都要經過app.use()裡面處理
urlencoded是處理URL encoded格式的方法
這列程式碼要在所有路由之前才可以接到全部路由
app.use(bodyParser.urlencoded({ extended: true }))在post路由中加入可以console.log(‘req.body’, req.body)來看看req.body裡面回傳的值為何。
按下網頁上的幹話按鈕，回到終端機看看可以印出什麼。
選擇設計師就回傳了{ target: ‘designer’ }
只要可以拿到使用者的選擇，就可以開始用JS來操作演算法並回傳了。
幹話演算法
聽說寫function前要養成先寫虛擬碼的好習慣XD
//幹話由三句話串連而成：//"身為一個工程師，隨手寫個APP，很容易吧？"//可以拆解為"身為一個{{target}}，{{task}}，{{phrase}}吧？"//target可以從req.body取得，加到幹話中//task可以從task陣列中隨機選出一句話，加到幹話中//phrase可以從phrase陣列中隨機選出一句話，加到幹話中//回傳幹話
大概是這樣吧，開始寫！
指定的材料長這樣：
const task = {engineer: ['加個按鈕', '加新功能', '切個版', '改一點 code'],designer: ['畫一張圖', '改個 logo', '順便幫忙設計一下', '隨便換個設計'],entrepreneur: ['週末加班', '要能賺錢', '想個 business model', '找 VC 募錢']}const phrase = ['很簡單', '很容易', '很快', '很正常']
先分辨並寫入用戶選擇的對象：
在終端機呼叫來看看是否有成功：
隨機取得對應的工作和幹話：
這裡使用Math.random和Math.floor搭配，來隨機取出陣列中的某工作或某幹話。
將兩個隨機function放入gibberishGenerator()中：
再去終端機測試一下結果…
到此就完成幹話演算法了，但是還不能給app.js使用，所以最後要改寫一下…
改寫並匯出給
app.js使用
- 把最上面的兩行常數註解起來，讓之後用
req.body作為參數 - 最後的
console.log(gibberish)改成return gibberish來回傳結果 - 最下面執行函式的部分刪除
- 最後加上
module.exports = gibberishGenerator將該function匯出
匯入至
app.js
在app.js中用require來引入：
const gibberishGenerator = require(‘./gibberish_generator’)並在POST路由中印出回傳值來確認能否正常使用
app.post('/', (req, res) => {console.log('get form POST request')console.log(gibberishGenerator(req.body))res.render('index')})
在瀏覽器點看看按鈕看看終端機上的訊息！
看來有成功匯出並運作了，最後就是讓他和html結合了。
將
gibberishGenerator(req.body)的值供index使用
改寫一下剛剛的POST路由內容，將gibberishGenerator(req.body)的回傳值儲存於一個常數中，並於渲染方法中帶入該常數。
app.post('/', (req, res) => {console.log('get form POST request')const gibberish = gibberishGenerator(req.body)res.render('index', { gibberish: gibberish })})
在index中引入if判斷式來顯示幹話區塊
現在gibberish可以被引入index中了，原本的顯示區塊將其用 {{#if gibberish}}…{{/if}}進行包裹，讓其判斷為gibberish存在時才會顯示該區塊，並在 <span class=”mr-2">…</span>中代入gibberish的值。
