一起学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) 中引入静态文件:

"_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />

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

@using AntDesign

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

"@typeof(MainLayout).Assembly">
    "routeData">
        "routeData" DefaultLayout="@typeof(MainLayout)" />
    
    
        "@typeof(MainLayout)">
            "404" />
        
    


   <-- 在这里添加 

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

先看下Login.Razor的代码

@page "/login"
@layout LoginLayout
@using System.ComponentModel.DataAnnotations;
@using System.Text.Json;
@inject TokenHttpClient TokenHttp

"@model"
      LabelCol="new ColLayoutParam { Span = 8 }"
      WrapperCol="new ColLayoutParam { Span = 16 }"
      OnFinish="OnFinish"
      OnFinishFailed="OnFinishFailed">
    "用户名">
        "@context.Username" />
    
    "密  码">
        "@context.Password" />
    
    "new ColLayoutParam{ Offset = 8, Span = 16 }">
            "context.RememberMe">Remember me
        
    "new ColLayoutParam{ Offset = 8, Span = 16 }">
        "@ButtonType.Primary" HtmlType="submit">
            登录
        
    

@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

    "overflow: auto; height: 100vh; width:100vw; position: fixed; left: 0; background:#808080 ">
        
"margin:40vh auto auto 40vw;width:20vw;">
            @Body
        
    

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

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

builder.Services.AddTransient();

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

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

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