基于 Headless CMS 的定制化工作流设计与实现-JavaScript中文网-JavaScript教程资源分享门户

前言

Headless CMS 是一个新型的内容管理系统，它通过将前端和后端分离，使内容管理变得更加灵活。实际上，它只关注数据管理，而在前端界面方面则完全由使用它的开发者自主定制开发。在本文中，我们将分享一些基于 Headless CMS 的定制化工作流设计与实现，使大家更好的理解这个新的系统和如何使用它。

Headless CMS 的基础概念

Headless CMS 在内容管理方面极度简化并抽象了信息的内部存储，因此该系统的主要需求是管理信息的发布和存储，并允许用户以“横向组合”的方式对其内容进行相应的模板化操作。此外，在 Headless CMS 中，采用的是 RESTful 风格，即以链接地址作为查询条件来实现其内容的读取和展示。

工作流设计与实现

在 Headless CMS 的世界里，我们可以使用 API 的方式通过接口进行数据的掌控，数据的存取都可以根据需求进行更改，实现定制化。说到定制化，仅仅表面上的更改不足以令人满意，我们还需要对工作流做出更深度的更改。

工作流程

在传统的 CMS 中，工作流程其实很清晰，一般是用户再前端界面新建一个内容，然后点击提交到后台，而后会由后台管理者进行审核、修改、发布等操作。但是在 Headless CMS 中，前后端完全被分离，不存在前端提交操作这个过程。这时候就需要开发者基于 API 重新构建出一个定制化的工作流程了。

工作流程设计

基于 Headless CMS 的工作流程设计有任意多种方案，根据不同场景方案也不同。在本文中，我们将介绍一个较为简单的方案，供读者参考：

1、前端接口请求数据并进行相应操作 2、后台直接读取请求的数据 3、后台进行相应的审核操作 4、若审核通过，则将数据存入数据库，并返回相应提示信息

这样的工作流程其实还是很好理解的，主要是将传统的前后端交互，变成了前端完成数据操作后由后端进行处理以及存储。

工作流程实现

接下来我们将用 Node.js + MongoDB 来实现上述方案中所描述的工作流流程，代码如下：

1、前端接口请求数据并进行相应操作服务端代码：

// javascriptcn.com 代码示例
var express = require('express');
var app = express();
var bodyParser = require('body-parser');

app.use(bodyParser.json());

app.post('/api/savedata', function (req, res) {
  // 使用 MongoDB 存储数据
  saveDataToMongoDB(req.body, function(data) {
    console.log("save data to database:" + JSON.stringify(data));
    res.json({"success": true, "message": "数据保存成功!"});
  });
});

app.listen(3000, function () {
  console.log('App listening on port 3000!');
});

// 将数据存储到 MongoDB 主函数
function saveDataToMongoDB(data, callback) {
  var MongoClient = require('mongodb').MongoClient;
  var url = "mongodb://localhost:27017/mydb";
  MongoClient.connect(url, function(err, db) {
    if (err)  throw err;
    console.log("数据库已创建!");
    var dbo = db.db("mydb");
    dbo.collection("article").insertOne(data, function(err, res) {
        if (err) throw err;
        console.log("文档插入成功");
        db.close();
    });
  });
  callback(data);
}

需要注意的是，在上述代码中我们使用了 MongoDB 来存储数据，因此需要在本地机器上安装 MongoDB。

2、后台直接读取请求的数据服务端代码：

上文的代码中，我们已经在服务端实现了数据的存储。在这个过程中，我们使用了 MongoDB 作为数据存储系统，并在服务端收到数据后通过回调函数完成了数据的存储操作。

3、后台进行相应的审核操作服务端代码：

// javascriptcn.com 代码示例
function approveDataFromMongoDB(data, callback) {
  var MongoClient = require('mongodb').MongoClient;
  var url = "mongodb://localhost:27017/mydb";
  MongoClient.connect(url, function(err, db) {
    var dbo = db.db("mydb");
    var whereStr = {"title": data.title};  // 查询条件
    var updateStr = {$set: {"isApproved": data.isApproved}}; // 审核状态修改,如果需删除属性则添加unset操作即可
    dbo.collection("article").updateOne(whereStr, updateStr, function(err, res) {
      if (err) throw err;
      console.log(res.result.nModified + " 条数据已更新");
      db.close();
    });
  });
  callback(data);
}

在这里，我们使用了 updateOne 方法来更新数据，并将其审核结果标记存入数据库，其中 whereStr 既是通过 data.title 来找到相应的数据；而 updateStr 则是更新这条数据，并将其审核结果标记存入数据库。

4、若审核通过，则将数据存入数据库，并返回相应提示信息服务端代码：

// javascriptcn.com 代码示例
app.post('/api/addArticle', function(req, res){
  var article = new Article();
  article.title = req.body.title;
  article.content = req.body.content;
  article.isPublished= req.body.isPublished;
  article.isApproved = req.body.isApproved;

  article.save(function(err, savedArticle){
    if(err){
      res.send('Error saving article.');
    } else {
      res.send(savedArticle);
    }
  });
});

上述代码中，我们使用了 Mongoose 编写了数据存储的 schema 并使用 Node.js 的 Express 框架编写了 POST 接口，在用户请求数据之后通过 Mongoose 存储了数据，并返回了相应的信息。

总结

基于 Headless CMS 的定制化工作流设计与实现需要开发者充分理解该系统的实现原理。在使用 Headless CMS 时，开发者们需要重新构思原来单体架构的设计模式，设计出相应的工作流，以便实现定制化的内容管理需求。这种工作流，将会为开发者们提供更加灵活和可靠的解决方案，为模板化的管理使其变得更加接近前端的开发者们。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654a86057d4982a6eb4a8298