从零构建：基于 Node.js + SQLite 的轻量级全栈博客系统架构详解

请登录后台（http://localhost:3000/admin），按照以下信息发布：

1. 媒体选项

建议选择 ：纯文本/Markdown图片 或 上传图片(封面)
建议图片：可以使用你的代码编辑器截图，或者一张代码结构的架构图。

2. 博客内容 (Markdown)

(请直接复制下面的所有内容粘贴到后台的内容框中)

markdown 复制代码

在当今充斥着 WordPress 和 Hexo 的时代，作为一个全栈工程师，手写一个属于自己的博客系统不仅是技术的磨练，更是对"简单易用"这一理念的极致追求。

本文将深度剖析我刚刚完成的 `simple-blog` 系统。它不依赖庞大的数据库服务，无需复杂的构建流程，却具备了多模版切换、多媒体发布、Markdown 支持以及后台配置等核心功能。

### 一、 技术选型：为什么是这套栈？

为了实现"轻量级"与"美观大方"的平衡，我选择了以下技术栈：

*   **Runtime**: **Node.js + Express**
    *   *理由*：生态丰富，启动速度快，适合处理 I/O 密集型任务（如文件上传）。
*   **Database**: **SQLite3**
    *   *理由*：这是本系统的亮点。无需安装 MySQL 或 MongoDB，数据库只是一个 `.db` 文件，随身携带，零配置部署。
*   **Templating**: **EJS (Embedded JavaScript)**
    *   *理由*：服务端渲染 (SSR) 对 SEO 友好，且逻辑简单，直接在 HTML 中嵌入 JS 变量。
*   **Styling**: **Tailwind CSS (CDN)**
    *   *理由*：无需 Webpack/Vite 打包，直接引入 CDN 即可使用原子化 CSS，极大地提升了开发效率和界面美观度。
*   **Editor**: **SimpleMDE + Marked**
    *   *理由*：提供所见即所得的 Markdown 编辑体验，并将 Markdown 解析为安全的 HTML。

### 二、 核心架构设计

项目目录采用了经典的 MVC 变体结构，保持扁平化，易于维护：

```text
simple-blog/
├── public/          # 静态资源 (上传的图/音/视频)
├── views/           # EJS 视图模板
│   ├── admin.ejs    # 后台管理系统
│   ├── theme_day.ejs   # 日间模式模板
│   └── theme_night.ejs # 夜间极客模板
├── server.js        # 核心逻辑 (路由、DB、中间件)
└── blog.db          # 自动生成的数据库文件

一、关键功能实现分析

1. 零配置数据库初始化

在 server.js 中，我利用 SQLite 的特性实现了"启动即部署"。系统启动时会自动检查表是否存在，不存在则自动创建。

javascript 复制代码

const db = new sqlite3.Database('./blog.db');
db.serialize(() => {
    // 自动创建文章表
    db.run(`CREATE TABLE IF NOT EXISTS posts (...)`);
    // 自动创建设置表，并注入默认配置
    db.get("SELECT * FROM settings WHERE id = 1", (err, row) => {
        if (!row) db.run("INSERT INTO settings ...");
    });
});

2. 动态模版切换引擎

这是本系统最酷的功能之一。用户可以在后台自由切换"日间"或"夜间"模式。实现逻辑是在中间件层面注入全局配置：

javascript 复制代码

// 全局中间件：读取配置
app.use((req, res, next) => {
    db.get("SELECT * FROM settings WHERE id = 1", (err, row) => {
        res.locals.config = row; // 将配置挂载到 locals，所有模板均可访问
        next();
    });
});

// 渲染路由
app.get('/', (req, res) => {
    // 获取当前选中的 theme 名称，动态渲染对应的 ejs 文件
    const theme = res.locals.config.theme || 'theme_day';
    res.render(theme, { posts: posts });
});

3. 全能多媒体支持

为了支持"图文、视频、音乐"混排，数据库设计了 media_url 和 media_type 字段。前端利用 HTML5 原生标签进行自适应渲染：

Audio : <audio controls>
Video : <video controls>
Image : <img>

配合 Multer 中间件处理文件上传，实现了从上传到展示的无缝闭环。

二、后台管理界面

后台管理界面使用了 Tailwind CSS 的 Grid 布局。

左侧：集成了 SimpleMDE 编辑器的发布区，支持实时预览 Markdown 效果。同时包含全局设置（修改博客标题、切换模版）。
右侧：文章列表管理，支持一键删除。

这个项目证明了，构建一个功能完备的 CMS 系统并不需要几十万行代码。通过合理的技术选型（Node.js + SQLite），我们可以在几百行代码内实现：