从零开始一起学BlazorWebAssembly开发(3)

接着上篇,本篇开始讲下实现登录窗口,先看下大概的效果图:

从零开始一起学Blazor WebAssembly 开发(3)

打开的效果,没有美工美化

从零开始一起学Blazor WebAssembly 开发(3)

点登录校验得到不能为空

我在做blazor时用到了一个ui框架,这个框架名叫Ant Design blazor(https://gitee.com/ant-design-blazor/ant-design-blazor),安装步骤如下:

1、打开项目里的Nuget,查找 AntDesign ,找到后安装

2、在项目中(Program.cs)注册:

services.AddAntDesign();

3、在 wwwroot/index.html(WebAssembly) 或 Pages/_Host.razor(Server) 中引入静态文件:

<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" /> <script src="_content/AntDesign/js/ant-design-blazor.js"></script>

4、在 _Imports.razor 中加入命名空间

@using AntDesign

5、为了动态地显示弹出组件,需要在 App.razor 中添加一个 <AntContainer /> 组件。

<Router AppAssembly="@typeof(MainLayout).Assembly"> <Found Context="routeData"> <RouteView RouteData="routeData" DefaultLayout="@typeof(MainLayout)" /> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> <Result Status="404" /> </LayoutView> </NotFound> </Router> <AntContainer /> <-- 在这里添加 

以上安装完成AntDesign Blazor了就。然后就可以使用他的组件了。

先看下Login.Razor的代码

@page "/login" @layout LoginLayout @using System.ComponentModel.DataAnnotations; @using System.Text.Json; @inject TokenHttpClient TokenHttp <Form Model="@model" LabelCol="new ColLayoutParam { Span = 8 }" WrapperCol="new ColLayoutParam { Span = 16 }" OnFinish="OnFinish" OnFinishFailed="OnFinishFailed"> <FormItem Label="用户名"> <Input @bind-Value="@context.Username" /> </FormItem> <FormItem Label="密 码"> <InputPassword @bind-Value="@context.Password" /> </FormItem> <FormItem WrapperCol="new ColLayoutParam{ Offset = 8, Span = 16 }"> <Checkbox @bind-Value="context.RememberMe">Remember me</Checkbox> </FormItem> <FormItem WrapperCol="new ColLayoutParam{ Offset = 8, Span = 16 }"> <Button Type="@ButtonType.Primary" HtmlType="submit"> 登录 </Button> </FormItem> </Form> @code { public class UserLoginDto { [Required(ErrorMessage ="用户名不能为空")] public string Username { get; set; } [Required(ErrorMessage = "密码不能为空")] public string Password { get; set; } public bool RememberMe { get; set; } = false; } private UserLoginDto model = new UserLoginDto(); private void OnFinish(EditContext editContext) { HttpResponseMessage message = TokenHttp.PostAsJsonAsync(TokenHttpClient.RequesUrl + "", model).Result; //Todo  } private void OnFinishFailed(EditContext editContext) { //Todo  } }

代码我们主要关注几个地方:

1、Login.Razor用了自己独立的Layout,叫LoginLayout,它的代码如下:

@inherits LayoutComponentBase <Layout> <Content Style="overflow: auto; height: 100vh; width:100vw; position: fixed; left: 0; background:#808080 "> <div style="margin:40vh auto auto 40vw;width:20vw;"> @Body </div> </Content> </Layout>

LoginLayout实现了一个用css控制登录框居中的效果。

2、TokenHttpClient 类,本来用HttpClient也是能实现与后台交互的,但是由于我在项目用到了一个token需要在一定条件下刷新的功能,就做了个继承自HttpClient的类TokenHttpClient,如果没有这种特殊需求,这块可以不用,可以直接用HttpClient。用了这个类那么在Program.cs里就要添加

builder.Services.AddTransient<TokenHttpClient>();

 

3、重点请看UserLoginDto,这是数据传输对象,这里用到的数据校验方式是否似曾相识,没错,后台开发时经常用到这种验证的方法。这里在blazor里可以直接这样用。效果就是上边截图显示的那种效果。是不是很优雅。比js那种乱七八糟的舒服多了吧。

4、往后台交互提交数据是在OnFinish里,数据通过HttpClient直接可以往后台提交。(不是Ajax哦)

以上就是本篇实现的东西,由于后台采用的Abp vnext 框架,目前登录后台功能还没实现好,所以这块还没完成,等完成了发布新的给大家看。

原文链接:https://www.cnblogs.com/wcoolly/p/13269455.html

原创文章,作者:摘自网络,如若转载,请注明出处:https://www.15cov.cn/

本页面内容由网络采集 生成,若侵权请及时联系删除。1606107060@qq.com

发表评论

邮箱地址不会被公开。 必填项已用*标注