全栈开发入门：使用 Remix 和 Strapi

全栈开发是一种全面构建 Web 应用的方法，涵盖了前端和后端的各个方面。在本文中，我们将通过一个速成课程了解使用 Remix 和 Strapi 进行全栈开发。我们将构建一个简单的应用，它从 Strapi 后端获取文章列表，并使用 Remix 作为前端。

Strapi 和 Remix 概览

Strapi 是一个无头 CMS，允许轻松管理内容，并提供 RESTful 或 GraphQL API。另一方面，Remix 是一个现代 React 框架，支持服务器渲染的应用，优化了性能和用户体验。

课程先决条件

跟随本课程，您需要具备 JavaScript、React 和 Node.js 的基本知识。此外，请确保您的机器上已安装 Node.js 和 npm。

第一步：设置 Strapi

要设置 Strapi，我们首先需要创建一个新的 Strapi 项目。打开终端并运行命令以创建一个名为 my-strapi-backend 的新 Strapi 项目。

设置 Strapi（0 秒起）

接下来，我们定义一个内容类型。打开 Strapi 管理面板，导航到 http://localhost:1337/admin，并创建一个名为 article 的新集合类型，包含标题和内容字段。

定义内容类型（26 秒起）

然后，通过进入 articles 集合并创建一些示例文章来添加文章。

添加文章（45 秒起）

要设置权限，转到 settings -> roles -> public 并启用 article 的 find 和 findOne 权限。

设置权限（78 秒起）

最后，获取 API URL，该 URL 可在 http://localhost:1337/api/articles 访问。

获取 API URL（124 秒起）

第二步：设置 Remix 应用

要设置 Remix 应用，打开一个新的终端窗口并创建一个新的 Remix 项目，按照提示选择您的偏好设置。

设置 Remix（156 秒起）

接下来，通过导航到您的 Remix 项目目录并运行安装命令来安装 Axios 以进行 API 调用。

安装 Axios（181 秒起）

第三步：在 Remix 中从 Strapi 获取数据

要在 Remix 中从 Strapi 获取数据，通过创建一个新文件 app/routes/articles.jsx 来创建一个文章路由。

从 Strapi 获取数据（206 秒起）

在这段代码中，我们从 Strapi 获取文章并将其显示为列表。最后，通过修改 app/routes/index.jsx 来添加一个链接到文章页面。

结论

总之，您现在已经有了一个使用 Remix 作为前端和 Strapi 作为后端的简单全栈应用。您可以通过添加更多功能（如创建、更新和删除文章）以及实现用户认证来扩展此应用。您还可以使用 CSS 框架（如 Tailwind CSS 或 Bootstrap）来定制样式。如果您需要有关任何具体步骤的更多详细信息，请随时提问。