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

Blazor_WASM之3：项目结构

news 2026/5/12 3:46:59

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

AI智能体开发工具栈全解析：从框架、可观测性到部署实战指南

1. 项目概述与核心价值如果你正在构建AI智能体应用，并且已经厌倦了在GitHub、Twitter和各种技术论坛里大海捞针般地寻找合适的开发工具，那么你很可能已经遇到了一个共同的痛点：生态碎片化。从让大语言模型（LLM）具备“记…...

编程新知 2026/5/12 3:03:25

基于DGX OpenClaw Stack构建本地AI智能体：从硬件调优到生产部署

1. 项目概述：一站式本地AI智能体栈如果你和我一样，对把大语言模型（LLM）真正“养”在自己的硬件上，构建一个功能完整、数据私有的智能助手有执念，那么你很可能已经踩过不少坑了。从选模型、搭服务、配工具链…...

编程新知 2026/5/12 2:47:19

Google Calendar智能安排深度拆解（Gemini原生集成技术白皮书级解析）

更多请点击： https://intelliparadigm.com 第一章：Gemini Google Calendar智能安排技术全景概览 Gemini 与 Google Calendar 的深度集成标志着日程管理进入语义理解驱动的新阶段。该能力并非简单调用 API，而是依托 Gemini 模型对自然语言指…...

编程新知 2026/5/12 1:54:37

构建可复用技能库：从代码片段到自动化工作流的工程实践

1. 项目概述：从零构建一套可复用的“副爪”技能库在技术社区里，我们常常会看到一些零散的代码片段、脚本工具或者临时的解决方案，它们像散落的“爪子”一样，能解决特定问题，但不成体系，难以复用和传承。我自…...

编程新知 2026/5/12 1:37:54

2026年AI模型API中转站大排名！解析各平台优势，为企业与开发者精准选型

2026年5月，在中国广州，随着AI大模型技术不断迭代并在各产业全面落地，企业级API中转服务市场已步入成熟竞争阶段。技术稳定性、场景适配度以及综合性价比成为企业选择API中转站时的核心考量因素。近日，行业第三方评测机构发布了《2…...

编程新知 2026/5/12 1:31:47

Chlorophyll印相稀缺资源包泄露！含19世纪银盐配方数字化映射表、327张原生植物扫描底片及MJ v6.2专用--style raw参数集（限今日领取）

更多请点击： https://intelliparadigm.com 第一章：Chlorophyll印相的技术起源与美学范式 Chlorophyll印相（叶绿素印相）并非传统摄影术的延伸，而是一种融合植物生物化学、光敏反应与数字图像处理的跨媒介实践。其技术雏…...

编程新知 2026/5/12 0:46:20

别再手动折腾了！用Stack Builder一键搞定PostGIS 2.1 for PostgreSQL 9.2 (Windows 64位)

告别繁琐配置：用Stack Builder轻松部署PostGIS空间数据库在Windows环境下配置PostgreSQL的空间扩展PostGIS，传统方式往往需要手动下载安装包、配置环境变量、执行SQL脚本等一系列操作。对于刚接触空间数据库的开发者来说，这个过程既耗时又容…...

编程新知 2026/5/11 23:57:00

彻底告别Ubuntu 20.04休眠唤醒黑屏：除了降级驱动，你还可以这样一劳永逸地禁用挂起

彻底告别Ubuntu 20.04休眠唤醒黑屏：系统级电源管理优化指南如果你正在使用Ubuntu 20.04并频繁遭遇休眠唤醒后的黑屏问题，这篇文章将为你提供一套完整的解决方案。不同于常见的驱动降级方案，我们将从系统配置层面入手，通过调整电源…...

编程新知 2026/5/11 22:20:02

从玩具车到智能体：用STC89C52给小车装上‘眼睛’和‘触角’的传感器融合实战

从玩具车到智能体：STC89C52多传感器融合的决策系统设计当一辆普通的玩具车被赋予环境感知能力，它便开始了向智能体的进化。在这个项目中，我们使用STC89C52单片机作为"大脑"，通过超声波模块和漫反射光电传感器构建了一…...

编程新知 2026/5/11 20:42:52

别再只调包了！用PyTorch和DGL从零实现一个GCN层（附Cora节点分类实战代码）

从零构建图卷积网络：PyTorch与DGL实战中的底层逻辑拆解当你第一次调用g.update_all()时，是否好奇过DGL框架背后究竟发生了什么？那些看似简单的消息传递和聚合操作，实际上隐藏着图卷积网络最精妙的设计思想。本文将带你深入GCN的数…...

编程新知 2026/5/11 19:49:06

Blazor_WASM之3：项目结构

项目结构

Pages目录

PlaunchSettings.json

Shared目录

App.razor

wwwroot

_Imports.razor

Program.cs

相关文章：