个人网站制作 Part 8 添加电子邮件通知与社交媒体集成 | Web开发项目

---

👩‍💻 基础Web开发练手项目系列：个人网站制作

欢迎回到基础Web开发练手项目系列！

在前几篇博文中，我们已经创建了个人网站的基本结构、样式、导航栏、项目展示、联系信息、表单交互、动画效果、页面滚动效果、响应式设计、性能优化、页面动画、用户认证和数据库集成。

在本篇中，我们将学习如何添加更多高级功能，例如电子邮件通知和社交媒体集成。

🚀 添加电子邮件通知

🔨使用Nodemailer

🔧步骤 1: 安装Nodemailer

1. 在项目目录下运行以下命令安装Nodemailer。

npm install nodemailer

2. 在 server.js 文件中配置Nodemailer。

const nodemailer = require('nodemailer');

// 创建Nodemailer传输器
const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
        user: 'your-email@gmail.com', // 你的Gmail邮箱
        pass: 'your-password' // 你的Gmail密码或应用密码
    }
});

// 示例：发送电子邮件
app.get('/send-email', (req, res) => {
    const mailOptions = {
        from: 'your-email@gmail.com',
        to: 'recipient-email@example.com',
        subject: '测试邮件',
        text: '这是一封测试邮件。'
    };

    // 发送邮件
    transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
            return res.send(error.toString());
        }
        res.send('邮件发送成功：' + info.response);
    });
});

3. 访问 /send-email 路由来测试邮件发送功能。

🚀 社交媒体集成

🔨使用社交媒体API

🔧步骤 2: 集成Twitter API

1. 创建Twitter开发者帐户并创建一个应用程序。
2. 获取API密钥和密钥密码。
3. 在 server.js 文件中配置Twit库（用于简化Twitter API调用）。

npm install twit

const Twit = require('twit');

// 创建Twit实例
const twitter = new Twit({
    consumer_key: 'your-consumer-key',
    consumer_secret: 'your-consumer-secret',
    access_token: 'your-access-token',
    access_token_secret: 'your-access-token-secret',
    timeout_ms: 60 * 1000, // 设置超时时间
    strictSSL: true // 启用SSL
});

// 示例：发送推文
app.get('/send-tweet', (req, res) => {
    const tweetText = '这是一条测试推文。';

    // 发送推文
    twitter.post('statuses/update', { status: tweetText }, (err, data, response) => {
        if (err) {
            return res.send(err.toString());
        }
        res.send('推文发送成功！');
    });
});

4. 访问 /send-tweet 路由来测试推文发送功能。

🚀 预览与保存

确保保存所有文件并在浏览器中预览你的网站。你现在应该看到一个拥有电子邮件通知和Twitter推文功能的更加强大的个人网站了！

🚀 下一步计划

在下一篇文章中，我们将学习如何添加博客功能，使你的网站具有发布和管理文章的能力。记得继续关注本系列，为你的网站增添更多有趣的功能！

通过这个项目，你已经学到了Web开发中许多重要的基础知识，并通过添加高级功能使你的网站更加多样化。祝你编码愉快，不断创造！