全端勇士之路 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 改造成聯絡表單

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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 頁面

1
2
3
4
5
6
7
8
9
router.get('/mailsend',function(req, res, next) {
res.render('users', {
title: '信件發送頁面'
});
});

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

正常畫面一定會顯示成功

畫面成功

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

POST 成功

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

0%