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