公司网站如何建设教学视频,在百度上怎么建立网站,wordpress文章截断,做渠道的网站有哪些最近一直在录Blog.Core相关的操作视频#xff0c;也没有研究过什么新的东西#xff0c;公司也各种项目迭代#xff0c;特别是从Fwk迁移到NetCore#xff0c;真的是不是一个容易的事#xff0c;闲的时候#xff0c;为了歇歇脑子#xff0c;就抽出时间简单看了看又有哪些… 最近一直在录Blog.Core相关的操作视频也没有研究过什么新的东西公司也各种项目迭代特别是从Fwk迁移到NetCore真的是不是一个容易的事闲的时候为了歇歇脑子就抽出时间简单看了看又有哪些新技术最近聊的挺多的就是Blazor了吧所以我也看了看这里声明一点我并不打算出一个完整的Blazor系列教程最近老有人让我出系列教程????只是走马观花的过一遍看看这个到底是一个什么东西感兴趣的自己可以去深入学习下毕竟现在的资料还不是最多的可以锻炼下自己而且也算是一个吃螃蟹的人毕竟有历史价值好啦废话不多说直接开整。1、这个项目的立项初衷可能还有一部分小伙伴不太了解我年初申请上了微软的MVP我也没有过多的宣传毕竟这只是一个鼓励而已平时该解答的我还是会解答。MVP呢每次只有一年的有效期所以每个新的一年都还需要风雨兼程的往前走还是需要传递知识那就少不了将自己做过的写过的分享过的东西给列出来注意这里可能有转载别人的文章作为一个展示所以呢我就想着自己写个小的Portal吧把自己整理的东西给放出来多半是微信公众号的也可以给大家做一个方便查找和学习的列表。但是在项目选型的时候我犹豫了好几天用什么呢ASP.NET Core MVC么其实我已经写了好多个了公司的小项目也一直在使用所以不想写了无非就是增删改查。前后端分离项目也写的吐了不想学React我看国内外包企业用的比较多但是我还是想结合下我的Blog.Core项目毕竟已经封装的很好了可以做为一个后端的资源服务器来使用。与此同时看到有人推送了多个关于微软的Blazor框架的相关内容号称可以使用C#来写前端组件个人表示很好奇。基于以上三点呢就选用了BlazorBlog.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 Configurationh1Configuration example/h1pConfiguration[message]/p
是不是很简单可见依赖注入是多么的重要那分析完结构直接运行下看看效果。F5 查看效果我们直接执行F5项目是会自动执行Build操作的就像我们之前学习vue执行了serve命令后就能运行项目监听端口了过程特别简单而且渲染的也很快具体的渲染逻辑这里不说了自行研究吧只要是会vue的话肯定这个也能理解。核心代码解释官方给了三个例子我这里简单说一下获取数据的吧很简单还是mvc的老路子只不过增加了些MVVM的影子// 定义路由
page /fetchdata// 依赖注入对应的服务注意命名空间System.Net.Http
inject HttpClient Httph1Weather forecast/h1pThis component demonstrates fetching data from the server./p// 渲染过程
if (forecasts null)
{pemLoading.../em/p
}
else
{table classtabletheadtrthDate/ththTemp. (C)/ththTemp. (F)/ththSummary/th/tr/theadtbodyforeach (var forecast in forecasts){trtdforecast.Date.ToShortDateString()/tdtdforecast.TemperatureC/tdtdforecast.TemperatureF/tdtdforecast.Summary/td/tr}/tbody/table
}// c# 代码
code {// 定义data变量private WeatherForecast[] forecasts;// 重写初始化函数类似vue的 mountedprotected override async Task OnInitializedAsync(){// 异步获取远程api接口数据forecasts await Http.GetFromJsonAsyncWeatherForecast[](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.JsonGetJsonAsyncGetFromJsonAsyncPostJsonAsyncPostAsJsonAsyncPutJsonAsyncPutAsJsonAsync可能的错误开发中可能会报错好啦示例项目说完了那接下来说说我的项目吧。4、Blog.MVP.Blazor设计思路其实也不算是设计思路就说下如何做的吧。1、所用接口毕竟是辛辛苦苦搭建的Blog.Core项目所以能用还是尽量用的而且很巧的是正好能和我这个无缝对接仅仅需要用到博客表BlogArticle即可当时正好我做了博客分类bcategory这个字段这里可以排上用场因为我不想和Blog.Vue项目搞混所以我新建的分类MVP_xxxx_这种格式作者字段用的是微信公众号链接其他的就是很基本的了。接口1获取指定分类的文章await Http.GetJsonAsyncMessageModelPageModelBlogArticle
(/api/Blog?page1bcategoryMVP_ids4_2020intPageSize20);
这里很人性化还可以指定返回类型无缝对接我们的Blog.Core资源服务器。接口2做页面跳转增加阅读量http://apk.neters.club/api/Blog/GoUrl?id(bID)
因为我们的地址是外链地址而且还是微信文章的地址如果是微信客户端外访问的话系统是不会记录阅读量的只能我们自己记录所以我增加了这个跳转链接很简单自己查看代码即可。2、设计组件本来文章页只需要一个页面就行然后通过参数传递来实现不同信息展示但是我偷懒了直接多个页面通过路由地址强行的进行分类展示这样不好第一版先这么吧但是也做了几个组件比如// 设计html样式
article classarticle-post-summarydiv classpost-summary-boxh4 classpost-summary-titlea hrefhttp://apk.neters.club/api/Blog/GoUrl?id(bID)btitle/a/h4// 参数的绑定p classpost-summary-textbcontent/pdiv classpost-date-box d-md-blockdiv classpost-date-day(bCreateTime.ToString(yyyy-MM-dd)) (Readerbtraffic)/div/div/div
/article
div classmb-4 d-md-block/div
hr classd-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 bIDitem.bID btitleitem.btitle bcontentitem.bcontent bCreateTimeitem.bCreateTime btrafficitem.btraffic /}}else{pemLoading.../em/p}
而且也可以帮忙命令事件button classbtn btn-primary onclickIncrementCountClick me/buttoncode {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一个好的未来吧希望未来可期
