Nodejs+mongodb搭建的博客，使用module：ejs, express, mongodb, underscore等，不错的入门文章

Nodejs+mongodb搭建的博客，使用module：ejs, express, mongodb, underscore等，不错的入门文章

一个nodejs+mongodb搭建的博客,使用module： ejs, express, mongodb, underscore等，不错的入门文章。

博客地址：http://justjs.com 博主很有创意的用自己的博客作为教学材料，一步一步的搭建成了完整版的博客。 整个站点的源代码都托管在github上，可以直接下载。另，每篇文章完结后都有对应的代码，提供方便学习。


8 回复

Node.js + MongoDB 搭建的博客

简介

本文将介绍如何使用 Node.js 和 MongoDB 搭建一个简单的博客系统，并使用 EJS、Express、MongoDB 和 Underscore 等模块来实现功能。博主通过自己的博客（http://justjs.com）一步步展示并解释了如何构建这样一个系统。所有源代码托管在 GitHub 上（GitHub），方便读者学习。

技术栈

  • Node.js: 服务器端 JavaScript 运行环境。
  • Express: 一个简洁而灵活的 Node.js Web 应用框架。
  • EJS: 一个简洁的模板引擎，用于生成 HTML。
  • MongoDB: 一个高性能的 NoSQL 数据库。
  • Underscore: 一个 JavaScript 实用工具库。

示例代码

  1. 安装依赖 首先需要安装必要的 Node.js 模块：

    npm install express ejs mongoose underscore

  2. 项目结构

    /blog
  /public
    /css
    /js
  /views
    index.ejs
    post.ejs
  app.js

  3. 配置 Express 和 MongoDB 在 app.js 中进行基本的配置：

    const express = require('express');
const mongoose = require('mongoose');
const path = require('path');

const app = express();

// 设置模板引擎
app.set('view engine', 'ejs');

// 静态文件路径
app.use(express.static(path.join(__dirname, 'public')));

// 连接 MongoDB
mongoose.connect('mongodb://localhost/blog', { useNewUrlParser: true, useUnifiedTopology: true });

// 定义 Post 模型
const PostSchema = new mongoose.Schema({
  title: String,
  content: String,
  createdAt: { type: Date, default: Date.now }
});
const Post = mongoose.model('Post', PostSchema);

// 路由
app.get('/', async (req, res) => {
  const posts = await Post.find().sort({ createdAt: -1 });
  res.render('index', { posts });
});

app.get('/post/:id', async (req, res) => {
  const post = await Post.findById(req.params.id);
  if (!post) return res.status(404).send('Post not found');
  res.render('post', { post });
});

// 启动服务器
app.listen(3000, () => console.log('Server is running on port 3000'));

  4. 创建视图 在 views 文件夹中创建 index.ejs 和 post.ejs 文件：

    • index.ejs

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Blog</title>
</head>
<body>
  <h1>Blog Posts</h1>
  <% posts.forEach(post => { %>
    <div>
      <h2><%= post.title %></h2>
      <p><%= post.content %></p>
      <small>Published at <%= post.createdAt.toDateString() %></small>
    </div>
  <% }) %>
</body>
</html>

    • post.ejs

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= post.title %></title>
</head>
<body>
  <h1><%= post.title %></h1>
  <p><%= post.content %></p>
  <small>Published at <%= post.createdAt.toDateString() %></small>
</body>
</html>

总结

通过上述步骤，我们搭建了一个简单的博客系统。该系统使用了 Node.js 和 Express 来处理 HTTP 请求，MongoDB 存储数据，EJS 渲染视图。每一步都有详细的注释和代码示例，方便初学者理解和学习。


感谢分享

感谢分享,

这个好像连标签功能都没有

谢谢楼主的分享。。。学习一下。

博客的文章居然是全英文的。楼主的english好强啊。

拜托~justjs作者不是楼主,也不是中国人!

要基于 Node.js 和 MongoDB 搭建一个简单的博客系统，并使用 EJS、Express 和 Mongoose（MongoDB 的对象模型工具）等模块，我们可以创建一个基础的博客应用，该应用能够实现文章的增删改查功能。

以下是一个简单的示例代码，展示如何搭建一个基础的博客系统：

  1. 首先安装必要的依赖包：
npm install express mongoose ejs
  1. 创建 app.js 文件，并添加以下内容：
const express = require('express');
const mongoose = require('mongoose');
const app = express();

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

// 定义文章模型
const Post = mongoose.model('Post', new mongoose.Schema({ title: String, content: String }));

// 设置视图引擎
app.set('view engine', 'ejs');

// 路由定义
app.get('/', async (req, res) => {
    const posts = await Post.find({});
    res.render('index', { posts });
});

app.get('/post/new', (req, res) => {
    res.render('new-post');
});

app.post('/post', async (req, res) => {
    const post = new Post(req.body);
    await post.save();
    res.redirect('/');
});

app.listen(3000, () => console.log('App listening on port 3000'));

  1. 创建一个 views 目录，并在其中创建两个文件 index.ejs 和 new-post.ejs。

  2. 在 index.ejs 中添加：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog Posts</title>
</head>
<body>
    <h1>Blog Posts</h1>
    <ul>
        <% for (let post of posts) { %>
            <li><%= post.title %></li>
        <% } %>
    </ul>
    <a href="/post/new">Create New Post</a>
</body>
</html>
  1. 在 new-post.ejs 中添加：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>New Post</title>
</head>
<body>
    <form action="/post" method="POST">
        <label>Title:
            <input type="text" name="title">
        </label>
        <label>Content:
            <textarea name="content"></textarea>
        </label>
        <button type="submit">Submit</button>
    </form>
</body>
</html>

通过以上步骤，你将创建一个简单的博客应用，用户可以查看文章列表，并提交新文章。你可以在此基础上进一步扩展功能，如添加编辑和删除文章的功能。

回到顶部