接着上篇，本篇开始讲下实现登录窗口，先看下大概的效果图：
打开的效果，没有美工美化
点登录校验得到不能为空
我在做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 框架，目前登录后台功能还没实现好，所以这块还没完成，等完成了发布新的给大家看。