个人网站制作 Part 7 添加用户认证和数据库集成 | Web开发项目

---

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

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

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

在本篇中，我们将学习如何添加用户认证和数据库集成，进一步提升网站的功能性。

🚀 用户认证与数据库集成

🔨添加用户认证

🔧步骤 1: 使用Passport.js

1. 安装Passport.js和相关策略。

npm install passport passport-local express-session

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

const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;

// 添加Passport初始化和session支持
app.use(passport.initialize());
app.use(passport.session());

// 使用本地策略进行身份验证
passport.use(new LocalStrategy(
    (username, password, done) => {
        // 在这里进行用户身份验证逻辑
        // 示例：检查用户名和密码是否匹配数据库中的记录
        if (username === 'user' && password === 'password') {
            return done(null, { id: 1, username: 'user' });
        } else {
            return done(null, false, { message: '用户名或密码错误' });
        }
    }
));

// 将用户信息存储到session中
passport.serializeUser((user, done) => {
    done(null, user.id);
});

// 从session中恢复用户信息
passport.deserializeUser((id, done) => {
    // 示例：从数据库中获取用户信息
    const user = { id: 1, username: 'user' };
    done(null, user);
});

3. 添加登录路由和身份验证中间件。

app.post('/login',
    passport.authenticate('local', {
        successRedirect: '/',
        failureRedirect: '/login',
        failureFlash: true
    })
);

app.get('/login', (req, res) => {
    res.send('登录页面');
});

app.get('/logout', (req, res) => {
    req.logout();
    res.redirect('/');
});

🔨集成数据库

🔧步骤 2: 使用MongoDB和Mongoose

1. 安装Mongoose。

npm install mongoose

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

const mongoose = require('mongoose');

// 连接MongoDB数据库
mongoose.connect('mongodb://localhost:27017/mywebsite', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

// 定义用户模型
const userSchema = new mongoose.Schema({
    username: String,
    password: String
});

const User = mongoose.model('User', userSchema);

3. 修改Passport本地策略，从数据库中验证用户。

passport.use(new LocalStrategy(
    async (username, password, done) => {
        try {
            // 在数据库中查找用户
            const user = await User.findOne({ username });

            // 检查密码是否匹配
            if (!user || user.password !== password) {
                return done(null, false, { message: '用户名或密码错误' });
            }

            return done(null, user);
        } catch (error) {
            return done(error);
        }
    }
));

🚀 预览与保存

确保保存所有文件并在浏览器中预览你的网站。你现在应该看到一个拥有用户认证和数据库集成的更加功能强大的个人网站了！

🚀 下一步计划

在下一篇文章中，我们将学习如何添加更多高级功能，例如电子邮件通知、社交媒体集成等。记得继续关注本系列，为你的网站增添更多强大的功能！

通过这个项目，你已经学到了Web开发中许多重要的基础知识，并通过添加用户认证和数据库集成使你的网站更为完善。祝你编码愉快，不断拓展技能！