一起学Blazor WebAssembly 开发（3）

2021-01-24 01:15

阅读：805

标签：its tco margin ogr outer bind 代码 edit 它的

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

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

点登录校验得到不能为空

我在做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

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

一起学Blazor WebAssembly 开发（3）

标签：its tco margin ogr outer bind 代码 edit 它的

原文地址：https://www.cnblogs.com/wcoolly/p/13269455.html

上一篇：Js中的new原理及其实现

下一篇：CTFHub--HTTP协议-请求方式

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：一起学Blazor WebAssembly 开发（3）
文章链接：http://soscw.com/index.php/essay/46107.html

亲，登录后才可以留言！

一起学Blazor WebAssembly 开发（3）

评论

热门文章

推荐文章

最新文章

置顶文章