潍坊网站排名推广,网页浏览器推荐,网站维护与建设内容,网页游戏源码怎么获取系列文章使用 abp cli 搭建项目给项目瘦身#xff0c;让它跑起来完善与美化#xff0c;Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API#xff0c;包装返回模型再说Swagger#xff0c;分组、描述、小绿锁接入GitHub#xff0c;用JWT保护你的API异常处理和… 系列文章使用 abp cli 搭建项目给项目瘦身让它跑起来完善与美化Swagger登场数据访问和代码优先自定义仓储之增删改查统一规范API包装返回模型再说Swagger分组、描述、小绿锁接入GitHub用JWT保护你的API异常处理和日志记录使用Redis缓存数据集成Hangfire实现定时任务处理用AutoMapper搞定对象映射定时任务最佳实战一定时任务最佳实战二定时任务最佳实战三博客接口实战篇一博客接口实战篇二博客接口实战篇三博客接口实战篇四博客接口实战篇五Blazor实战系列一上一篇搭建了 Blazor 项目并将整体框架改造了一下本篇将完成用 C# 代码代替 JavaScript 实现几个小功能说是代替但并不能完全不用 JavaScript应该说是尽量不用吧。二维码显示与隐藏可以看到当我鼠标移入的时候显示二维码移出的时候隐藏二维码。这个功能如果是用JavaScript来完成的话肯定首先想到的是HTML的 Mouse 事件属性那么在Blazor中也是一样的给我们实现了各种on*事件。打开index.razor页面给微信图标那个 NavLink 标签添加两个事件onmouseover和onmouseout。... NavLink classlink-item weixin title扫码关注微信公众号『阿星Plus』查看更多。 onmouseoverHover onmouseoutHoveri classiconfont iconweixin/i /NavLink ... 当鼠标移入移出的时候都执行我们自定义的一个方法Hover()。C# 代码写在code{}花括号中实现显示和隐藏原理是利用css默认是隐藏的当显示的时候将具有隐藏属性的class值去掉就可以了。所以可以添加两个字段一个用于判断当前是否处于隐藏状态一个用来存储class的值。/// summary /// 是否隐藏 /// /summary private bool IsHidden true;/// summary /// 二维码CSS /// /summary private string QrCodeCssClass IsHidden ? hidden : null; 当IsHidden trueQrCodeCssClass hidden当IsHidden falseQrCodeCssClass null。那么在Hover()方法中不断修改IsHidden的值就可以实现效果了。/// summary /// 鼠标移入移出操作 /// /summary private void Hover() IsHidden !IsHidden; 最后将QrCodeCssClass变量赋值给二维码图片所在的div上。... div classqrcode QrCodeCssClassimg srchttps://static.meowv.com/images/wx_qrcode.jpg / /div ... 大功告成index.razor完整代码如下page /div classmaindiv classcontainerdiv classintrodiv classavatara hrefjavascript:;img srchttps://static.meowv.com/images/avatar.jpg/a/divdiv classnickname阿星Plus/divdiv classdescriptionp生命不息奋斗不止brCease to struggle and you cease to live/p/divdiv classlinksNavLink classlink-item titlePosts hrefpostsi classiconfont iconread/i/NavLinkNavLink target_blank classlink-item titleNotes hrefhttps://notes.meowv.com/i classiconfont iconnotes/i/NavLinkNavLink target_blank classlink-item titleAPI hrefhttps://api.meowv.com/i classiconfont iconapi/i/NavLinkNavLink classlink-item titleManage href/account/authi classiconfont iconcode/i/NavLinkNavLink target_blank classlink-item titleGithub hrefhttps://github.com/Meowv/i classiconfont icongithub/i/NavLinkNavLink classlink-item weixin title扫码关注微信公众号『阿星Plus』查看更多。 onmouseoverHover onmouseoutHoveri classiconfont iconweixin/i/NavLinkdiv classqrcode QrCodeCssClassimg srchttps://static.meowv.com/images/wx_qrcode.jpg //div/div/div/div /divcode {/// summary/// 是否隐藏/// /summaryprivate bool IsHidden true;/// summary/// 二维码CSS/// /summaryprivate string QrCodeCssClass IsHidden ? hidden : null;/// summary/// 鼠标移入移出操作/// /summaryprivate void Hover() IsHidden !IsHidden; } 菜单显示与隐藏菜单是在小屏幕上才会出现的相信看完了二维码的显示与隐藏这个菜单的显示与隐藏就好办了吧实现方法是一样的菜单按钮是在头部组件Header.razor中的包括主题切换功能所以下面代码都在Header.razor里面。code {/// summary/// 下拉菜单是否打开/// /summaryprivate bool collapseNavMenu false;/// summary/// 导航菜单CSS/// /summaryprivate string NavMenuCssClass collapseNavMenu ? active : null;/// summary/// 显示/隐藏 菜单/// /summaryprivate void ToggleNavMenu() collapseNavMenu !collapseNavMenu; } 默认是不打开的collapseNavMenu false。然后根据collapseNavMenu值为NavMenuCssClass给定不同的class。... nav classnavbar-mobilediv classcontainerdiv classnavbar-headerdivNavLink classmenu-item href MatchNavLinkMatch.All????阿星Plus/NavLinkNavLinknbsp;·nbsp;Light/NavLink/divdiv classmenu-toggle onclickToggleNavMenu#9776; Menu/div/divdiv classmenu NavMenuCssClassNavLink classmenu-item hrefpostsPosts/NavLinkNavLink classmenu-item hrefcategoriesCategories/NavLinkNavLink classmenu-item hreftagsTags/NavLinkNavLink classmenu-item apps hrefappsApps/NavLink/div/div /nav ... 与二维码显示与隐藏唯一区别就是这里是点击按钮不是移入移出所以菜单显示与隐藏需要用到onclick方法。主题切换哇这个主题切换真的是一言难尽当切换主题的时候需要记住当前的主题是什么当刷新页面或者跳转其他页面的时候主题状态是需要一致的默认是白色主题当切换暗黑色主题后其实是在body上加了一个class。在Blazor实在是不知道用什么办法去动态控制body的样式所以这里我想到了一个办法写几个全局的JavaScript方法然后再Blazor中调用要知道他们是可以互相调用的于是问题迎刃而解。添加app.js文件放在 /wwwroot/js/ 下面。var func window.func || {};func {setStorage: function (name, value) {localStorage.setItem(name, value);},getStorage: function (name) {return localStorage.getItem(name);},switchTheme: function () {var currentTheme this.getStorage(theme) || Light;var isDark currentTheme Dark;if (isDark) {document.querySelector(body).classList.add(dark-theme);} else {document.querySelector(body).classList.remove(dark-theme);}} }; 这里写了三个方法设置localStoragesetStorage(name,value)获取localStoragegetStorage(name)切换主题switchTheme()localStorage 是浏览器以 name:value 形式的本地存储对象。switchTheme主要做的事情就是判断当前主题如果是暗黑就给body加上对应的class如果不是就去掉。然后在 index.html 中引用。... bodyappdiv classloader/div/appscript srcjs/app.js/scriptscript src_framework/blazor.webassembly.js/script /body ... 有了这个三个全局的JavaScript方法切换主题就变得简单多了看代码。... /// summary /// 当前主题 /// /summary private string currentTheme;/// summary /// 初始化 /// /summary /// returns/returns protected override async Task OnInitializedAsync() {currentTheme await JSRuntime.InvokeAsyncstring(window.func.getStorage, theme) ?? Light;await JSRuntime.InvokeVoidAsync(window.func.switchTheme); } ... 注意在Blazor调用JavaScript方法需要注入IJSRuntime接口inject IJSRuntime JSRuntime。新建一个变量currentTheme在生命周期函数初始化的时候去调用JavaScript中的getStorage方法获取当前主题考虑到第一次访问的情况可以给一个默认值为Light表示白色主题然后再去调用switchTheme执行切换主题的方法。这样页面就会根据localStorage的值来确定当前的主题。... /// summary /// 切换主题 /// /summary private async Task SwitchTheme() {currentTheme currentTheme Light ? Dark : Light;await JSRuntime.InvokeVoidAsync(window.func.setStorage, theme, currentTheme);await JSRuntime.InvokeVoidAsync(window.func.switchTheme); } ... SwitchTheme()是切换主题的方法当我们点击input按钮时可以任意切换并且主题还要实时跟着变化。当点击按钮执行SwitchTheme()时候改变currentTheme的值然后将currentTheme传递给JavaScript方法setStorage最后再次执行切换主题的JavaScript方法即可。此时变量currentTheme也发挥了不少作用在小屏幕下会显示当前主题的名称Dark or Light可以直接将currentTheme在HTML中赋值即可。并且我们input是checkbox类型当是黑色主题的时候需要时选中的状态白色主题的时候不选中这里就可以利用checked属性这样写checked(currentTheme Dark)。nav classnavbardiv classcontainer...div classmenu navbar-right...input idswitch_default typecheckbox classswitch_default onchangeSwitchTheme checked(currentTheme Dark) /label forswitch_default classtoggleBtn/label/div/div /nav nav classnavbardiv classcontainer...div classmenu navbar-right...input idswitch_default typecheckbox classswitch_default onchangeSwitchTheme checked(currentTheme Dark) /label forswitch_default classtoggleBtn/label/div/div /nav nav classnavbar-mobilediv classcontainerdiv classnavbar-headerdivNavLink classmenu-item href MatchNavLinkMatch.All????阿星Plus/NavLinkNavLink onclickSwitchThemenbsp;·nbsp;currentTheme/NavLink/divdiv classmenu-toggle onclickToggleNavMenu#9776; Menu/div/divdiv classmenu NavMenuCssClass.../div/div /nav OK搞定快去试试吧。优化代码现在看起来乱乱的并且设置获取localStorage属于公共的方法说不定以后也能用到我们将其封装一下便于日后的调用不然要写好多重复的代码。在Blazor项目根目录添加文件夹Commons在文件夹下添加一个Common.cs目前用到了IJSRuntime用构造函数注入然后写几个公共的方法。//Common.cs using Microsoft.JSInterop; using System.Threading.Tasks;namespace Meowv.Blog.BlazorApp.Commons {public class Common{private readonly IJSRuntime _jsRuntime;public Common(IJSRuntime jsRuntime){_jsRuntime jsRuntime;}/// summary/// 执行无返回值方法/// /summary/// param nameidentifier/param/// param nameargs/param/// returns/returnspublic async ValueTask InvokeAsync(string identifier, params object[] args){await _jsRuntime.InvokeVoidAsync(identifier, args);}/// summary/// 执行带返回值的方法/// /summary/// typeparam nameTValue/typeparam/// param nameidentifier/param/// param nameargs/param/// returns/returnspublic async ValueTaskTValue InvokeAsyncTValue(string identifier, params object[] args){return await _jsRuntime.InvokeAsyncTValue(identifier, args);}/// summary/// 设置localStorage/// /summary/// param namename/param/// param namevalue/param/// returns/returnspublic async Task SetStorageAsync(string name, string value){await InvokeAsync(window.func.setStorage, name, value);}/// summary/// 获取localStorage/// /summary/// param namename/param/// returns/returnspublic async Taskstring GetStorageAsync(string name){return await InvokeAsyncstring(window.func.getStorage, name);}} } 然后需要在Program.cs中注入。using Meowv.Blog.BlazorApp.Commons; using Microsoft.AspNetCore.Components.WebAssembly.Hosting; using Microsoft.Extensions.DependencyInjection; using System; using System.Net.Http; using System.Threading.Tasks;namespace Meowv.Blog.BlazorApp {public class Program{public static async Task Main(string[] args){var builder WebAssemblyHostBuilder.CreateDefault(args);builder.RootComponents.AddApp(app);builder.Services.AddTransient(sp new HttpClient { BaseAddress new Uri(builder.HostEnvironment.BaseAddress) });builder.Services.AddSingleton(typeof(Common));await builder.Build().RunAsync();}} } 紧接着在_Imports.razor中注入使用Commoninject Commons.Common Common。改造一下Header.razor全部代码如下headernav classnavbardiv classcontainerdiv classnavbar-header header-logoNavLink classmenu-item href/ MatchNavLinkMatch.All????阿星Plus/NavLink/divdiv classmenu navbar-rightNavLink classmenu-item hrefpostsPosts/NavLinkNavLink classmenu-item hrefcategoriesCategories/NavLinkNavLink classmenu-item hreftagsTags/NavLinkNavLink classmenu-item apps hrefappsApps/NavLinkinput idswitch_default typecheckbox classswitch_default onchangeSwitchTheme checked(currentTheme Dark) /label forswitch_default classtoggleBtn/label/div/div/navnav classnavbar-mobilediv classcontainerdiv classnavbar-headerdivNavLink classmenu-item href MatchNavLinkMatch.All????阿星Plus/NavLinkNavLink onclickSwitchThemenbsp;·nbsp;currentTheme/NavLink/divdiv classmenu-toggle onclickToggleNavMenu#9776; Menu/div/divdiv classmenu NavMenuCssClassNavLink classmenu-item hrefpostsPosts/NavLinkNavLink classmenu-item hrefcategoriesCategories/NavLinkNavLink classmenu-item hreftagsTags/NavLinkNavLink classmenu-item apps hrefappsApps/NavLink/div/div/nav /headercode {/// summary/// 下拉菜单是否打开/// /summaryprivate bool collapseNavMenu false;/// summary/// 导航菜单CSS/// /summaryprivate string NavMenuCssClass collapseNavMenu ? active : null;/// summary/// 显示/隐藏 菜单/// /summaryprivate void ToggleNavMenu() collapseNavMenu !collapseNavMenu;/// summary/// 当前主题/// /summaryprivate string currentTheme;/// summary/// 初始化/// /summary/// returns/returnsprotected override async Task OnInitializedAsync(){currentTheme await Common.GetStorageAsync(theme) ?? Light;await Common.InvokeAsync(window.func.switchTheme);}/// summary/// 切换主题/// /summaryprivate async Task SwitchTheme(){currentTheme currentTheme Light ? Dark : Light;await Common.SetStorageAsync(theme, currentTheme);await Common.InvokeAsync(window.func.switchTheme);} }实现过程比较简单相信你绝对学会了。本篇就到这里了未完待续...开源地址https://github.com/Meowv/Blog/tree/blog_tutorial