一起学Blazor WebAssembly 开发

Posted 2020-12-16 颗粒归仓

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

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

点登录校验得到不能为空

我在做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 框架，目前登录后台功能还没实现好，所以这块还没完成，等完成了发布新的给大家看。