Blazor + Ant Design + .NET 5快速开发框架（6）AntDesignAdmin登录界面

登录界面设计时候想用一个背景图然后加一个登录框即可，简单大气，所以我们先设计一个登录框，用到了AntDesign的卡片，然后上面加入用户名和密码的输入框，加一个按钮即可，我们来看下效果。

    
        
            

                
                    
                        
                    
                
                
                    
                        
                    
                
                
                    
                        登 录
                    
                    
                        
                            注册账户
                            
                                忘记密码
                            
                        
                    
                
            
        
    

然后由于想用图片当背景，所以我们不能用MainLabout了，我们新创建一个EmptyLayout，用来创建一个空白背景，然后我想的是把图片的路径配置到appsetting.json，读取即可。我们后边可能在注册、找回密码等界面用到

@inherits LayoutComponentBase

    
        @Body
    
    

接下来就是把背景和登录框组合起来，效果图，一个简易的登录界面就出来了，接下来处理登录的数据。

登录界面设计到了数据存储，所以把项目结构换了一下，加入models用于储存数据实体，因为没有涉及到很深，所以先简单创建一个登录所用的类。

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Caviar.Models.SystemData
{
    /// 

    /// 系统用户
    /// 
    public partial class Sys_LoginUserData
    {
        /// 

        /// 用户名
        /// 
        [Required(ErrorMessage = "请输入您的用户名")]
        public string UserName { get; set; }
        /// 

        /// 用户密码
        /// 
        [Required(ErrorMessage = "请输入您的密码")]
        public string Password { get; set; }
    }
}

AntDesign直接支持Required，所以我们只要设置好登录必填项即可，我们看下Required的效果

可以将我们想提示的信息直接显示出来。当然，也可以限制数据长度等。

点击登录后，我们会触发HandleSubmit事件，由于还没有弄后台，所以我们简单用代码判断一下。如果用户名为admin，密码为123456，我们就使用NavigationManager.NavigateTol来定位到首页。如果不对就提示登录失败。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using AntDesign;
using Caviar.Models.SystemData;
using Microsoft.AspNetCore.Components;

namespace Caviar.UI.Shared
{
    partial class NavLogin
    {
        public Sys_LoginUserData SysLoginUserData { get; set; } = new Sys_LoginUserData();
        [Inject] public NavigationManager NavigationManager { get; set; }

        [Inject]
        MessageService _message { get; set; }

        public void HandleSubmit()
        {
            if (SysLoginUserData.UserName == "admin" && SysLoginUserData.Password == "123456")
            {
                NavigationManager.NavigateTo("/");
                return;
            }
            else
            {
                _message.Error("登录失败，请检查用户名或密码");
            }
            
        }
    }
}

如果要写后台的话，我们需要单独写webApi，这个Blazor WebAssembly App项目其实是前后端分离的，如果不分离就应该用Blazor Server，但是服务端渲染还是又很多弊端的，需要资源等，网络环境不好的时候，signalr就断断续续的，Blazor WebAssembly App可以离线访问部分。