如何使用 Go 语言与 React-Email 库来创建动态生成的电子邮件内容

上述代码片段就是本文中将要使用的React Email模板。要预览该模板，请进入 `_emails` 根目录的终端窗口，然后运行 `npm run dev` 命令。接着使用浏览器访问终端中显示的预览地址。点击左侧侧边栏中的“welcome”链接，你应该会看到如下截图所示的用户界面：

在上述用户界面中，React Email会使用传递给 `welcome` 模板的默认值来生成邮件内容。

要停止服务器运行，请在终端中按下 `CTRL + C` 来终止相关进程。接下来，在 `_emails` 根目录的终端中运行 `npm run export` 命令，即可将 `src` 目录中的HTML文件构建并导出。这些导出的HTML文件会被保存在 `mailer` 目录下的 `templates` 文件夹中。在 `templates` 文件夹中，你会看到一个名为 `welcome.html` 的文件——它其实就是从 `welcome.tsx` 文件生成的HTML内容。

如果要查看项目的当前状态，请访问以下链接：freeCodeCamp-go-react-email/03-create-react-email-template。

从HTML文件生成Go模板

你已经创建了一个React Email模板，预览了它，构建了它，并将其导出了为HTML文件。在这一部分中，你会修改这个React Email模板，使其使用你自己设定的分隔符来代替React默认的大括号；同时，你还会从该HTML文件生成一个Go模板。

首先，请将 `welcome.tsx` 文件中的内容替换为以下代码片段，这样就可以使用 `((` 和 `))` 作为分隔符，并且也会移除TypeScript类型声明：

import {
  Body,
  Button,
  Container,
  Head,
  Heading,
  Html,
  Img,
  Preview,
  Section,
  Tailwind,
  Text,
} from "react-email";

const WelcomeEmail = () => {
  const previewText = `欢迎来到 ((.Company)), ((.Username))!`;

  return (
    
      {previewText}</Preview>
      
        ((.Company)), ((.Username))!
            
            你好，((.Username))，
            
              我们非常高兴你加入 ((.Company))！希望你在我们的团队中度过一段愉快的时光。如果你有任何疑问或需要帮助，请随时联系以下工作人员：
            
            
((.))</li>
                ((end))
              
            
            

                开始使用
              
            

            
              祝好，
              

              <((.Company))>团队
          
        
      
    
  );
};

export default WelcomeEmail;

在 `_emails` 目录的根目录中运行 `npm run export` 命令，即可构建并将这个版本的 React Email 模板导出为 HTML 文件。生成的 HTML 文件会包含 Go 模板注释，当这些注释被 Go 解析时，它们会转化为相应的操作，从而形成可供 Go 应用程序使用的 HTML 模板。

在 `mailer` 目录中创建一个名为 `fs.go` 的文件。该文件中的代码用于将 `templates` 目录中的文件嵌入到 Go 应用程序中以便使用。请将以下代码片段复制并粘贴到 `fs.go` 文件中：

```go
package mailer

//go:embed templates/*
var embedded embed.FS
var templateFS, _ = fs.Sub.embedded, "templates")


//go:embed templates/* 这行代码告诉 Go 编译器将当前目录（`mailer` 目录）中的文件嵌入到 Go 应用程序的编译后的二进制文件中。这样，Go 应用程序才能访问这些 HTML 模板文件。`templateFS` 变量用于访问 `templates` 子目录中的文件。

在 `mailer` 目录中再创建一个文件，并将其命名为 `mailer.go`。`mailer.go` 文件中包含用于解析 HTML 文件以生成 Go HTML 模板以及发送电子邮件的代码。请将以下代码片段复制并粘贴到 `mailer.go` 文件中：

package mailer

return err
}


在上述代码片段中：

- `setUpTemplates` 函数创建了一个模板对象 `tmpl`，并设置了其分隔符。然后它解析 `welcome.html` 文件，将其转换为 Go 模板，并将生成的模板存储在 `welcomeEmailTmpl` 变量中。最后，这个模板被添加到 `templates` 映射中，其中键为 `welcomeMailKey`，函数返回 `templates` 映射。

- `NewMailer` 函数创建并返回一个 `Mailer` 对象，该对象包含了用于操作这些模板的代码。

- `WriteWelcomeMail` 函数用于使用实际的数据来执行欢迎邮件模板。

要查看当前代码库的状态，请访问freeCodeCamp-go-react-email/04-create-golang-template。

在浏览器中渲染动态邮件

在本节中，您将创建一个简单的Web服务器，用于查看其中包含了动态数据的邮件模板渲染结果。

请将main.go文件的内容替换为以下代码片段：

package main

import (
	"fmt"
	"net/http"
	"os"

	pkgMailer "github.com/orimdominic/freeCodeCamp-go-react-email/mailer"
)

func main() {
	mailer, err := pkgMailer.NewMailer()
	if err != nil {
		fmt.Fprint(os.Stderr, err)
		os.Exit(1)
	}

	http.HandleFunc("/mail", func(w http.ResponseWriter, r *http.Request) {
	(username := r.URL.Query().Get("username")
		company := r.URL.Query().Get("company")
		gophers := []string{"Tinky Winky", "Dipsy", "Laa-Laa", "Po"}

		err = mailer.WriteWelcomeMail(w, pkgMailer.WelcomEmailData{
			Username: username,
			Company:  company,
			Gophers:  gophers,
		})
		if err != nil {
			http.Error(w, err.Error(), http.StatusInternalServerError)
			return
		}
	})

	port := ":8888"
	err = http.ListenAndServe(port, nil)
	if err != nil {
		fmt.Fprint(os.Stderr, err)
		os.Exit(1)
	}
}

上述代码首先使用mailer.go文件中的NewMailer函数创建了一个邮件发送对象。在完成错误处理后，它会在端口8888上启动一个简单的Web服务器，并设置GET /mail路由。

GET /mail路由会接收两个查询参数：username和company，这些参数将会被用作邮件内容中的动态数据。通过WriteWelcomeMail函数执行模板后，生成的结果会以HTML格式显示在浏览器中。您可以使用这个路由来测试mailer包的功能。

在启动服务器之前，您应该先构建并导出React Email模板文件，这样您的HTML文件就能始终使用最新的模板内容。为了方便进行构建、导出和运行服务器，您可以使用Makefile文件。

请进入项目根目录的终端窗口，创建一个名为Makefile的文件，然后将以下代码片段复制到其中：

run: email-build
	go run cmd/main.go

email-build: mailer/_emails
	npm --prefix mailer/_emails run export

上述Makefile中的run脚本会将React Email模板构建并导出为HTML文件，保存到mailer/templates目录中，然后启动Go应用程序。请注意，Makefile中使用的是制表符而不是空格来进行代码缩进。

在项目根目录的终端窗口中运行make run命令，然后在浏览器中访问http://localhost:8888/mail?username=Nicole&company=GoWorld，您就会看到邮件内容在浏览器界面中被渲染出来的效果。

请更换URL中的username和company值，以便使用不同的参数来测试该邮件功能。

通过这种设置，你可以将模板执行后的结果直接发送到你的邮件客户端中，收件人看到的邮件内容将与在浏览器中显示的效果完全一致。

如果你想查看当前代码库的进展状态，请访问freeCodeCamp-go-react-email/05-render-dynamic-email。

使用go-mail和MailHog发送并测试邮件

在上一节中，你提供了数据来执行模板，但邮件内容是在浏览器中显示的，而不是通过邮件客户端。在这一节中，你会使用go-mail来发送邮件，而MailHog则会拦截并显示这些邮件。

这一节是可选的。如果你没有在当地安装MailHog，那么你需要使用Docker Compose来为这个项目配置它。在继续之前，请确保你的电脑上已经安装了Docker Compose。

在终端中，导航到项目的根目录，然后运行go get github.com/wneessen/go-mail来安装go-mail。在项目的根目录下创建一个compose.yml文件，并将下面的代码片段粘贴到其中：

services:
  mailhog:
    image: mailhog/mailhog
    restart: no
    logging:
      driver: "none" # 禁止保存日志
    ports:
      - 1025:1025 # SMTP服务器
      - 8025:8025 # Web界面

在终端中，导航到项目的根目录，然后运行docker compose up来拉取并启动MailHog SMTP服务器。MailHog会在1025端口上监听邮件，并在http://localhost:8025提供Web界面，你可以通过这个界面查看被拦截的邮件。根据你的网络连接情况，初始的镜像拉取过程可能需要几分钟时间。

请将mailer.go文件的内容替换为下面的代码片段：

package mailer

import (
	"html/template"
	"io"

	"github.com/wneessen/go-mail"
)

const (
	welcomeMailKey = "welcome_mail"
	sender = "noreply@localhost.com"
)

func setUpTemplates() (map[string]*template.Template, error) {
	templates := make(map[string]*template.Template)

	tmpl := template.New("welcome.html").Delims("((", "))
	welcomeEmailTmpl, err := tmpl.ParseFS(templateFS, "welcome.html")
	if err != nil {
		return nil, err
	}

	templates[welcomeMailKey] = welcomeEmailTmpl

	return templates, nil
}

type Mailer struct {
	client    *mail.Client
	templates map[string]*template.Template
}

// NewMailer用于创建一个新的邮件发送器对象
func NewMailer() (*Mailer, error) {
	tpls, err := setUpTemplates()
	if err != nil {
		return nil, err
	}

	c, err := mail.NewClient(
		"localhost",
		mail.WithPort(1025),
		mail.WithTLSPolicy(mail.NoTLS),
	)

	if err != nil {
		return nil, err
	}

	return &Mailer{
		client:    c,
		templates: tpls,
	}, nil
}

type WelcomEmailData struct {
	Username string
	Company  string
	Gophers  []string
}

func (mailer *Mailer) WriteWelcomeMail(w io.Writer, data WelcomEmailData) error {
	tmpl := mailer.templates[welcomeMailKey]
	err := tmpl.Execute(w, data)

	return err
}

func (mailer *Mailer) SendWelcomeMail(to string, data WelcomEmailData) error {
	m := mail.NewMsg()
	m.From(sender)
	m.To(to)
	m.Subject("欢迎来到 " + data COMPANY)
	m.SetBodyHTMLTemplate(mailertemplates[welcomeMailKey], data)

	err := mailer.client.DialAndSend(m)
	return err
}

mailer.go文件中的新变更包括以下内容：

• 引入了go-mail包

• 创建了一个名为sender的常量，用于存储发件人的电子邮件地址

• 使用go-mail包构建了一个邮件发送客户端

• 在mailer结构体上添加了SendWelcomeMail方法，该方法会使用welcomeEmailTmpl模板生成电子邮件，然后将其发送给接收者

在main.go文件中，需要将GET /mail路由对应的处理函数从WriteWelcomeMail改为SendWelcomeMail。你可以使用任何你想使用的电子邮件地址；下面的代码示例中使用的是fcc@go.dev：

		err := mailer.SendWelcomeMail("fcc@go.dev", pkgMailer.WelcomEmailData{
			Username: username,
			Company:  company,
			Gophers:  gophers,
		})
		if err != nil {
			http.Error(w, err.Error(), http.StatusInternalServerError)
			return
		}

		fmt.Fprint(w, "电子邮件已发送")

请确保邮件服务器正在运行，你可以在浏览器中访问http://localhost:8025来检查服务器状态。在项目的根目录下，通过运行make run命令启动服务器。再次访问http://localhost:8888/mail?username=Nicole&company=GoWorld来测试该路由的功能是否正常。接下来，访问http://localhost:8025查看邮件服务器的界面，你应该会看到类似下图所示的用户界面：

点击“Welcome to Helix”即可查看邮件内容。

如果你想了解当前代码库的运行状态，可以访问freeCodeCamp-go-react-email/06-send-email。

结论

通过完成本教程的学习，你已经：

• 学会了如何将React Email模板转换为Go语言编写的电子邮件模板

• 了解了如何使用Makefile来运行自定义脚本

• 能够在浏览器中预览生成的电子邮件，并使用MailHog进行测试

现在你再也不用费心去编写原始的HTML代码来制作邮件，也不需要学习新的模板语言了。借助React Email和Go模板，你可以更加轻松地构建并发送美观的电子邮件。