创建演示项目

添加Platz包

Platz对象构建器的使用方式

设置Platz无代码构建器

设计演示数据库

构建查询

生成数据上下文代码

创建动态表单

ProductList.razor

ProductEdit.razor

ProductDelete.razor

测试申请

结论

当您需要为您的客户构建一个工作原型或您的公司没有企业开发预算时，您别无选择，您需要使用一些捷径和生活窍门，通常是低代码或无代码方法。在这篇文章中，我介绍了一种有趣的方法，介绍如何使用开源库Platz.SqlForms非常快速地开发Blazor UI。SqlForms 将提供SPA用户体验，它将与数据库进行通信，而无需您进行任何编码，您需要做的就是定义提供流畅符号定义的UI表单。使用嵌入式数据库架构设计器，您可以定义要显示为UI控件的实体。

从Github下载完整的解决方案

如果你有兴趣，可以阅读我关于Blazor动态表单的其他文章：

Microsoft Blazor - 动态内容
Microsoft Blazor - 使用 SQL Forms 快速开发开源 Platz.SqlForms

如果您没有Microsoft Visual Studio，可以从这里下载免费的“社区”版本：

Microsoft Visual Studio

创建演示项目

使用Visual Studio，单击“创建新项目”并找到Blazor Server App。

单击“下一步”并设置项目名称和解决方案名称，然后单击“下一步”，然后选择“.NET 5.0”目标框架并单击“创建”。

Visual Studio 应该为您创建一个新项目：

添加Platz包

下一步是添加NuGet包——右键单击项目并单击菜单项“管理NuGet包... ”。

选择“浏览”选项卡并在搜索框中键入“Platz”。

我们需要安装'Platz.SqlForms'和'Platz.ObjectBuilder'并通过添加Platz初始化代码扩展Startup.cs：

public void ConfigureServices(IServiceCollection services)
{services.AddRazorPages();services.AddServerSideBlazor();services.AddSingleton<WeatherForecastService>();// Platzservices.AddPlatzSqlForms();services.AddPlatzObjectBuilder();
}

接下来，我们需要添加一个将存储架构和查询配置的项目文件夹——右键单击该项目并选择“添加”，然后选择“新建文件夹”并键入“SchemaStore”。

Platz对象构建器的使用方式

Platz Schema Designer和Query Builder是我们添加的无代码元素，用于简化和加快开发过程。

使用Schema Designer，我们可以直观地定义数据库表和关系，并将它们以json格式保存到配置文件中。然后应用t4模板，我们可以生成C#代码来管理定义的数据库并为Platz动态UI组件提供CRUD操作。

查询生成器用于数据库查询的可视化设计，以使用SQL的全部功能检索数据。结果查询存储在配置json文件中，可用于C#代码生成。

T4模板生成的代码可以原生对接Platz动态UI组件，无需手动编码。

设置Platz无代码构建器

要设置无代码构建器，我们需要创建两个razor页面并在Shared\NavMenu.razor中注册它们，您也可以删除Visual Studio演示页面（Counter.razor和FetchData.razor）。

将“SchemaDesigner.razor”添加到“Pages”文件夹：

@page "/SchemaDesigner"
@using Platz.ObjectBuilder<SchemaComponent StoreDataPath="SchemaStore" DataService="PlatzDemoService" Namespace="PlatzDemo.SchemaStore"TargetConnectionString="Server=(localdb)\mssqllocaldb;Database=PlatzDemo;Trusted_Connection=True;MultipleActiveResultSets=true" />

将“QueryDesigner.razor”添加到“Pages”文件夹：

@page "/QueryDesigner"
@using Platz.ObjectBuilder<QueryComponent SourceSchemaFile="SchemaStore\PlatzDemo.schema.json" StoreDataPath="SchemaStore"DataService="PlatzDemoDataContext" Namespace="PlatzDemo.SchemaStore" />

将链接添加到JQuery和引导程序到“Pages\_Host.cshtml”：

...
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Platz.SqlForms.Demo</title><base href="~/" />@*Added for Platz*@<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script><link href="css/site.css" rel="stylesheet" /><link href="Platz.SqlForms.Demo.styles.css" rel="stylesheet" />
</head>
...

并更改“Shared\NavMenu.razor”：

...
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu"><ul class="nav flex-column"><li class="nav-item px-3"><NavLink class="nav-link" href="" Match="NavLinkMatch.All"><span class="oi oi-home" aria-hidden="true"></span> Home</NavLink></li><li class="nav-item px-3"><NavLink class="nav-link" href="SchemaDesigner"><span class="oi oi-list-rich" aria-hidden="true"></span> Admin Schemas</NavLink></li><li class="nav-item px-3"><NavLink class="nav-link" href="QueryDesigner"><span class="oi oi-list-rich" aria-hidden="true"></span> Admin Queries</NavLink></li></ul>
</div>
...

设计演示数据库

现在让我们运行应用程序并单击“管理架构”页面。您将看到带有新架构的页面，该架构已准备好创建。

输入“PlatzDemo”作为架构名称并选择“使用INT自动增量ID ”选项。现在您可以通过单击绿色的“添加”按钮来添加表格。

每个表都应该有一个“Id”列，它标识每条记录并允许我们在表之间创建关系。

对于每一列，您应该指定Name和Type。

我创建了一个“Product”表：

现在，我想再添加两个表来创建客户订单输入系统，您可以在图表上看到添加的表。添加完所有表后，单击“架构”选项卡上的“保存”按钮。

您可以看到我添加了从“OrderItem”表到“Order”和“Product”的引用。

构建查询

保存模式后，我们可以单击“管理查询”菜单并使用定义的表来构建查询。

在下面的截图中，您可以看到设计的表连接起来生成订单项目列表页面所需的输出。

当你关闭浏览器，你应该看到的是，项目文件夹“SchemaStore”现在包含文件：“GetOrderItemProductList.json”用于查询定义，“PlatzDemo.schema.json”和“PlatzDemo.schema.migrations.json”用于架构定义。

生成数据上下文代码

现在我们可以使用t4模板生成数据库ORM代码。为此，创建一个项目文件夹“SchemaServices ”并在其中创建一个名为“PlatzDemoDataContext.txt”的文本文件，然后打开项目文件“Platz.Config.Link\CopyMe.SchemaStoreDataContext.tt.txt”并将其内容复制到创建文件“PlatzDemoDataContext.txt”。在此文件中，修改Schema json的路径：

<# // ================================================================
Set JsonStorePath here, relative to solution folder ================================== #>
<#      string JsonStorePath = @"Platz.SqlForms.Demo\SchemaStore\PlatzDemo.schema.json"; #>
<# // =========================================================================
============================================================================== #>

保存文件，然后将其重命名为“PlatzDemoDataContext.tt”——这是Visual Studio可以识别的t4扩展。每次对此文件进行更改或保存时——模板将运行以生成代码，因此再次保存——此操作应生成“PlatzDemoDataContext.cs ”文件，其中包含我们设计的数据库模式的生成代码：

// *********************************************************************************************
// This code is auto generated by Platz.ObjectBuilder template,
// any changes made to this code will be lost
// *********************************************************************************************
using System;
using System.Collections.Generic;
using System.Text;
using System.Linq;
using Platz.ObjectBuilder;
using Platz.SqlForms;
using PlatzDemo.SchemaStore;namespace PlatzDemo.SchemaStore
{#region Data Contextpublic partial class PlatzDemoDataContext : DataContextBase{protected override void Configure(DataContextSettings settings){settings.SetSchema("PlatzDemo");settings.SetDriver<SqlJsonStoreDatabaseDriver>();settings.MigrationsPath = @"\SchemaStore\PlatzDemo.schema.migrations.json";settings.AddTable<Order>();settings.AddTable<OrderItem>();settings.AddTable<Product>();}}#endregion#region Entitiespublic partial class Order{public virtual int Id { get; set; }public virtual string ClientName { get; set; }public virtual DateTime Created { get; set; }}public partial class OrderItem{public virtual int Id { get; set; }public virtual int OrderId { get; set; }public virtual int ProductId { get; set; }public virtual int Qty { get; set; }}public partial class Product{public virtual int Id { get; set; }public virtual string Name { get; set; }public virtual decimal Price { get; set; }}#endregion
}

为了能够使用生成的代码，我们只需要将连接字符串添加到“appsettings.json”文件中：

{"ConnectionStrings": {"DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=PlatzDemo;Trusted_Connection=True;MultipleActiveResultSets=true"},"Logging": {"LogLevel": {"Default": "Information","Microsoft": "Warning","Microsoft.Hosting.Lifetime": "Information"}},"AllowedHosts": "*"
}

如您所见，我在此演示中使用了Microsoft SQL Local DB。

创建动态表单

我们创建一个“SchemaForms”项目文件夹并将动态表单定义代码放在那里：

using PlatzDemo.SchemaStore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;namespace Platz.SqlForms.Demo.SchemaForms
{public class ProductForm : StoreDynamicEditFormBase<PlatzDemoDataContext>{protected override void Define(DynamicFormBuilder builder){builder.Entity<Product>(e =>{e.Property(p => p.Id).IsReadOnly();e.Property(p => p.Name).IsRequired();e.Property(p => p.Price).IsRequired();e.DialogButton(ButtonActionTypes.Cancel).DialogButton(ButtonActionTypes.Validate).DialogButton(ButtonActionTypes.Submit);e.DialogButtonNavigation("ProductList", ButtonActionTypes.Delete, ButtonActionTypes.Cancel, ButtonActionTypes.Submit);});}}public class ProductListForm : StoreDataServiceBase<PlatzDemoDataContext>{protected override void Define(DataServiceFormBuilder builder){builder.Entity<Product>(e =>{e.ExcludeAll();e.Property(p => p.Id).IsPrimaryKey();e.Property(p => p.Name);e.Property(p => p.Price);e.ContextButton("Edit", "ProductEdit/{0}").ContextButton("Delete", "ProductDelete/{0}");e.DialogButton("ProductEdit/0", ButtonActionTypes.Add);});builder.SetListMethod(GetProductList);}public List<Product> GetProductList(params object[] parameters){var db = GetDbContext();var result = db.Get(typeof(Product)).Cast<Product>().ToList();return result;}}
}

现在我们添加Blazor页面来呈现产品表单并在“NavMenu.razor”中注册产品列表页面。

ProductList.razor

@page "/ProductList/"
@using Platz.SqlForms.Demo.SchemaForms<h1>Product Edit</h1><FormDataServiceListComponent TForm="ProductListForm" />

ProductEdit.razor

@page "/ProductEdit/{Id:int}"
@using Platz.SqlForms.Demo.SchemaForms<h1>Product Edit</h1><FormDynamicEditComponent TForm="ProductForm" Id="@Id" />@code {[Parameter]public int Id { get; set; }
}

ProductDelete.razor

@page "/ProductEdit/{Id:int}"
@using Platz.SqlForms.Demo.SchemaForms<h1>Product Edit</h1><FormDynamicEditComponent TForm="ProductForm" Id="@Id" />@code {[Parameter]public int Id { get; set; }
}

同样，我们为“Order”和“OrderItem”表添加动态表单和页面。

我们省略了这段代码以减少阅读时间。你可以在GitHub上找到完整的代码。

关于如何定义动态表单和使用动态razor组件的所有解释都可以在我的文章Microsoft Blazor - Rapid Development with SQL Forms Open-source Platz.SqlForms中找到。

测试申请

当我们第一次启动应用程序时，它会自动创建SQL数据库并应用所有迁移脚本。

您将能够在更接近最终发布日期的Platz.SqlForms项目文档中找到有关如何使用迁移的详细信息。

您现在可以将新产品添加到数据库、编辑和删除它们。

完整的项目演示还包含添加和编辑订单和订单项目的功能。

结论

在本文中，我们演示了如何使用嵌入式架构设计器来定义数据库并在动态UI生成中使用它。

模式设计器和查询构建器为Platz.SqlForms快速开发和原型设计添加了无代码技术。我们知道从维护的角度来看无代码可能会很痛苦，这就是为什么我们提出一种新方法——将您的架构或查询设计保存到json，然后您可以使用许多t4模板来生成结果代码。

未来的版本可能包括生成实体框架数据上下文的t4模板，因此从无代码原型开始的开发人员将能够迁移到可靠的Microsoft ORM。

https://www.codeproject.com/Articles/5299666/Microsoft-Blazor-Platz-SqlForms-Open-source-Using

Microsoft Blazor Platz.SqlForms开源——使用架构生成器设计和维护SQL Server数据库相关推荐

Microsoft SQL Server数据库部署过程
介绍 (Introduction) Database deployments are critical tasks that can affect negative in on performance ...
在arm架构的mac上安装sql server（m1芯片 or m2芯片）
在arm架构的mac上安装sql server 由于Mac最新的芯片使用了arm架构的缘故 Sql server和Mac的兼容相当差,以至于无法在Mac的docker上启动在m1芯片上很多方法试试还 ...
Microsoft SQL Server 数据库错误号大全
panchzh :Microsoft SQL Server 数据库错误号大全 0 操作成功完成. 1 功能错误. 2 系统找不到指定的文件. 3 系统找不到指定的路径. 4 系统无法打开文件. 5 ...
【转载】在C#中运用SQLDMO备份和恢复Microsoft SQL Server数据库
在C#中运用SQLDMO备份和恢复Microsoft SQL Server数据库 SQLDMO(SQL Distributed Management Objects,SQL分布式管理对象)封装了Mic ...
sql azure 语法_如何将SQL Server数据库备份到Microsoft Azure
sql azure 语法 In the last chapter, we explained how to create a Microsoft Azure Account and how to ha ...
Microsoft SQL Server 数据库使用（二）
##Microsoft SQL Server 数据库使用(二) 数据库练习使用可以在我的资源下载中下载数据库脚本文件. 一.查询数据注:下面使用 Microsoft SQL Server 2019 ...
Microsoft SQL Server 数据库使用（一）
一.Microsoft SQL Server安装注:下面使用 Microsoft SQL Server 2019 数据库练习使用可以在我的资源下载中下载数据库脚本文件. 1.安装SQL准备工作 (1 ...
在Ubuntu下从Python连接到Microsoft SQL Server数据库
Free tools are great, but the world ain't all sunshine and rainbows. Sometimes, we may need to conne ...
Microsoft SQL Server数据库
Microsoft SQL Server数据库 SQL Server 是Microsoft 公司推出的关系型数据库管理系统.具有使用方便可伸缩性好与相关软件集成程度高等优点,可跨越从运行Microso ...

Microsoft Blazor Platz.SqlForms开源——使用架构生成器设计和维护SQL Server数据库

创建演示项目

添加Platz包

Platz对象构建器的使用方式

设置Platz无代码构建器

设计演示数据库

构建查询

生成数据上下文代码

创建动态表单

ProductList.razor

ProductEdit.razor

ProductDelete.razor

测试申请

结论

Microsoft Blazor Platz.SqlForms开源——使用架构生成器设计和维护SQL Server数据库相关推荐

最新文章

热门文章