如何轻松创建具有 CRUD 操作的 React 应用程序

引言

在本文中，我将使用 Visual Studio 2017 和 ASP.NET Core 2.0，在不编写任何代码的情况下，构建一个具有 CRUD（创建、读取、更新和删除）操作的 React 应用。为此，我将使用 React App Generator，您可以从 http://bssdev.biz/React-App-Generator 免费下载（在底部查找免费下载链接）。注意：您需要创建一个免费账户才能下载该应用程序。

背景

React App Generator 是一个 ASP.NET Core 工具，允许 .NET 开发人员快速构建一个 100% 的 React 应用程序。React App Generator 可以根据您的数据库架构或应用程序模型，为您创建 100% 的 React 应用程序，并具备完整的 CRUD 功能。

注意：此版本的 React App Generator 需要 ASP.NET Core 2.0。它与 ASP.NET Core 1.x 和 2.1 不兼容，后者会创建不同结构的 React 项目。

让我们开始构建我们的基础应用...

构建新的 React 应用

1. 打开 Visual Studio 并选择“新建项目”。
2. 从“新建项目”对话框中，选择 .NET Core，然后选择 ASP.NET Core Web 应用程序（图 1）

   

   图1。
3. 从“ASP.NET Core Web 应用程序”对话框中，选择 *React.js*（图 2）

   

   图2。

创建我们的模型

我们需要为我们的应用创建一个模型。在本文中，我们将创建一个名为 Actor 的模型，如下所示。我们将文件命名为 models.cs，因为我们将所有模型都保存在该文件中。

public class Actor
{
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
[Key]
[Required]
[DisplayName(“Id”)]
public int Id {get; set;}

[Required]
[MaxLength(50)]
[DisplayName(“Name”)]
public string Name {get; set;}

[MaxLength(10)]
[DisplayName(“Gender”)]
public string Gender {get; set;}

[DisplayName(“Age”)]
public int? Age {get; set;}

[MaxLength(255)]
[DisplayName(“Picture”)]
public string Picture {get; set;}
}

注意：如果您是 Visual Studio 新手，您可能需要将鼠标悬停在任何带有波浪线文本上，并添加任何必需的“using”语句。

由于我们的数据将来自 SQL 数据库，我们也需要一个 DbContext 来支持我们的模型，但它同样可以来自 MySQL 或 NoSQL DocumentDb 存储。我们将它命名为 AppDbContext.cs。

public class AppDbContext : DbContext
 {
 public AppDbContext(DbContextOptions<appdbcontext> options)
 : base(options)
 {
 }
 
 public DbSet<actor> Actors {get; set;}

}
}    
</actor></appdbcontext>

就这些了。我们现在可以使用 React App Generator 来创建整个应用，包括 CRUD 操作，甚至内置的分页和排序...

运行 React App Generator

1. 运行 React App Generator 应用程序。
2. 在“Source”部分，通过单击浏览按钮 (…) 并导航到它，指定 models.cs 文件的路径。
3. 在“Table/Model”框中，通过单击浏览按钮 (…) 并选择它，指定要处理的模型名称。在本例中，它是 Actor。
4. 在“DbContext”框中，将 AppDbContext 指定为数据库上下文。
5. 在“Namespace”框中，输入您在“构建新的 React 应用程序”中创建的应用程序的名称。
6. 然后，单击“Let’s Go”按钮来实现神奇！

如果一切顺利，您应该会看到一个“Result”消息框，显示一切已成功，并告诉您下一步该做什么。如果您收到了该消息，请在心中记住下一步操作，然后单击“OK”按钮。

为了将内容应用到我们上面创建的基础应用程序，我们只需将内容复制到我们的项目中。为此，只需单击“Let’s Go”按钮右侧的放大镜按钮。Windows 资源管理器将打开并显示输出。只需选择所有文件，然后将它们粘贴到项目根目录（包含 bin/ 和 ClientApp/ 文件夹以及其他几个文件夹的文件夹）。我们只需要配置一些东西，就可以运行我们的应用了...

配置您的 React 应用

我们需要确保应用程序所需的所有 npm 包都已下载。在“解决方案资源管理器”中，我们需要展开“Dependencies”，然后右键单击“npm”文件夹，并从弹出菜单中选择“Restore Packages”。这可能需要一段时间，所以您需要耐心等待。

tsconfig.json

我们还需要确保 tsconfig.json（位于应用程序根目录）中的“strict”模式已关闭。

“compilerOptions”: { “strict”: false

AppSettings.json

我们还需要确保在 appsettings.json 中为我们的 AppDbContext 提供了连接字符串。它应该看起来像这样

“ConnectionStrings”: {
 “AppDbContext”: “Server=localhost;Database=Movies;Integrated Security=true;”
 },

现在，我们可以通过在“解决方案资源管理器”中右键单击项目并选择“Rebuild”来编译我们的应用程序。如果 npm 包尚未下载完成，您将收到一条指示编译延迟的消息。

就这些了！一旦应用程序编译成功，您就可以运行它...

…您会注意到我们有用于 CRUD 操作的链接：创建、详细信息、编辑和 X（删除），以及内置的分页和排序功能，无需编写任何代码（除了创建我们的模型）。React App Generator 还支持 OpenIDConnect 身份验证和授权，这将在另一篇文章中介绍。再见！