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

Blazor_WASM之3：项目结构

news 2025/12/17 16:04:27

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

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

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

编程新知 2025/12/16 10:53:09

Go 语言接口详解

Go 语言接口详解核心概念接口定义在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...

编程新知 2025/10/23 18:29:35

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...

编程新知 2025/12/14 22:40:49

生成 Git SSH 证书

🔑 1. 生成 SSH 密钥对在终端（Windows 使用 Git Bash，Mac/Linux 使用 Terminal）执行命令： ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明： -t rsa&#x…...

编程新知 2025/9/18 11:31:13

【2025年】解决Burpsuite抓不到https包的问题

环境：windows11 burpsuite:2025.5 在抓取https网站时，burpsuite抓取不到https数据包，只显示： 解决该问题只需如下三个步骤： 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/12/13 5:39:02

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/12/11 9:43:36

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...

编程新知 2025/12/7 12:35:20

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2025/12/12 7:41:41

06 Deep learning神经网络编程基础激活函数 --吴恩达

深度学习激活函数详解一、核心作用引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/11/17 21:48:26

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2025/12/12 12:06:40

Blazor_WASM之3：项目结构

项目结构

Pages目录

PlaunchSettings.json

Shared目录

App.razor

wwwroot

_Imports.razor

Program.cs

相关文章：