|
當(dāng)您需要為客戶(hù)構(gòu)建有效的原型或公司沒(méi)有用于企業(yè)發(fā)展的預(yù)算時(shí)，您別無(wú)選擇，并且需要使用一些捷徑和生活技巧，通常是低代碼或無(wú)代碼方法。在這篇文章中，我提出了一種有趣的方法，它關(guān)于如何使用開(kāi)源庫(kù)Platz.SqlForms快速開(kāi)發(fā)BlazorUI。SqlForms將提供SPA用戶(hù)體驗(yàn)，并且無(wú)需您進(jìn)行任何編碼即可與數(shù)據(jù)庫(kù)進(jìn)行通信，您所要做的就是定義提供流暢符號(hào)定義的UI表單。使用嵌入式數(shù)據(jù)庫(kù)架構(gòu)設(shè)計(jì)器，可以定義要顯示為UI控件的實(shí)體。 創(chuàng)建演示項(xiàng)目使用VisualStudio，單擊“創(chuàng)建新項(xiàng)目”，然后找到BlazorServerApp。
單擊“下一步”并設(shè)置項(xiàng)目名稱(chēng)和解決方案名稱(chēng)，然后單擊“下一步”，然后選擇“.NET5.0”目標(biāo)框架并單擊“創(chuàng)建”。
VisualStudio應(yīng)該為您創(chuàng)建一個(gè)新項(xiàng)目：
添加Platz包下一步是添加NuGet軟件包-右鍵單擊項(xiàng)目，然后單擊菜單項(xiàng)“ManageNuGetPackages…”。 選擇“瀏覽”標(biāo)簽，然后在搜索框中輸入“Platz”。
我們需要安裝“Platz.SqlForms”和“Platz.ObjectBuilder”并通過(guò)添加Platz初始化代碼來(lái)擴(kuò)展Startup.cs： public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<WeatherForecastService>();
// Platz
services.AddPlatzSqlForms();
services.AddPlatzObjectBuilder();
}123456789復(fù)制代碼類(lèi)型：[html]接下來(lái)，我們需要添加一個(gè)項(xiàng)目文件夾，該文件夾將存儲(chǔ)模式和查詢(xún)配置–右鍵單擊該項(xiàng)目，然后選擇“添加”，然后選擇“新建文件夾”，然后鍵入“SchemaStore”。 如何使用Platz對(duì)象構(gòu)建器 PlatzSchemaDesigner和QueryBuilder是我們添加的無(wú)代碼元素，用于簡(jiǎn)化和加快開(kāi)發(fā)過(guò)程。 使用SchemaDesigner，我們可以直觀地定義數(shù)據(jù)庫(kù)表和關(guān)系，并將它們保存為json格式的配置文件。然后應(yīng)用t4模板，我們可以生成C＃代碼，該代碼將管理定義的數(shù)據(jù)庫(kù)并為Platz動(dòng)態(tài)UI組件提供CRUD操作。 查詢(xún)生成器用于數(shù)據(jù)庫(kù)查詢(xún)的可視化設(shè)計(jì)，以利用SQL的全部功能來(lái)檢索數(shù)據(jù)。結(jié)果查詢(xún)存儲(chǔ)在配置json文件中，并可用于C＃代碼生成。 T4模板生成的代碼可以本地連接到Platz動(dòng)態(tài)UI組件，因此您無(wú)需手動(dòng)編碼。 設(shè)置Platz無(wú)代碼生成器要設(shè)置無(wú)代碼生成器，我們需要?jiǎng)?chuàng)建兩個(gè)剃刀頁(yè)面并將它們注冊(cè)到Shared\NavMenu.razor中，還可以刪除VisualStudio演示頁(yè)面（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" />1234567復(fù)制代碼類(lèi)型：[html] 將“QueryDesigner.razor”添加到“Pages”文件夾中： @page "/QueryDesigner" @using Platz.ObjectBuilder<QueryComponent SourceSchemaFile="SchemaStore\PlatzDemo.schema.json" StoreDataPath="SchemaStore" DataService="PlatzDemoDataContext" Namespace="PlatzDemo.SchemaStore" />123456復(fù)制代碼類(lèi)型：[html] 將指向JQuery的鏈接添加到'Pages\_Host.cshtml'中的引導(dǎo)程序： ...<!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./npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" > <script src="https://code./jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" ></script> <script src="https://cdn./npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" ></script> <script src="https://cdn./npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" ></script> <link href="css/site.css" rel="stylesheet" /> <link href="Platz.SqlForms.Demo.styles.css" rel="stylesheet" /></head>...12345678910111213141516171819202122232425262728復(fù)制代碼類(lèi)型：[html] 并更改“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>...123456789101112131415161718192021復(fù)制代碼類(lèi)型：[html] 設(shè)計(jì)演示數(shù)據(jù)庫(kù)現(xiàn)在，讓我們運(yùn)行該應(yīng)用程序，然后單擊“管理模式”頁(yè)面。您將看到帶有新架構(gòu)的頁(yè)面，該頁(yè)面已可以創(chuàng)建。
輸入“PlatzDemo”作為架構(gòu)名稱(chēng)，然后選擇“使用INT自動(dòng)增量ID”選項(xiàng)?，F(xiàn)在，您可以通過(guò)單擊綠色的“添加”按鈕來(lái)添加表。 每個(gè)表應(yīng)具有一個(gè)'Id'列，該列標(biāo)識(shí)每個(gè)記錄并允許我們?cè)诒碇g創(chuàng)建關(guān)系。 對(duì)于每一列，您應(yīng)該指定Name和Type。 我創(chuàng)建了一個(gè)'Product'表：
現(xiàn)在，我想再添加兩個(gè)表來(lái)創(chuàng)建客戶(hù)訂單輸入系統(tǒng)，您可以在圖上看到添加的表。添加所有表后，單擊“模式”選項(xiàng)卡上的“保存”按鈕。 可以看到，我從'OrderItem'表中添加了對(duì)Order'和'Product的引用。 建立查詢(xún)保存架構(gòu)后，我們可以單擊“管理查詢(xún)”菜單，然后使用定義的表來(lái)構(gòu)建查詢(xún)。 在下面的屏幕中，您可以看到已設(shè)計(jì)的表已合并以產(chǎn)生訂單項(xiàng)列表頁(yè)面所需的輸出。
當(dāng)你關(guān)閉瀏覽器，你應(yīng)該看到的是，項(xiàng)目文件夾“SchemaStore”現(xiàn)在包含文件：“GetOrderItemProductList.json”與查詢(xún)定義，“PlatzDemo.schema.json”和“PlatzDemo.schema.migrations.json”以及架構(gòu)定義。 生成數(shù)據(jù)上下文代碼現(xiàn)在我們可以使用t4模板生成數(shù)據(jù)庫(kù)ORM代碼。為此，請(qǐng)創(chuàng)建一個(gè)項(xiàng)目文件夾“SchemaServices”，并在其中創(chuàng)建一個(gè)名為“PlatzDemoDataContext.txt”的文本文件，然后打開(kāi)項(xiàng)目文件“Platz.Config.Link\CopyMe.SchemaStoreDataContext.tt.txt”并將其內(nèi)容復(fù)制到創(chuàng)建文件“PlatzDemoDataContext.txt”。在此文件中，修改Schemajson的路徑： <# // ================================================================ Set JsonStorePath here, relative to solution folder ================================== #> <# string JsonStorePath = @"Platz.SqlForms.Demo\SchemaStore\PlatzDemo.schema.json"; #> <# // ========================================================================= ============================================================================== #>12345復(fù)制代碼類(lèi)型：[html] 保存文件，然后將其重命名為“PlatzDemoDataContext.tt”–這是VisualStudio可以識(shí)別的t4擴(kuò)展名。每次您對(duì)此文件進(jìn)行更改或保存時(shí)-模板都會(huì)運(yùn)行以生成代碼，因此再次保存-此操作應(yīng)生成“PlatzDemoDataContext.cs”文件，其中包含我們?cè)O(shè)計(jì)的數(shù)據(jù)庫(kù)模式的已生成代碼： // *********************************************************************************************
// 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<SqlJsonStoreDatabaseDriver>();
settings.MigrationsPath = @"\SchemaStore\PlatzDemo.schema.migrations.json";
settings.AddTable<Order>();
settings.AddTable<OrderItem>();
settings.AddTable<Product>();
}
}
#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
}12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758復(fù)制代碼類(lèi)型：[html]為了能夠使用生成的代碼，我們只需要將連接字符串添加到“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": "*"
}1234567891011121314復(fù)制代碼類(lèi)型：[html]如您所見(jiàn)，我在此演示中使用了MicrosoftSQLLocalDB。 創(chuàng)建動(dòng)態(tài)表單我們創(chuàng)建一個(gè)“SchemaForms”項(xiàng)目文件夾，并在其中放置動(dòng)態(tài)表單定義代碼： 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;
}
}
}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051復(fù)制代碼類(lèi)型：[html]現(xiàn)在，我們添加Blazor頁(yè)面以呈現(xiàn)產(chǎn)品表單，并在'NavMenu.razor'中注冊(cè)產(chǎn)品列表頁(yè)面。 產(chǎn)品清單剃刀 @page "/ProductList/" @using Platz.SqlForms.Demo.SchemaForms<h1>Product Edit</h1><FormDataServiceListComponent TForm="ProductListForm" />123456復(fù)制代碼類(lèi)型：[html] 產(chǎn)品編輯器 @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; }
}1234567891011復(fù)制代碼類(lèi)型：[html]產(chǎn)品刪除剃刀 @page "/ProductDelete/{Id:int}"
@using Platz.SqlForms.Demo.SchemaForms<h1>Product Delete</h1><FormDynamicEditComponent TForm="ProductForm" Id="@Id" ForDelete="true"/>@code {
[Parameter]
public int Id { get; set; }
}1234567891011復(fù)制代碼類(lèi)型：[html]同樣，我們?yōu)?Order'和'OrderItem'表添加動(dòng)態(tài)表單和頁(yè)面。 我們省略了此代碼以減少閱讀時(shí)間。您可以在GitHub上找到完整的代碼。 測(cè)試應(yīng)用當(dāng)我們第一次啟動(dòng)該應(yīng)用程序時(shí)，它將自動(dòng)創(chuàng)建SQL數(shù)據(jù)庫(kù)并應(yīng)用所有遷移腳本。 您將能夠在Platz.SqlForms項(xiàng)目文檔中找到有關(guān)如何使用遷移的詳細(xì)信息，該遷移將在更接近最終發(fā)行日期的地方進(jìn)行。 您現(xiàn)在可以將新產(chǎn)品添加到數(shù)據(jù)庫(kù)中，進(jìn)行編輯和刪除。
完整的項(xiàng)目演示還包含用于添加和編輯Orders和OrderItems的功能。
結(jié)論在本文中，我們演示了如何使用嵌入式模式設(shè)計(jì)器定義數(shù)據(jù)庫(kù)并將其用于動(dòng)態(tài)UI生成。 模式設(shè)計(jì)器和查詢(xún)構(gòu)建器為Platz.SqlForms快速開(kāi)發(fā)和原型添加了無(wú)代碼技術(shù)。我們知道從維護(hù)的角度來(lái)看，無(wú)代碼可能會(huì)很痛苦，因此這就是我們提出一種新方法的原因-將您的模式或查詢(xún)?cè)O(shè)計(jì)保存到j(luò)son，然后您可以使用許多t4模板來(lái)生成結(jié)果代碼。 未來(lái)的發(fā)行版可能包含生成EntityFramework數(shù)據(jù)上下文的t4模板，因此從無(wú)代碼原型開(kāi)始的開(kāi)發(fā)人員將能夠遷移到可靠的MicrosoftORM。 |
|
|
來(lái)自： 碼農(nóng)9527 > 《WEB》
