Blazor实战——Known框架快速开始

Posted KNOWN

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Blazor实战——Known框架快速开始相关的知识,希望对你有一定的参考价值。

Known是基于C#和Blazor开发的前后端分离快速开发框架,开箱即用,跨平台,一处代码,多处运行。
开源地址: https://gitee.com/known/Known

1. 安装项目模板并创建新项目

  • 打开命令行输入如下命令安装和创建。
-- 安装模板
dotnet new install KnownTemplate
-- 创建项目
dotnet new known --name=KIMS

说明:KIMS为测试项目名称

  • 安装和创建成功后,项目文件夹自动生成如下内容
├─KIMS          ->项目前后端共用库,客户端和实体类等。
├─KIMS.Client   ->Web前端,Blazor WebAssembly。
├─KIMS.Core     ->项目后端库,控制器、服务、数据访问等。
├─KIMS.Razor    ->项目前端库,模块页面和表单。
├─KIMS.Server   ->Web后端。
├─KIMS.WinForm  ->WinForm窗体及Razor页面。
├─KIMSAlone     ->桌面exe程序。
├─KIMS.db       ->默认SQLite数据库。
├─KIMS.sln      ->VS解决方案文件。

2. 打开解决方案配置应用

  • 使用 VS2022 打开 KIMS.sln 文件,打开 KIMS 项目下 AppConfig.cs 文件,配置App名称,示例代码如下:
public class AppConfig

    public static void Initialize()
    
        Config.AppId = "KIMS";                           //系统ID,自动生成,默认项目名称
        Config.AppName = "Known管理系统";                 //在此配置你的系统名称
        Config.SysVersion = "1.0.0";                     //系统版本号
        Config.AppAssembly = typeof(AppConfig).Assembly; //实体模型程序集,用于模块管理配置列表字段

        PagingCriteria.DefaultPageSize = 20;             //默认分页大小
        DicCategory.AddCategories<AppDictionary>();      //自动加载数据字典类别,在AppDictionary中增加类别
        Cache.AttachCodes(typeof(AppConfig).Assembly);   //自动加载CodeTable特性类常量进入缓存
        //在此配置你的系统其他全局配置
    

3. 配置后端数据库连接

  • 打开 KIMS.Server 项目文件,添加你的系统使用的数据库访问包,常用数据库包如下
-- SQLite
<PackageReference Include="Microsoft.Data.Sqlite" Version="7.0.5" />
-- Access
<PackageReference Include="System.Data.OleDb" Version="7.0.0" />
-- MySQL
<PackageReference Include="MySqlConnector" Version="2.2.5" />

-- 打开项目下 AppServer.cs 文件修改数据库连接,示例代码如下:

class AppServer

    internal static void Initialize(WebApplicationBuilder builder)
    
        //配置环境目录
        KCConfig.WebRoot = builder.Environment.WebRootPath;
        KCConfig.ContentRoot = builder.Environment.ContentRootPath;
        //读取appsettings.json配置
        var configuration = builder.Configuration;
        var dbFile = configuration.GetSection("DBFile").Get<string>();//数据库配置
        var uploadPath = configuration.GetSection("UploadPath").Get<string>();//上传文件存储路径
        Initialize(dbFile, uploadPath);
    

    internal static void Initialize(string? dbFile, string? uploadPath)
    
        //初始化配置
        AppConfig.Initialize();
        AppCore.Initialize();
        //转换绝对路径
        var path = KCConfig.ContentRoot;
        dbFile = Path.GetFullPath(Path.Combine(path, dbFile));
        uploadPath = Path.GetFullPath(Path.Combine(path, uploadPath));
        //注册数据访问提供者和初始化数据库连接
        Database.RegisterProviders(new Dictionary<string, Type>
        
            ["SQLite"] = typeof(Microsoft.Data.Sqlite.SqliteFactory)
        );
        var connInfo = new Known.Core.ConnectionInfo
        
            Name = "Default",
            ProviderName = "SQLite",
            ConnectionString = $"Data Source=dbFile;"
        ;
        KCConfig.App = new AppInfo
        
            Connections = new List<Known.Core.ConnectionInfo>  connInfo ,
            UploadPath = uploadPath
        ;
    

4. 配置完成运行项目

  • 到此简单配置已完成,现在可以点击VS运行 KIMS.Server 项目啦,运行效果如下:

Blazor预研与实战

背景

最近一直在搞一件事,就是熟悉Blazor,后期需要将Blazor真正运用到项目内。前期做了一些调研,包括但不限于

  • Blazor知识学习

  • 组件库生态预研

  • 与现有SPA框架做比对

  • 与WebForm做比对

  • 自己动手做个演示项目

最终的体验非常不错,功能全面。现有的一些SPA思想Blazor基本都有,现有的WebForm开发思想Blazor基本也包含,甚至提供了混合开发,可以开发PC/移动端应用。

Blazor真正做到了集技术大成于一体,如果我们再给予一些关注度,必成为下一个主流框架!

Blazor目前已经接近30K的star,关注度持续升高。大家也去star吧!

https://github.com/dotnet/aspnetcore  

Blazor知识学习

Blazor学习途径还是推荐官方文档,全而不乱,井井有条f,从基础到高级用法,层层递进。

https://docs.microsoft.com/zh-cn/aspnet/core/blazor/?view=aspnetcore-6.0

其次是Github,Github上各种组件库、项目模板,提供了充分的学习,借鉴渠道。可以看到Blazor真正在活跃。

https://github.com/search?q=Blazor

一个汇总库,提供了各个领域Blazor目前现有的一些模板、组件库,非常全面

https://github.com/AdrienTorris/awesome-blazor

组件库预研

Blazor组件库目前看来太多了,比较优秀,关注度比较高的有。

https://github.com/MudBlazor/MudBlazor

https://github.com/ant-design-blazor/ant-design-blazor

https://github.com/dotnetcore/BootstrapBlazor

https://github.com/BlazorComponent/MASA.Blazor

组件库现在还在持续变多,可供选择性越来越高

与现有SPA比对

Blazor作为一个SPA框架,现有SPA基本上理念一致,MVVM思想中有的Blazor全都有:双向绑定、路由、依赖注入、组件化、事件处理...

也有不少人做过对应分析,十分不错

https://devathon.com/blog/blazor-vs-angular-vs-react-vs-vue/

https://www.telerik.com/blogs/blazor-vs-vue-web-developers

我也做了个简单的翻译

https://www.cnblogs.com/chenyishi/p/16595037.html

与WebForm做比对

为啥要与WebForm做比对?Blazor从开发模式说与WebForm还是有一点相似的,包括页面生命周期,项目结构,中间件...

官方也给我们提供了迁移文档,减小从webform迁移到blazor的难度。

https://docs.microsoft.com/zh-cn/dotnet/architecture/blazor-for-web-forms-developers/introduction

动手实战

光学不练可不行,就用MudBlazor做个Demo,试试Blazor WebAssemebly端和Blazor hybrid混合开发有多爽。

特别是Blazor hybrid混合开发,用HTML思想开发Winform,但逻辑用C#写而不是JS,体验原生性能,大家赶紧动起来吧!

别再听一些人说Blazor不行.NETCore+不行了,自己尝试下就知道多棒了!大家去star吧!https://github.com/dotnet/aspnetcore

以上是关于Blazor实战——Known框架快速开始的主要内容,如果未能解决你的问题,请参考以下文章

基于C#和Blazor开发的前后端分离框架

Bootstrap Blazor 实战 Markdown 编辑器使用

Blazor预研与实战

Blazor Hybrid / MAUI 简介和实战

Blazor Hybrid / MAUI 简介和实战

可以使用 C# 的 Web 前端框架 Blazor