当前位置：首页 > news >正文

Blazor_WASM之3：项目结构

news 2025/9/15 10:52:14

Blazor_WASM之3：项目结构

Blazor WebAssembly项目模板可选两种，Blazor WebAssemblyAPP及Blazor WebAssemblyAPP-Empty

如果使用Blazor WebAssemblyAPP模板，则应用将填充以下内容：
- 一个 FetchData 组件的演示代码，该组件从静态资产 (weather.json) 加载数据，且用户与 Counter 组件交互。
- Bootstrap前端工具包。
如果使用 blazorwasm-empty 模板，则无需演示代码和 Bootstrap 即可创建应用。

项目结构

Pages目录

包含构成 Blazor 应用的可路由组件/页面 (.razor)，每个页面的路由使用 @page指令指定，目录下的Index 组件 (Index.razor)为Home 页。

每个razor都会在后台编译成一个类，以自带的Counter.razor为例。

Counter.razor文件

@page "/counter"<PageTitle>Counter</PageTitle><h1>Counter</h1><p role="status">Current count: @currentCount</p><button class="btn btn-primary" @onclick="IncrementCount">Click me</button>@code {private int currentCount = 0;private void IncrementCount(){currentCount++;}
}

反编译后

[Route("/counter")]
public class Counter : ComponentBase
{private int currentCount = 0;protected override void BuildRenderTree(RenderTreeBuilder __builder){__builder.OpenComponent<PageTitle>(0);__builder.AddAttribute(1, "ChildContent", (RenderFragment)delegate(RenderTreeBuilder __builder2){__builder2.AddContent(2, "Counter");});__builder.CloseComponent();__builder.AddMarkupContent(3, "\r\n\r\n");__builder.AddMarkupContent(4, "<h1>Counter</h1>\r\n\r\n");__builder.OpenElement(5, "p");__builder.AddAttribute(6, "role", "status");__builder.AddContent(7, "Current count: ");__builder.AddContent(8, currentCount);__builder.CloseElement();__builder.AddMarkupContent(9, "\r\n\r\n");__builder.OpenElement(10, "button");__builder.AddAttribute(11, "class", "btn btn-primary");__builder.AddAttribute(12, "onclick", EventCallback.Factory.Create<MouseEventArgs>((object)this, (Action)IncrementCount));__builder.AddContent(13, "Click me");__builder.CloseElement();}private void IncrementCount(){currentCount++;}
}

通过对比，Razor组件会自动继承自ComponentBase，并且@code中的代码完全移入了编译后的类，而各种标签会在BuildRenderTree方法中用方法的形式进行输出。

PlaunchSettings.json

设置开发环境配置

Shared目录

MainLayout 组件 (MainLayout.razor)：应用的布局组件。
MainLayout.razor.css：应用主布局的样式表。
NavMenu 组件 (NavMenu.razor)：实现边栏导航。包括 NavLink组件，该组件可向其他 Razor 组件呈现导航链接。
NavMenu.razor.css：应用导航菜单的样式表。
SurveyPrompt 组件 (SurveyPrompt.razor)：Blazor 调查组件。

App.razor

应用的根组件，用于使用 Router 组件来设置客户端路由。app.razor中代码

<Router AppAssembly="@typeof(App).Assembly"><Found Context="routeData"><RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /><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>

如果发现有相应的组件则跳转过去，如果没有则会出现Sorry, there’s nothing at this address.

wwwroot

应用的 Web 根目录文件夹，其中包含应用的公共静态资产，其中index.html 网页是实现为 HTML 页面的应用的根页面：

最初请求的任何页面，都会呈现此页面。
此页面指定 App 组件的呈现位置。使用 app 的 id (<div id="app">...</div>) 在 div DOM 元素的位置呈现组件。

index.html

<body><div id="app"><!--等待进度框图片--><svg class="loading-progress"><circle r="40%" cx="50%" cy="50%" /><circle r="40%" cx="50%" cy="50%" /></svg><div class="loading-progress-text"></div></div><!--如果出现错误则会出现--><div id="blazor-error-ui">An unhandled error has occurred.<a href="" class="reload">Reload</a><a class="dismiss">🗙</a></div><script src="_framework/blazor.webassembly.js"></script>
</body>

_Imports.razor

包括要包含在应用组件 (.razor) 中的常见 Razor 指令，如 @using 指令

Program.cs

应用入口点，.net 7使用了顶级语法

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app"); //将APP替换了index.html中id="app"的内容
builder.RootComponents.Add<HeadOutlet>("head::after");
//添加并配置了服务
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });await builder.Build().RunAsync();

Blazor_WASM之3：项目结构

Blazor_WASM之3：项目结构 Blazor WebAssembly项目模板可选两种，Blazor WebAssemblyAPP及Blazor WebAssemblyAPP-Empty 如果使用Blazor WebAssemblyAPP模板，则应用将填充以下内容： 一个 FetchData 组件的演示代码，该…...

编程日记 2023/4/30 10:50:21

OperWrt 包管理系统02

文章目录 OperWrt 包管理系统OPKG简介OPKG的工作原理OPKG命令介绍软件包的更新、安装、卸载和升级等功能软件包的信息查询OPKG配置文件说明OPKG包结构（.ipk）OPKG演示案例OperWrt 包管理系统 OPKG简介 OPKG（Open/OpenWrt Package）是一个轻量快速的软件包管理系统，是 IPKG…...

编程日记 2023/4/30 10:50:18

人人都学会APP开发提高就业竞争力简单实用APP应用安卓浏览器APP 企业内部通用APP制作制造业通用APP

安卓从2009年开始流程于手机、平板，已经是不争的非常强大生产力工具，更为社会创造非常高的价值，现在已经是202X年，已经十几年的发展，安卓平台已经无所不在。因此建议人人都学学APP制作，简易入门&#xff0c…...

编程日记 2023/4/30 10:50:13

【自然语言处理】从词袋模型到Transformer家族的变迁之路

从词袋模型到Transformer家族的变迁之路模型名称年份描述Bag of Words1954即 BOW 模型，计算文档中每个单词出现的次数，并将它们用作特征。TF-IDF1972对 BOW 进行修正，使得稀有词得分高，常见词得分低。Word2Vec2013每个词都映射到一…...

编程日记 2023/4/30 10:50:09

LIME: Low-light Image Enhancement viaIllumination Map Estimation

Abstract当人们在低光条件下拍摄图像时，图像通常会受到低能见度的影响。除了降低图像的视觉美感外，这种不良的质量还可能显著降低许多主要为高质量输入而设计的计算机视觉和多媒体算法的性能。在本文中，我们提出了一种简单而有效的微光图像增…...

编程日记 2023/4/30 10:50:04

4.问: 哪位老师把他改成分析家的,组合公式：猎庄敢死队别样红(凤翔) {猎庄敢死队} rsv:(c-llv(l,9))/(hhv(h,9)-llv(l,9))100; stickline(1,50,50,1,0),pointdot,Linethick2,colorff00; k:sma(rsv,3,1); d:sma(k,3,1); rsv1:(hhv(h,9.8)-c)/(hhv(h,9.8)-llv(l,9.8))1…...

编程日记 2023/4/30 10:50:00

Golang中GC和三色屏障机制【Golang面试必考】

文章目录Go v1.3 标记—清楚(mark and sweep)方法Go V1.5 三色标记法三色标记过程无STW的问题强弱三色不变式插入写屏障Go V1.8的三色标记法混合写屏障机制混合写屏障场景场景1:对象被一个堆对象删除引用，成为栈对象的下游场景2:对象被一个栈对象删除引用&#xff0…...

编程日记 2023/4/30 6:32:38

MOS FET继电器(无机械触点继电器)设计输入侧电源时的电流值概念

设计输入侧电源时的问题机械式继电器、MOS FET继电器分别具有不同的特长。基于对MOS FET继电器所具小型及长寿命、静音动作等优势的需求，目前已经出现了所用机械式继电器向MOS FET继电器转化的趋势。但是，由于机械式继电器与MOS FET继电器在产品结构…...

编程日记 2023/4/30 15:06:27

5. 驱动开发

文章目录一、驱动开发1.1 前言1.2 何谓驱动框架1.3 内核驱动框架中LED的基本情况1.3.1 相关文件1.3.2 九鼎移植的内核中led驱动1.3.3 案例分析驱动框架的使用1.3.4 典型的驱动开发行业现状1.4 初步分析led驱动框架源码1.4.1 涉及到的文件1.4.2 subsys_initcall1.4.3 led_class_…...

编程日记 2023/4/30 10:49:55

模板方法模式详解

模板方法模式（行为模式） 1. 模板方法模式介绍父类定义算法骨架，细节的具体实现延迟到子类子类只是定义某些自己的个性化处理，但不改变执行顺序 2. 好处减少代码冗余，共性抽取后算法流程更加清晰与规范降低流程性…...

编程日记 2023/4/30 10:49:51

关于 Lightweight process container，ChatGPT的答案

晓楚 Can you give me a list of process container? As an AI language model, I can provide you with a list of popular process containers, which are as follows: Docker Kubernetes Apache Mesos LXC OpenVZ systemd-nspawn rkt (Rocket) Linux Containers (LXC) Ga…...

编程日记 2023/4/30 10:49:46

机器学习和深度学习的综述

机器学习和深度学习的综述 1.1.1人工智能、机器学习、深度学习的关系人工智能（Artificial Intelligence，AI）是最宽泛的概念，是研发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。由于这个定义…...

编程日记 2023/4/29 22:46:52

Synopsys Sentaurus TCAD系列教程之--Sprocess(SmallMOS_2D3D) 解析

SmallMOS_2D3D解析 #header## STI depth set sti_depth 0.15 ## Half STI width set sti_width sti_width ## Half gate length set gate_len <lg/2> ## SD length (from center) set sd_len [expr $gate_len0.05]#endheader## X lines line x location 0.0 spacing 0.…...

编程日记 2023/4/30 10:49:39

好使！NAS中傻瓜式配置反向代理及SSL证书，提升网络安全性！

对于有NAS或者有个人主机的朋友来说，将机器映射到外网是基本操作。但是一般来说，能直接从外网访问的往往仅有80和443端口。事实上，运营商一般把家庭宽带的这两个端口都封了，所以如果我们想要从外网访问自己家中机器部署的服务&a…...

编程日记 2023/4/30 10:49:34

数据结构队列-先进先出

一，概述队列这个概念非常好理解。你可以把它想象成排队买票，先来的先买，后来的人只能站末尾，不允许插队。先进者先出，这就是典型的“队列”。二，顺序队列和链式队列队列和栈一样，也是一种…...

编程日记 2023/4/30 10:49:28

CentOS 7使用TiUP部署TiDB

本文主要是根据官方文档指导，结合实际主机情况，在Cent OS7上使用TiUP在线部署TiDB。环境说明类型操作系统版本配置中控机Deepin 20.34核CPU6G内存40G硬盘TiDB部署机Cent OS 7.38核CPU48G内存100硬盘网络情况中控机与外网相连，中控机与部署…...

编程日记 2023/4/30 10:49:20

java单元测试批处理数据模板【亿点点日志配合分页以及多线程处理】

文章目录引入相关资料环境准备分页查询处理，减少单次批量处理的数据量级补充亿点点日志，更易观察多线程优化查询_切数据版多线程_每个线程都分页处理引入都说后端开发能顶半个运维，我们经常需要对大量输出进行需求调整，很多时候…...

编程日记 2023/4/30 10:49:15

【数据结构】模拟实现堆

堆数据结构是一种数组对象，它可以被看作一颗完全二叉树的结构（数组是完全二叉树），堆是一种静态结构。堆分为最大堆和最小堆。最大堆：每个父结点都大于孩子结点。最小堆：每个父结点都小于孩子结点。堆的优势…...

编程日记 2023/4/30 10:49:12

Go语言学习的第三天--上部分（基础用法）

前两天经过不断度娘，与对up主的跟踪学习了解了go的历史，今天开始了go的基础！！本章主要是go 的注释、变量及常量的梳理一、注释不管什么语言都有自己的注释，go也不例外 ！！单行注释 // 多行注释 …...

编程日记 2023/4/30 10:49:07

linux面试基础篇

题目目录1.简述DNS分离解析的工作原理，关键配置2.apache有几种工作模式，分别简述两种工作模式及其优缺点？3.写出172.0.0.38/27 的网络id与广播地址4.写出下列服务使用的传输层协议（TCP/UDP）及默认端口5.在局域网想获得…...

编程日记 2023/4/30 10:49:02

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...

编程新知 2025/9/15 0:18:51

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/7/23 4:47:55

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程目录 Web 项目 Docker 化部署概述Dockerfile 详解构建阶段生产阶段构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）&#xff1a…...

编程新知 2025/8/12 16:28:43

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用安装包的方式快…...

编程新知 2025/9/15 5:23:55

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/9/12 13:01:46