如何使用操縱桿定義模板和發送電子郵件

如何設置 SMTP 服務，使用 Joystick 組件準備電子郵件模板，以及使用 @joystick.js/node 中的 email.send() 函數發送電子郵件。

開始使用

在本教程中，我們將使用 CheatCode 的全棧 JavaScript 框架 Joystick。 Joystick 將前端 UI 框架與用於構建應用的 Node.js 後端結合在一起。

首先，我們要通過 NPM 安裝 Joystick。確保在安裝之前使用 Node.js 16+ 以確保兼容性（如果您需要學習如何安裝 Node.js 或在計算機上運行多個版本，請先閱讀本教程）：

終端

npm i -g @joystick.js/cli

這將在您的計算機上全局安裝操縱桿。安裝好之後，接下來我們新建一個項目：

終端

joystick create app

幾秒鐘後，您將看到一條消息已註銷到 02 進入你的新項目並運行 10 ：

終端

cd app && joystick start

在此之後，您的應用應該可以運行了，我們可以開始了。

配置 SMTP

在我們關注代碼之前，為了真正發送 我們的電子郵件，我們需要訪問 SMTP 提供商。那裡有很多選擇。如果您有最喜歡的，請隨意使用它，但對於本教程，我們將推薦 Postmark。 Postmark 是一項出色的 SMTP 服務，在我看來，它提供了市場上最好的 SMTP 產品。

如果您還沒有帳戶，請前往他們的註冊頁面並創建一個。登錄後，Postmark 將自動創建一個名為“我的第一個服務器”的“服務器”（Postmark 中的服務器是與您發送電子郵件的應用相關的項目）。

登錄後，您應該會看到如下內容：

在此處，您需要單擊突出顯示的“消息流”選項卡右側的“API 令牌”選項卡。

如果您將已填充的輸入懸停在“服務器 API 令牌”旁邊，您將可以選擇單擊並複制框中的值。繼續執行此操作，然後打開 25 我們在上面創建的 Joystick 應用的根目錄下的文件。

/settings.development.json

{
  "config": {
    "databases": [
      {
        "provider": "mongodb",
        "users": true,
        "options": {}
      }
    ],
    "i18n": {
      "defaultLanguage": "en-US"
    },
    "middleware": {},
    "email": {
      "from": "<Default Email To Send From>",
      "smtp": {
        "host": "smtp.postmarkapp.com",
        "port": 587,
        "username": "<Paste Your Server API Token Here>",
        "password": "<Paste Your Server API Token Here>"
      }
    }
  },
  "global": {},
  "public": {},
  "private": {}
}

在這個文件中，在 39 下 對象，找到 42 目的。在這裡，對於 55 和 61 字段，我們想粘貼您剛剛複制的值（正如我們將看到的，在發送電子郵件時，這是 Postmark 驗證您的帳戶並知道從 您的 發送電子郵件的方式 郵戳帳戶）。

接下來，對於 74 我們要輸入的字段 82 對於 92 我們要輸入數字107 （這是安全的電子郵件端口）。最後，對於 115 字段，您想輸入您將要發送的默認電子郵件地址（例如，125 )。對於本教程，明智的做法是使用您創建 Postmark 帳戶時使用的電子郵件地址，因為它們將僅啟用 默認發送郵件的那個地址 .已發送電子郵件 133 在 Postmark 批准您的帳戶之前，任何其他地址都將被拒絕（他們有一個相當快速的批准流程，有助於消除垃圾郵件發送者損害發件人對合法帳戶的聲譽）。

設置好後，回到 Postmark 站點，我們要前往 Sender Signatures 頁面，以確保您剛剛輸入的 147 的電子郵件 以上設置完畢。

如果它在列表中，只需檢查該電子郵件地址並單擊驗證鏈接。如果您輸入的地址是不是 在列表上，前往“添加新簽名”頁面並添加它，這樣郵戳就不會阻止您的郵件。

完成此操作並驗證您的地址後，發送應該會按預期工作。如果它不起作用，Postmark 會在您服務器的“活動”選項卡中告訴您。

這就是我們需要為配置做的所有事情。現在，讓我們開始連接我們的電子郵件模板。

創建電子郵件模板

就像 Joystick 中的頁面和其他組件一樣，電子郵件模板也是使用 Joystick 組件創作的。這意味著您可以使用與構建應用程序 UI 相同的熟悉 API 來編寫電子郵件（歸根結底，您仍然只是為電子郵件編寫 HTML 和 CSS，因此沒有學習曲線）。

現在，在您的項目中，我們要創建一個特殊文件夾 156 在您的應用程序的根目錄中，然後在該文件夾中，添加一個文件 161 ：

/email/invoice.js

import ui from '@joystick.js/ui';

const Invoice = ui.component({
  render: () => {
    return `
      <div>
      </div>
    `;
  },
});

export default Invoice;

對於我們的示例，我們將構建一個代表客戶發票的電子郵件模板，將地址和一些行項目作為道具。因為這裡的內容並不是很重要，所以讓我們繼續用我們的內容填充上面的骨架模板，並了解它在做什麼：

/email/invoice.js

import ui from '@joystick.js/ui';

const Invoice = ui.component({
  render: ({ props, each }) => {
    return `
      <div class="invoice">
        <h4>Invoice</h4>
        <address>
          ${props.name}<br />
          ${props.address}<br />
          ${props.suite}<br />
          ${props.city}, ${props.state} ${props.zipCode}
        </address>
        <table>
          <thead>
            <tr>
              <th class="text-left">Item</th>
              <th>Price</th>
              <th>Quantity</th>
              <th>Total</th>
            </tr>
          </thead>
          <tbody>
            ${each(props.items, (item) => {
              return `
                <tr>
                  <td>${item.description}</td>
                  <td class="text-center">$${item.price}</td>
                  <td class="text-center">x${item.quantity}</td>
                  <td class="text-center">$${item.price * item.quantity}</td>
                </tr>
              `;
            })}
          </tbody>
          <tfoot>
            <tr>
              <td colspan="2"></td>
              <td colspan="1" class="text-center"><strong>Total</strong></td>
              <td colspan="1" class="text-center">
                $${props.items.reduce((total, item) => {
                  total += (item.price * item.quantity);
                  return total; 
                }, 0)}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
    `;
  },
});

export default Invoice;

更新我們的 175 函數在這裡包含我們完整的 HTML，我們有三個核心組件：

1. 一個180 將我們的模板描述為“發票”的標籤。
2. 一個191 標籤呈現我們將發票發送給的人的地址。
3. 一個200 呈現訂單項。

對於我們的 212 函數簽名，我們添加了一個正在解構的參數（在 JavaScript 中，這意味著從對像中“提取”屬性，將這些屬性分配給當前範圍內的同名變量）給我們兩個變量：代碼>223 和 236 .

第一個，240 , 將包含 props 或 properties 我們在發送電子郵件時傳遞給我們的模板。第二個，250 是一個函數（在操縱桿中稱為渲染函數），它幫助我們遍歷數組並為數組中的每個項目返回一些 HTML。在這裡，對於 262 中的每個訂單項 我們想要輸出一個表格行來輸出該項目的內容（並對其 274 進行一些乘法運算 和 283 字段）。

這裡唯一需要注意的是 299 我們餐桌的一部分。在這裡，我們使用純 JavaScript 302 將所有訂單項相加 “減少” 315 數組的函數 轉換為單個值，在這種情況下，一個整數，表示 329 中所有項目的總和 數組。

這就是我們的HTML。現在，在我們開始發送之前，讓我們快速添加一些 CSS 來美化一些東西：

/email/invoice.js

import ui from '@joystick.js/ui';

const Invoice = ui.component({
  css: `
    .invoice {
      padding: 20px;
    }

    h4 {
      margin: 0;
      font-size: 20px;
    }

    address {
      margin: 20px 0;
    }

    .text-left {
      text-align: left;
    }

    .text-center {
      text-align: center;
    }

    table {
      width: 100%;
      border: 1px solid #eee;
    }

    table tr th,
    table tr td {
      border-bottom: 1px solid #eee;
      padding: 10px;
    }

    table tfoot tr td {
      border-bottom: none;
    }
  `,
  render: ({ props, each }) => {
    return `
      <div class="invoice">
        ...
      </div>
    `;
  },
});

export default Invoice;

這裡沒有發生太多事情：只是清理間距並為我們的表格添加一些邊框，這樣它看起來更美觀，更容易在我們的電子郵件中閱讀。

巧妙的是，當我們發送電子郵件時，Joystick 會自動獲取我們剛剛添加的 CSS 並將其內聯到我們的 HTML 中（這意味著添加 333 屬性到我們的 HTML 中的適當元素），以使其對 HTML 電子郵件客戶端更友好。

有了這個，接下來，讓我們繼續測試和發送我們的電子郵件。

發送電子郵件

在我們快速連接發送之前，讓我們看看如何測試和預覽我們的 HTML 電子郵件。因為我們的電子郵件只是一個操縱桿組件，就像我們應用程序中的任何其他頁面或組件一樣，我們可以使用 342 呈現它 Joystick 在我們的路由器中提供給我們的功能。

/index.server.js

import node from "@joystick.js/node";
import api from "./api";

node.app({
  api,
  routes: {
    "/": (req, res) => {
      res.render("ui/pages/index/index.js", {
        layout: "ui/layouts/app/index.js",
      });
    },
    "/email/invoice": (req, res) => {
      res.render(`email/invoice.js`, {
        props: {
          name: 'Bert',
          address: '1234 Sesame St.',
          suite: '#123',
          city: 'Sesame',
          state: 'ST',
          zipCode: '12345',
          items: [
            { description: 'Basketball', price: 10.00, quantity: 2 },
            { description: 'Football', price: 7.00, quantity: 5 },
            { description: 'Baseball', price: 4.95, quantity: 20 }
          ],
        },
      });
    },
    "*": (req, res) => {
      res.render("ui/pages/error/index.js", {
        layout: "ui/layouts/app/index.js",
        props: {
          statusCode: 404,
        },
      });
    },
  },
});

在我們的 350 當我們運行 366 時為我們創建的文件 早些時候，在這裡，我們添加了一個名為 377 的路由 並調用 388 .這告訴 Joystick 我們想要在指定路徑渲染組件。此外，因為我們知道我們的組件會期望一些道具，通過作為第二個參數傳遞給 397 的選項對象 我們指定一個 408 傳遞給 415 對象的值 我們想傳遞給我們的組件。

在這裡，我們傳遞了模板的所有預期值，特別是收件人的地址和他們訂購的商品。現在，如果我們打開 424 在瀏覽器中，我們應該會看到我們的模板渲染到屏幕上：

雖然這不會給我們一個完美的 表示我們的電子郵件在電子郵件客戶端中的外觀（眾所周知，電子郵件客戶端的渲染/樣式非常困難且不一致），這是一種無需發送大量電子郵件即可調試模板的好方法。

現在我們可以驗證我們的模板是否正常工作，接下來，讓我們實際發送它。為此，我們將使用 435 441 中的方法 ：

/index.server.js

import node, { email } from "@joystick.js/node";
import api from "./api";

node.app({
  api,
  routes: {
    "/": (req, res) => {
      res.render("ui/pages/index/index.js", {
        layout: "ui/layouts/app/index.js",
      });
    },
    "/email/send": (req, res) => {
      email.send({
        to: '[email protected]',
        from: '[email protected]',
        subject: 'Invoice',
        template: 'invoice',
        props: {
          name: 'Bert',
          address: '1234 Sesame St.',
          suite: '#123',
          city: 'Sesame',
          state: 'ST',
          zipCode: '12345',
          items: [
            { description: 'Basketball', price: 10.00, quantity: 2 },
            { description: 'Football', price: 7.00, quantity: 5 },
            { description: 'Baseball', price: 4.95, quantity: 20 }
          ],
        },
      });
      res.send('Sent');
    },
    "/email/invoice": (req, res) => {
      ...
    },
    "*": (req, res) => {
      res.render("ui/pages/error/index.js", {
        layout: "ui/layouts/app/index.js",
        props: {
          statusCode: 404,
        },
      });
    },
  },
});

在頂部，我們已經導入了 454 464 中的對象 在我們的路線中，我們添加了一條額外的路線 477 （這只是讓發送變得容易——實際上你想調用 487 為了響應諸如 setter 端點之類的真實用戶行為）和內部，我們調用 498 .此函數將使用我們之前設置的 SMTP 連接發送我們的電子郵件（如果您正在關注，則通過 Postmark 或您指定的任何提供商）。

在這裡，我們傳遞了幾個不同的值：

1. 506 這是我們要將測試電子郵件發送到的電子郵件地址。
2. 511 這是我們要發送的電子郵件（如果您省略它，操縱桿將使用 524 您在 533 中指定 540 中的字段 )。
3. 556 收件人將在收件箱中看到的主題行。
4. 567 這是 570 下的文件名 包含我們要使用的模板的目錄。
5. 586 這是我們要在渲染/發送之前傳遞給模板的道具。

而已！為了確保我們的路由在我們調用它時在瀏覽器中響應，我們調用 597 傳遞一個字符串“Sent”來通知我們代碼已經被正確調用。

假設我們的 SMTP 配置是正確的，如果我們訪問 609 在我們的瀏覽器中，幾秒鐘後我們應該會在指定的收件人處收到我們的電子郵件。

總結

在本教程中，我們學習瞭如何使用操縱桿組件創建電子郵件模板。我們學習瞭如何連接組件本身，接受道具，以及如何使用 CSS 設置模板樣式。接下來，我們學習瞭如何在瀏覽器中測試我們的電子郵件模板以確保它看起來正確，最後，如何使用 611 發送它 通過 SMTP 服務郵戳。