Blazor – 岁月细碎点滴快查 https://blog.mutadecheng.com Wed, 31 Dec 2025 00:58:56 +0000 zh-Hans hourly 1 https://wordpress.org/?v=6.9 Blazor项目编译Docker问题汇总 https://blog.mutadecheng.com/2025/10/25/blazor%e9%a1%b9%e7%9b%ae%e7%bc%96%e8%af%91docker%e9%97%ae%e9%a2%98%e6%b1%87%e6%80%bb/ https://blog.mutadecheng.com/2025/10/25/blazor%e9%a1%b9%e7%9b%ae%e7%bc%96%e8%af%91docker%e9%97%ae%e9%a2%98%e6%b1%87%e6%80%bb/#respond Sat, 25 Oct 2025 08:12:55 +0000 https://blog.mutadecheng.com/?p=403

1.Debug可以但是编译时候报语法错误找不到某些函数

error CS0103: The name 'xxx' does not exist in the current context
error CS1002: ; expected
error CS1513: } expected
error: File not found
error: Invalid character in source file

答: 有概率是window下blazor文件格式不对,主要体现在换行符格式（Windows是CRLF，Linux是LF）导致编译/语法错误、找不到某些函数等异常, 需要统一格式和编码

]]> https://blog.mutadecheng.com/2025/10/25/blazor%e9%a1%b9%e7%9b%ae%e7%bc%96%e8%af%91docker%e9%97%ae%e9%a2%98%e6%b1%87%e6%80%bb/feed/ 0 Arm 搭建一套传感器采集系统(基于docker) https://blog.mutadecheng.com/2025/09/11/arm-%e6%90%ad%e5%bb%ba%e4%b8%80%e5%a5%97%e4%bc%a0%e6%84%9f%e5%99%a8%e9%87%87%e9%9b%86%e7%b3%bb%e7%bb%9f%e5%9f%ba%e4%ba%8edocker/ Thu, 11 Sep 2025 07:28:57 +0000 https://blog.mutadecheng.com/?p=362 架构:

数据库: questdb

前端:blazor server

后端:c#控制台(hostserver)

平台运维:portainer

容器管理

# 国外
docker run -d -p 9000:9000 \
  --name portainer \
  --restart=always \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v portainer_data:/data \
  portainer/portainer-ce:alpine-sts
  
# 国内(Arm64)
docker run -d -p 9000:9000 \
  --name portainer \
  --restart=always \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v portainer_data:/data \
  registry.cn-beijing.aliyuncs.com/muta/portainer-ce:alpine-sts-arm64

# 国内(Amd64)
docker run -d -p 9000:9000 \
  --name portainer \
  --restart=always \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v portainer_data:/data \
  registry.cn-beijing.aliyuncs.com/muta/portainer-ce:alpine-sts-amd64

数据库安装

# 国外
docker run -d \
  --name questdb \
  -p 8812:8812 \
  -p 9080:9000 \
  -p 9009:9009 \
  -v questdb_data:/root/.questdb/db \
  questdb/questdb:nightly-rhel
  
# 国内(Arm64)
docker run -d \
  --name questdb \
  -p 8812:8812 \
  -p 9080:9000 \
  -p 9009:9009 \
  -v questdb_data:/root/.questdb/db \
  registry.cn-beijing.aliyuncs.com/muta/questdb:nightly-rhel-arm64

# 国内(Amd64)
docker run -d \
  --name questdb \
  -p 8812:8812 \
  -p 9080:9000 \
  -p 9009:9009 \
  -v questdb_data:/root/.questdb/db \
  registry.cn-beijing.aliyuncs.com/muta/questdb:nightly-rhel-amd64

rabbitmq

version: '3.8'

services:
  mq:
    image: registry.cn-beijing.aliyuncs.com/muta/rabbitmq:management-arm64 
    restart: always 
    volumes:
      - rabbitmq_data:/var/lib/rabbitmq    # 持久化RabbitMQ数据
    ports:
      - "5672:5672"                        # AMQP协议端口，应用程序连接用
      - "15672:15672"                      # 管理后台端口，Web管理界面用
      # 以下端口仅在集群或特殊情况下需要，可选
      # - "25672:25672"                    # 节点间通信端口（集群用）
      # - "4369:4369"                      # Erlang节点发现端口（集群用）
    logging:
      driver: "json-file"
      options:
        max-size: "100m"
        max-file: "3" 

volumes:
  rabbitmq_data:                           # 定义持久化数据卷

采集程序(方案1)

version: '3.8'

services:
  armcollection2025masablazorapp:
    image: registry.cn-beijing.aliyuncs.com/dfzh/armcollection2025masablazorapp:latest
    ports:
      - "20000:8080"
    user: root
    devices:
      - /dev/ttyS3:/dev/ttyS3
    environment: 
      SqlSugar__1__ConnectionString: "host=host.docker.internal;port=8812;username=admin;password=quest;database=qdb;ServerCompatibilityMode=NoTypeLoading;"
    restart: always
    volumes: 
      - /home/orangepi/DataProtection-Keys/:/app/.aspnet/DataProtection-Keys
    logging:
      driver: "json-file"
      options:
        max-size: "100m"
        max-file: "3"

采集程序(方案2)

version: '3.8'

services:
  app:
    image: registry.cn-beijing.aliyuncs.com/dfzh/armcollectblazorapp:latest
    network_mode: "host" 
    environment:  
      Urls: "http://*:20000"
    restart: always 
    logging:
      driver: "json-file"
      options:
        max-size: "100m"
        max-file: "3"
        
  serialport2questdb:
    image: registry.cn-beijing.aliyuncs.com/dfzh/armcollectserialport2questdb:latest
    network_mode: "host" 
    user: root
    devices:
      - /dev/ttyS3:/dev/ttyS3
    environment:  
      ComPortName : "/dev/ttyS3"
      Urls: "http://*:20002" 
    restart: always 
    logging:
      driver: "json-file"
      options:
        max-size: "100m"
        max-file: "3"
version: '3.8'

services:
  app:
    image: registry.cn-beijing.aliyuncs.com/dfzh/staticforcecalibration-blazorserver:arm64
    restart: always 
    volumes:
      - /home/bjgrst/staticforcecalibration_data:/app/App_Data     
      - /home/bjgrst/DefaultSeedsJsonFiles/:/app/DefaultSeedsJsonFiles
      - /dev:/dev
    ports:
      - "8080:8080"      
    user: root
    privileged: true
    logging:
      driver: "json-file"
      options:
        max-size: "100m"
        max-file: "3"
]]> Blazor 项目中集成 NPM 包与 TypeScript，并用 ESBuild 打包的实战与原理 https://blog.mutadecheng.com/2025/07/14/blazor-%e9%a1%b9%e7%9b%ae%e4%b8%ad%e9%9b%86%e6%88%90-npm-%e5%8c%85%e4%b8%8e-typescript%ef%bc%8c%e5%b9%b6%e7%94%a8-esbuild-%e6%89%93%e5%8c%85%e7%9a%84%e5%ae%9e%e6%88%98%e4%b8%8e%e5%8e%9f%e7%90%86/ Mon, 14 Jul 2025 09:22:13 +0000 https://blog.mutadecheng.com/?p=339 一、ESM 与 UMD 模块格式的区别

现代 JavaScript 生态主要有两种流行的模块格式：ESM（ECMAScript Module）和 UMD（Universal Module Definition）。

1. ESM（ECMAScript Module）

  • 使用 import 和 export 关键字进行模块组织。
  • 加载方式为静态加载，编译时即可确定依赖关系。
  • 适用于现代浏览器和支持 ES Module 的 Node.js 版本。
  • 支持 Tree Shaking，未被引用的代码可在打包时去除，减小体积。
  • 依赖关系明确，易于优化和静态分析。
  • 原生支持异步加载（浏览器端）。
  • 常见扩展名为 .mjs 或 .js。

示例：

// a.js
export function foo() {}

// b.js
import { foo } from './a.js';

2. UMD（Universal Module Definition）

  • 兼容 CommonJS、AMD 和浏览器全局变量等多种模块系统。
  • 运行时自动判断当前环境（Node.js、浏览器、AMD）。
  • 几乎可在所有 JS 环境下直接使用，包括老旧浏览器。
  • 最大的优点是兼容性好，可以直接用 <script> 标签引入。
  • 缺点是不能静态分析依赖，Tree Shaking 效果差，体积略大。

示例：

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else {
    root.myLib = factory();
  }
}(this, function () {
  return {};
}));

3. 对比总结

特点ESMUMD
兼容性现代浏览器/Node.js各种环境（浏览器、Node等）
语法import/export兼容多种模块系统
Tree Shaking支持不支持
用途新项目推荐兼容老环境或全局变量场景

二、Blazor 与 ESM/UMD 的集成限制

Blazor 是微软推出的 Web 前端开发框架，支持 C# 编写客户端逻辑，分为 Blazor WebAssembly 和 Blazor Server 两种模式。Blazor 本身可以通过 JS interop 机制与 JavaScript 交互，但在集成现代 JS 库时存在以下局限：

1. Blazor 的 JS 交互方式

  • 只能通过 JS interop 调用全局作用域下的 JS 函数（即挂在 window 上的方法）。
  • 无法直接使用 import 语法动态加载 ESM 模块（除非用 <script type="module"> 并手动挂载到 window）。
  • 不能像 React/Vue 那样直接使用 NPM 包或通过模块系统自动管理依赖。

2. ESM/UMD 直接集成的障碍

  • ESM 格式的库必须通过 import 加载，Blazor 无法直接识别，也无法在 C# 代码中直接调用。
  • UMD 虽可全局挂载，但许多 UMD 库默认不会主动把 API 挂到 window，需要额外封装。
  • Blazor 的 JS interop 通信方式决定了只能通过全局对象与 JS 交互，无法像前端框架一样灵活集成 NPM 生态。

3. 正确的集成方式

  • 手动引入 JS 文件：在 wwwroot/index.html 用 <script> 标签引入 UMD 格式库，并确保需要的 API 挂载到 window。
  • 封装全局 JS 方法：写一段 JS 代码，把第三方库的核心方法挂到 window，便于 Blazor 调用。
  • 如果必须使用 ESM，需用 <script type="module"> 并手动挂到 window，否则 Blazor 访问不到。

示例：

<script src="your-umd-lib.js"></script>
<script>
  window.myLib = window.myLib || {}; // 确保全局可访问
</script>

Blazor 代码则通过 JS interop 调用 window.myLib.xxx 方法。

三、在 Blazor 中集成 NPM 包与 TypeScript 的现代实践

面对 ESM/UMD 集成难题，推荐以下现代化方案：

上述
Parse error on line 1:
上述
^
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'UNICODE_TEXT'
flowchart TD
    A[开始：Blazor 项目] --> B[NPM 安装 esbuild 和所需 JS 库]
    B --> C[编写 TypeScript 文件<br>（如 Scripts/components.ts）]
    C --> D[在 package.json 配置 esbuild 打包脚本]
    D --> E[运行 npm run debugBuild / releaseBuild]
    E --> F[esbuild 打包 TypeScript 和 NPM 依赖<br>输出到 wwwroot/js/components.js]
    F --> G[Blazor 组件中通过 JS Interop 动态 import]
    G --> H[调用 JS 方法实现 C# 与 JS 互操作]
    H --> I[自动化集成到 .csproj 构建流程]
    I --> J[完成]

1. 使用 ESBuild 编译 TypeScript 和打包 NPM 依赖

的法国队
Parse error on line 1:
的法国队
^
Expecting 'NEWLINE', 'SPACE', 'GRAPH', got 'UNICODE_TEXT'
  • 在项目根目录下用 NPM 安装 ESBuild 和所需的 JS 库。
  • 在 Scripts 目录下编写 TypeScript 集成代码，导入 NPM 包并封装为供 Blazor 调用的全局方法。
  • 在 package.json 配置 ESBuild 打包脚本，输出为 ESM 格式的单一 JS 文件到 wwwroot/js。
  • Blazor 组件通过 IJSRuntime 动态导入打包后的模块，直接调用自定义方法。

关键脚本示例：

"scripts": {
    "debugBuild": "esbuild ./Scripts/components.ts --format=esm --bundle --sourcemap --outdir=wwwroot/js",
    "releaseBuild": "esbuild ./Scripts/components.ts --format=esm --bundle --sourcemap --minify --outdir=wwwroot/js"
}

2. 自动化集成到 .NET 构建流程

  • 在 .csproj 文件中添加 NPM 安装和打包任务，确保每次 dotnet build 或 dotnet run 时自动完成依赖安装和打包。

示例：

<Target Name="NPM Install" AfterTargets="PreBuildEvent">
    <Exec Command="npm install" />
</Target>
<Target Name="NPM Debug Build" AfterTargets="NPM Install" Condition="$(Configuration) == 'DEBUG'">
    <Exec Command="npm run debugBuild" />
</Target>
<Target Name="NPM Release Build" AfterTargets="NPM Install" Condition="$(Configuration) == 'RELEASE'">
    <Exec Command="npm run releaseBuild" />
</Target>

3. Blazor 组件调用方式

  • 通过 IJSRuntime.InvokeAsync<IJSObjectReference>("import", "./js/components.js") 动态加载模块。
  • 直接调用打包后暴露的 JS 方法，实现 C# 与 JS 的高效互操作。

四、总结

ESM 格式适合现代前端开发，支持静态分析和 Tree Shaking，但不支持直接在 Blazor 中模块化调用。UMD 格式兼容性强，可通过全局变量方式间接集成到 Blazor，但需要手动挂载 API。通过引入 ESBuild 工具，将 TypeScript 和所有 NPM 依赖打包为适合 Blazor 动态加载的 ESM 文件，并结合 JS interop 机制，Blazor 项目能够高效利用现代 JavaScript 生态，实现类型安全、依赖清晰的前后端集成开发。

五、引用资料

1.博客:Using ESBuild with Blazor

]]> Blazor 之 [Parameter] 和 @bind- 用法区别 https://blog.mutadecheng.com/2025/04/25/blazor-%e4%b9%8b-parameter-%e5%92%8c-bind-%e7%94%a8%e6%b3%95%e5%8c%ba%e5%88%ab/ Fri, 25 Apr 2025 03:20:37 +0000 https://blog.mutadecheng.com/?p=325 在 C# Blazor 中，[Parameter] 和 @bind- 是用于不同目的的特性和绑定机制。它们在组件之间传递数据时扮演不同的角色。下面是它们的区别和用法：

[Parameter]

  1. 用途：[Parameter] 特性用于定义一个组件的参数。它允许父组件向子组件传递数据。
  2. 用法：在子组件中，你可以通过在属性上使用 [Parameter] 特性来声明该属性是一个参数。例如：
   public class MyComponent : ComponentBase
   {
       [Parameter]
       public string Title { get; set; }
   }
  1. 数据流向：数据流是单向的，即从父组件流向子组件。父组件可以设置子组件的参数值，但子组件不能直接修改父组件的数据。
  2. 示例：在父组件中使用子组件时，可以这样传递参数：
   <MyComponent Title="Hello, World!" />

@bind-

  1. 用途：@bind- 是用于双向数据绑定的语法糖。它允许在组件和其属性之间进行双向数据绑定。
  2. 用法：@bind- 通常用于绑定输入控件的值，使得控件的值和组件的属性保持同步。例如：
   <input @bind-Value="name" />

这里，name 是一个组件中的属性，@bind-Value 会自动处理输入控件的 value 和 onchange 事件，以实现双向绑定。

  1. 数据流向：双向数据绑定意味着数据可以从组件流向控件，也可以从控件流回组件。
  2. 示例：在组件中定义一个属性，然后在 Razor 页面中使用：
   @code {
       private string name;
   }
   <input @bind-Value="name" />
   <p>You entered: @name</p>

总结

  • [Parameter] 用于定义组件的输入参数，数据流是单向的。
  • @bind- 用于实现双向数据绑定，通常用于表单控件，使得控件的值和组件的属性保持同步。

]]> Blazor示例 之 通用定时器 TimerComponent.razor https://blog.mutadecheng.com/2024/12/14/blazor%e7%a4%ba%e4%be%8b-%e4%b9%8b-%e9%80%9a%e7%94%a8%e5%ae%9a%e6%97%b6%e5%99%a8-timercomponent-razor/ Sat, 14 Dec 2024 07:59:19 +0000 https://blog.mutadecheng.com/?p=275 
@implements IDisposable
@using System.Timers

@code {
    private Timer? _timer;
    [Parameter] public double Interval { get; set; } = 2000;
    [Parameter] public EventCallback<ElapsedEventArgs> OnElapsed { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        if (_timer == null)
        {
            _timer = new Timer
            {
                Interval = Interval
            };

            _timer.Elapsed += async (sender, args) => await OnElapsed.InvokeAsync(args);

            _timer.Start();
        }
    }

    public void Dispose()
    {
        _timer?.Dispose();
    }
}

使用 TimerComponent

@page "/example"
@inject SensorParamService sensorParamService

<TimerComponent Interval="2000" OnElapsed="TimerOnElapsed" />

<MECharts Option="_option" Height="400" IncludeFunctionsInOption></MECharts>

@code {
    private object _option = GenOption(0);

    private void TimerOnElapsed(ElapsedEventArgs e)
    {
        InvokeAsync(() =>
        {
            var res = sensorParamService.SensorParamDic.FirstOrDefault(it => it.Value.Name == "电器房_风向");
            _option = GenOption(res.Value.DiffValue);
            StateHasChanged();
        });
    }

    private static object GenOption(double value)
    {
        return new
        {
            Tooltip = new
            {
                Formatter = "{a} <br/>{b}: {c}°"
            },
            Series = new[]
            {
                new
                {
                    Name = "风向",
                    Type = "gauge",
                    StartAngle = 90,
                    EndAngle = -269.9999,
                    AxisLine = new
                    {
                        LineStyle = new
                        {
                            Width = 10
                        }
                    },
                    Pointer = new
                    {
                        Length = "70%",
                        Width = 6
                    },
                    SplitLine = new
                    {
                        Length = 15,
                        LineStyle = new
                        {
                            Width = 2
                        }
                    },
                    AxisLabel = new
                    {
                        Distance = 20,
                        Formatter = "(value) => { const directions = ['北', '东北', '东', '东南', '南', '西南', '西', '西北']; return directions[Math.floor(value / 45) % 8]; }"
                    },
                    AxisTick = new
                    {
                        SplitNumber = 4
                    },
                    Detail = new
                    {
                        Formatter = "{value}°"
                    },
                    Data = new[]
                    {
                        new { Value = value, Name = "风向" }
                    }
                }
            }
        };
    }
}

然后二次封装

@inject SensorParamService SensorParamService
@implements IDisposable
@using System.Timers

@code {
    private Timer? _timer;
    [Parameter] public double Interval { get; set; } = 2000;
    [Parameter] public Func<IDictionary<string, SensorParam>, IEnumerable<SensorParam>> QueryExpression { get; set; }
    [Parameter] public EventCallback<IEnumerable<SensorParam>> OnDataFetched { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();

        if (_timer == null)
        {
            _timer = new Timer
            {
                Interval = Interval
            };

            _timer.Elapsed += async (sender, args) => await FetchData();

            _timer.Start();
        }
    }

    private async Task FetchData()
    {
        var results = QueryExpression(SensorParamService.SensorParamDic);
        await InvokeAsync(() => OnDataFetched.InvokeAsync(results));
    }

    public void Dispose()
    {
        _timer?.Dispose();
    }
}

调用,(这样linq在前端的,网络压力大,最好还是后端servser有委托方法)

@page "/example"

<TimerComponent Interval="2000" 
                QueryExpression="GetSensorParams" 
                OnDataFetched="HandleDataFetched" />

<MECharts Option="_option" Height="400" IncludeFunctionsInOption></MECharts>

@code {
    private object _option = GenOption(0);

    private IEnumerable<SensorParam> GetSensorParams(IDictionary<string, SensorParam> sensorParamDic)
    {
        // 完整的 LINQ 查询逻辑在这里定义
        return sensorParamDic.Values.Where(it => it.Name.Contains("风向"));
    }

    private void HandleDataFetched(IEnumerable<SensorParam> sensorParams)
    {
        InvokeAsync(() =>
        {
            // 处理多个传感器参数，例如更新图表数据
            var firstParam = sensorParams.FirstOrDefault();
            if (firstParam != null)
            {
                _option = GenOption(firstParam.DiffValue);
            }
            else
            {
                // 处理结果为空的情况
                Console.WriteLine("未找到匹配的传感器参数。");
            }
            StateHasChanged();
        });
    }

    private static object GenOption(double value)
    {
        return new
        {
            Tooltip = new
            {
                Formatter = "{a} <br/>{b}: {c}°"
            },
            Series = new[]
            {
                new
                {
                    Name = "风向",
                    Type = "gauge",
                    StartAngle = 90,
                    EndAngle = -269.9999,
                    AxisLine = new
                    {
                        LineStyle = new
                        {
                            Width = 10
                        }
                    },
                    Pointer = new
                    {
                        Length = "70%",
                        Width = 6
                    },
                    SplitLine = new
                    {
                        Length = 15,
                        LineStyle = new
                        {
                            Width = 2
                        }
                    },
                    AxisLabel = new
                    {
                        Distance = 20,
                        Formatter = "(value) => { const directions = ['北', '东北', '东', '东南', '南', '西南', '西', '西北']; return directions[Math.floor(value / 45) % 8]; }"
                    },
                    AxisTick = new
                    {
                        SplitNumber = 4
                    },
                    Detail = new
                    {
                        Formatter = "{value}°"
                    },
                    Data = new[]
                    {
                        new { Value = value, Name = "风向" }
                    }
                }
            }
        };
    }
}

]]> Blazor Server 前后端不分离项目简单身份验证 https://blog.mutadecheng.com/2024/10/25/blazor-server-%e5%89%8d%e5%90%8e%e7%ab%af%e4%b8%8d%e5%88%86%e7%a6%bb%e9%a1%b9%e7%9b%ae%e7%ae%80%e5%8d%95%e8%ba%ab%e4%bb%bd%e9%aa%8c%e8%af%81/ Fri, 25 Oct 2024 03:37:17 +0000 https://blog.mutadecheng.com/?p=239 此基于Blazor Server 应用通过使用 SignalR 创建的实时连接运行。建立连接时，将处理基于 SignalR 的应用中的身份验证。身份验证可以基于 Cookie 或其他一些不记名令牌。Blazor Server 应用的安全性配置方式与 ASP.NET Core 应用相同。

Blazor Server 应用的内置 AuthenticationStateProvider 服务从 ASP.NET Core 的 HttpContext.User 获取身份验证状态数据。这就是身份验证状态与现有 ASP.NET Core 身份验证机制集成的方式

项目结构

  1. 解决方案
    • MyBlazorApp.sln
  2. Blazor Server项目
    • MyBlazorApp (Blazor Server项目)
    • Pages/ – 包含所有的页面组件（*.razor）
    • Components/ – 可复用的UI组件
    • Authentication/ – 身份验证服务相关文件夹
      • CustomAuthenticationStateProvider.cs/ – 自定义的认证状态提供器类
      • UserAccount.cs/ – 用户Dto
      • UserAccountService.cs/ – 用户服务
      • UserSession.cs/ – 用户的会话信息
    • Shared/ – 前后端共享的组件或代码
    • Data/ – 数据访问层和业务逻辑
    • Models/ – 数据模型
    • wwwroot/ – 静态文件，如CSS、JavaScript和图像
    • Program.cs – 配置Blazor Server应用程序的启动
    • Startup.cs – 配置服务和中间件（如果使用Startup类）

详细说明

  • Pages: 包含Blazor应用的页面，每个页面都由一个.razor文件组成。这些页面负责用户界面的展示和用户交互。
  • Components: 存放可复用的UI组件，组件可以在多个页面中使用，帮助减少代码重复。
  • Shared: 用于存放前后端共享的代码，如共享的组件或帮助类。
  • Data: 负责数据访问和业务逻辑。可以在这里实现与数据库的交互逻辑（如使用Entity Framework Core），以及任何必要的业务规则。
  • Models: 定义应用程序使用的数据模型。这些模型通常用于表示数据库中的实体或其他数据结构。
  • wwwroot: 包含所有的静态资源，如CSS样式表、JavaScript文件和图像文件。Blazor Server会将这些文件直接提供给浏览器。
  • Program.cs: 定义应用程序的入口点，配置服务（如依赖注入）和应用程序生命周期。
  • Startup.cs: 配置应用程序的请求管道和服务（如果使用Startup类）。包括中间件配置、路由设置等。

身份验证详解

Authentication/CustomAuthenticationStateProvider.cs

// 定义一个自定义的认证状态提供器类，继承自AuthenticationStateProvider
public class CustomAuthenticationStateProvider : AuthenticationStateProvider
{
    // 使用ProtectedSessionStorage来安全地存储用户会话信息
    private readonly ProtectedSessionStorage _sessionStorage;
    // 定义一个匿名用户的ClaimsPrincipal对象，表示未认证的用户
    private ClaimsPrincipal _anonymous = new ClaimsPrincipal(new ClaimsIdentity());

    // 构造函数，初始化会话存储对象
    public CustomAuthenticationStateProvider(ProtectedSessionStorage sessionStorage)
    {
        _sessionStorage = sessionStorage;
    }

    // 重写基类的GetAuthenticationStateAsync方法，用于获取当前用户的认证状态
    public override async Task<AuthenticationState> GetAuthenticationStateAsync()
    {
        try
        {
            // 从会话存储中异步获取用户会话信息
            var userSessionStorageResult = await _sessionStorage.GetAsync<UserSession>("UserSession");
            // 检查获取结果是否成功，如果成功则获取用户会话信息，否则为null
            var userSession = userSessionStorageResult.Success ? userSessionStorageResult.Value : null;

            // 如果用户会话信息为null，返回匿名用户的认证状态
            if (userSession == null)
                return await Task.FromResult(new AuthenticationState(_anonymous));

            // 如果用户会话信息存在，创建一个包含用户名和角色的ClaimsPrincipal对象
            var claimsPrincipal = new ClaimsPrincipal(new ClaimsIdentity(new List<Claim>
            {
                new Claim(ClaimTypes.Name, userSession.UserName), // 用户名声明
                new Claim(ClaimTypes.Role, userSession.Role) // 角色声明
            }, "CustomAuth")); // 使用自定义认证类型

            // 返回包含用户信息的认证状态
            return await Task.FromResult(new AuthenticationState(claimsPrincipal));
        }
        catch
        {
            // 如果发生异常，返回匿名用户的认证状态
            return await Task.FromResult(new AuthenticationState(_anonymous));
        }
    }

    // 更新认证状态的方法，接收一个用户会话对象作为参数
    public async Task UpdateAuthenticationState(UserSession userSession)
    {
        ClaimsPrincipal claimsPrincipal;

        if (userSession != null)
        {
            // 如果用户会话信息不为null，将其存储到会话存储中
            await _sessionStorage.SetAsync("UserSession", userSession);
            // 创建包含用户名和角色的ClaimsPrincipal对象
            claimsPrincipal = new ClaimsPrincipal(new ClaimsIdentity(new List<Claim>
            {
                new Claim(ClaimTypes.Name, userSession.UserName), // 用户名声明
                new Claim(ClaimTypes.Role, userSession.Role) // 角色声明
            }));
        }
        else
        {
            // 如果用户会话信息为null，删除存储的会话信息
            await _sessionStorage.DeleteAsync("UserSession");
            // 设置为匿名用户
            claimsPrincipal = _anonymous;
        }

        // 通知认证状态已更改，传递新的认证状态
        NotifyAuthenticationStateChanged(Task.FromResult(new AuthenticationState(claimsPrincipal)));
    }
}

Authentication/UserAccount.cs

public class UserAccount
{
    public string UserName { get; set; }
    public string Password { get; set; }
    public string Role { get; set; }
}

Authentication/UserAccountService.cs

public class UserAccountService
{
    private List<UserAccount> _users;

    public UserAccountService()
    {
        _users = new List<UserAccount>
        {
            new UserAccount{ UserName = "admin", Password = "admin", Role = "Administrator" },
            new UserAccount{ UserName = "user", Password = "user", Role = "User" }
        };
    }

    public UserAccount? GetByUserName(string userName)
    {
        return _users.FirstOrDefault(x => x.UserName == userName);
    }
}

Authentication/UserSession.cs

public class UserSession
{
    public string UserName { get; set; }
    public string Role { get; set; }
}

Pages/Login.razor

@page "/login"
@using MyBlazorApp.Authentication
@inject UserAccountService userAccountService
@inject IJSRuntime js
@inject AuthenticationStateProvider authStateProvider
@inject NavigationManager navManager

<div class="row">
    <div class="col-lg-4 offset-lg-4 pt-4 pb-4 border">
        <div class="mb-3 text-center">
            <h3>LOGIN</h3>
        </div>
        <div class="mb-3">
            <label>User Name</label>
            <input @bind="model.UserName" class="form-control" placeholder="User Name" />
        </div>
        <div class="mb-3">
            <label>Password</label>
            <input @bind="model.Password" type="password" class="form-control" placeholder="Password" />
        </div>
        <div class="mb-3 d-grid gap-2">
            <button @onclick="Authenticate" class="btn btn-primary">Login</button>
        </div>
    </div>
</div>

@code {
    private class Model
    {
        public string UserName { get; set; } 
        public string Password { get; set; }
    } 
    private Model model = new Model(); 
    private async Task Authenticate()
    {
        var userAccount = userAccountService.GetByUserName(model.UserName); 
        if (userAccount == null || userAccount.Password != model.Password)
        {
            await js.InvokeVoidAsync("alert", "Invalid User Name or Password");
            return;
        } 
        var customAuthStateProvider = (CustomAuthenticationStateProvider)authStateProvider;
        await customAuthStateProvider.UpdateAuthenticationState(new UserSession
            {
                UserName = userAccount.UserName,
                Role = userAccount.Role
            });
        navManager.NavigateTo("/", true);
    }
}

Shared/RedirectToLogin

@inject AuthenticationStateProvider AuthStateProvider
@inject NavigationManager Navigation

<p>用户未授权，正在重定向到登录页面...</p>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var authState = await AuthStateProvider.GetAuthenticationStateAsync();
            var user = authState.User; 
            if (user.Identity == null || !user.Identity.IsAuthenticated)
            {
                // 用户未认证，重定向到登录页面
                Navigation.NavigateTo("/login", true);
            }
        } 
    }
}

Shared/MainLayout.razor

@using MyBlazorApp.Authentication
@inherits LayoutComponentBase
@inject AuthenticationStateProvider authStateProvider
@inject NavigationManager navManager

<PageTitle>MyBlazorApp</PageTitle>

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
            <AuthorizeView>
                <Authorized>
                    <a @onclick="Logout" href="javascript:void(0)">Logout</a>
                </Authorized>
                <NotAuthorized>
                    <a href="/login">Login</a>
                </NotAuthorized>
            </AuthorizeView>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

@code{
    private async Task Logout()
    {
        var customAuthStateProvider = (CustomAuthenticationStateProvider)authStateProvider;
        await customAuthStateProvider.UpdateAuthenticationState(null);
        navManager.NavigateTo("/", true);
    }
}

App.razor

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <RedirectToLogin />
                </NotAuthorized>
                <Authorizing>
                    You are getting authorized  
                </Authorizing>
            </AuthorizeRouteView>
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

Program.cs

var builder = WebApplication.CreateBuilder(args); 
builder.Services.AddAuthenticationCore();
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddScoped<ProtectedSessionStorage>();
builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthenticationStateProvider>();
builder.Services.AddSingleton<UserAccountService>();
builder.Services.AddSingleton<WeatherForecastService>();

var app = builder.Build(); 
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}  
app.UseStaticFiles(); 
app.UseRouting(); 
app.MapBlazorHub();
app.MapFallbackToPage("/_Host"); 
app.Run();

使用方式

在页面中使用

@page "/counter"
@attribute [Authorize(Roles = "Administrator,User")]

在组件中使用

<AuthorizeView Roles="Administrator,User">
    <Authorized>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
    </Authorized>
</AuthorizeView>
<AuthorizeView Roles="Administrator">
    <Authorized>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
    </Authorized>
</AuthorizeView>
]]> Blazor Server 前后端不分离项目结构简介 https://blog.mutadecheng.com/2024/10/25/blazor-server-%e5%89%8d%e5%90%8e%e7%ab%af%e4%b8%8d%e5%88%86%e7%a6%bb%e9%a1%b9%e7%9b%ae%e7%bb%93%e6%9e%84%e7%ae%80%e4%bb%8b/ Fri, 25 Oct 2024 02:53:04 +0000 https://blog.mutadecheng.com/?p=236 在Blazor Server项目中，前后端不分离的结构是将用户界面和业务逻辑结合在一个项目中。这种方式适合于中小型应用程序，简化了项目的管理和部署。以下是一个典型的Blazor Server项目结构示例，其中前后端不分离：

项目结构

  1. 解决方案
    • MyBlazorApp.sln
  2. Blazor Server项目
    • MyBlazorApp (Blazor Server项目)
    • Pages/ – 包含所有的页面组件（*.razor）
    • Components/ – 可复用的UI组件
    • Shared/ – 前后端共享的组件或代码
    • Data/ – 数据访问层和业务逻辑
    • Models/ – 数据模型
    • wwwroot/ – 静态文件，如CSS、JavaScript和图像
    • Program.cs – 配置Blazor Server应用程序的启动
    • Startup.cs – 配置服务和中间件（如果使用Startup类）

详细说明

  • Pages: 包含Blazor应用的页面，每个页面都由一个.razor文件组成。这些页面负责用户界面的展示和用户交互。
  • Components: 存放可复用的UI组件，组件可以在多个页面中使用，帮助减少代码重复。
  • Shared: 用于存放前后端共享的代码，如共享的组件或帮助类。
  • Data: 负责数据访问和业务逻辑。可以在这里实现与数据库的交互逻辑（如使用Entity Framework Core），以及任何必要的业务规则。
  • Models: 定义应用程序使用的数据模型。这些模型通常用于表示数据库中的实体或其他数据结构。
  • wwwroot: 包含所有的静态资源，如CSS样式表、JavaScript文件和图像文件。Blazor Server会将这些文件直接提供给浏览器。
  • Program.cs: 定义应用程序的入口点，配置服务（如依赖注入）和应用程序生命周期。
  • Startup.cs: 配置应用程序的请求管道和服务（如果使用Startup类）。包括中间件配置、路由设置等。

特点

  • 单一项目: 前后端代码在同一项目中，简化了项目结构和管理。
  • 集成开发: 开发人员可以在一个项目中同时处理UI和业务逻辑，这对于小型团队或个人项目来说非常方便。
  • 快速部署: 由于所有代码都在一个项目中，部署只需处理一个应用程序，减少了复杂性。

注意事项

  • 代码组织: 由于所有代码都在一个项目中，良好的代码组织和模块化设计仍然是必要的，以确保项目的可维护性。
  • 性能与扩展性: 对于大型应用，可能需要考虑前后端分离，以提高性能和扩展性。

这种前后端不分离的结构适用于快速开发和部署小型到中型应用程序，尤其是在不需要复杂的服务器端API或微服务架构时。

]]> Blazor Server 前后端分离项目结构简介 https://blog.mutadecheng.com/2024/10/25/blazor-server-%e5%89%8d%e5%90%8e%e7%ab%af%e5%88%86%e7%a6%bb%e9%a1%b9%e7%9b%ae%e7%bb%93%e6%9e%84%e7%ae%80%e4%bb%8b/ Fri, 25 Oct 2024 02:52:11 +0000 https://blog.mutadecheng.com/?p=234 在Blazor Server项目中实现前后端分离是一种常见的架构方式，可以提高项目的可维护性和扩展性。下面是一个推荐的项目结构，帮助实现Blazor Server前后端分离：

项目结构

  1. 解决方案
    • MySolution.sln
  2. 前端项目
    • MyApp.Client (Blazor Server项目)
    • Pages/ – 包含所有的页面组件（*.razor）
    • Components/ – 可复用的UI组件
    • wwwroot/ – 静态文件，如CSS、JavaScript和图像
    • Shared/ – 前后端共享的组件或代码
    • Program.cs – 配置Blazor Server应用程序的启动
    • Startup.cs – 配置服务和中间件（如果使用Startup类）
  3. 后端项目
    • MyApp.Server (ASP.NET Core Web API项目)
    • Controllers/ – Web API控制器，处理HTTP请求
    • Models/ – 数据模型
    • Repositories/ – 数据访问层，处理数据库操作
    • Services/ – 业务逻辑层
    • Data/ – 数据上下文类（如EF Core的DbContext）
    • Program.cs – 配置ASP.NET Core应用程序的启动
    • Startup.cs – 配置服务和中间件（如果使用Startup类）
  4. 共享项目
    • MyApp.Shared (类库项目)
    • DTOs/ – 数据传输对象（Data Transfer Objects）
    • Models/ – 共享的数据模型
    • Utilities/ – 工具类或辅助方法

详细说明

  • MyApp.Client: 该项目是Blazor Server应用，负责处理用户界面。它通过调用后端API获取和提交数据。Pages文件夹中包含应用的页面，Components文件夹中则是可复用的组件。Shared文件夹用于存放前后端共享的代码。
  • MyApp.Server: 该项目是一个ASP.NET Core Web API项目，负责提供数据服务和业务逻辑。Controllers文件夹中的控制器处理来自客户端的HTTP请求，并调用Services中的业务逻辑。Repositories用于与数据库交互。
  • MyApp.Shared: 这是一个类库项目，存放前后端共享的代码，如DTOs和模型。这样可以确保前后端在数据结构上的一致性。

配置通信

  • API调用: 在Blazor Server中，可以使用HttpClient调用后端的API。可以在Program.cs中配置HttpClient，以便在应用中注入使用。
  • 身份验证与授权: 可以使用ASP.NET Core Identity或其他身份验证机制来保护API，并在Blazor应用中使用授权组件。

部署与调试

  • 调试: 可以通过Visual Studio或VS Code同时启动前后端项目进行调试。确保在调试配置中启动多个项目。
  • 部署: 部署时，可以将Blazor Server和Web API项目作为一个整体部署到同一服务器上，或者分别部署到不同的服务器上，根据具体需求进行选择。

]]>