我的『MVP.Blazor』快速创建与部署


最近一直在录Blog.Core相关的操作视频,也没有研究过什么新的东西,公司也各种项目迭代,特别是从Fwk迁移到NetCore,真的是不是一个容易的事,闲的时候,为了歇歇脑子,就抽出时间简单看了看又有哪些新技术,最近聊的挺多的就是Blazor了吧,所以我也看了看,这里声明一点,我并打算出一个完整的Blazor系列教程(最近老有人让我出系列教程????),只是走马观花的过一遍,看看这个到底是一个什么东西,感兴趣的自己可以去深入学习下,毕竟现在的资料还不是最多的,可以锻炼下自己,而且也算是一个吃螃蟹的人,毕竟有历史价值,好啦,废话不多说,直接开整。

1、这个项目的立项初衷

可能还有一部分小伙伴不太了解,我年初申请上了微软的MVP,我也没有过多的宣传,毕竟这只是一个鼓励而已,平时该解答的我还是会解答。MVP呢,每次只有一年的有效期,所以每个新的一年都还需要风雨兼程的往前走,还是需要传递知识,那就少不了将自己做过的,写过的,分享过的东西给列出来(注意:这里可能有转载别人的文章),作为一个展示,所以呢,我就想着自己写个小的Portal吧,把自己整理的东西给放出来,多半是微信公众号的,也可以给大家做一个方便查找和学习的列表。

但是在项目选型的时候,我犹豫了好几天,用什么呢,ASP.NET Core MVC么,其实我已经写了好多个了,公司的小项目也一直在使用,所以不想写了,无非就是增删改查。

前后端分离项目?也写的吐了,不想学React,我看国内外包企业用的比较多,但是我还是想结合下我的Blog.Core项目,毕竟已经封装的很好了,可以做为一个后端的资源服务器来使用。

与此同时,看到有人推送了多个关于微软的Blazor框架的相关内容,号称可以使用C#来写前端组件,个人表示很好奇。

基于以上三点呢,就选用了(Blazor+Blog.Core)的架构,你也可以把它理解成一个前后端分离的项目,因为我用的是wasm的客户端,用Blog.Core提供资源服务器,两者是分开部署的:

http://mvp.neters.club(这个就是客户端地址)

https://github.com/anjoy8/Blog.MVP.Blazor(开源地址)

(首次加载奇慢,还在研究,文末有说到)

目前这个只是一个小的版本,当然后边还是有很多问题的,可能会一直维护,慢慢添加,好啦,下边正式开始。

2、开发环境准备

1、更新工具

目前BlazorWebAssembly版本是3.2.0Previ,如果要使用它的话,必须要安装.NET Core3.1.2+的SDK,注意小版本也要2以上。

我的系统环境是:

VS 2019 16.4.0、.NET Core SDK 3.1.3

如果你想调试blazor的话,需要更新vs2019到16.6+的最新版本,

更新到16.6+后,不仅可以调试Blazor,它也自带了相应的开发模板,如果你现在还不想把自己的vs2019升级的话,只能手动先安装下模板了。

截至发稿,我已经升级到vs2019 16.6.1了。 

2、下载模板

使用前,需要安装对应的模板

dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0

安装完成后,可以看到我们的电脑里有模板:

然后我们可以打开VS2019,可以看到已经有对应的快捷入口:

点击创建:

可以看到,和我们的ASP.NetCore的webapi项目还是很像的,那到了这里,我们的项目环境就正式的搭建完成,下一步开始创建Demo了。

请注意:这里我们使用的是wasm客户端项目,不是server项目,从名字上也能明白两个对应的职能是什么,关于server的使用,我以后会说到。

3、创建一个默认的示例项目

通过上边的步骤,我们创建了一个wasm的初始化示例项目,结构如下:

├── launchSettings.json    // 配置文件(注意多了一个inspectUri的调试节点)
├── wwwroot // 静态文件夹
├── Pages // 页面文件夹
│   ├── Counter.razor // 页面内计数功能
│   ├── FetchData.razor // 远程获取数据功能
│   └── Index.razor // 网站首页
├── Shared // 项目公共组件库
│   ├── MainLayout.razor // 主要布局组件
│   ├── NavMenu.razor // 导航条组件
│   └── SurveyPrompt.razor // 提示组件
├── _Imports.razor // 项目常用引用导入
├── App.razor // 项目根文件
└── Program.cs // 项目主入口

从上边的项目结构中,我们基本也能看懂七七八八,当然,前提是稍微学过NetCore或者是MVC的Razor页面。

添加配置文件

你可以在wwwroot文件夹下,创建appsettings.json文件,然后在razor页面内注入:

{"message": "Hello from config!"
}
@page "/"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration<h1>Configuration example</h1><p>@Configuration["message"]</p>

是不是很简单,可见依赖注入是多么的重要!

那分析完结构,直接运行下,看看效果。

F5 查看效果

我们直接执行F5,项目是会自动执行Build操作的,就像我们之前学习vue,执行了serve命令后,就能运行项目,监听端口了:

过程特别简单,而且渲染的也很快,具体的渲染逻辑这里不说了,自行研究吧,只要是会vue的话,肯定这个也能理解。

核心代码解释

官方给了三个例子,我这里简单说一下获取数据的吧,很简单,还是mvc的老路子,只不过增加了些MVVM的影子:

// 定义路由
@page "/fetchdata"// 依赖注入对应的服务(注意命名空间System.Net.Http)
@inject HttpClient Http<h1>Weather forecast</h1><p>This component demonstrates fetching data from the server.</p>// 渲染过程
@if (forecasts == null)
{<p><em>Loading...</em></p>
}
else
{<table class="table"><thead><tr><th>Date</th><th>Temp. (C)</th><th>Temp. (F)</th><th>Summary</th></tr></thead><tbody>@foreach (var forecast in forecasts){<tr><td>@forecast.Date.ToShortDateString()</td><td>@forecast.TemperatureC</td><td>@forecast.TemperatureF</td><td>@forecast.Summary</td></tr>}</tbody></table>
}// c# 代码
@code {// 定义data变量private WeatherForecast[] forecasts;// 重写初始化函数,类似vue的 mountedprotected override async Task OnInitializedAsync(){// 异步获取远程api接口数据forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");}// 定义model public class WeatherForecast{public DateTime Date { get; set; }public int TemperatureC { get; set; }public string Summary { get; set; }public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);}
}

核心的部分我都做了注释,相信都能看的懂,毕竟我相信,只有netcore学会了的小伙伴,才回去看blazor,如果netcore都不会,我不建议看。

这里强调的是,Http信息有两个版本,自己看好就行,毕竟不同的版本,对应不同的方法:

Microsoft.AspNetCore.Blazor.HttpClientSystem.Net.Http.Json
GetJsonAsyncGetFromJsonAsync
PostJsonAsyncPostAsJsonAsync
PutJsonAsyncPutAsJsonAsync

可能的错误

开发中可能会报错:

好啦,示例项目说完了,那接下来说说我的项目吧。

4、Blog.MVP.Blazor设计思路

其实也不算是设计思路,就说下如何做的吧。

1、所用接口

毕竟是辛辛苦苦搭建的Blog.Core项目,所以能用还是尽量用的,而且很巧的是,正好能和我这个无缝对接,仅仅需要用到博客表BlogArticle即可:

当时正好我做了博客分类bcategory这个字段,这里可以排上用场,因为我不想和Blog.Vue项目搞混,所以我新建的分类MVP_xxxx_这种格式,作者字段用的是微信公众号链接,其他的就是很基本的了。

接口1:获取指定分类的文章:

await Http.GetJsonAsync<MessageModel<PageModel<BlogArticle>>>
("/api/Blog?page=1&bcategory=MVP_ids4_2020&intPageSize=20");

这里很人性化,还可以指定返回类型,无缝对接我们的Blog.Core资源服务器。

接口2:做页面跳转,增加阅读量:

http://apk.neters.club/api/Blog/GoUrl?id=@(bID)

因为我们的地址是外链地址,而且还是微信文章的地址,如果是微信客户端外访问的话,系统是不会记录阅读量的,只能我们自己记录,所以我增加了这个跳转链接,很简单,自己查看代码即可。

2、设计组件

本来文章页只需要一个页面就行,然后通过参数传递,来实现不同信息展示,但是我偷懒了,直接多个页面,通过路由地址,强行的进行分类展示,这样不好,第一版先这么吧,但是也做了几个组件,比如:

// 设计html样式
<article class="article-post-summary"><div class="post-summary-box"><h4 class="post-summary-title"><a href="http://apk.neters.club/api/Blog/GoUrl?id=@(bID)">@btitle</a></h4>// 参数的绑定<p class="post-summary-text">@bcontent</p><div class="post-date-box d-md-block"><div class="post-date-day">@(bCreateTime.ToString("yyyy-MM-dd"))  (Reader:@btraffic)</div></div></div>
</article>
<div class="mb-4 d-md-block"></div>
<hr class="d-none d-md-block">// 这里也可以写css// 这里定义逻辑和data,是不是和vue的组件很像
@code {// Demonstrates how a parent component can supply parameters[Parameter]public int bID { get; set; }[Parameter]public string btitle { get; set; }[Parameter]public string bcontent { get; set; }[Parameter]public DateTime bCreateTime { get; set; }[Parameter]public int btraffic { get; set; }
}

还是三模块的形式,HTML-CSS-JS(这里是C#)的模式,是不是和vue的组件设计很像,当然至于能不能双向绑定,应该是可以的,你可以试试。

3、调用组件

这个也很简单,直接进行绑定数据即可:

   @if (_blogs != null){foreach (var item in _blogs.response.data){<ArtBody bID="@item.bID" btitle="@item.btitle" bcontent="@item.bcontent" bCreateTime="@item.bCreateTime" btraffic="@item.btraffic" />}}else{<p><em>Loading...</em></p>}

而且也可以帮忙命令事件:

<button class="btn btn-primary"  @onclick="IncrementCount">Click me</button>@code {private int currentCount =  0;// 定义事件方法private void IncrementCount(){ currentCount++;}
}

到了这里,如果你会vue开发,是不是感觉很blazor真的很像:

无论是数据的获取,

还是组件的定义,

然后是数据的绑定,

甚至是渲染的过程

4、绑定资源服务器地址

我们既然要用http请求,肯定要定义地址,在Program.cs文件中,直接定义:

 builder.Services.AddBaseAddressHttpClient();builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri("http://apk.neters.club") });

5、最后别忘了跨域配置

这个是老生常谈了,既然是分离,肯定要配置跨域,

我这里使用的是CORS跨域,NGINX部署,暂时还没有来得及代理的方式,以后有机会慢慢研究吧,CORS也是很简单的,配置后端口号就行了。

6、部署

其实这个很简单的,我们直接publish下我们的项目,就能看到打包好了,但是并没有我们想象中的项目名称的的dll,

如果你是IIS部署,那直接路径设置这个publish文件夹即可。

如果是Nginx部署,可以直接指定wwwroot路径,就像是部署打包好的vue项目一样。

5、未来的路还是很长的

其实你看完了文章,会发现目前还是遇到了很多问题,比如:

1、首次打开太慢了,竟然把dll文件也加载了,我怀疑是我的问题,但是还没有找到合适的资料,有知道的欢迎告诉我。

2、虽然很像vue,但是操作起来还是没有vue那么丝滑。
3、感觉还是和IIS很兼容,就像IdentityServer4那样。

但是!毕竟是一门新兴的技术,取名MVP.Blazor,也是希望能给Blazor一个好的未来吧,希望未来可期!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/309448.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

.NET IDE Rider公布2020.2路线图

跨平台 .NET IDE Rider 近日公布了 2020.2 的路线图&#xff0c;介绍了目前正在开发的一些特性&#xff0c;并表示其中一些可能在接下来的版本中出现。主要包括&#xff1a;Windows 上的 .NET Core 后端&#xff1a;Rider 2020.1 已在 macOS 和 Linux 上的 .NET Core 上运行 Re…

字符串太占内存了,我想了各种奇思淫巧对它进行压缩

一&#xff1a;背景1. 讲故事在我们的一个全内存项目中&#xff0c;需要将一家大品牌店铺小千万的trade灌入到内存中&#xff0c;大家知道trade中一般会有订单来源,省市区 &#xff0c;当把这些字段灌进去后&#xff0c;你会发现他们特别侵蚀内存&#xff0c;因为都是字符串类型…

[JavaWeb-HTML]HTML标签_表格标签

表格标签&#xff1a; * table&#xff1a;定义表格* width&#xff1a;宽度* border&#xff1a;边框* cellpadding&#xff1a;定义内容和单元格的距离* cellspacing&#xff1a;定义单元格之间的距离。如果指定为0&#xff0c;则单元格的线会合为一条、* bgcolor&#xff1a…

玩转二叉树 (25 分) 知中序遍历和前序遍历,求做个镜面反转后的层序遍历

题目&#xff1a; 给定一棵二叉树的中序遍历和前序遍历&#xff0c;请你先将树做个镜面反转&#xff0c;再输出反转后的层序遍历的序列。所谓镜面反转&#xff0c;是指将所有非叶结点的左右孩子对换。这里假设键值都是互不相等的正整数。 输入格式&#xff1a; 输入第一行给…

使用dotnet Cli向nuget发布包

长话短说&#xff0c; 今天分享如何在nuget.org创建并发布.NET Standard package。前置安装勾选.NET Core开发套件的Visual Studio; 安装dotnet Cli从VS2017开始&#xff0c;dotnet Cli已经自动在.NET开发套件中被安装&#xff1b;使用SDK-style format&#xff08;SDK属性&…

STL中vector建立最大堆和最小堆

1.堆的概念&#xff1a; 堆是一种非线性结构&#xff0c;可以把堆看作一个数组&#xff0c;也可以被看作一个完全二叉树&#xff0c;通俗来讲堆其实就是利用完全二叉树的结构来维护的一维数组按照堆的特点可以把堆分为大顶堆和小顶堆 大顶堆&#xff1a;每个结点的值都大于或…

结合 AOP 轻松处理事件发布处理日志

结合 AOP 轻松处理事件发布处理日志Intro前段时间&#xff0c;实现了 EventBus 以及 EventQueue 基于 Event 的事件处理&#xff0c;但是没有做日志&#xff08;EventLog&#xff09;相关的部分&#xff0c;原本想增加两个接口&#xff0c; 处理事件发布日志和事件处理日志&…

基于 abp vNext 和 .NET Core 开发博客项目 - 博客接口实战篇(三)

系列文章使用 abp cli 搭建项目给项目瘦身&#xff0c;让它跑起来完善与美化&#xff0c;Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API&#xff0c;包装返回模型再说Swagger&#xff0c;分组、描述、小绿锁接入GitHub&#xff0c;用JWT保护你的API异常处理和…

完全卸载软件及电脑软件残留

当我在控制面板的卸载软件里没有发现我要删软件的软件时&#xff0c;只找到了软件的部分安装目录删除&#xff0c;就会发生残留问题&#xff0c;导致软件依旧可以运行。 经过这么多次后&#xff0c;我就找到了我自认为的最优解。首先运行这个软件&#xff1b;之后打开windows任…

真的是计划赶不上变化吗?

「做事容易半途而废&#xff0c;缺乏毅力」&#xff0c;我想100个人里面有99个是这样。更加好玩的是&#xff0c;这99个人里面可能还有不少会劝说别人要坚持……所以&#xff0c;其实我们每个人心里都清楚&#xff0c;一件事情不会“自动完成”&#xff0c;只有靠自己坚持做下去…

关于解决Path被大改,无法直接编辑恢复的问题

为了给eclipse改版&#xff0c;不用更改API&#xff0c;我动了环境变量&#xff0c;因为我的环境变量名称是path&#xff0c;所以当给tomcatTomCAT安装以及使用详细解释配置环境时&#xff0c;我直接新建的Path&#xff0c;把原来的path覆盖掉了&#xff0c;而且在注册表里无法…

Sql Server之旅——第十二站 对锁的初步认识

作为一个开发人员&#xff0c;锁机制也是我们程序员必须掌握的东西&#xff0c;很久之前在学习锁的时候&#xff0c;都是教科书上怎么说&#xff0c;然后我怎么背&#xff0c;缺少一个工具让我们眼见为实。。。如果这样的话&#xff0c;学习一个东西就很容易忘记。。。因为这些…

算法基础

目录枚举例题应用&#xff1a;模拟技巧递归$分治递归分治算法贪心常见题型与动态规划的区别例题&#xff1a;应用排序选择排序冒泡排序插入排序计数排序基数排序二分最大值最小化STL 的二分查找三分法最大化平均值&#xff08;01分数规划&#xff09;枚举 枚举&#xff08;英语…

ABP框架 v2.9发布!

ABP框架和ABP商业版2.9已经发布,这是3.0之前的最后一个版本! 这篇文章将涵盖本次发布中的新增内容.ABP框架2.9有哪些新增内容&#xff1f;你可以中GitHub的发行说明中看到所有的变更.这篇文章将只包括重要特征/变更.预编译Razor Pages在之前的版本, 预构建的页面(应用模块)和视…

最终选型 Blazor.Server:又快又稳!

书接上文&#xff0c;昨天我们快速的走了一遍wasm的开发流程&#xff08;我的『MVP.Blazor』快速创建与部署&#xff09;&#xff0c;总体来说还是很不错的&#xff0c;无论是从技术上&#xff0c;还是从开发上&#xff0c;重点是用C#来开启前端时代&#xff0c;可以开发SPA单页…

博客系统知多少:揭秘那些不为人知的学问(三)

点击上方关注“汪宇杰博客”上篇《博客系统知多少&#xff1a;揭秘那些不为人知的学问&#xff08;二&#xff09;》介绍了博客的基本功能设计要点&#xff0c;本篇介绍博客的协议或标准。1.“博客”的前世今生2.我的博客故事3.谁是博客的受众&#xff1f;4. 博客基本功能设计要…

Sql Server之旅——第十三站 深入的探讨锁机制

上一篇我只是做了一个堆表让大家初步的认识到锁的痉挛状态&#xff0c;但是在现实世界上并没有这么简单的事情&#xff0c;起码我的表不会没有索引对吧&#xff0c;还有就是我的表一定会有很多的连接过来&#xff0c;10:1的读写&#xff0c;很多码农可能都会遇到类似神乎其神的…

后端程序员转行前端,强烈推荐这6个前端UI框架,第二款小程序UI框架颜值最高!...

昨天有个同事问我有没有可以直接上手的前端UI框架。那今天就给大家推荐6个简单、视觉体验好的前端框架没吃过猪肉&#xff0c;肯定见过猪跑&#xff01;Jquery Mobiledemo地址&#xff1a;https://demos.jquerymobile.com/1.1.0/教程地址:https://www.codesocang.com/jquerymob…

Kubernetes引发“军备赛”,K8s真是企业生存的关键吗

导语与许多其他国家一样&#xff0c;英国对云基础架构的需求空前增长。随着学校&#xff0c;办公室&#xff0c;商店和饭店的关闭以应对疫情&#xff0c;云驱动的应用程序应运而生&#xff0c;解决挑战并提供安慰。随着各个年龄段人群的屏幕时间激增&#xff0c;数据中心正努力…

【新插件发布】AzureAD运维Excel版插件,增删改查快10倍c以上!

在笔者的BI项目开发中&#xff0c;用到了Azure的AzureSQL和AzureAS分析服务&#xff0c;此两大服务&#xff0c;可和AzureAD帐号体系打通。而AzureAD帐号&#xff0c;在其免费功能基础功能上&#xff0c;是免费使用的&#xff0c;随着项目开发上线进入运维阶段&#xff0c;Azur…