英文版网站建设的意义,北京装修公司排名推荐,网站服务器租用多少钱,电子商务网站系统规划 案例分析文章目录 #x1f469;#x1f4bb; 基础Web开发练手项目系列#xff1a;个人网站制作#x1f680; 添加博客功能#x1f528;使用Express和MongoDB#x1f527;步骤 1: 创建博客模型#x1f527;步骤 2: 创建博客路由 #x1f528;使用前端框架#x1f527;步骤 3:… 文章目录 基础Web开发练手项目系列个人网站制作 添加博客功能使用Express和MongoDB步骤 1: 创建博客模型步骤 2: 创建博客路由 使用前端框架步骤 3: 使用Vue.js渲染博客列表 预览与保存 下一步计划 基础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渲染博客列表
在 index.html 文件中引入Vue.js。
script srchttps://cdn.jsdelivr.net/npm/vue2/script在 index.html 文件中创建博客列表区域。
div idapph2博客列表/h2ulli v-forblog in blogs :keyblog._id{{ blog.title }} - {{ blog.author }}/li/ul
/div在 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开发中许多重要的基础知识并通过添加博客功能使你的网站更加丰富多彩。祝你编码愉快不断创新
