一起学Blazor WebAssembly 开发(2)
上篇文章讲了Blazor的两种模式的区别及各自的使用场景,本篇就开始学习WebAssembly模式,本篇主要学习的是创建项目及认识项目结构:
- 创建项目
选择Blazor应用
选择WebAssemblyApp,并且勾选PWA,之后的文章会说到PWA
创建成功后,运行项目,成功运行
- 认识项目结构
项目结构
创建好的项目分成以上几个区域,wwwroot,Pages,Shared,_Imports.razor,App.razor,Program,以下分别介绍下各个部分,这里是我个人的对这个项目的理解,有不对的欢迎指正。
Program
项目运行开始是从Program进来的,builder.RootComponents.Add<App>("app");这里的‘App’类 对应了App.Razor, 括号里的app 对应了 wwwroot下index.html里的<app>标签。名称要一致。index.html算是整个单页应用最大的母版。
index.html
日常使用的通用的js都写在这个index.html里
App.Razor
App.Razor里主要看一个地方就行,就是默认Layout的设置,这里默认的是MainLayout,如果Pages里的Razor 不做特殊声明的话,就是默认使用这个。如果想使用别的,就可以代码头部加@layout LoginLayout (这里是举例,不一定叫LoginLayout)
@page 代表的单页应用里的页面路径
从代码中可以看到大部分之前用js来做的这里用到了C#来写了。比如这里的获取天气信息json数据的,这里用了HttpClient读取。代码很清晰,对于.net开发人员确实是很友好。
_imports.razor
_imports.razor里放了一些引用的命名空间。
以上来块,整个页面的结构是index.html->Layout->Page 一层层嵌套而成。页面之间跳转使用page里的@page来设置路径。不同页面想用不同的layout可以单独设置,很多逻辑可以用C#来实现。这是默认项目给到的东西,下篇将会结合实际项目登录功能讲一个结合js使用的功能。
一起学Blazor WebAssembly 开发(2)的更多相关文章
- 一起学Blazor WebAssembly 开发(1)
最近blazor的WebAssembly 正式版出来了,正好手头有一个项目采用的前后端分离模式做的,后端用的abp vnext(.net core 的一个很著名的框架)框架开发的,其实前端之前考虑的使 ...
- 一起学Blazor WebAssembly 开发(3)
接着上篇,本篇开始讲下实现登录窗口,先看下大概的效果图: 打开的效果,没有美工美化 点登录校验得到不能为空 我在做blazor时用到了一个ui框架,这个框架名叫Ant Design blazor(ht ...
- 从零开始一起学Blazor WebAssembly 开发(4)
登录模块基本完成了,登录主要用了以下几个点: 1.后端采用的Abp Vnext 框架,这个框架自带的IdentityServer4用户角色权限控制,这个框架登录研究了好一阵子,有几个坑这里说下: 1) ...
- Blazor Webassembly多标签页开发
最近准备用Blazor Webassembly做后台开发要用到多标签页,找了半天发现绝大多数都是Blazor Server的多标签没有Webassembly.没办法只能自己想办法造轮子了. 查了许多资 ...
- 浏览器中的 .Net Core —— Blazor WebAssembly 初体验
前言 在两年多以前就听闻 Blazor 框架,是 .Net 之父的业余实验性项目,其目的是探索 .Net 与 WebAssembly 的兼容性和应用前景.现在这个项目已经正式成为 Asp.Net Co ...
- ASP.NET Core Blazor 初探之 Blazor WebAssembly
最近Blazor热度很高,传说马上就要发布正式版了,做为微软脑残粉,赶紧也来凑个热闹,学习一下. Blazor Blazor是微软在ASP.NET Core框架下开发的一种全新的Web开发框架.Bla ...
- 通过 Serverless 加速 Blazor WebAssembly
Blazor ❤ Serverless 我正在开发 Ant Design 的 Blazor 版本,预览页面部署在 Github Pages 上,但是加载速度很不理想,往往需要 1 分钟多钟才完成. 项 ...
- Blazor WebAssembly 3.2.0 Preview 4 如期发布
ASP.NET团队如期3.16在官方博客发布了 Blazor WebAssembly 3.2.0 Preview 4:https://devblogs.microsoft.com/aspnet/bla ...
- Blazor WebAssembly 3.2.0 已在塔架就位 将发射新一代前端SPA框架
最美人间四月天,春光不负赶路人.在充满无限希望的明媚春天里,一路风雨兼程的.NET团队正奋力实现新的突破. 根据计划,新一代基于WebAssembly 技术研发的前端SPA框架Blazor 将于5月1 ...
随机推荐
- Java将日期转化为大写格式(阿拉伯大写数字)
效果: 代码部分: public static void main(String[] args) { SimpleDateFormat sdf=new SimpleDateFormat("y ...
- .NETCore微服务探寻(三) - 分布式日志
前言 一直以来对于.NETCore微服务相关的技术栈都处于一个浅尝辄止的了解阶段,在现实工作中也对于微服务也一直没有使用的业务环境,所以一直也没有整合过一个完整的基于.NETCore技术栈的微服务项目 ...
- 数据库char varchar nchar nvarchar,编码Unicode,UTF8,GBK等,Sql语句中文前为什么加N(一次线上数据存储乱码排查)
背景 公司有一个数据处理线,上面的数据经过不同环境处理,然后上线到正式库.其中一个环节需要将数据进行处理然后导入到另外一个库(Sql Server).这个处理的程序是老大用python写的,处理完后进 ...
- springboot使用多个@RestControllerAdvice时的拦截顺序
我们的项目中经常会使用到别人的模块,例如我的项目demo,要依赖别人的A模块,以及基础的核心core模块,此时core模块有一个使用了@RestControllerAdvice的类,负责拦截所有的co ...
- Python学习笔记——基础语法篇
一.Python初识(IDE环境及基本语法,Spyder快捷方式) Python是一种解释型.面向对象.动态数据类型的高级程序设计语言,没有编译过程,可移植,可嵌入,可扩展. IDE 1.检查Pyth ...
- DOM-BOM-EVENT(4)
4.dom操作 createElement 创建一个元素 <button id="btn">点击</button> <ul id="ul1& ...
- js事件入门(5)
5.窗口事件 5.1.onload事件 元素加载完成时触发,常用的就是window.onload window.onload = function(){ //等页面加载完成时执行这里的代码 } 5.1 ...
- 浅谈tkinter模块
目录 tkinter模块 tkinter模块简单使用 主窗口 Button按钮 Label标签 Text编辑框 Entry输入框 ListBox列表 RadioButton单选框 CheckButto ...
- (五)ELK Logstash output
# 输出插件将数据发送到一个特定的目的地, 除了elasticsearch还有好多可输出的地方, 例如file, csv, mongodb, redis, syslog等 output { if [t ...
- django 缓存(memcached)
Django提供了6种缓存方式 开发调试缓存 内存缓存 文件缓存 数据库缓存 Memcache缓存(使用python-memcached模块) Memcache缓存(使用pylibmc模块) 常使用的 ...