在这个教程中，我们将一步步地创建一个简单的博客网站，并附上源码。我们将使用Node.js作为后端框架，Express.js作为Web框架，以及Bootstrap作为前端框架。同时，我们将使用Markdown格式来编写博客文章。
步骤1：创建项目文件夹并初始化
首先，创建一个项目文件夹，并使用以下命令在终端中进入该文件夹：
mkdir blog-website
cd blog-website
接下来，在终端中运行以下命令来初始化项目：
npm init
按照提示填写package.json文件，一路回车默认即可。
步骤2：安装所需依赖
运行以下命令来安装所需的依赖：
npm install express body-parser ejs marked bootstrap
步骤3：创建项目文件结构
在项目文件夹中，创建以下文件和文件夹：
- views/
- home.ejs
- post.ejs
- new.ejs
- edit.ejs
- public/
- styles.css
- app.js
步骤4：配置Express.js
在app.js文件中，添加以下代码：
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
// 配置模板引擎
app.set('view engine', 'ejs');
// 配置静态文件目录
app.use(express.static('public'));
// 解析请求体
app.use(bodyParser.urlencoded({ extended: false }));
// 定义首页路由
app.get('/', (req, res) => {
res.render('home');
});
// 启动服务器
app.listen(3000, () => {
console.log('服务器已启动，访问 http://localhost:3000/');
});
步骤5：创建视图文件
在home.ejs文件中添加以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles.css">
<title>博客</title>
</head>
<body>
<h1>欢迎来到我的博客</h1>
</body>
</html>
步骤6：运行项目
运行以下命令来启动项目：
node app.js
在浏览器中访问http://localhost:3000/，应该能看到"欢迎来到我的博客"的标题。
步骤7：编写博客文章
我们将使用Markdown格式编写博客文章。在所有的文章上方添加元数据，并存储在一个数组中。在app.js中添加以下代码：
const posts = [
{
id: 1,
title: "我的第一篇博客",
content: "这是我的第一篇博客文章。",
date: "2021-01-01"
},
{
id: 2,
title: "我的第二篇博客",
content: "这是我的第二篇博客文章。",
date: "2021-01-02"
}
];
// 定义博客文章路由
app.get('/posts/:id', (req, res) => {
const id = parseInt(req.params.id);
const post = posts.find(post => post.id === id);
res.render('post', { post });
});
app.get('/posts/new', (req, res) => {
res.render('new');
});
app.get('/posts/:id/edit', (req, res) => {
const id = parseInt(req.params.id);
const post = posts.find(post => post.id === id);
res.render('edit', { post });
});
在post.ejs中添加以下代码：
<%- include('partials/header') %>
<article>
<h2><%= post.title %></h2>
<p><%= post.content %></p>
<p><%= post.date %></p>
</article>
<%- include('partials/footer') %>
在new.ejs中添加以下代码：
<%- include('partials/header') %>
<h2>创建博客文章</h2>
<form action="/posts" method="POST">
<p>
<label for="title">标题：</label>
<input type="text" name="title" id="title">
</p>
<p>
<label for="content">内容：</label>
<textarea name="content" id="content" rows="5"></textarea>
</p>
<button type="submit">创建</button>
</form>
<%- include('partials/footer') %>
在edit.ejs中添加以下代码：
<%- include('partials/header') %>
<h2>编辑博客文章</h2>
<form action="/posts/<%= post.id %>" method="POST">
<input type="hidden" name="_method" value="PUT">
<p>
<label for="title">标题：</label>
<input type="text" name="title" id="title" value="<%= post.title %>">
</p>
<p>
<label for="content">内容：</label>
<textarea name="content" id="content" rows="5"><%= post.content %></textarea>
</p>
<button type="submit">更新</button>
</form>
<%- include('partials/footer') %>
步骤8：添加路由和控制器
在app.js中添加以下代码：
const methodOverride = require('method-override');
app.use(methodOverride('_method'));
// 处理创建博客文章的请求
app.post('/posts', (req, res) => {
const { title, content } = req.body;
const id = posts.length + 1;
const date = new Date().toISOString().split('T')[0];
const post = { id, title, content, date };
posts.push(post);
res.redirect('/');
});
// 处理更新博客文章的请求
app.put('/posts/:id', (req, res) => {
const id = parseInt(req.params.id);
const { title, content } = req.body;
const post = posts.find(post => post.id === id);
post.title = title;
post.content = content;
res.redirect(`/posts/${id}`);
});
// 处理删除博客文章的请求
app.delete('/posts/:id', (req, res) => {
const id = parseInt(req.params.id);
const index = posts.findIndex(post => post.id === id);
posts.splice(index, 1);
res.redirect('/');
});
步骤9：添加导航栏
在header.ejs中添加以下代码：
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/posts/new">创建博客文章</a></li>
</ul>
</nav>
步骤10：添加样式
在styles.css中添加以下代码：
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1, h2 {
color: #333;
}
nav ul {
list-style: none;
padding: 0;
margin: 20px 0;
}
nav ul li {
display: inline-block;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
color: #333;
}
现在，您已经创建了一个简单的博客网站！通过访问http://localhost:3000/，您将看到博客的首页。您可以点击"创建博客文章"来创建新的文章，点击文章标题来阅读文章，点击"编辑"按钮来编辑文章，以及点击"删除"按钮来删除文章。
完成的源码可以在这里找到。
希望这篇教程能帮助您快速创建一个简单的博客网站！如果您有任何问题或疑问，请随时提问。
本文来自极简博客，作者：晨曦吻，转载请注明原文链接：创建一个简单的博客网站，教程附源码
