登录界面

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

antdesign入口文件_antdesign入口文件

<div style="padding:30px">
    <Card Bordered="true" Title=@("用户登录") Style="width:400px" Hoverable="true">
        <Body>
            <Form Model="@SysLoginUserData" OnFinish="HandleSubmit">
                <FormItem>
                    <AntDesign.Input Placeholder="请输入用户名" Size="large" @bind-Value="@context.UserName">
                        <Prefix><Icon Type="user" /></Prefix>
                    </AntDesign.Input>
                </FormItem>
                <FormItem>
                    <AntDesign.Input Placeholder="请输入密码" Size="large" @bind-Value="@context.Password" Type="password">
                        <Prefix><Icon Type="lock" /></Prefix>
                    </AntDesign.Input>
                </FormItem>
                <Space Direction="vertical" Style="width:100%">
                    <SpaceItem>
                        <Button Type="primary" HtmlType="submit" Class="submit" Size="large" Block>登 录</Button>
                    </SpaceItem>
                    <SpaceItem>
                        <div class="other">
                            <a class="register" href="#">注册账户</a>
                            <a style="float: right;">
                                忘记密码
                            </a>
                        </div>
                    </SpaceItem>
                </Space>
            </Form>
        </Body>
    </Card>
</div>

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

@inherits LayoutComponentBase
<Layout Style="@Style" Class="site-layout-background-img">
    <Content Style="padding: 24px;min-height: 280px;">
        @Body
    </Content>
    <NavFooter Style="background:rgb(0 0 0 / 0.00);text-align: center;"></NavFooter>
</Layout>

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

antdesign入口文件_antdesign入口文件_02

登录实体

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

antdesign入口文件_登录界面_03

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

namespace Caviar.Models.SystemData
{
    /// <summary>
    /// 系统用户
    /// </summary>
    public partial class Sys_LoginUserData
    {
        /// <summary>
        /// 用户名
        /// </summary>
        [Required(ErrorMessage = "请输入您的用户名")]
        public string UserName { get; set; }
        /// <summary>
        /// 用户密码
        /// </summary>
        [Required(ErrorMessage = "请输入您的密码")]
        public string Password { get; set; }
    }
}

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

antdesign入口文件_antdesign入口文件_04

antdesign入口文件_System_05

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

数据处理

点击登录后，我们会触发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("登录失败，请检查用户名或密码");
            }
            
        }
    }
}

antdesign入口文件_登录界面_06

antdesign入口文件_c#_07

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