你应该使用 Strapi

我对Strapi充满热情！它帮助我推动团队变得更加专业。每个看到 Strapi 与我们应用程序集成的人都惊叹不已！我已经数不清有多少其他团队的人来查看过。
所以，如果你也想提升专业水平，节省自己和产品经理的时间，那么这篇文章就是为你准备的！

本文我将探讨以下内容：

• 什么是CMS和无头CMS
• Strapi是什么？
• 我与斯特拉皮的私人故事
• Bootstrap Strapi

什么是CMS和无头CMS

在讨论 Strapi 之前，您需要了解什么是CMS（内容管理系统）和无头 CMS。
您可能已经听说过WordPress，这是一个传统的 CMS。WordPress 允许我们通过友好的用户界面更新应用程序的内容，但应用程序与用于更新内容的界面之间存在着紧密的联系。您需要使用 WordPress 构建应用程序才能享受更改其内容的功能。

无头CMS为我们展示了另一种可以采用的视角。
摘自headlesscms.org：

无头CMS的前端组件基本上与网站或应用程序的实际运行完全分离。
无头CMS的工作方式有多种（详见下文）。它可以完全基于API驱动，最终用户通过浏览器连接到API；也可以通过在Git中更新内容来实现。
无头CMS与WordPress、Drupal、Joomla等传统系统截然不同。这些传统CMS每次上线时都需要与网站一起托管和构建。
无头CMS则无需关心内容的运行平台。它不再与前端绑定，内容可以在任何平台上查看。

正如你所见，借助无头CMS，我可以拥有一个独立于应用程序的组件，它能帮助我编辑应用程序内容（当然，它还拥有友好的用户界面），而无需与现有应用程序耦合。要从无头CMS接收数据，我可以从应用程序的前端组件发送API请求。

Strapi是什么？

现在，既然你已经了解了无头CMS，那么让我们来谈谈Strapi吧。

摘自Strapi 文档：

Strapi 是一款灵活的开源无头 CMS，它赋予开发者选择自己喜欢的工具和框架的自由，同时也方便编辑人员轻松管理和分发内容。通过插件系统扩展管理面板和 API，Strapi 助力全球大型企业加速内容交付，同时打造卓越的数字化体验。

您可能已经注意到，Strapi 是一个无头 CMS 实现。为什么我认为 Strapi 比其他实现更好呢？因为经过我的研究，我发现 Strapi 是最佳的开源选择，拥有强大的社区，并且使用Node.js和React编写，因此您可以非常轻松地进行自定义。Strapi 拥有一个强大的可定制管理面板。您可以使用REST或GraphQL从任何客户端、移动应用甚至物联网设备调用其 API。Strapi简化了API 的生成（我们稍后会详细介绍），并允许您允许或阻止对 API 的访问。Strapi 内置了身份验证系统，并提供了许多强大的插件供您连接。Strapi 可以与MongoDB、MySQL、PostgreSQL和SQLite数据库集成。
还有许多其他功能，您可以了解更多信息！

我与 Strapi 的私人故事

几个月前，我的朋友向我介绍了Strapi，他对此非常兴奋。我很喜欢这个概念，但作为一名软件工程师，我却找不到它对我有什么实际用途。

几个月后，我的产品经理给我添加了一个新功能：

“在我们的应用程序中，有两个地方我需要经常修改。
第一个是“更新”页面（通常是在新版本发布之后），第二个是“帮助”页面。我厌倦了让开发人员以“硬编码”的方式修改内容！（这需要进入应用程序的代码，修改特定内容，然后发布新版本！）我需要一个界面来完美地修改这些部分！”

我理解他的需求，并开始思考如何才能完美地满足他的需求。我首先问他是否可以将这个功能集成到我们现有的应用程序中，比如为管理员用户添加一个“编辑”按钮，但他更倾向于使用外部应用程序。

所以，我应该从头开始开发一个新应用吗？这个应用需要包含美观的用户界面、服务器和数据库。我以前做过类似的事情，但我想在最短的时间内打造一个完美的解决方案。

在开始开发新应用之前，我想起了无头CMS的概念。感觉它很适合我的需求。没错，我的确想到了Strapi，但我还是做了些调研，寻找其他替代方案（我想为我的团队选择最好的！）。调研之后，我发现Strapi无疑是最适合我的选择（详见“什么是Strapi”部分了解Strapi的功能）。

我打开电脑，通过create-strapi-app（稍后会有更多说明……）安装了 Strapi，登录，添加了新资源，添加了一些用户，将 Strapi 连接到 MongoDB，并做了其他一些事情，以确保 Strapi 是最佳选择。

在我继续讲述我的故事之前，让我先向你们展示一下 Strapi！

Bootstrap Strapi

打开命令行界面并开始输入：

npx create-strapi-app my-dream-project --quickstart

您可以省略--quickstart或填写一些输入项，例如您想要的数据库类型。

现在，在您的应用程序文件夹中使用以下命令启动 Strapi 应用程序：

npm run develop

请稍等片刻，新标签页将会打开。创建新的管理员用户：

这是管理员面板：

你可能会说你很喜欢它！它有很多功能可以实现。我将重点介绍我想重点讲解的功能：API 生成，你可以在应用程序中稍后使用它。

点击Content-Types Builder按钮，您将看到以下屏幕：

现在你可以创建 ` Array`Collection Type和 `Object` Single Type。
你可以这样理解：Collection Type`Array` 用于包含对象的数组，而 ` Single TypeObject` 用于单个对象。例如，你可以生成一个产品数组（`Array` Collection Type），并不断地添加/删除/更新数组中的对象。当你想生成单个对象时，可以使用 `Object` Single Type。

你还记得我们的更新界面吗？这个界面由title以下content几个部分组成：

• title组件 - 仅包含纯文本。
• content组件——可包含图像、视频和设计好的文本。它需要支持富文本编辑器的一些功能。

让我们在 Strapi 中创建一个合适的对象，以便通过 REST 使用它，并将其注入到更新屏幕组件中。

点击继续Create new single type，然后填写姓名：

就我而言，我选择“UpdatesScreen”这个名称。

按下Continue按钮，选择对象的字段。给它们指定类型和名称：

我选择与我的“更新”屏幕对应的“标题”（文本类型）和“内容”（富文本编辑器类型）字段：

点击Save按钮，服务器将重启，您会在代码库的相应文件夹下找到新文件api。现在您可以在“section”下找到新创建的单个类型Single Types，点击它。您可以随意编辑，然后点击按钮Save：

太棒了！现在我们希望能够从客户端获取这个资源。

前往Roles & Permissions“公共”部分，点击“编辑”按钮。在“权限”部分，点击“查找”复选框：

右侧显示的是您可以前往的路线，请保存以备后用：

然后，按下Save按钮。
将保存的路由添加到基本 URL。结果应为：

http://localhost:1337/{YOUR_GENERATED_ROUTE}

访问此 URL，您将获得 JSON 格式的对象，例如：

{
  "id": 1,
  "Title": "Hello!",
  "Content": "What's new?",
  "created_by": {
    "id": 1,
    "firstname": "Idan",
    "lastname": "Shoshana",
    "username": null
  },
  "updated_by": {
    "id": 1,
    "firstname": "Idan",
    "lastname": "Shoshana",
    "username": null
  },
  "created_at": "2020-08-12T07:28:32.132Z",
  "updated_at": "2020-08-12T07:28:32.186Z"
}

哇，现在你可以从你的应用程序中获取这个资源了！

正如你所料，我创建了两个单独的类型：“UpdatesScreen”和“HelpScreen”，每个类型都包含title相应的字段。我用React-Quill替换了 Strapi 的富文本编辑器，以便生成 HTML 而不是 Markdown。这篇文章或许对你有所帮助。content

我一直在我的应用程序中向 Strapi 发送请求以获取一些数据，效果非常好。
当用户需要查看新更新时（通常是在应用发布新版本之后），我会向他们弹出一个更新窗口。我还添加了一些前端逻辑，用于检查特定用户是否已经阅读过特定应用版本的更新。当产品经理通过 Strapi 为另一个应用版本编写内容时，我知道我的应用中的所有用户都会收到包含新内容的弹出窗口！

我的客户可以看到来自 Strapi 的数据（他们并不知道🤫），产品经理可以随意添加新内容，而无需开发人员的任何努力！

照片由bruce mars拍摄，来自Unsplash

希望您喜欢！欢迎留言！