在当今互联网时代，内容管理系统（CMS）已经成为了各类网站和应用必不可少的一部分。然而，传统的 CMS 通常会捆绑前端渲染代码，导致前后端无法分离，也无法很好地适应不同的前端代码框架。相对而言，Headless CMS 更为灵活，将后端数据和前端渲染完全分离，基于 API 形式进行数据交换，使得前端技术栈的选择更为自由，提升开发效率。
本文将介绍如何构建一个基于 Node.js 的可扩展的 Headless CMS，并提供详细的学习和指导意义。
技术栈
为了构建 Headless CMS，我们需要使用以下技术栈：
- Node.js：是服务器端 JavaScript 运行环境，广泛应用于 Web 开发中。
- Express：是 Node.js 上流行的 Web 框架，提供了构建 Web 应用所需的基础设施。
- MongoDB：是一个跨平台文档型数据库，用于存储 Headless CMS 中的数据。
- Mongoose：是 MongoDB 的 Node.js 驱动程序，提供了对象文档映射（ODM）的功能。
项目结构
我们的 Headless CMS 项目结构如下所示：
-- -------------------- ---- ------- ------ --- ------ - --- ------- -- ------ --- ------ - --- ------- -- -- ---- ---- --- ------ - --- ------ -- -- --- -- - --- -------- -- -------- --- ----- - --- --------- -- -------- --- ------ - --- --- - --- -- - --- --- --- ------ -- ------展开代码
MongoDB 数据库服务
首先，我们需要确保已经安装了 MongoDB 数据库服务。如果没有安装，可以访问官网下载并安装。
在本地创建一个新的 MongoDB 数据库实例后，我们需要在 config/keys.js 中设置数据库的连接 URL 和数据库名称：
module.exports = { mongoURI: 'mongodb://localhost/my-cms', }
其中，my-cms 是数据库的名称，可以根据需要自行更改。
模型定义
在 models/post.js 中定义 Post 数据模型：
-- -------------------- ---- ------- ----- -------- - ------------------- ----- ---------- - --- ---------------- - ------ ------- -------- ------- -- - ----------- ---- - - -------------- - ---------------------- -----------展开代码
上述代码定义了一个名为 Post 的数据模型，包含标题 title 和正文 content 两个字段，根据需要可以自行添加更多字段。timestamps: true 属性表示会自动生成 createdAt 和 updatedAt 两个时间戳字段。
路由配置
接下来，在 routes/api.js 中定义 API 路由：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ------ - ---------------- ----- ---- - ------------------------- -- ------ -------------------- ----- ----- ---- -- - ----- ----- - ----- ----------- --------------- -- -- ---- --------------------- ----- ----- ---- -- - ----- ---- - --- -------------- ----- ----------- -------------- -- -------------- - ------展开代码
上述代码定义了一个 /posts 路由，包括获取所有文章和创建文章两个子路由。Post.find() 方法可以获取所有的文章记录，并将其以 JSON 格式返回；new Post(req.body) 创建了一个新的文章记录，并将其保存到数据库中。
另外，在 routes/index.js 中定义模板渲染路由：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ------ - ---------------- -- ------ --------------- ----- ---- -- - ------------------- -- -------------- - ------展开代码
上述代码定义了一个 / 路由，用于渲染首页模板。
应用程序入口
最后，在 app.js 中将以上模块整合在一起：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- -------- - ------------------- ----- ---------- - ---------------------- ----- ---- - --------------- ----- --- - --------- -- -- --- --------- ----- --------- - ----------------------- ----- ----------- - ------------------------- -- --------- ----- - -------- - - ------------------------ -- -- ----------- --- -------------------------- ------------------------------- --------- ----- --- -- -- ------- --- ----------------- --------- - ---------------- ----- ------------------- ---- -- -- -- - --------------------- - - -- -------- ------------------------------------------- ----------- -- ------ ---------------- -------------------- --------- ------------- -------- ------ -- ---- --------------- ---------- ------------ ------------ -- ----- ----- ---- - ---------------- -- ---- ---------------- -- -- - -------------------------------- --展开代码
上述代码定义了一个 Express 应用程序，引入 API 路由和模板渲染路由模块，并配置了中间件和静态资源。其中，mongoose.connect 方法用于连接数据库，app.set 方法用于设置模板引擎和模板目录，app.use 方法用于注册路由。最后，使用 app.listen 方法启动服务器，监听指定的端口号。
总结
通过本文，我们了解了如何构建一个基于 Node.js 的可扩展的 Headless CMS。通过 MongoDB 存储数据，并使用 Express 框架实现 API 和模板渲染路由，这样前后端的代码就可以完全分离。运用本文提及的技术栈和代码示例，读者可以根据自己的需要进行二次开发，构建适合自己的 CMS 系统。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a1e76fadd4f0e0ff9ffadc
