21xrx.com
2025-03-26 12:14:10 Wednesday
文章检索 我的文章 写文章
Node.js搭建简单博客网站
2023-07-10 18:03:50 深夜i     --     --
Node js 博客 网站搭建 简单 搭建

Node.js是一个基于Chrome V8 JavaScript引擎运行的开源、跨平台的JavaScript运行时。它可以用于服务器端开发，特别适合构建高并发、实时性要求高的应用程序。本文将介绍如何使用Node.js搭建一个简单博客网站。

1. 安装Node.js

首先，需要在服务器上安装Node.js。可以从官方网站（https：//nodejs.org/）下载安装程序，或使用命令行安装工具安装。

2. 初始化项目

在项目文件夹中打开命令行，运行以下命令：

npm init

这将引导您创建一个新的Node.js项目，并初始化一个package.json文件。

3. 安装必需的包

安装Express和其他必需的包：

npm install express body-parser ejs multer --save

Express是一个流行的Web应用程序框架，body-parser是一个中间件，用于解析HTTP请求正文，ejs是一种模板引擎，用于生成网页，multer是一种中间件用于处理与multipart /身体数据相关的请求（例如，上传图像）。

4. 创建应用程序架构

在应用程序的根目录下创建一个名为“app.js”的文件，并输入以下内容：

var express = require('express');
var bodyParser = require('body-parser');
var ejs = require('ejs');
var multer = require('multer');
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer({ dest: './uploads/' }).any());
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/public'));
var routes = require('./routes.js')(app);
var server = app.listen(8000, function () {
  console.log('Listening on port %s...', server.address().port);
});

这里创建了一个Express应用程序，添加了BodyParser和Multer中间件，设置了EJS模板引擎和一个静态文件夹。

5. 创建路由

接下来，创建一个名为“routes.js”的文件，并添加以下路由：

module.exports = function(app) {
  app.get('/', function (req, res) {
    res.render('index');
  });
  app.get('/post/:id', function (req, res) {
    var post =
      title: 'Post Title';
    res.render('post', { post: post });
  });
  app.get('/newpost', function (req, res) {
    res.render('newpost');
  });
  app.post('/newpost', function (req, res) {
    console.log(req.body);
    res.redirect('/');
  });
};

这里创建了三个路由：主页，帖子和新帖子。在新帖子路由中，打印输出POST请求正文，然后重定向到主页。

6.创建视图文件

在项目目录下创建一个名为“views”的文件夹，并在其中创建以下视图文件：

index.ejs：

<!DOCTYPE html>
<html>
<head>
  <title>Simple Blog</title>
</head>
<body>
  <h1>Simple Blog</h1>
  <p>Welcome to my simple blog!</p>
  <hr>
  <ul>
    <li><a href="/post/1">Post Title</a></li>
    <li><a href="/post/2">Post Title 2</a></li>
  </ul>
  <hr>
  <a href="/newpost">New Post</a>
</body>
</html>

post.ejs：

<!DOCTYPE html>
<html>
<head>
  <title><%= post.title %></title>
</head>
<body>
  <h1><%= post.title %></h1>
  <hr>
  <p><%= post.content %></p>
</body>
</html>

newpost.ejs：

<!DOCTYPE html>
<html>
<head>
  <title>New Post</title>
</head>
<body>
  <h1>New Post</h1>
  <hr>
  <form action="/newpost" method="POST">
    <input type="text" name="title" placeholder="Title"><br>
    <textarea name="content" placeholder="Content"></textarea><br>
    <input type="submit" value="Save">
  </form>
</body>
</html>

这里创建的三个视图是用于渲染相应路由的网页。主页显示博客文章的列表，帖子页面显示指定帖子的内容，新的帖子页面允许用户提交新的帖子。

7. 运行应用程序

最后，运行应用程序：在命令行中输入以下命令：

node app

这将启动应用程序，并在端口8000上侦听连接。

现在，在您的浏览器中访问http：//localhost：8000，您应该可以在主页上看到博客文章的列表。单击其中一个文章的链接，您将被重定向到包含该文章内容的网页。通过单击“New Post”按钮，您将被带到一个表单，该表单允许您提交新的博客文章。

这就完成了一个简单的博客网站的搭建！

  
  

评论区