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

Blazor_WASM之3：项目结构

news 文章来源：https://blog.csdn.net/weixin_44064908/article/details/129382404 2025/1/11 21:47:03

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

黑马程序员提高变成

这里写目录标题函数模板1.2.2 函数模板注意事项1.2.3 函数模板案例调用规则类模板与函数模板区别类模板与继承类模板成员函数类外实现#pragma once类模板与友元案例重新定义【】stl2.2 STL基本概念STL六大组件容器算法迭代器初识vectorvector容器嵌套容器string容器string赋值操…...

编程日记 2023/4/30 10:48:57

MySQL5种索引类型

MySQL的类型主要有五种&#xff1a;主键索引、唯一索引、普通索引、空间索引、全文索引 有表&#xff1a; CREATE TABLE t1 ( id bigint unsigned NOT NULL AUTO_INCREMENT, u1 int unsigned NOT NULL DEFAULT 0, u2 int unsigned NOT NULL DEFAULT 0, u3 varchar(20) NOT NU…...

编程日记 2023/4/30 10:48:52

uniapp封装缓存方法，支持类似cookie具有过期时间

1、定义CacheManage类&#xff0c;有set和get方法 class CacheManage {set() {},get() {} }set用来设置缓存&#xff0c;get用来获取缓存 2、完善set业务逻辑 大概逻辑如下&#xff1a; 1、将接收params参数&#xff0c;包含key、data、unit、time key 缓存字段&#xff0c;…...

编程日记 2023/4/30 10:48:48

Jfrog 搭建本地maven仓库以及上传Android库

Jfrog 下载 安装包下载地址&#xff1a;Download Artifactory OSS | JFrog 如果是想下载之前的版本&#xff0c;可以点击上面的Get code source &#xff0c;如果是最新版本&#xff0c;直接点下面的下载就好。下面以Linux安装为例。 Jfrog安装 对于Linux而言&#xff0c;其实…...

编程日记 2023/4/30 10:48:44

日报周报月报工作总结生成器【智能文案生成器】

日报周报月报工作总结生成器【智能文案生成器】 天天写日报&#xff0c;我真的快奔溃了&#xff01; 摸了一天鱼&#xff0c;下班还要写日报&#xff1b; 划了一周的水&#xff0c;周末还要写周报&#xff1b; 啊啊啊啊… 在职场上&#xff0c;尤其是互联网公司里&#xff0c…...

编程日记 2023/4/30 10:48:36

linux日志管理工具logrotate配置

linux日志管理工具logrotate配置logrotate介绍logrotate配置讲解主配置文件解释(/etc/logrotate.conf)logrotete 命令参数添加配置以添加一个nginx配置为例强制启动配置logrotate介绍 logrotate是centos自带工具&#xff0c;其他操作系统可能需要自行安装。logrotate用来进行日…...

编程日记 2023/4/30 10:48:31

[ C++ ] 设计模式——单例模式

目录 1.设计模式&#xff1a; 2.单例模式 饿汉模式 懒汉模式 饿汉模式和懒汉模式的优缺点 1.设计模式&#xff1a; 设计模式(Design Pattern)是一套被反复使用&#xff0c;多数人只晓得&#xff0c;经过分类的&#xff0c;代码设计经验的总结。为什么会产生设计模式这样的…...

编程日记 2023/4/30 10:48:26

HACKTHEBOX——Help

nmap可以看到对外开放了22,80,3000端口可以看到80端口和3000端口都运行着http服务&#xff0c;先从web着手切入TCP/80访问web提示无法连接help.htb&#xff0c;在/etc/hosts中写入IP与域名的映射打开只是一个apache default页面&#xff0c;没什么好看的使用gobuster扫描网站目…...

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

Qt广告机客户端（下位机）

目录功能结构adClient.promain.cppadclient.h 客户端adclient.cpp 客户端addate.h 时间处理addate.cpp 时间处理adsocket.h 客户端Socket处理adsocket.cpp 客户端Socket处理weather.h 天气信息处理weather.cpp 天气信息处理rollmassege.h 滚动信息处理rollmassege.cpp 滚动信息…...

编程日记 2023/4/30 10:48:16

JavaScript新手学习手册-基础代码（二）

与上篇博客相接 一&#xff1a;函数&#xff1a; 案例&#xff1a;通过函数实现绝对值的输出 方法一&#xff1a; function absoluate(x){if(x>0){return x;}else{ return -x;}} 在控制台调用函数 方法二&#xff1a; var demo1 function(x){if(x>0){return x;}els…...

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

国外的包装设计网站/广州seo团队

进程管理supervisor的简单说明 背景&#xff1a; 项目中遇到有些脚本需要通过后台进程运行&#xff0c;保证不被异常中断&#xff0c;之前都是通过nohup、&、screen来实现&#xff0c;带着能否做一个start/stop/restart/reload的服务启动的想法找到里Supervisor。关于super…...

编程日记 2025/1/11 21:22:00

网站设置了跳转被qq拦截/百度推广的五大优势

blender是免费开源的荷兰3D建模软件&#xff0c;对中文有很好的支持&#xff0c;有Windows,Linux,Mac等不同平台的版本&#xff0c;安装文件不到20M&#xff0c;运行其中某些脚本需要Python环境的支持&#xff0c;建议安装Python环境。软件界面独特&#xff0c;可以进行建模、渲…...

编程日记 2025/1/11 20:13:19

如何制作个人网站教程/网络公司网站建设

好的,我正在尝试从文本文件创建字典,因此键是单个小写字符,每个值都是文件中以该字母开头的单词的列表. 文本文件每行包含一个小写单词,例如&#xff1a; airport bathroom boss bottle elephant 输出&#xff1a; words {a: [airport], b: [bathroom, boss, bottle], e:[elep…...

编程日记 2025/1/11 19:40:31

seo 网站换程序/北京网站制作设计

2019独角兽企业重金招聘Python工程师标准>>> 0.AFN框架基本使用 0.1 AFN内部结构AFN结构体- NSURLConnection AFURLConnectionOperation(已经被废弃) AFHTTPRequestOperation(已经被废弃) AFHTTPRequestOperationManager(封装了常用的 HTTP 方法)(已经被废弃)* 属性…...

编程日记 2025/1/11 18:05:24

开原 铁岭网站建设/网络营销策划书包括哪些内容

原文地址&#xff1a;你必须知道的地理坐标系和投影坐标系 文章条理清晰&#xff0c;内容通俗易懂 还可以参考另一篇文章&#xff1a;GISer梳理的我国常用的坐标系及相关知识 1、基本概念 地理坐标系&#xff1a;为球面坐标。 参考平面地是椭球面&#xff0c;坐标单位&#xff…...

编程日记 2025/1/11 16:49:46

衢州网站建设/微信营销

(点击图片 进入专题 ↑)“人活着总要为自己找点价值。”最近&#xff0c;郑州有位94岁的“煎饼奶奶”火了。因为每天半夜12点到次日凌晨5点在路边摆摊卖煎饼&#xff0c;老人被网友拍下后引起关注。很多网友认为老人生活困难&#xff0c;替她心酸&#xff0c;还有人指责儿女不孝…...

编程日记 2025/1/11 13:34:14