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

Blazor_WASM之3：项目结构

news 2025/7/4 3:06:16

Blazor_WASM之3：项目结构

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

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

项目结构

image-20230307135939533

Pages目录

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

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

img

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.

img

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&#xff1a;项目结构 Blazor WebAssembly项目模板可选两种&#xff0c;Blazor WebAssemblyAPP及Blazor WebAssemblyAPP-Empty 如果使用Blazor WebAssemblyAPP模板&#xff0c;则应用将填充以下内容&#xff1a; 一个 FetchData 组件的演示代码&#xff0c;该…...

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

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

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

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

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

LIME: Low-light Image Enhancement viaIllumination Map Estimation

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

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

源码指标编写1000问4

4.问: 哪位老师把他改成分析家的,组合公式&#xff1a;猎庄敢死队别样红(凤翔) {猎庄敢死队} 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:对象被一个堆对象删除引用&#xff0c;成为栈对象的下游场景2:对象被一个栈对象删除引用&#xff0…...

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

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

设计输入侧电源时的问题 机械式继电器、MOS FET继电器分别具有不同的特长。基于对MOS FET继电器所具小型及长寿命、静音动作等优势的需求&#xff0c;目前已经出现了所用机械式继电器向MOS FET继电器转化的趋势。 但是&#xff0c;由于机械式继电器与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

模板方法模式详解

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

编程日记 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人工智能、机器学习、深度学习的关系 人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;是最宽泛的概念&#xff0c;是研发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。由于这个定义…...

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

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

数据结构队列-先进先出

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

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

CentOS 7使用TiUP部署TiDB

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

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

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

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

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

【数据结构】模拟实现 堆

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

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

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

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

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

linux面试基础篇

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

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

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/6/18 2:20:36

Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

编程新知 2025/6/29 5:59:21

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/7/2 22:47:10

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/6/21 7:57:44

Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

编程新知 2025/6/25 4:41:54

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2025/6/26 0:36:58

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/6/28 13:45:29

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

编程新知 2025/6/20 11:18:11

代理服务器-LVS的3种模式与调度算法

作者介绍&#xff1a;简历上没有一个精通的运维工程师。请点击上方的蓝色《运维小路》关注我&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 我们上一章介绍了Web服务器&#xff0c;其中以Nginx为主&#xff0c;本章我们来讲解几个代理软件&#xff1a…...

编程新知 2025/7/3 16:33:35

React、Git、计网、发展趋势等内容——前端面试宝典（字节、小红书和美团）

React React Hook实现架构、.Hook不能在循环嵌套语句中使用 , 为什么&#xff0c;Fiber架构&#xff0c;面试向面试官介绍&#xff0c;详细解释 用户: React Hook实现架构、.Hook不能在循环嵌套语句中使用 , 为什么&#xff0c;Fiber架构&#xff0c;面试向面试官介绍&#x…...

编程新知 2025/6/25 1:55:10