Skip to main content
目录

快速入门指南

Strapi提供了很大的灵活性。 无论您是想快速查看最终结果，还是想更深入地了解产品， 我们都能满足您的需求。 在本教程中，我们将采用DIY方法， 从头构建项目和数据结构，然后将项目部署到Strapi Cloud以从那里添加数据。

先决条件​

在安装Strapi之前，您的计算机上必须安装以下要求：

  • Node.js: 仅支持活动LTS或维护LTS版本(当前为v18和v20)。不支持Node的奇数版本。
  • 您首选的Node.js包管理器
    • npm
    • yarn
  • Python(如果使用SQLite数据库)
  • 你还需要安装git并拥有Github账户才能将项目部署到Strapi Cloud。

Part A: 使用Strapi创建一个新项目​

我们将首先通过在终端中运行命令在您的计算机上创建一个新的Strapi项目， 然后注册我们的第一个本地管理员用户。

请按照以下步骤操作：

  • 第一步: 运行安装脚本，在终端中运行以下命令
pnpx create-strapi-app@latest my-project --quickstart
info

quick start安装使用SQLite数据库设置Strapi。 还提供其他数据库和安装选项(请参考CLI安装指南)

  • 第二步: 注册第一个本地管理员用户

安装完成后，浏览器会自动打开一个新标签页。

填写表格，创建自己的用户。完成后，您就成为了Strapi应用程序的第一个管理员用户。欢迎加入，指挥官。

您现在可以访问管理面板：

admin panel

您刚刚创建了一个新的 Strapi 项目！您可以开始使用 Strapi 并使用我们的用户指南自行发现该产品，或继续执行下面的 B 部分。

Part B: 使用内容类型生成器构建数据结构​

安装脚本刚刚创建了一个空项目。 现在，受我们的FoodAdvisor示例应用程序的启发，我们将指导您创建餐厅目录。

本地Strapi项目的管理面板在http://localhost:1337/admin运行。 您将在这里花费大部分时间来创建和更新内容。

首先，我们将为您的内容创建一个数据结构。 这只能在开发模式下完成，这是本地创建的项目的默认模式。

tip

如果服务器尚未运行， 请在终端中cd进入my-project文件夹并运行npm run develop（或yarn develop）来启动它。

内容类型生成器可帮助您创建数据结构。 当使用Strapi创建空项目时，聚会就从这里开始。

  • 第一步: 创建"餐厅"集合类型

您的餐厅目录最终将包含许多餐厅，因此我们需要创建一个"餐厅"集合类型。 然后我们可以描述添加新餐厅条目时要显示的字段：

  1. 单击创建您的第一个内容类型按钮，如果未显示，请转到主导航中的内容类型生成器。
  2. 单击"创建新的集合类型"
  3. 键入Restaurant作为显示名称，然后单击继续。
  4. 单击文本字段
  5. 在名称字段中输入Name
  6. 切换到"高级设置"选项卡，然后检查"必填字段"和"唯一字段"设置
  7. 单击添加另一个字段
  8. 选择列表中的富文本(块)字段
  9. 在"名称"字段下键入Description，然后单击"完成"
  10. 最后，点击保存并等待Strapi重新启动。

qsg handson restaurant

Strapi重新启动后，导航中的"内容管理器">"集合类型"下会列出"餐厅"。 哇，您刚刚创建了第一个内容类型！这也太酷了--让我们现在再创建一个，只是为了好玩。

  • 第二步: 创建"Category"集合类型

如果我们的餐厅目录有一些类别，这将有助于变得更有条理。 让我们创建一个"Category"集合类型:

  1. 转到主导航中的内容类型生成器。
  2. 单击创建新的集合类型
  3. 键入Category作为显示名称，然后单击继续
  4. 单击文本字段
  5. 在名称字段中输入Name
  6. 切换到"高级设置"选项卡，然后检查"必填字段"和"唯一字段"设置。
  7. 单击添加另一个字段
  8. 选择关系字段
  9. 在中心，选择代表"多对多"的图标。文本应为Categories has and belongs to many Restaurants。
  10. 最后，单击"完成"，然后单击"保存"按钮，然后等待Strapi重新启动。

collection ct

您刚刚为Strapi项目创建了一个基本数据结构！ 您可以继续使用内容类型生成器，也可以进入下面的Part C和Part D，了解Strapi Cloud之前， 您需要将Strapi项目托管在在线存储库上，我们使用Github

  • 第一步: 在Github上托管Strapi项目的代码

创建一个新的Github存储库并将Strapi项目的代码推送到此存储库。

如果您还不熟悉Github，下面可切换内容应该可以帮助入门。

将 Strapi 项目代码推送到 GitHub 所需的步骤：

  1. 在终端中，确保您仍在托管我们创建的 Strapi 项目的 my-project 文件夹中。 如果到目前为止您密切关注本教程，我们应该仍然在那里。
  2. 运行 git init 命令为此文件夹初始化 git
  3. 运行 git add . 命令将所有修改的文件添加到 git 索引中。
  4. 运行 git commit -m "Initial commit" 命令以创建包含所有添加更改的提交。
  5. 登录您的 GitHub 帐户并创建一个新存储库。 为新存储库命名，例如 my-first-strapi-project，并记住该名称
  6. 返回终端并将本地存储库推送到 GitHub： a. 运行类似于以下内容的命令：git remote add origin git@github.com:yourname/my-first-strapi-project.git， 确保将 yourname 替换为您的实际 GitHub 配置文件名称， 将 my-first-strapi-project 替换为您在步骤 4 中使用的实际名称。 b. 运行 git push --set-upstream origin main 命令以最终将提交推送到 GitHub 存储库。

有关通过命令行界面使用 git 的更多信息可以在官方 GitHub 文档中找到。

  • 第二步: 创建 Strapi Cloud 帐户和新的 Strapi Cloud 项目

要创建新的 Strapi 云帐户：

  1. 导航至 Strapi Cloud 登录页面。
  2. 单击“继续使用 GitHub”按钮并使用托管 Strapi 项目存储库的 GitHub 帐户登录。

您现在应该看到 Strapi Cloud 仪表板。您可以在此处管理托管在 Strapi Cloud 上的 Strapi 项目。

我们将通过导入您刚刚推送到 GitHub 存储库的本地 Strapi 项目来创建一个新的 Strapi Cloud 项目：

strapi cloud

  1. 单击+创建项目按钮。
  2. 选择免费试用计划。
  3. 向下滚动，然后在“导入 git 存储库部分”中， 从列表中选择适当的帐户和存储库（例如，帐户：yourname，存储库：my-first-strapi-project）
  4. 进一步向下滚动，在“设置”部分中，为您的项目指定一个显示名称（例如 my-first-strapi-project）， 并保持其他选项不变。
  5. 单击页面底部的创建项目。

您的 Strapi 项目应在几分钟内完成部署。 🚀 完成后，您将能够通过单击右上角的“访问应用程序”按钮来登录已部署的 Strapi 项目。

现在，您的项目托管在 Strapi Cloud 上并可在线访问。 您可以通过阅读其专用文档来了解有关 Strapi Cloud 的更多信息， 或者继续执行 D 部分以登录您的在线 Strapi 项目并从那里添加您的第一个数据。

Part D: 使用内容管理器将内容添加到您的 Strapi Cloud 项目​

现在我们已经创建了具有 2 种集合类型（“餐厅”和“类别”）的基本数据结构， 并将您的项目部署到 Strapi Cloud，让我们使用 Cloud 通过创建新条目来实际添加内容。

  • 第 1 步：登录新 Strapi Cloud 项目的管理面板

现在您的 Strapi Cloud 项目已创建，让我们登录该项目：

  1. 在 Strapi Cloud 仪表板中，单击 my-first-strapi-project 项目。
  2. 单击访问应用程序按钮。
  3. 在打开的新页面中，填写表单以创建此 Strapi Cloud 项目的第一个管理员用户。

登录到我们的第一个 Strapi Cloud 项目，我们现在将从那里添加数据。

login cloud

  • 第2步: 为“Restaurant”集合类型创建一个条目
  1. 转到导航中的内容管理器 > 集合类型 - 餐厅。
  2. 单击创建新条目。
  3. 在名称字段中输入您最喜欢的当地餐厅的名称。假设它是Biscotte Restaurant。
  4. 在“描述”字段中，写一些相关内容。如果您缺乏灵感， 可以使用Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.。
  5. 单击“保存”。

restaurant

该餐厅现在列在内容管理器的集合类型 - 餐厅视图中。

  • 第 3 步：添加类别​

让我们转到内容管理器 > 集合类型 - 类别并创建 2 个类别：

  1. 单击创建新条目。
  2. 在名称字段中输入 French Food
  3. 单击“保存”。
  4. 返回“集合类型 - 类别”，然后再次单击“创建新条目”。
  5. 在“名称”字段中输入 Brunch，然后单击“保存”。

categories

“法国美食”和“早午餐”类别现在列在内容管理器的“集合类型 - 类别”视图中。

现在，我们将为餐厅添加一个类别：

  1. 转到导航中的内容管理器 > 集合类型 - 餐厅，然后单击“Biscotte 餐厅”。
  2. 在页面底部的类别下拉列表中，选择“早午餐”。滚动回到页面顶部，然后单击“保存”。
  • 第 4 步：设置角色和权限

我们刚刚添加了一家餐厅和 2 个类别。我们现在有足够的内容可供消费（双关语）。但首先，我们需要确保内容可以通过 API 公开访问：

  1. 单击主导航底部的“设置”。
  2. 在用户和权限插件下，选择角色。
  3. 单击公共角色。
  4. 在“权限”下向下滚动。
  5. 在“权限”选项卡中，找到“餐厅”并单击它。
  6. 单击“查找”和“findOne”旁边的复选框。
  7. 对“类别”重复：单击“查找”和“查找一个”旁边的复选框。
  8. 最后，单击“保存”。

roles

  • 第5步：发布内容

默认情况下，您创建的任何内容都会保存为草稿。让我们发布我们的类别和餐厅。

首先，导航到内容管理器 > 集合类型 - 类别。从那里：

  1. 单击“早午餐”条目。
  2. 在下一个屏幕上，单击“发布”。
  3. 在确认窗口中，单击是，发布。

然后，返回类别列表并重复“法国食品”类别。

最后，要发布您最喜欢的餐厅，请转至内容管理器 > 集合类型 - 餐厅，单击“Biscotte Restaurant”条目，然后发布。

publish

  • 第 6 步：使用 API

好的，亲爱的美食家，我们刚刚完成了内容的创建并使其可以通过 API 进行访问。你可以拍拍自己的背——但你还没有看到你努力工作的最终结果。

现在您已经看到了：应该可以通过访问 Strapi Cloud 项目 URL 的 /api/restaurants 路径（例如 https://beautiful-first-strapi-project.strapiapp.com/api/restaurants）来访问餐厅列表。

现在就试试！结果应该与下面的示例响应类似

{
  "data": [
    {
      "id": 1,
      "attributes": {
        "name": "Biscotte Restaurant",
        "description": "Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.",
        "createdAt": "2021-11-18T13:34:53.885Z",
        "updatedAt": "2021-11-18T13:59:05.035Z",
        "publishedAt": "2021-11-18T13:59:05.033Z"
      }
    }
  ],
  "meta": {
    "pagination": {
      "page": 1,
      "pageSize": 25,
      "pageCount": 1,
      "total": 1
    }
  }
}

现在您已经了解了使用 Strapi 创建和发布内容的基础知识， 我们鼓励您更深入地探索和挖掘 Strapi 的一些功能：

  • 👉学习如何使用Strapi的REST API来查询内容，
  • 👉 通过浏览用户指南了解有关 Strapi 功能的更多信息，
  • 👉 并针对高级用例自定义您的 Strapi 后端和管理面板。