首页 > 数据库> 文章详细

B03. BootstrapBlazor实战 10分钟编写数据库维护项目

2022-03-27 08:00:06 阅读：279 来源： 互联网

标签：10 Sqlite FreeSql BootstrapBlazor B03 添加 b03sqlite Data

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

标签：10,Sqlite,FreeSql,BootstrapBlazor,B03,添加,b03sqlite,Data
来源： https://www.cnblogs.com/densen2014/p/16061838.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9