个人网站制作 Part 9 添加发布、管理博客功能 | Web开发项目

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

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

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

在本篇中，我们将学习如何添加博客功能，使你的网站具有发布和管理文章的能力。

🚀 添加博客功能

🔨使用Express和MongoDB

🔧步骤 1: 创建博客模型

在 server.js 文件中创建博客模型：

const blogSchema = new mongoose.Schema({
    title: String,
    content: String,
    author: String,
    date: { type: Date, default: Date.now }
});

const Blog = mongoose.model('Blog', blogSchema);

🔧步骤 2: 创建博客路由

在 server.js 文件中创建博客路由：

// 显示所有博客文章
app.get('/blogs', async (req, res) => {
    try {
        const blogs = await Blog.find();
        res.json(blogs);
    } catch (error) {
        res.json({ message: error.message });
    }
});

// 创建新博客文章
app.post('/blogs', async (req, res) => {
    const blog = new Blog(req.body);
    try {
        const savedBlog = await blog.save();
        res.json(savedBlog);
    } catch (error) {
        res.json({ message: error.message });
    }
});

🔨使用前端框架

🔧步骤 3: 使用Vue.js渲染博客列表

1. 在 index.html 文件中引入Vue.js。

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2. 在 index.html 文件中创建博客列表区域。

<div id="app">
    <h2>博客列表</h2>
    <ul>
        <li v-for="blog in blogs" :key="blog._id">
            {{ blog.title }} - {{ blog.author }}
        </li>
    </ul>
</div>

3. 在 script.js 文件中添加Vue实例和获取博客数据的逻辑。

const app = new Vue({
    el: '#app',
    data: {
        blogs: []
    },
    mounted() {
        // 获取博客数据
        fetch('/blogs')
            .then(response => response.json())
            .then(data => this.blogs = data)
            .catch(error => console.error('获取博客数据失败：', error));
    }
});

🚀 预览与保存

确保保存所有文件并在浏览器中预览你的网站。你现在应该看到一个拥有基本博客功能的更加完善的个人网站了！

🚀 下一步计划

在下一篇文章中，我们将学习如何添加用户评论功能，使你的博客更加互动。记得继续关注本系列，为你的网站增添更多有趣的功能！

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