B03. BootstrapBlazor实战 10分钟编写数据库维护项目
2022/3/27 19:24:06
本文主要是介绍B03. BootstrapBlazor实战 10分钟编写数据库维护项目,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/达梦/神通/人大金仓/翰高/华为GaussDB/MsAccess
1.新建工程
新建工程b03sqlite
dotnet new blazorserver -o b03sqlite
将项目添加到解决方案中:
dotnet sln add b03sqlite/b03sqlite.csproj
使用 nuget.org 进行 BootstrapBlazor 组件安装, FreeSql sqlite库,字体 ..
dotnet add b03sqlite package BootstrapBlazor dotnet add b03sqlite package BootstrapBlazor.FontAwesome dotnet add b03sqlite package FreeSql.Provider.Sqlite dotnet add b03sqlite package Densen.FreeSql.Extensions.BootstrapBlazor
[可选]BootstrapBlazor官方BootstrapBlazor.DataAcces.FreeSql包替换Densen.FreeSql.Extensions.BootstrapBlazor
2.样式表和Javascript 引用
增加主题样式表到 Pages/_Layout.cshtml
文件中
删除 <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
并在下面添加两行
<link href="_content/BootstrapBlazor.FontAwesome/css/font-awesome.min.css" rel="stylesheet"> <link href="_content/BootstrapBlazor/css/bootstrap.blazor.bundle.min.css" rel="stylesheet">
添加 Javascript 引用到 Pages/_Layout.cshtml
文件中
在 <script src="_framework/blazor.server.js"></script>
之前添加
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.bundle.min.js" asp-append-version="true"></script>
3.添加增加命名空间引用到 _Imports.razor
文件中
@using BootstrapBlazor.Components
4.增加 BootstrapBlazorRoot 组件到 App.razor 文件中
<BootstrapBlazorRoot> <Router AppAssembly="@typeof(App).Assembly"> ... </Router> </BootstrapBlazorRoot>
5.添加BootstrapBlazor服务到 Program.cs
文件中
在 builder.Services.AddSingleton<WeatherForecastService>();
后加入
builder.Services.AddBootstrapBlazor();
6. 数据服务
添加FreeSql服务到 Program.cs
到
在 builder.Services.AddBootstrapBlazor();
之前加入
builder.Services.AddFreeSql(option => { //demo演示的是Sqlite驱动,FreeSql支持多种数据库,MySql/SqlServer/PostgreSQL/Oracle/Sqlite/Firebird/达梦/神通/人大金仓/翰高/华为GaussDB/MsAccess option.UseConnectionString(FreeSql.DataType.Sqlite, "Data Source=test.db;") //也可以写到配置文件中 #if DEBUG //开发环境:自动同步实体 .UseAutoSyncStructure(true) .UseNoneCommandParameter(true) //调试sql语句输出 .UseMonitorCommand(cmd => System.Console.WriteLine(cmd.CommandText)) #endif ; });
[可选] Data Source写道配置文件
appsettings.json
:
"ConnectionStrings": { "bb": "Data Source=test.db;" }
option.UseConnectionString(FreeSql.DataType.Sqlite, "Data Source=test.db;")
改为
option.UseConnectionString(FreeSql.DataType.Sqlite, builder.Configuration.GetConnectionString("bb"))
7. 数据实体类
添加BB和ORM特性到 Data/WeatherForecast.cs
类文件中
完整文件
using BootstrapBlazor.Components; using FreeSql.DataAnnotations; using System.ComponentModel; namespace b03sqlite.Data; [AutoGenerateClass(Searchable = true, Filterable = true, Sortable = true)] //BB自动建列特性,可搜索,可过滤,可排序 public class WeatherForecast { [Column(IsIdentity = true)] //FreeSql ORM特性: 自增,第一个名称ID的自动为主键 [DisplayName("序号")] //BB使用DisplayName渲染列名 public int ID { get; set; } [DisplayName("日期")] public DateTime Date { get; set; } public int TemperatureC { get; set; } public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); public string? Summary { get; set; } }
8. 界面和代码
添加Table组件到 Index.razor
文件中
指定数据TItem为WeatherForecast, 配置为自动建立数据列,[可选]双击编辑,[可选]显示列选择器
@using b03sqlite.Data <Table TItem="WeatherForecast" IsPagination="true" IsStriped="true" IsBordered="true" AutoGenerateColumns="true" ShowSearch="true" ShowToolbar="true" ShowExtendButtons="true" DoubleClickToEdit=true ShowColumnList=true ShowCardView=true> </Table>
代码
@code{ // 由于使用了FreeSql ORM 数据服务,可以直接取对象 [Inject] IFreeSql fsql { get; set; } //用演示服务的数据初始化数据库 [Inject] WeatherForecastService ForecastService { get; set; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { //由于是demo直接初始化一些数据用用 var res = fsql.Select<WeatherForecast>().Count(); if (res == 0) { var forecasts = (await ForecastService.GetForecastAsync(DateTime.Now)).ToList(); fsql.Insert<WeatherForecast>().AppendData(forecasts).ExecuteAffrows(); } } } }
9. 运行
项目源码
Github | Gitee
关联项目
FreeSql QQ群:4336577(已满)、8578575(已满)、52508226(在线)
BA & Blazor QQ群:795206915、675147445
知识共享许可协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名AlexChow(包含链接: https://github.com/densen2014 ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系 。
AlexChow
今日头条 | 博客园 | 知乎 | Gitee | GitHub
这篇关于B03. BootstrapBlazor实战 10分钟编写数据库维护项目的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-02Java管理系统项目实战入门教程
- 2024-11-02Java监控系统项目实战教程
- 2024-11-02Java就业项目项目实战:从入门到初级工程师的必备技能
- 2024-11-02Java全端项目实战入门教程
- 2024-11-02Java全栈项目实战:从入门到初级应用
- 2024-11-02Java日志系统项目实战:初学者完全指南
- 2024-11-02Java微服务系统项目实战入门教程
- 2024-11-02Java微服务项目实战:新手入门指南
- 2024-11-02Java项目实战:新手入门教程
- 2024-11-02Java小程序项目实战:从入门到简单应用