全端勇士之路 Node.js 基礎學習-實作發送電子郵件並且部屬 HeroKu(1)

發表於 2019-07-04 分類於 Nodejs

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

這一篇開始將會實作前面所學的電子郵件功能並且部屬到 Heroku

前言

這一篇開始將會實作前面所學的電子郵件功能並且部屬到 Heroku

建立專案

這邊我直接偷懶使用 Express 產生器來生成

1 2	express --view=ejs npm install

預設 Express 產生器是會缺少一些我們所需要的套件，所以還要安裝以下這幾個套件

express-session - session 套件
nodemailer - 發送電子郵件套件
connect-flash - 快取套件
csurf - CSRF 防禦
express-validator - 欄位驗證，前面沒有講到，所以順便這章節實作來講
body-parser - 解析表單欄位
dotenv - 環境變數

1	npm install --save express-session nodemailer connect-flash csurf express-validator

建立 UI

接下來開啟 EJS，建立一個 users.ejs 改造成聯絡表單

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1><%- title %></h1>
  <form action="/mailsend" method="post">
    <label for="email">信箱</label>
    <input type="email" name="email" id="email">
    <br>
    <label for="username">姓名</label>
    <input type="text" name="username" id="username">
    <br>
    <label for="content">內文</label>
    <textarea name="content" id="content" cols="30" rows="10"></textarea>
    <input type="submit" value="送出">
  </form>
</body>
</html>

建立 mailsend route

開啟 `users.js，並在底下輸入以下程式碼，先確定可以 post & get 頁面

router.get('/mailsend',function(req, res, next) {
  res.render('users', {
    title: '信件發送頁面'
  });
});

router.post('/mailsend',function(req, res, next) {
  res.send('Hello!');
});

正常畫面一定會顯示成功

畫面成功

並且 POST 出去之後也會正確的拿到 Hello

POST 成功

這樣確保沒問題我們才可以再繼續下去操作