如何使用Angular 6结合ASP.NET Core Web API实现邮件发送功能？

嘿，作为新手想实现这个邮件发送功能其实没那么复杂，我给你拆成前端界面、后端API和注意事项三个部分，一步步来就搞定啦～

核心逻辑是：前端做输入表单收集用户信息，后端写Web API处理邮件发送（因为前端直接暴露邮箱密码会有安全风险，必须通过后端中转）。我们用Node.js + Express做后端，Nodemailer处理邮件发送，前端用基础HTML+JavaScript就行，新手友好。

第一步：搭建前端输入界面 #

先写一个简单的表单，让用户输入邮箱、密码、收件人/抄送地址，还能上传PDF附件：

<!DOCTYPE html>
<html>
<head>
    <title>发送今日销售报表邮件</title>
    <style>
        .form-group { margin: 10px 0; }
        label { display: inline-block; width: 120px; }
        small { color: #666; }
    </style>
</head>
<body>
    <h3>发送今日销售总额邮件</h3>
    <form id="emailForm">
        <div class="form-group">
            <label>你的邮箱:</label>
            <input type="email" id="senderEmail" required>
        </div>
        <div class="form-group">
            <label>邮箱授权码:</label>
            <input type="password" id="senderPassword" required>
            <small>*注意：Gmail/QQ/163等邮箱需用<strong>授权码</strong>代替登录密码</small>
        </div>
        <div class="form-group">
            <label>收件人邮箱:</label>
            <input type="email" id="recipientEmail" required>
        </div>
        <div class="form-group">
            <label>抄送邮箱:</label>
            <input type="email" id="ccEmail">
        </div>
        <div class="form-group">
            <label>上传PDF附件:</label>
            <input type="file" id="pdfAttachment" accept=".pdf" required>
        </div>
        <button type="submit">发送邮件</button>
    </form>

    <script>
        document.getElementById('emailForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            
            // 把表单数据打包成FormData（方便传文件）
            const formData = new FormData();
            formData.append('senderEmail', document.getElementById('senderEmail').value);
            formData.append('senderPassword', document.getElementById('senderPassword').value);
            formData.append('recipientEmail', document.getElementById('recipientEmail').value);
            formData.append('ccEmail', document.getElementById('ccEmail').value);
            formData.append('pdfFile', document.getElementById('pdfAttachment').files[0]);

            try {
                // 调用后端的邮件发送接口
                const response = await fetch('http://localhost:3000/send-email', {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();
                alert(result.message);
            } catch (error) {
                alert('发送失败，请检查后端服务是否运行');
                console.error('出错啦:', error);
            }
        });
    </script>
</body>
</html>

第二步：后端API实现（核心部分） #

1. 先初始化项目并安装依赖：
   打开终端，创建一个文件夹，执行以下命令：

   npm init -y
   npm install express nodemailer multer cors
   

   • express：用来搭建Web服务器
   • nodemailer：专门处理邮件发送的工具
   • multer：处理前端上传的PDF文件
   • cors：解决前后端跨域请求问题

2. 写后端代码（新建server.js文件）：

const express = require('express');
const nodemailer = require('nodemailer');
const multer = require('multer');
const cors = require('cors');
const fs = require('fs');

const app = express();
app.use(cors());

// 配置Multer：临时存储上传的PDF文件
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        // 先创建temp文件夹（如果不存在）
        const tempDir = './temp';
        if (!fs.existsSync(tempDir)) fs.mkdirSync(tempDir);
        cb(null, tempDir);
    },
    filename: (req, file, cb) => cb(null, file.originalname)
});
const upload = multer({ storage });

// 邮件发送接口
app.post('/send-email', upload.single('pdfFile'), async (req, res) => {
    const { senderEmail, senderPassword, recipientEmail, ccEmail } = req.body;
    const pdfPath = req.file.path;

    try {
        // 创建邮件传输器（配置你的邮箱SMTP服务器）
        let transporter = nodemailer.createTransport({
            host: 'smtp.qq.com', // 替换成你的邮箱SMTP：Gmail用smtp.gmail.com，163用smtp.163.com
            port: 587, // 通常是587（TLS）或465（SSL）
            secure: false, // TLS模式设为false，SSL设为true
            auth: {
                user: senderEmail,
                pass: senderPassword // 这里填邮箱授权码
            }
        });

        // 配置邮件内容
        let mailOptions = {
            from: senderEmail,
            to: recipientEmail,
            cc: ccEmail || '', // 抄送可选，为空则不填
            subject: 'Total Sales Today',
            text: 'Total Sales Today', // 邮件正文的纯文本内容
            attachments: [
                {
                    path: pdfPath,
                    filename: req.file.originalname
                }
            ]
        };

        // 发送邮件
        await transporter.sendMail(mailOptions);
        // 发送成功后删除临时PDF文件
        fs.unlinkSync(pdfPath);
        res.json({ message: '邮件发送成功！' });
    } catch (error) {
        console.error('发送错误:', error);
        res.status(500).json({ message: '邮件发送失败，请检查邮箱配置' });
    }
});

// 启动服务器
const PORT = 3000;
app.listen(PORT, () => console.log(`服务器运行在 http://localhost:${PORT}`));

第三步：新手必看注意事项 #

• 邮箱授权码获取：主流邮箱（Gmail/QQ/163）都不能直接用登录密码，需要在邮箱设置里开启「POP3/SMTP服务」，然后生成授权码，用这个授权码代替代码里的senderPassword。
• 跨域问题：如果前端和后端不在同一端口，必须用cors中间件，否则浏览器会拦截请求。
• SMTP服务器配置：不同邮箱的SMTP地址和端口不一样，比如：
  • QQ邮箱：smtp.qq.com，端口587
  • Gmail：smtp.gmail.com，端口587（需要开启「不太安全的应用访问」或用App密码）
  • 163邮箱：smtp.163.com，端口587
• 安全优化：不要把邮箱密码/授权码硬编码在代码里，后续可以用dotenv包把敏感信息存在环境变量里。

内容的提问来源于stack exchange，提问作者Shuvo Barua