ノードを使用したCookieの連絡先フォーム.JSフォームハンドラ-パート2

あなたがこのミニシリーズの第1部と続いたならば、あなたはTrewind CSSでスタイルを整えられた美しい接触形を持つべきです.
第2部では、ノードを使ってフォームの投稿を処理するためのバックエンドを構築します.JS、エクスプレスとsendgrid.
ダウンロードSOURCE CODE

メディア / 接触フォームハンドラ

パート1では、NPMを使用して依存関係を管理します.

依存関係のインストール

新しいプロジェクトフォルダを作成するmkdir form-handler , 現在のディレクトリとして設定するcd form-handler それから実行npm init -y パッケージを作成するには我々の依存関係のために必要とするJSONファイル.
私たちが必要とするすべての依存関係を引きましょう.ランnpm i express @sendgrid/mail dotenv . また、dev依存関係も必要ですnpm i -D nodemon .
すべてがあなたの頭の上に少し行った場合、心配しないでください、私は何が起こったか説明します.
プロジェクトディレクトリでは、新しいディレクトリnode_modules - これは依存関係(サードパーティのコード)のすべてを含んでいます.
あなたが開くならばpackage.json ファイルには、依存関係の下に3つの依存関係があり、devdependenciesの下では1があります.最初の3は私たちの最終的なコードベースで利用されます.
これらの依存関係がそれぞれこのチュートリアルの範囲を超えているかを知りたい場合は、下のリンクを確認してください.
Express
SendGrid
dotenv
nodemon
ここでは、インストールされているすべてを持っています.コンタクトフォームハンドラを構築するために実際のコードを書く前に、私たちが行う必要があります.

sendgridの設定と設定

フォーム応答をメールで送信できるようにするには、フォームリクエストを処理できるメールサービスが必要です.この場合、sendgridを使うつもりです.
あなたがまだしていないならばSendGrid そして、無料のアカウントの登録.
ダッシュボードからアカウントにアクセスすると、APIキーを作成する必要があります.をクリックし、[ APキーを作成]を選択します.
このチュートリアルの目的では、APIへのアクセスが制限されている必要がありますので、キーを適切に指定します.メールを送信するためのアクセスを許可し、[作成]をクリックします.
次に、あなたのAPIキーで表示されます.あなたがこれを一度だけあなたに見せるので、どこか安全にこれをコピーしてください.
また、必要がありますverify your sender identity 任意のメールを送信することができます.
今、我々はAPIキーを持っていると我々の送信者のアイデンティティを確認して、我々のアプリに頭を返し、我々はこのAPIキーを保持するために必要なファイルを作成しましょう.クリエイトア.env プロジェクトのルートファイルtouch .env .
ファイルを開き、キーを追加します.

// .env
SENDGRID_API_KEY=YOUR_KEY_GOES_HERE

メールサーバーの構築

次は、私たちのapp.js ファイルをtouch app.js して開く.
sendgrid APIを使用するには、sendgridライブラリをインポートする必要があります..env 設定ファイルを一緒に結びます.

// app.js
require('dotenv').config();
const sgMail = require('@sendgrid/mail');
sgMail.setApiKey(process.env.SENDGRID_API_KEY);

我々はそれをしている間、我々は同様に急行図書館をインポートし、それを設定することがあります.

// app.js
const express = require('express');
const app = express();

我々が生産にこれを押すとき、ものを構成するのがより簡単にするために、我々もAを加えますPORT 変数.env configファイルと私たちにこのapp.js .

// .env
PORT=3000

// app.js
const port = process.env.PORT || 3000;

我々は今、簡単なサーバーを設定し、ルートを追加するには、我々は我々がフォームの提出を処理するために使用することができます我々のアプリにポストリクエストを受け入れることができるExpressを使用してルートを追加する準備が整いました.
我々の中でapp.js ファイルを使用して表現するアクセスapp 変数を使用するので、サーバーを設定し、ルートを作成します.

// app.js
app.listen(port, (error) => {
    if (error) throw error;
    console.log(`Listening on port ${port}`);
});

app.post('/’, (req, res) => {
    // handle form submission
});

フォーム提出から受け取ったデータを解析するには、ミドルウェアのカップルを追加する必要があります.あなたがミドルウェアが何であるか理解しないならば、あまり心配しないでください.

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

我々が走るならば、この点でnode app.js 我々は、アプリケーションのポート3000を聞いているコンソールのログを取得する必要があります.これはサーバが動作していることを示しています.しかし、我々は継続的に我々は我々のアプリの変更を行うたびにサーバーを起動する必要はありません.
このため、NodeMonパッケージを以前のdev依存性としてインストールしました.
これを設定するには、カスタムスクリプトのカップルを追加する必要がありますpackage.json ファイル.

// package.json
  "scripts": {
    "prod": "node app.js",
    "dev": "nodemon app.js"
  },

注意してください私たちはprodと1つのdev用に1つを追加-彼らは1つのノードと他のnodemonから離れて非常に似ています.
ローカルで我々のアプリを構築するとき、我々は使用してサーバーをスピンすることができますnpm run dev . これは、我々は常にサーバーを再起動することなく、我々のアプリを編集することができます.これは、我々が設定したnodemonパッケージを使用しているためですpackage.json ファイル.
では、今すぐ走りましょうnpm run dev . あなたはNodeMonメッセージのカップルを参照してくださいし、ポート3000を聞いてください、これは動作していることを示しています.
すぐに、我々は我々のポストルートの中にどんなコードも持ちません-それを見ましょう.
このチュートリアルのパート1から、TailWindCSSを使用したスタイルのコンタクトフォームを作成しました.あなたがこのコードを振り返るならば、我々はメッセージ、名前と電子メールからデータを引く必要がある3つの入力フィールドがあるのを見ます.
ユーザーがフォームを送信すると、これらの値は私たちのメールサーバーに投稿されますreq.body .
破壊を使用して、我々は我々のアプリのローカル変数にこれらの値を設定することができます.

const {
    message,
    name,
    email
} = req.body;

これは効果的にリクエスト本文を見て、対応する名前の変数にデータを割り当てます.
その後、これらの変数に格納されたデータを使用してフォーム送信を受け取るためにメールを作成できます.私たちはtemplate literals 簡単に私たちのテキスト内の変数を埋め込むことができます.

    const msg = {
        to: '[email protected]', // Change to your recipient
        from: '[email protected]', // Change to your verified sender
        subject: 'Contact Form Submission',
        text: `Message: ${message} Name: ${name} Email: ${email}`,
        html: `
            <strong>Message:</strong>
            <p>${message}</p>
            <strong>Name:</strong>
            <p>${name}</p>
            <strong>Email:</strong>
            <p>${email}</p>
        `,
    }

現在、我々はデータをsendgridに送る準備ができていますsgMail それをするには.

    sgMail
        .send(msg)
        .then(() => {
        console.log('Email sent')
        res.end()
    })
        .catch((error) => {
        console.error(error)
        res.end()
    })

私たちは今、私たちの連絡先フォームから私たちの提出物を扱うことができる作業簡単なメールサーバーを持っている必要があります.
このメールサーバーをプロダクション環境で使用する場合は、クライアント側とサーバー側の両方の検証を実装して、正しくフォーマットされた安全なデータを送信、受信、処理していることを確認する必要があります.
今のところ、これはこのチュートリアルの範囲を超えています.私は、十分な関心があるならば、これをカバーしているシリーズに第3の部分を加えるかもしれません.

連絡フォームリクエストの送信

シリーズのパート1で作成したフォームを開き、フォームのアクションを更新してメールサーバーAPIをポイントし、メソッド属性をpostに設定します.

<form action="http://localhost:3000" method="post">

あなたのHTMLでそれを確認してください<button> typeを送信します.

<button type="submit">

ノードサーバが動作していることを確認してくださいnpm run dev それから、我々のブラウザーで接触フォームを開けてください.フォームフィールドにいくつかのダミーデータを追加して送信します.
...すべてが正しく動作した場合、我々は電子メールを送信する必要があります私たちのコンソールにメッセージを送信し、送信されたデータをメールを受け取っている.あなたがメールを受け取っていないならば、あなたのジャンクフォルダをチェックしてください.
あなたは、フォームがhttp://localhost:3000/ . これはたいしたことではない.理想的には、フォームが投稿された元のページ、または専用の成功ページにリダイレクトします.
リダイレクトURLを急行ルートにハードコードすることができましたが、これは柔軟性がありません.代わりに、私たちの連絡フォームでJavaScriptの小さな部分を介してこれを追加します.
インサイド<form> タグは、上部には、隠しフィールドを追加-これは、フォームを送信するページのURLを保持します.

<input type="hidden" name="redirect" class="redirect">

さあ、JavaScriptを書きました.我々のコードの底で<body> tagスクリプトタグを次のコードで追加します.

<script>
    const redirectField = document.querySelector('.redirect');
    const pageUrl = window.location.href;
    redirectField.value = pageUrl;
</script>

あなたの開発者ツールを使用してHTMLを検査する場合は、リダイレクト入力には次のような値が表示されますhttp://127.0.0.1:5500/public/index.html . 我々は今、我々のメールサーバにこれを引く必要があります.
フォームのハンドラーコードを更新し、リダイレクト値を追加します.

const {
        message,
        name,
        email,
        redirect
} = req.body;

我々は現在変更することができますres.end() to res.redirect(redirect) 私たちの電子メールコードを送信します.

    sgMail
        .send(msg)
        .then(() => {
        console.log('Email sent')
        res.redirect(redirect)
    })
        .catch((error) => {
        console.error(error)
        res.end()
    })

これは私たちがフォームを提出したページに私たちをリダイレクトしますが、ユーザーエクスペリエンスの観点から、フォームが正常に提出されたかどうかについてのフィードバックに関してまだ欠けています.それを直しましょう.
redirect変数から取得した正確なURLにリダイレクトするのではなく、クエリ文字列を使用してユーザにフォームを伝えることができました.
チェンジres.redirect(redirect) to res.redirect( $リダイレクト?提出する) .
我々がフォームを首尾よく提出するならば、我々のメールサーバーはさらなる質問ストリングで我々の元のURLに我々を送り返します?submit=true . 今、フォームコードでこれをキャプチャする必要がありますので、成功メッセージを表示できます.
インサイド<form> 右上にタグを付け、空を追加するdiv

<div class="form-message"></div>

次にJavaScriptを追加して処理します.

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const formMessage = document.querySelector('.form-message');

if(urlParams.has('submit')) {
    if(urlParams.get('submit') === 'true') {
        formMessage.innerHTML = `<div class="mb-5 p-3 max-w-xl mx-auto shadow-md sm:border-0 md:border md:border-gray-900 md:dark:border-gray-100 bg-green-400 dark:bg-green-400 text-gray-900 dark:text-gray-900">Thanks for your enquiry, someone will be in touch shortly.</div>`;
        formMessage.scrollIntoView();
        window.scrollBy(0, -20);
    }
}

今、リダイレクトを含めるたびに?submit=true あなたは成功メッセージが表示されます.我々のHTMLに新しいクラスを加えたので、我々は我々が走ることを確認する必要がありますnpm run build これらのスタイルがCSSファイルの出力に含まれていることを確認します.
それでわかります.
今、あなたの電子メールアドレスへの提出をメールで送信することができます完全に機能する連絡先を持つ必要があります.確認、消毒などの公的にアクセス可能なフォームを構築するときにする他の考慮点があります.
私はシリーズに3番目の部分を追加するように見えるかもしれません.

メディア / 接触フォームハンドラ