如何构建一个可扩展的 Headless CMS-JavaScript中文网-JavaScript教程资源分享门户

在当今互联网时代，内容管理系统（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 项目结构如下所示：

my-cms
├── config
│   ├── keys.js        // 配置敏感信息
├── models
│   ├── post.js        // 定义 Post 数据模型
├── routes
│   ├── api.js         // 定义 API 路由
│   ├── index.js       // 定义模板渲染路由
├── views
│   ├── index.ejs      // 定义模板渲染模板
├── public
│   ├── css
│   ├── js
│   ├── img
├── app.js             // 应用程序入口

MongoDB 数据库服务

首先，我们需要确保已经安装了 MongoDB 数据库服务。如果没有安装，可以访问官网下载并安装。

在本地创建一个新的 MongoDB 数据库实例后，我们需要在 config/keys.js 中设置数据库的连接 URL 和数据库名称：

module.exports = {
  mongoURI: 'mongodb://localhost/my-cms',
}

其中，my-cms 是数据库的名称，可以根据需要自行更改。

模型定义

在 models/post.js 中定义 Post 数据模型：

const mongoose = require('mongoose')

const postSchema = new mongoose.Schema(
  {
    title: String,
    content: String,
  },
  { timestamps: true }
)

module.exports = mongoose.model('Post', postSchema)

上述代码定义了一个名为 Post 的数据模型，包含标题 title 和正文 content 两个字段，根据需要可以自行添加更多字段。timestamps: true 属性表示会自动生成 createdAt 和 updatedAt 两个时间戳字段。

路由配置

接下来，在 routes/api.js 中定义 API 路由：

const express = require('express')
const router = express.Router()
const Post = require('../models/post')

// 获取所有文章
router.get('/posts', async (req, res) => {
  const posts = await Post.find()
  res.json(posts)
})

// 创建文章
router.post('/posts', async (req, res) => {
  const post = new Post(req.body)
  await post.save()
  res.json(post)
})

module.exports = router

上述代码定义了一个 /posts 路由，包括获取所有文章和创建文章两个子路由。Post.find() 方法可以获取所有的文章记录，并将其以 JSON 格式返回；new Post(req.body) 创建了一个新的文章记录，并将其保存到数据库中。

另外，在 routes/index.js 中定义模板渲染路由：

const express = require('express')
const router = express.Router()

// 渲染首页模板
router.get('/', (req, res) => {
  res.render('index')
})

module.exports = router

上述代码定义了一个 / 路由，用于渲染首页模板。

应用程序入口

最后，在 app.js 中将以上模块整合在一起：

const express = require('express')
const mongoose = require('mongoose')
const bodyParser = require('body-parser')
const path = require('path')
const app = express()

// 引入 API 路由和模板渲染路由
const apiRouter = require('./routes/api')
const indexRouter = require('./routes/index')

// 引入数据库连接配置
const { mongoURI } = require('./config/keys')

// 使用 body-parser 中间件
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))

// 连接 MongoDB 数据库
mongoose.connect(
  mongoURI,
  { useNewUrlParser: true, useUnifiedTopology: true },
  () => {
    console.log('数据库已连接')
  }
)

// 设置静态资源目录
app.use(express.static(path.join(__dirname, 'public')))

// 设置模板引擎
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs')

// 注册路由
app.use('/api', apiRouter)
app.use('/', indexRouter)

// 启动服务器
const port = process.env.PORT || 3000
app.listen(port, () => {
  console.log(`服务器已启动，端口：${port}`)
})

上述代码定义了一个 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

如何构建一个可扩展的 Headless CMS

技术栈

项目结构

MongoDB 数据库服务

模型定义

路由配置

应用程序入口

总结

纠错反馈