使用 ejs 和 node 创建动态 html
Posted
技术标签:
【中文标题】使用 ejs 和 node 创建动态 html【英文标题】：Create dynamic html with ejs and node 【发布时间】：2017-10-06 19:56:17 【问题描述】：我正在尝试向使用表单提交的电子邮件 ID 发送动态邮件。 下面是我的 app.js 代码。
//Importing Packages
var express = require('express');
var nodemailer = require('nodemailer');
var bodyParser = require('body-parser');
//Applying Express,Ejs to Node
app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded(extended:true));
//Creating Nodemailer Transport
var transporter = nodemailer.createTransport(
host: 'smtp.zoho.com',
port: 465,
secure: true,
auth:
user: 'noreply@*****.com',
pass: '******'
);
//Root Route Setup
app.get('/', function(req, res)
res.render("landing")
);
//Route to send the mail
app.post('/send', function(req,res)
//Setting up Email settings
var mailOptions =
from: 'noreply@*****.com',
to : req.body.mail,
subject: 'Verify Your Email',
generateTextFromhtml : true,
html: path: './tmpl.html'
;
//Execute this to send the mail
transporter.sendMail(mailOptions, function(error, response)
if(error)
console.log(error);
else
console.log(response);
);
res.send("Mail succesfully sent!")
);
//Server &Port Settings
app.listen(3333, function()
console.log("Server is running...")
);
下面是我的Form页面代码，是一个ejs文件
<form action="/send" method="POST">
<input type="email" name="mail" placeholder="Enter your email">
<input type="text" name="name" placeholder="Enter your name">
<input type="submit">
</form>
下面是我的 html 模板，它被邮寄到使用表单提交的 ID。
<html>
<body>
<h1>Hello World!</h1>
<a href="http://www.google/com">Link</a>
</body>
</html>
如何从表单中读取姓名，然后将其包含在电子邮件中，以便在每封电子邮件中，我可以使用变量向该人发送地址，例如“Hello Mr name”
我无法弄清楚如何在没有电子邮件阻止的情况下将变量传递给 html 文件，因为我无法在 HTML 文件中使用 Script 标签使用 javascript，因为几乎所有邮件提供商都在电子邮件中阻止 JS！
有人可以帮我解决这个问题吗？
【问题讨论】：
您需要先生成 HTML，然后将其包含在电子邮件对象中。 我该怎么做？我需要哪些工具？很抱歉问了一些愚蠢的问题，我是 JS 和 Node 的初学者。 :S 我用这个：github.com/crocodilejs/node-email-templates#basic 【参考方案1】：您可以使用已经通过 express 设置的 ejs 模板引擎。调用app.render() 会将您指定的模板呈现为字符串并将其传递给它的回调，以及您传递给它的任何数据。所以回调有点难看，但这是一个不添加任何依赖项的解决方案。
简而言之，让您的电子邮件模板成为一个名为 verifyEmail.ejs 的 ejs 文件，
在从 app.render 回调发送电子邮件之前，使用 app.render() 使用 POST 请求正文中的数据呈现它。
// app.js
app.post('/send', function(req,res)
// Use the ejs rendering engine to render your email
// Pass in the 'name' variable that is used in the template file
app.render('verifyEmail', name: req.body.name, function(err, html)
if (err)
console.log('error rendering email template:', err)
return
else
//Setting up Email settings
var mailOptions =
from: 'noreply@*****.com',
to : req.body.mail,
subject: 'Verify Your Email',
generateTextFromHtml : true,
// pass the rendered html string in as your html
html: html
;
//Execute this to send the mail
transporter.sendMail(mailOptions, function(error, response)
if(error)
console.log(error);
res.send('Mail Error! Try again')
else
console.log(response);
res.send("Mail succesfully sent!")
);
);
);
我添加了一些错误处理，并在由于服务器错误导致电子邮件未发送时通知用户。您之前调用res.send() 的方式会告诉用户电子邮件在发送之前已成功发送。
将您的模板文件夹放在与“登陆”模板相同的目录中，或者您的 ejs 文件所在的任何其他位置。
通过调用<%= %> 标记之间的变量将数据插入模板。在渲染模板时通过传递同名变量来填充它。
来自ejsdocs：
... 标签内的所有内容都将自身插入到返回的 HTML 中 字符串。
// views/verifyEmail.ejs
<html>
<body>
<h1>Hello <%= name %></h1>
<a href="http://www.google/com">Link</a>
</body>
</html>
【讨论】：
以上是关于使用 ejs 和 node 创建动态 html的主要内容，如果未能解决你的问题，请参考以下文章
使用 Notepad++ 在 HTML 文件中突出显示 EJS 语法
为啥在ubuntu服务器的nodejs中动态创建目录时出错？
使用 Express、Mongodb 和 EJ 显示下拉动态数据