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

前言

這一篇開始將會實作前面所學的電子郵件功能並且部屬到 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 成功

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

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

前言

建立專案

建立 UI

建立 mailsend route

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

建立專案

建立 UI

建立 mailsend route

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

全端勇士之路 Node.js-OAuth 2.0 & nodemailer & Gmail

全端勇士之路 Node.js 基礎學習-會員機制(4)

全端勇士之路 Node.js 基礎學習-會員機制(3)

全端勇士之路 Node.js 基礎學習-會員機制(2)

分享這篇文章

留言