Question

我正在尝试创建一个使用Nodemailer发送电子邮件的Angular应用。

我能够创建一个包含表单的标准Angular应用。然后，我想将数据从此表单传递到.JS文件，然后将使用Nodemailer将该数据发送到电子邮件地址。

到目前为止，我为Nodemailer找到的所有示例都使用View引擎（例如车把等），但我想使用我的角度应用程序的HTML而不是View引擎。

如何在不使用View Engine的情况下将数据从Angular应用程序的表单传递到.JS文件以发送电子邮件？

以下是我到目前为止在Angular应用中拥有的内容：

<form method="POST" action="send">
      <p>
          <label>Name</label>
          <input type="text" name="name">
      </p>
      <p>
          <label>Company</label>
          <input type="text" name="company">
      </p>
      <p>
          <label>Email Address</label>
          <input type="email" name="email">
      </p>
      <p>
          <label>Phone Number</label>
          <input type="text" name="phone">
      </p>
      <p class="full">
          <label>Message</label>
          <textarea name="message" rows="5"></textarea>
      </p>
      <p class="full">
          <button type="submit">Submit</button>
      </p>
  </form>

这就是本教程代码中的内容：

APP.JS

const express = require("express");
const bodyParser = require("body-parser");
const exphbs = require("express-handlebars");
const path = require("path");
const nodemailer = require("nodemailer");

const app = express();

// View engine setup
app.engine("handlebars", exphbs());
app.set("view engine", "handlebars");

// Static folder
app.use("/public", express.static(path.join(__dirname, "public")));

// Body Parser Middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json()); 

app.get("/", (req, res) => {
  res.render("contact");
});

app.post("/send", async (req, res) => {
  const output = `
    <p>You have a new contact request</p>
    <h3>Contact Details</h3>
    <ul>
        <li>Name: ${req.body.name}</li>
        <li>Company: ${req.body.company}</li>
        <li>Email: ${req.body.email}</li>
        <li>Phone: ${req.body.phone}</li>
    </ul>
    <h3>Message</h3>
    <p>${req.body.message}</p>    
    `;

    try{
        var transporter = nodemailer.createTransport({      
            service: "gmail",
            auth: {
              user: "myemail@mail.com",
              pass: "myPassword"
            },
            tls: {
              rejectUnauthorized: false
            }
          });
    }
    catch(err){
        console.log(err.message);
    }

  const mailOptions = {
    from: "myemail@mail.com", // sender address
    to: "myemail@mail.com", // list of receivers
    subject: "Test email", // Subject line
    html: output // plain text body
  };

  let info = await transporter.sendMail(mailOptions);

  console.log("Message sent: %s", info.messageId);
  console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));

  res.render("contact", { msg: "Email has been sent" });
});

app.listen(3000, () => console.log("Server started..."));

接触式手柄

<!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>Acme Web Design</title>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
    <link rel="stylesheet" href="public/css/style.css">
</head>

<body>
    <div class="container">
        <h1 class="brand"><span>Acme</span> Web Design</h1>
        <div class="wrapper animated bounceInLeft">
            <div class="company-info">
                <h3>Acme Web Design</h3>
                <ul>
                    <li><i class="fa fa-road"></i> 44 Something st</li>
                    <li><i class="fa fa-phone"></i> (555) 555-5555</li>
                    <li><i class="fa fa-envelope"></i> test@acme.test</li>
                </ul>
            </div>
            <div class="contact">
                <h3>Email Us</h3>
                {{ msg }}
                <form method="POST" action="send">
                    <p>
                        <label>Name</label>
                        <input type="text" name="name">
                    </p>
                    <p>
                        <label>Company</label>
                        <input type="text" name="company">
                    </p>
                    <p>
                        <label>Email Address</label>
                        <input type="email" name="email">
                    </p>
                    <p>
                        <label>Phone Number</label>
                        <input type="text" name="phone">
                    </p>
                    <p class="full">
                        <label>Message</label>
                        <textarea name="message" rows="5"></textarea>
                    </p>
                    <p class="full">
                        <button type="submit">Submit</button>
                    </p>
                </form>
            </div>
        </div>
    </div>
</body>

如有必要，我可以发布更多代码。

Answer 1

所以我设法将数据从（root.component.html）形式传递到服务器（app.js），捕获并打印到控制台通过POST方法。

代码如下：

root.component.html：

<form #emailForm="ngForm">
    <div class="col-md-6">            
          <div>
            <label for="username">
              Username
            </label>
            <input              
              type="text"
              id="username"
              [(ngModel)]="username"
              required
              name="username"
              #txtUsername="ngModel"
            />            
          </div>
          <div>
            <label for="message">Message</label>
            <textarea 
             id="message"
              placeholder="Please enter your message here"
              [(ngModel)]="message"
              required
              name="message"
              #txtMessage="ngModel"
            ></textarea>
          </div>               
          <button
            axis-button
            class="axis-btn"
            title="Submit"
            data-kind="primary"
            (click)="sendMessage()"
            [disabled]="emailForm.invalid"
          >
            Send Email
          </button>        
    </div>
</form>

root.component.ts：

export class RootComponent implements OnInit {
  constructor(private rootService: RootService) {}

  username: string;
  message: string;

  ngOnInit() {
    this.getData();

  }

  getData() {
    this.rootService.getAPIData().subscribe(
      response => {
        console.log('response from GET API is ', response);
      },
      error => {
        console.log('error is ', error);
      }
    );
  }

  postData(name: string, message: string) {
    this.rootService.postAPIData(name, message).subscribe(
      response => {
        console.log('response from POST API is ', response);
      },
      error => {
        console.log('error during post is ', error);
      }
    );
  }

  sendMessage() {
    this.postData(this.username, this.message);
  }
}

root.service.ts：

export class RootService {
  constructor(private http: HttpClient) {}

  getAPIData() {
    return this.http.get('https://jsonplaceholder.typicode.com/users');
  }

  postAPIData(name: string, message: string) {
    return this.http.post('/api/postData', {
      name: name,
      message: message
    });
  }
}

app.js：

const express = require('express')
const app = express()
const bodyParser = require('body-parser')   

app.get('/', (req, res) => {
    res.send('Welcome to Node API')
})

app.get('/getData', (req, res) => {
    res.json({'message': 'Hello World'})
})

app.post('/postData', bodyParser.json(), (req, res) => {
    res.json(req.body) // Prints the request body to the browser console   
    const output = `Name: ${req.body.name}......Email: ${req.body.message}`;
    console.log(output);
})

app.listen(3000, () => console.log('Example app listening on port 3000!'))

如何通过Node.js将Angular应用程序用作View Engine

1 个答案: