Nodejs 基于Bootstrap的N-blog开发，感谢@nswbmw关于node的启蒙教育

Nodejs 基于Bootstrap的N-blog开发，感谢@nswbmw关于node的启蒙教育
### Nodejs 基于Bootstrap的N-blog开发，感谢@nswbmw关于node的启蒙教育

在这个帖子中，我们将介绍如何使用Node.js和Bootstrap来创建一个简单的博客系统。通过这个项目，你将学会如何搭建后端服务、使用数据库存储数据，并结合前端技术展示数据。

1. 项目准备

首先，确保你的环境中已经安装了Node.js和npm。然后，创建一个新的项目文件夹，并初始化一个新的Node.js项目：

mkdir n-blog
cd n-blog
npm init -y

2. 安装必要的依赖

接下来，我们需要安装一些必要的库。例如，express用于构建Web服务器，mongoose用于连接MongoDB数据库，以及ejs作为模板引擎：

npm install express mongoose ejs

3. 创建基本的Express服务器

创建一个名为app.js的文件，并添加以下代码：

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

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

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

// 静态文件目录
app.use(express.static('public'));

// 路由定义
app.get('/', (req, res) => {
    res.render('index'); // 渲染首页
});

app.listen(3000, () => console.log('Server running on port 3000'));

4. 创建模型

在项目根目录下创建一个名为models的文件夹，并在其中创建一个Post.js文件，定义博客文章的模型：

const mongoose = require('mongoose');

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

module.exports = mongoose.model('Post', PostSchema);

5. 创建视图

在views文件夹中创建一个index.ejs文件，使用Bootstrap来设计页面布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>N-Blog</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>N-Blog</h1>
        <form action="/posts" method="POST">
            <div class="form-group">
                <label for="title">Title</label>
                <input type="text" class="form-control" id="title" name="title">
            </div>
            <div class="form-group">
                <label for="content">Content</label>
                <textarea class="form-control" id="content" name="content"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</body>
</html>

6. 添加路由处理

在app.js中添加处理POST请求的路由：

const Post = require('./models/Post');

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

7. 运行项目

现在你可以运行项目并测试功能了：

node app.js

访问http://localhost:3000，你应该能看到一个简单的表单，可以提交新的博客文章。这就是一个基于Node.js和Bootstrap的基本博客系统的实现。

希望这个教程对你有所帮助！


1 回复

在这个帖子中，我们介绍了如何使用Node.js和Bootstrap来开发一个简单的博客系统。以下是每个步骤的简要总结：

  1. 项目准备：创建新项目文件夹并初始化Node.js项目。
  2. 安装依赖：安装express、mongoose和ejs。
  3. 创建Express服务器：配置服务器连接到MongoDB并设置视图引擎。
  4. 创建模型：定义博客文章的模型。
  5. 创建视图：使用Bootstrap设计首页表单。
  6. 添加路由处理：处理POST请求保存博客文章。
  7. 运行项目：启动服务器并测试功能。

这是一个基础的博客系统，可以根据需要进一步扩展功能，比如增加文章列表页、详情页等。希望这个教程对你有所帮助！

回到顶部