Bolero 开源项目使用教程

Bolero 开源项目使用教程

BoleroBolero brings Blazor to F# developers with an easy to use Model-View-Update architecture, HTML combinators, hot reloaded templates, type-safe endpoints, advanced routing and remoting capabilities, and more.项目地址:https://gitcode.com/gh_mirrors/bo/Bolero

1. 项目的目录结构及介绍

Bolero 项目的目录结构如下：

Bolero/
├── src/
│   ├── Bolero/
│   │   ├── Components/
│   │   ├── Models/
│   │   ├── Pages/
│   │   ├── Program.fs
│   │   ├── Startup.fs
│   │   └── Bolero.fsproj
│   └── Bolero.Server/
│       ├── bin/
│       ├── obj/
│       ├── Program.fs
│       ├── Startup.fs
│       └── Bolero.Server.fsproj
├── tests/
│   └── Bolero.Tests/
│       ├── Bolero.Tests.fsproj
│       └── Tests.fs
├── .gitignore
├── Bolero.sln
├── README.md
└── LICENSE

目录结构介绍

• src/Bolero/: 包含 Bolero 客户端项目的主要代码。

  • Components/: 存放自定义组件。
  • Models/: 存放数据模型。
  • Pages/: 存放页面组件。
  • Program.fs: 客户端项目的入口文件。
  • Startup.fs: 客户端项目的启动配置。
  • Bolero.fsproj: 客户端项目的项目文件。

• src/Bolero.Server/: 包含 Bolero 服务器端项目的主要代码。

  • bin/ 和 obj/: 存放编译生成的文件。
  • Program.fs: 服务器端项目的入口文件。
  • Startup.fs: 服务器端项目的启动配置。
  • Bolero.Server.fsproj: 服务器端项目的项目文件。

• tests/Bolero.Tests/: 包含 Bolero 项目的测试代码。

  • Bolero.Tests.fsproj: 测试项目的项目文件。
  • Tests.fs: 测试代码文件。

• .gitignore: Git 忽略文件配置。

• Bolero.sln: 解决方案文件。

• README.md: 项目说明文档。

• LICENSE: 项目许可证。

2. 项目的启动文件介绍

客户端启动文件

src/Bolero/Program.fs 是 Bolero 客户端项目的入口文件，主要负责初始化客户端应用并启动。

module Bolero.Program

open Bolero
open Bolero.Html
open Bolero.Templating.Client

type MyApp() =
    inherit ProgramComponent<Model, Message>()

    override this.Program =
        Program.mkSimple (fun _ -> Model.initial) update view
        |> Program.withRouter router
        |> Program.withHotReload

let view model dispatch =
    div [] [
        text "Hello, Bolero!"
    ]

let update message model =
    match message with
    | _ -> model

type MyApp with
    override this.Program =
        Program.mkSimple (fun _ -> Model.initial) update view
        |> Program.withRouter router
        |> Program.withHotReload

服务器端启动文件

src/Bolero.Server/Program.fs 是 Bolero 服务器端项目的入口文件，主要负责初始化服务器应用并启动。

module Bolero.Server.Program

open Microsoft.AspNetCore.Builder
open Microsoft.Extensions.DependencyInjection
open Bolero.Server

let configureServices (services: IServiceCollection) =
    services.AddBoleroHost()

let configure (app: IApplicationBuilder) =
    app.UseRouting()
       .UseEndpoints(fun endpoints ->
           endpoints.MapBoleroRemoting()
           endpoints.MapFallbackToBolero(Index.page)
       )

[<EntryPoint>]
let main args =
    WebHost.CreateDefaultBuilder(args)
        .Configure(Action<IApplicationBuilder> configure)
        .ConfigureServices(configureServices)
        .Build()
        .Run()
    0

3. 项目的配置文件介绍

客户端配置文件

src/Bolero/Bolero.fsproj 是 Bolero 客户端项目的配置文件，使用 F# 项目文件格式。

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework

BoleroBolero brings Blazor to F# developers with an easy to use Model-View-Update architecture, HTML combinators, hot reloaded templates, type-safe endpoints, advanced routing and remoting capabilities, and more.项目地址:https://gitcode.com/gh_mirrors/bo/Bolero