璦€

鐢變簬絎竷澶〣lazor鍓嶇欏甸潰緙栧啓鍜屾帴鍙ｅ鎺?/code>鐨勫唴瀹規(guī)瘮杈冪殑澶氾紝鎵€浠ヨ繖涓€绔犺妭灝嗕細(xì)鍒嗕負(fù)涓夌瘒鏂囩珷鏉ヨ繘琛岃瑙ｏ紝澶у鍙互璁や負(fù)鍒嗕負(fù)鏃┿€佷腑銆佹櫄鏉ヨ繘琛岄樁孌墊€у涔?fàn)锛屼粠鑰屾彁楂樺涔?fàn)鏁堢巼馃榿銆?/p>

涓冨ぉ.NET 8 鎿嶄綔 SQLite 鍏ラ棬鍒板疄鎴樿緇嗘暀紼?/h2>

• 絎竴澶?SQLite 綆€浠?/span>
• 絎簩澶?鍦?Windows 涓婇厤緗?SQLite 鐜
• 絎笁澶?SQLite 蹇€熷叆闂?/span>
• 絎洓澶?EasySQLite 鍓嶅悗绔」鐩鏋舵惌寤?/span>
• 絎簲澶╁紩鍏?SQLite-net ORM 騫跺皝瑁呭父鐢ㄦ柟娉?/span>
• 絎叚澶╁悗绔彮綰х鐞嗙浉鍏蟲帴鍙ｅ畬鍠勫拰Swagger鑷畾涔夐厤緗?/span>

EasySQLite 欏圭洰婧愮爜鍦板潃

• GitHub 鍦板潃錛歨ttps://github.com/YSGStudyHards/EasySQLite

Blazor綆€浠嬪拰蹇€熷叆闂?/h2>

涓嶇啛鎮(zhèn)塀lazor鐨勫悓瀛﹀彲浠ュ厛鐪嬭繖綃囨枃绔犲ぇ姒備簡瑙ｄ竴涓嬨€?/p>

鍏ㄩ潰鐨凙SP.NET Core Blazor綆€浠嬪拰蹇€熷叆闂?/span>

BootstrapBlazor浠嬬粛

• 浣跨敤鏂囨。錛歨ttps://www.blazor.zone/introduction
• Gitee欏圭洰鍦板潃錛歨ttps://gitee.com/LongbowEnterprise/BootstrapBlazor

BootstrapBlazor鏄竴濂楀熀浜?Bootstrap 鍜?Blazor 鐨勪紒涓氱駭緇勪歡搴擄紝鍙互璁や負(fù)鏄?Bootstrap 欏圭洰鐨?Blazor 鐗堝疄鐜般€傚熀浜?Bootstrap 鏍峰紡搴撶簿蹇冩墦閫狅紝騫朵笖棰濆澧炲姞浜?100 澶氱甯哥敤鐨勭粍浠訛紝涓烘?zhèn)ㄥ揩閫熷紑鍙戦」鐩甫鏉ラ潪涓€鑸殑鎰熻錛堝枩嬈ootstrap椋庢牸鐨勫悓瀛︽帹鑽愪嬌鐢級(jí)銆?/p>

BootstrapBlazor綾誨簱瀹夎

綆＄悊Nuget紼嬪簭鍖?>鎼滅儲(chǔ)BootstrapBlazor榪涜瀹夎銆?/p>

BootstrapBlazor搴撴敞鍏ュ鍣?/h2>

鍦?code style='font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(0, 150, 136);'>Program.cs涓皢 BootstrapBlazor 搴撴坊鍔犲埌 ASP.NET Core 欏圭洰涓殑渚濊禆鍏崇郴娉ㄥ叆瀹瑰櫒涓€?/p>

瀵煎叆BootstrapBlazor緇勪歡搴撳懡鍚嶇┖闂?/h2>

鎵撳紑_Imports.razor鏂囦歡錛屽鍏ootstrapBlazor緇勪歡搴撳懡鍚嶇┖闂達(dá)細(xì)@using BootstrapBlazor.Components銆?/p>

Menu 瀵艱埅鑿滃崟璁劇疆

MainLayout.razor

@inherits LayoutComponentBase

<Layout SideWidth="0" IsPage="true" ShowGotoTop="true" ShowCollapseBar="true"
 IsFullSide="@IsFullSide" IsFixedHeader="@IsFixedHeader" IsFixedFooter="@IsFixedFooter" ShowFooter="@ShowFooter"
 TabDefaultUrl="/"
 Menus="@Menus" UseTabSet="@UseTabSet" AdditionalAssemblies="new[] { GetType().Assembly }" class="@Theme">
 <Header>
 <span class="ms-3 flex-sm-fill d-none d-sm-block">Bootstrap of Blazor</span>
 <div class="flex-fill d-sm-none">
 </div>
 <div class="layout-drawer" @onclick="@(e=> IsOpen=!IsOpen)"><i class="fa fa-gears"></i></div>
 </Header>
 <Side>
 <div class="layout-banner">
 <div class="layout-title">
 <span>EasySQLite</span>
 </div>
 </div>
 <div class="layout-user">
 <img class="layout-avatar" src="./favicon.png">
 <div class="layout-title">
 <span>綆＄悊鍛?lt;/span>
 </div>
 <div class="layout-user-state"></div>
 </div>
 </Side>
 <Main>
 <CascadingValue Value="this" IsFixed="true">
 @Body
 </CascadingValue>
 </Main>
 <Footer>
 <div class="text-center flex-fill">
 <a class="page-layout-demo-footer-link" href="https://gitee.com/LongbowEnterprise/BootstrapAdmin" target="_blank">Bootstrap Admin</a>
 </div>
 </Footer>
 <NotFound>
 <p>Sorry, there's nothing at this address.</p>
 </NotFound>
</Layout>

<Drawer Placement="Placement.Right" @bind-IsOpen="@IsOpen" IsBackdrop="true">
 <div class="layout-drawer-body">
 <div class="btn btn-info w-100" @onclick="@(e=> IsOpen=false)">鐐瑰嚮鍏抽棴</div>
 <div class="page-layout-demo-option">
 <p>甯冨眬璋冩暣</p>
 <div class="row">
 <div class="col-6">
 <div class="layout-item @(IsFullSide ? "active d-flex" : "d-flex")" @onclick="@(e=> IsFullSide=true)" data-toggle="tooltip" title="宸﹀彸緇撴瀯">
 <div class="layout-left d-flex flex-column">
 <div class="layout-left-header"></div>
 <div class="layout-left-body flex-fill"></div>
 </div>
 <div class="layout-right d-flex flex-column flex-fill">
 <div class="layout-right-header"></div>
 <div class="layout-right-body flex-fill"></div>
 <div class="layout-right-footer"></div>
 </div>
 </div>
 </div>
 <div class="col-6">
 <div class="layout-item flex-column @(IsFullSide ? "d-flex" : "active d-flex")" @onclick="@(e=> IsFullSide=false)" data-toggle="tooltip" title="涓婁笅緇撴瀯">
 <div class="layout-top">
 </div>
 <div class="layout-body d-flex flex-fill">
 <div class="layout-left">
 </div>
 <div class="layout-right flex-fill">
 </div>
 </div>
 <div class="layout-footer">
 </div>
 </div>
 </div>
 </div>
 </div>

 <div class="page-layout-demo-option">
 <p>鍥哄畾璋冩暣</p>
 <div class="row">
 <div class="col-6 d-flex align-items-center">
 <Switch @bind-Value="@IsFixedHeader" OnColor="@Color.Success" OffColor="@Color.Secondary"></Switch>
 </div>
 <div class="col-6 text-right">
 <span class="cell-label">鍥哄畾欏靛ご</span>
 </div>
 </div>
 <div class="row mt-3">
 <div class="col-6 d-flex align-items-center">
 <Switch @bind-Value="@IsFixedFooter" OnColor="@Color.Success" OffColor="@Color.Secondary"></Switch>
 </div>
 <div class="col-6 text-right">
 <span class="cell-label">鍥哄畾欏佃剼</span>
 </div>
 </div>
 <div class="row mt-3">
 <div class="col-6 d-flex align-items-center">
 <Switch @bind-Value="@ShowFooter" OnColor="@Color.Success" OffColor="@Color.Primary"></Switch>
 </div>
 <div class="col-6 text-right">
 <span class="cell-label">鏄劇ず欏佃剼</span>
 </div>
 </div>
 </div>

 <div class="page-layout-demo-option">
 <p>涓婚閰嶈壊</p>
 <div class="row">
 <div class="col-2">
 <span class="color color1" @onclick="@(e=> Theme="color1")"></span>
 </div>
 <div class="col-2">
 <span class="color color2" @onclick="@(e=> Theme="color2")"></span>
 </div>
 <div class="col-2">
 <span class="color color3" @onclick="@(e=> Theme="color3")"></span>
 </div>
 <div class="col-2">
 <span class="color color4" @onclick="@(e=> Theme="color4")"></span>
 </div>
 <div class="col-2">
 <span class="color color5" @onclick="@(e=> Theme="color5")"></span>
 </div>
 <div class="col-2">
 <span class="color color6" @onclick="@(e=> Theme="color6")"></span>
 </div>
 </div>
 </div>

 <div class="page-layout-demo-option">
 <p>鏇村璁劇疆</p>
 <div class="row">
 <div class="col-6 d-flex align-items-center">
 <Switch @bind-Value="@UseTabSet" OnColor="@Color.Success" OffColor="@Color.Primary"></Switch>
 </div>
 <div class="col-6 text-right">
 <span class="cell-label">@(UseTabSet ? "澶氭爣絳? : "鍗曢〉")</span>
 </div>
 </div>
 </div>
 </div>
</Drawer>

MainLayout.razor.cs

 public partial class MainLayout
 {
private bool UseTabSet { get; set; }=true;

private string Theme { get; set; }="";

private bool IsOpen { get; set; }

private bool IsFixedHeader { get; set; }=true;

private bool IsFixedFooter { get; set; }=true;

private bool IsFullSide { get; set; }=true;

private bool ShowFooter { get; set; }=true;

private List<MenuItem>? Menus { get; set; }

/// <summary>
/// OnInitialized 鏂規(guī)硶
/// </summary>
protected override void OnInitialized()
 {
base.OnInitialized();

 Menus=GetIconSideMenuItems();
 }

private static List<MenuItem> GetIconSideMenuItems()
 {
var menus=new List<MenuItem>
 {
new MenuItem() { Text="Home", Icon="fa-solid fa-fw fa-flag", Url="/" , Match=NavLinkMatch.All},
new MenuItem() { Text="鐝駭綆＄悊", Icon="fa-solid fa-fw fas fa-user-secret", Url="SchoolClass" },
new MenuItem() { Text="瀛︾敓綆＄悊", Icon="fa-solid fa-fw fas fa-universal-access", Url="Student" },
 };

return menus;
 }
 }

Collapse 鎶樺彔闈㈡澘緇勪歡寮曞叆

Home.razor

@page "/"
<!-- 寮曠敤 BootstrapBlazor.FontAwesome 瀛椾綋搴撳寘 -->
<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet">
<!-- 寮曠敤 BootstrapBlazor 緇勪歡搴撳寘 -->
<link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">

<!--寮曞叆BootstrapBlazor 緇勪歡搴撳寘-->
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js"></script>

<PageTitle>Home</PageTitle>

<h2>涓冨ぉ.NET 8鎿嶄綔SQLite鍏ラ棬鍒板疄鎴樿緇嗘暀紼?lt;/h2>

<h5>SQLite鏄竴涓交閲忕駭鐨勫祵鍏ュ紡鍏崇郴鍨嬫暟鎹簱錛屽畠浠ヤ竴涓皬鍨嬬殑C璇█搴撶殑褰㈠紡瀛樺湪銆傚畠鏄竴涓嚜鍖呭惈銆佹棤闇€鏈嶅姟鍣ㄣ€侀浂閰嶇疆鐨勬暟鎹簱寮曟搸銆備笌浼犵粺鐨勬暟鎹簱緋葷粺涓嶅悓錛孲QLite鐩存帴璇誨啓鏅€氱鐩樻枃浠訛紝涓嶉渶瑕佸崟鐙殑鏁版嵁搴撴湇鍔″櫒銆傚畠鏀寔鏍囧噯鐨凷QL鏌ヨ璇█錛屽茍鎻愪緵浜嗕簨鍔℃敮鎸佸拰ACID灞炴€э紙鍘熷瓙鎬с€佷竴鑷存€с€侀殧紱繪€у拰鎸佷箙鎬э級(jí)銆?lt;/h5>


<div class="images-item" style="width:60%;margin-top:10px;">
 <ImageViewer Url="./涓冨ぉ.NET 8鎿嶄綔SQLite鍏ラ棬鍒板疄鎴?png" ShowPlaceHolder="false" />
</div>



<DemoBlock Title="鍩虹鐢ㄦ硶" Introduction="鍙悓鏃跺睍寮€澶氫釜闈㈡澘錛岄潰鏉夸箣闂翠笉褰卞搷" Name="Normal">
 <Collapse OnCollapseChanged="@OnChanged">
 <CollapseItems>
 <CollapseItem Text="宓屽叆寮?>
 <div>SQLite鐨勫簱鍙互杞繪澗鍦板祵鍏ュ埌搴旂敤紼嬪簭涓紝涓嶉渶瑕佺嫭绔嬬殑鏁版嵁搴撴湇鍔″櫒榪涚▼銆?lt;/div>
 </CollapseItem>
 <CollapseItem Text="鏃犳湇鍔″櫒" IsCollapsed="false">
 <div>涓庡ぇ澶氭暟鏁版嵁搴撶郴緇熶笉鍚岋紝SQLite涓嶉渶瑕佸崟鐙殑鏁版嵁搴撴湇鍔″櫒錛屾墍鏈夋暟鎹兘瀛樺偍鍦ㄤ竴涓鐩樻枃浠朵腑銆?lt;/div>
 </CollapseItem>
 <CollapseItem Text="闆墮厤緗?>
 <div>浣跨敤SQLite鏃訛紝娌℃湁浠諱綍澶嶆潅鐨勯厤緗垨綆＄悊浠誨姟銆傚彧闇€寮曞叆SQLite搴擄紝騫跺紑濮嬩嬌鐢ㄥ嵆鍙€?lt;/div>
 </CollapseItem>
 <CollapseItem Text="杞婚噺綰?>
 <div>SQLite鏄竴涓交閲忕駭鐨勬暟鎹簱寮曟搸錛屽簱鏂囦歡鐨勫ぇ灝忓緢灝忥紝騫朵笖鍦ㄥ唴瀛樹嬌鐢ㄦ柟闈篃闈炲父楂樻晥銆?lt;/div>
 </CollapseItem>
 </CollapseItems>
 </Collapse>
 <ConsoleLogger @ref="NormalLogger" />
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

Home.razor.cs

 public partial class Home
 {
 [Not]
 private ConsoleLogger? NormalLogger { get; set; }

 private Task OnChanged(CollapseItem item)
 {
 NormalLogger.Log($"{item.Text}: {item.IsCollapsed}");
return Task.CompletedTask;
 }

 private bool State { get; set; }

 private void OnToggle()
 {
 State=!State;
 }

 /// <summary>
 /// 鑾峰緱灞炴€ф柟娉?br> /// </summary>
 /// <returns></returns>
 private AttributeItem[] GetAttributes()=>
 [
new()
 {
 Name="CollapseItems",
 Description="鍐呭",
 Type="RenderFragment",
 ValueList=" 鈥?",
 DefaultValue=" 鈥?"
 },
new()
 {
 Name="IsAccordion",
 Description="鏄惁鎵嬮鐞存晥鏋?,
 Type="bool",
 ValueList="true|false",
 DefaultValue="false"
 },
new()
 {
 Name="OnCollapseChanged",
 Description="欏圭洰鏀惰搗灞曞紑鐘舵€佹敼鍙樺洖璋冩柟娉?,
 Type="Func<CollapseItem, Task>",
 ValueList=" 鈥?",
 DefaultValue=" 鈥?"
 }
 ];
 }

 public class AttributeItem
 {
 /// <summary>
 /// 鑾峰彇鎴栬緗睘鎬х殑鍚嶇О銆?br> /// </summary>
 public string Name { get; set; }

 /// <summary>
 /// 鑾峰彇鎴栬緗睘鎬х殑鎻忚堪銆?br> /// </summary>
 public string Description { get; set; }

 /// <summary>
 /// 鑾峰彇鎴栬緗睘鎬х殑綾誨瀷銆?br> /// </summary>
 public string Type { get; set; }

 /// <summary>
 /// 鑾峰彇鎴栬緗睘鎬х殑鍙栧€煎垪琛紙濡傛灉鏈夛級(jí)銆?br> /// </summary>
 public string ValueList { get; set; }

 /// <summary>
 /// 鑾峰彇鎴栬緗睘鎬х殑榛樿鍊箋€?br> /// </summary>
 public string DefaultValue { get; set; }
 }