目录
创建演示项目
添加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 应该为您创建一个新项目:
下一步是添加NuGet包——右键单击项目并单击菜单项“管理NuGet包... ”。
选择“浏览”选项卡并在搜索框中键入“Platz”。
我们需要安装'Platz.SqlForms'和'Platz.ObjectBuilder'并通过添加Platz初始化代码扩展Startup.cs:
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton();
// Platz
services.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
将“QueryDesigner.razor”添加到“Pages”文件夹:
@page "/QueryDesigner"
@using Platz.ObjectBuilder
将链接添加到JQuery和引导程序到“Pages\_Host.cshtml”:
...
Platz.SqlForms.Demo
@*Added for Platz*@
...
并更改“Shared\NavMenu.razor”:
...
-
Home
-
Admin Schemas
-
Admin Queries
...
现在让我们运行应用程序并单击“管理架构”页面。您将看到带有新架构的页面,该架构已准备好创建。
输入“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的路径:
保存文件,然后将其重命名为“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 Context
public partial class PlatzDemoDataContext : DataContextBase
{
protected override void Configure(DataContextSettings settings)
{
settings.SetSchema("PlatzDemo");
settings.SetDriver();
settings.MigrationsPath = @"\SchemaStore\PlatzDemo.schema.migrations.json";
settings.AddTable();
settings.AddTable();
settings.AddTable();
}
}
#endregion
#region Entities
public 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
{
protected override void Define(DynamicFormBuilder builder)
{
builder.Entity(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
{
protected override void Define(DataServiceFormBuilder builder)
{
builder.Entity(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 GetProductList(params object[] parameters)
{
var db = GetDbContext();
var result = db.Get(typeof(Product)).Cast().ToList();
return result;
}
}
}
现在我们添加Blazor页面来呈现产品表单并在“NavMenu.razor”中注册产品列表页面。
ProductList.razor@page "/ProductList/"
@using Platz.SqlForms.Demo.SchemaForms
Product Edit
@page "/ProductEdit/{Id:int}"
@using Platz.SqlForms.Demo.SchemaForms
Product Edit
@code {
[Parameter]
public int Id { get; set; }
}
@page "/ProductEdit/{Id:int}"
@using Platz.SqlForms.Demo.SchemaForms
Product Edit
@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