什么是 Headless CMS?
Headless CMS(无头 CMS)是一种新兴的 CMS 架构,与传统的 CMS 不同的是,Headless CMS 只提供内容管理和存储功能,不涉及如果将这些内容呈现在前端页面上的过程,而是提供 API 的形式让开发者可以获取和管理数据,这种方式非常适合开发现代 Web 应用,特别是那些需要实时更新内容的应用。
与传统 CMS 不同的是,Headless CMS 不带任何前端展示层,这意味着您可以使用您想要的框架来构建您的用户体验,而无需担心将 CMS 和您的 CMS 混合在一起所带来的限制和安全考虑。
Headless CMS 的优势
1. 灵活性
Headless CMS 的API 非常灵活,因为它们只是返回数据库中的纯数据,所以不会因为页面布局、样式和交互的改变而影响企业(网站、APP、微信小程序等)数据展示的呈现形式,有些甚至可以跨域调用,极大地扩展了企业数据的应用场景。
2. 性能强大
每当从数据库中读取数据时,都会发出请求,这会增加一些管理方面的困难,但也为您的站点提供了前所未有的可伸缩性。因为 API 返回纯数据,而不是繁重的 HTML 代码,所以系统非常快。
3. 安全性
没有根据应用程序的需求特别定制开发的主题和插件在 Headless CMS 当中,因此数据维护是更加容易的,而且相对于传统的 CMS 会更加安全。
4. 可扩展性
Headless CMS 不会让您困在某些关键要素中,如后端和数据库。相反,它允许您创建连接到任何设备和平台的应用程序。
1. 设计
根据 Headless CMS 的优势,在设计时要特别注重API设计,要让 API 能够支持前端如何展示数据的需求,下面我们来看一个简单的 Headless CMS 设计,首先定义需要管理的内容(blog)数据模型结构:
{ "title": "String", "author": "String", "content": "String", "published_date": "Date", "categories": ["String"] }
接下来定义这个数据模型对应的 API:
GET /blog GET /blog/:id POST /blog DELETE /blog/:id PATCH /blog/:id
然后根据这个 API 创建一个基于 Node.js 的 Headless CMS 服务,如下:
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ---------- - ---------------------- ----- --- - --------- ------------------------------- --------- ---- ---- --------------------------- ----- ---- - -- ---------------- ----- ---- -- - -------------- -- -------------------- ----- ---- -- - ----- -- - ------------- ----- ---- - -------------- -- ------- --- --- -- ------ - -------------- - ---- - ------------------- - -- ----------------- ----- ---- -- - ----- - ------ ------- -------- --------------- ---------- - - -------- ----- ---- - - ------ ------- -------- --------------- ----------- --- --------------------- - --------------- -------------- -- ----------------------- ----- ---- -- - ----- -- - ------------- ----- ----- - ------------------- -- ------- --- --- -- ------ --- --- - ------------------ -- ------------------- - ---- - ------------------- - -- ---------------------- ----- ---- -- - ----- -- - ------------- ----- ---- - -------------- -- ------- --- --- -- ------ - ------------------- --------- -------------- - ---- - ------------------- - -- ---------------- -- -- - ---------------------- -- ---- --------- --展开代码
接下来就可以利用该服务的 API 进行数据的管理和展示。
2. 实现
在实际应用中,我们可能还需要增加基本的身份验证、鉴权和数据库的封装来增强 Headless CMS 的稳定性、可扩展性和安全性。
2.1 鉴权与身份验证
由于 Headless CMS 服务只提供纯数据的返回,因此最好使用 JWT(JSON Web Token) 来进行鉴权,下面是一个简单的 Node.js 服务的 JWT 鉴权示例:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- --- - ------------------------ ----- --- - ---------- ------------------------------- --------- ---- ---- --------------------------- ----- ----- - - - ----- -------- --------- -------- - -- ----- --------- - --------- ------------------ ----- ---- -- - ----- - ----- -------- - - --------- ----- ---- - --------------- -- --------- --- ---- -- ------------- --- ---------- -- ------ - ----- ----- - ---------- ---- -- ----------- ---------- ----- --- - ---- - -------------------- - --- ---------------- ----- ---- -- - ----- ---------- - ------------------------- ----- ----- - ------------------ ------ --- - ----- ------- - ----------------- ----------- ----- ---- - - -------- ------- -------- ---- - --------------- - ----- --- - -------------------- - --- ---------------- -- -- - ------------------- --------- -- ---- ------- ---展开代码
2.2 数据库封装
Headless CMS 的 API 面向繁重的数据处理,建议采用常见、成熟的数据库作为数据存储和处理平台,目前常用的有 MongoDB, Redis 等多种数据库,在这里我们以 MongoDB 为例进行数据的处理,下面是一个简单的 MongoDB 数据库封装示例:
-- -------------------- ---- ------- ----- ----- - ------------------- ----- --- - ---------------------------- ----- -------- - --------------- ----- --------- - -- -- --- ----------------- ------- -- - ------------------------------ - ---------------- ----- ------------------- ---- -- -------- ------- ------- - -- ------- - -------------- - ---- - ----- -- - -------------------- ------------ - --- --- ----- ------------- - ----- ---------------- -- - ----- -- - ----- ------------ ----- ---------- - ------------------------------ ------ ----------- - ----- ------ - ----- ---------------- ------- -- - ----- ---------- - ----- ----------------------------- ------ -------------------------- - ----- ---- - ----- ---------------- ------- -- - ----- ---------- - ----- ----------------------------- ------ --------------------------------- - ----- ------ - ----- ---------------- ----- -- - ----- ---------- - ----- ----------------------------- ----- ------ - ----- -------------------------- ------ ------------- - ----- ------ - ----- ---------------- ------- ---------- -- - ----- ---------- - ----- ----------------------------- ----- ------ - ----- ---------------------------- - ----- --------- -- ------ ------------- - ----- --- - ----- ---------------- ------- -- - ----- ---------- - ----- ----------------------------- ----- ------ - ----- ---------------------------- ------ ------ - -------------- - - ------- ----- ------- ------- --- --展开代码
结语
Headless CMS 架构能够优势在于它强大的性能、安全性和可扩展性,其设计和实现非常灵活,能够适应各个行业和企业的需求,同时也能够有效提高开发效率,降低开发成本,因此在未来,Headless CMS 将会成为当今前端技术体系中不可或缺的一个重要部分。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67c9eeb3e46428fe9e1ce685