企业官网建设流程全解析

乐清市做淘宝网站公司,个人网站可以做商业用途吗,wordpress 图文展示,微信公众上传wordpress由事件监听和嵌套路由布局。文章通过代码示例演示了用户管理、产品展示等典型场景的实现方式#xff0c;完整呈现了Blazor路由从基础配置到复杂应用的全套解决方案。1、什么是 Blazor 路由#xff1f;Blazor 路由是一个将 URL 映射到特定组件的系统#xff0c;允许构建单页应…由事件监听和嵌套路由布局。文章通过代码示例演示了用户管理、产品展示等典型场景的实现方式完整呈现了Blazor路由从基础配置到复杂应用的全套解决方案。1、什么是 Blazor 路由Blazor 路由是一个将 URL 映射到特定组件的系统允许构建单页应用SPA而无需页面刷新。核心组件Router 组件管理路由匹配和导航Route 属性定义组件与URL的映射关系NavigationManager提供编程式导航能力2、基础路由配置1. 应用级路由设置一般在app.razor文件可以看到路由视图的定义这个称之为路由模板当找到相匹配的视图时会在Found/Found节点里面渲染出来如果没有的话会在NotFound/NotFound节点里面渲染当然你也可以自定义一个404的页面。里面的DefaultLayout表示默认布局组件Layout表示指定的布局组件这些在前面的布局里面讲到过。image2. 页面路由定义在Blazor中使用 page “url路径” 来表示路由地址比如/home那么该页面的请求地址就是域名:端口号/home一个组件也可以设置多个路由访问。!-- Pages/Index.razor --page /page /homeh1欢迎来到首页/h1p当前时间: DateTime.Now/pcode {protected override void OnInitialized(){Console.WriteLine(首页初始化完成);}}image3、路由参数1. 基本路由参数设置路由参数只需要两步就可以设置路由参数1在page 后面的url中使用{路由参数名}的占位符格式标明2在code里面申名一个带有[Parameter]特性的属性这里是不分大小写的userName也可以获取到!-- Pages/UserProfile.razor --page /user/{UserName}h1用户资料/h1p用户ID: UserName/pcode {[Parameter]public string UserName { get; set; }protected override void OnParametersSet(){// 参数变化时执行Console.WriteLine($加载用户 {UserName} 的资料);}}http://localhost:端口/user/码农刚子image (2)2. 路由约束{路有参数名:参数类型} 表示路由约束可以限定参数的类型当参数类型不匹配时,就会跳到错误页面!-- Pages/Product.razor --page /product/{Id:int}h1产品页面/h1if (Id 0){p产品ID: Id/p}code {[Parameter]public int Id { get; set; }}http://localhost:端口/product/100image (3)http://localhost:端口/product/100bimage (1)约束可用参数类型表约束示例匹配项示例固定条件区域性匹配bool{active:bool}true、FALSE否datetime{dob:datetime}2016-12-31、2016-12-31 7:32pm是decimal{price:decimal}49.99、-1,000.01是double{weight:double}1.234、-1,001.01e8是float{weight:float}1.234、-1,001.01e8是guid{id:guid}00001111-aaaa-2222-bbbb-3333cccc4444、{00001111-aaaa-2222-bbbb-3333cccc4444}否int{id:int}123456789、-123456789是long{ticks:long}123456789、-123456789是nonfile{parameter:nonfile}不是 BlazorSample.styles.css不是 favicon.ico是3. 可选参数!-- Pages/Product.razor --page /product/{Id:int}page /product/{Category}/{Id:int}h1产品页面/h1if (string.IsNullOrEmpty(Category)){p所有产品/p}else{p分类: Category/p}if (Id 0){p产品ID: Id/p}code {[Parameter]public string? Category { get; set; }[Parameter]public int Id { get; set; }}4. 捕获所有路由!-- Pages/CatchAll.razor --page /docs/{*path}h1文档查看器/h1p请求的路径: Path/pcode {[Parameter]public string? Path { get; set; }}4、编程式导航1. 使用 NavigationManager!-- Pages/NavigationDemo.razor --page /navigationinject NavigationManager Navigationh1导航演示/h1button onclickGoToHome classbtn btn-primary返回首页/buttonbutton onclickGoToUserProfile classbtn btn-secondary查看用户资料/buttonbutton onclickGoBack classbtn btn-outline返回上一页/buttonbutton onclickOpenExternal classbtn btn-info打开外部链接/buttoncode {private void GoToHome(){Navigation.NavigateTo(/);}private void GoToUserProfile(){Navigation.NavigateTo(/user/123);}private void GoBack(){Navigation.NavigateTo(/previous-page);}private void OpenExternal(){Navigation.NavigateTo(https://www.hwtx.top, forceLoad: true);}}image (5)2. 带查询参数的导航!-- Pages/Search.razor --page /searchinject NavigationManager Navigationh1搜索页面/h1input bindsearchTerm placeholder输入搜索关键词 /button onclickPerformSearch classbtn btn-primary搜索/buttonif (!string.IsNullOrEmpty(SearchTerm)){p搜索关键词: SearchTerm/p}code {private string searchTerm string.Empty;[Parameter][SupplyParameterFromQuery(Name q)]public string? SearchTerm { get; set; }protected override void OnParametersSet(){if (!string.IsNullOrEmpty(SearchTerm)){searchTerm SearchTerm;}}private void PerformSearch(){var query System.Web.HttpUtility.ParseQueryString(string.Empty);query[q] searchTerm;Navigation.NavigateTo($/search?{query});}}image (6)5、高级路由功能1. 路由事件处理!-- Pages/RouteAwareComponent.razor --page /awareinject NavigationManager Navigationimplements IDisposableh1路由感知组件/h1p位置变化次数: locationChangeCount/pcode {private int locationChangeCount 0;protected override void OnInitialized(){Navigation.LocationChanged OnLocationChanged;}private void OnLocationChanged(object? sender, LocationChangedEventArgs e){locationChangeCount;Console.WriteLine($位置变化: {e.Location});StateHasChanged(); // 通知组件重新渲染}public void Dispose(){Navigation.LocationChanged - OnLocationChanged;}}6、布局和嵌套路由1. 多布局系统!-- Pages/Dashboard.razor --page /dashboardlayout MainLayouth1仪表板/h1inherits LayoutComponentBasediv classadmin-layoutnav classsidebarh3管理菜单/h3NavLink href/dashboard MatchNavLinkMatch.All仪表板/NavLinkNavLink href/users用户管理/NavLinkNavLink href/settings系统设置/NavLink/navmain classmain-contentBody/main/div2. 嵌套路由配置!-- Pages/Admin.razor --page /admin/*h1管理控制台/h1navNavLink href/admin/dashboard仪表板/NavLinkNavLink href/admin/users用户/NavLinkNavLink href/admin/settings设置/NavLink/navdiv classadmin-content!-- 嵌套路由内容 --/div7、完整示例应用1. 主布局和导航image (7)2. 导航菜单image (8)3. 用户管理页面!-- Pages/UserManagement.razor --page /userspage /users/{Action:string}/{Id:int}h1用户管理/h1if (Action edit Id 0){UserEditor UserIdId /}else if (Action create){UserCreator /}else{UserList /}code {[Parameter]public string? Action { get; set; }[Parameter]public int Id { get; set; }}h3编辑用户/h3p用户ID: UserId/pcode {[Parameter]public int UserId{get; set;}}h3添加用户/h3