# BlazorFullStack

**Repository Path**: evenio/blazor-full-stack

## Basic Information

- **Project Name**: BlazorFullStack
- **Description**: Blazor 练习项目
包含多个案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-15
- **Last Updated**: 2026-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# BlazorFullStack

#### 介绍
Blazor 练习项目，基于.net10 和 Bootstrap-v5.3.3

学习视频：
[Blazor全栈50多小时课程(Code Foundry)](https://www.bilibili.com/video/BV1MAVo6yEZ4?spm_id_from=333.788.videopod.sections&vd_source=619945b40c0e8d89ad0dc0dfabf3adca)

#### 目录
- 入门例子： Blazor Tasker
- WASM项目模板： BlazorLayout
- 案例1：FizzBuzz
- 案例2：LoanCalculater
- 案例3：Now Playing
- 案例4：WebAPI
- 带Auth的WebAPI模板
- 案例5：通讯录项目

#### Blazor Tasker
![界面](images/tasker.png)

> 知识点汇总
1. Blazor WebAssembly 项目启动梳理 wwwroot/index.html(load js/css) --> Program.cs （注册 服务，指定根组件 app，启动 WebAssembly 主机)
-> 启用AppRazor的路由分发  -> 渲染 MainLayout -> 渲染 body 界面
2. 项目目录层级管理，统一在Commponents目录下;UI目录下对应自定义组件
3. 自定义组件TaskLine ，体验component和 Blazor语法的双向绑定

#### WASM项目模板： FelixBlazor
![界面](images/template.png)

> 知识点汇总
0. blazor、 blazor-icons 、google字体和 devicons 改为离线引入
1. 更改theme 变量前缀cong cf 改为 ff
2. 自定义css 样式表的使用
3. 编辑.template.config\template.json
4. 执行生成模板指令
```shell
dotnet new install .\ --force
```

#### 案例1：FizzBuzz
![界面](images/fizzbuzz.png)


> 知识点汇总
1. EditForm和model的数据双向绑定
2. 自定义validation

#### 案例2：LoanCalculater
todo

#### 案例3：Now Playing
![界面](images/movie.png)

#### 使用的到资源
- [Bootstrap](https://getbootstrap.com/)
```html
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
```
- [Bootstrap-icons](https://icons.getbootstrap.com/)
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
```
- [Devicons](https://devicon.dev/)
```html

<link rel="stylesheet" type='text/css' href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
          
```
- Google Fonts (目录：)