学习MASA第一天：MASA Blazor TEST项目创建

学习,masa,第一天,blazor,test,项目,创建 · 浏览次数 : 84

小编点评

**MASA第一天学习指南** **步骤一：下载框架代码** * 从 GitHub 上下载 Masa.Blazor 项目的代码：`git clone -r masabp/Masa.Blazor.git` **步骤二：创建测试项目** * 创建一个新的测试项目： * 创建一个新文件名为 `TestBlazor.cs`。 * 在 `TestBlazor.cs` 中添加以下代码： ```csharp using Masa.Blazor.Core; using Masa.Blazor.Pages; namespace Masa.TestBlazor { public class TestBlazor : PageComponent { // 页面成员变量 private NavigationManager Navigation { get; set; } protected override void OnInitialized() { Navigation.NavigateTo(Navigation.BaseUri); } } } ``` **步骤三：安装依赖项** * 在 `Microsoft.Extensions.DependencyInjection` 中添加以下依赖项： ```csharp .NET SDK 6.0 .NET Blazor .NET Wasm ``` **步骤四：运行测试项目** * 启动测试项目： * 使用 `dotnet run` 命令运行测试项目。 * 运行时会提醒您安装 SSL 证书。 * 浏览器将显示页面，其中页面使用 Razor 语法编写。 **步骤五：登录页面** * 确保您已在 Google Chrome 中打开 Edge浏览器。 * 使用以下 URL 在地址栏中打开页面：`/pages/authentication/Login-v2` * 输入您的用户名和密码，并点击登录按钮。 **注意：** * 在登录页面中，您可能需要填写一些个人信息，例如用户名和密码。 * 您可以通过 `Navigation.NavigateTo` 方法实现页面跳转。 * 您可以通过 `PageComponent` 的 `OnInitialized` 方法在页面加载后执行一些操作。

正文

学习MASA第一天：MASA Blazor TEST项目创建

从今天开始，学习MASA框架，目标是基于MASA做一套开源项目。

第一天，从下载源码开始![443684122256924]

我们今天先把框架源码下载下来，以便后面每天的学习和对照。
源码地址：Masa.Blazor
源码我们后面再看，先跟着github上的readme，快速上手，创建测试项目

创建测试项目

开发环境搭建
安装.NET SDK 6.0
安装Visual Studio Code或Visual Studio 2022
对应的环境我们都有，继续

CLI
Install Template

dotnet new --install Masa.Template

我们跟着这一步，安装依赖

Create Project

dotnet new masabp -o Masa.Test

Blazor WebAssembly

dotnet new masabp --mode Wasm -o Masa.TestWasm

Blazor RCL

dotnet new masabp --mode ServerAndWasm -o Masa.TestRcl

Go to the Server project directory

cd Masa.Test\Masa.Test.Server

Run

dotnet run

ok,test项目启动成功，运行时系统会提醒安装ssl证书，一直同意就可以。
不过谷歌浏览器提示：您的连接不是私密连接
解决办法：用Edge浏览器打开。

运行结果：
masatest项目运行截图

页面都是用raror写的，现在看起来还挺费劲的，对照代码，看看登录页的实现

登录页页面：

代码部分:

@page "/pages/authentication/Login-v2"
@layout EmptyLayout
<MRow Class="max-height ma-0">
    <MCol Md=4 Sm=12 Class="neutral-lighten-5">
        <image class="ml-12 mt-12" style="height:40px;"
            src="https://cdn.masastack.com/stack/images/logo/MASAStack/logo-h-en.png?x-oss-process=image/resize,w_200">
        </image>
        <div class="d-flex pb-12" style="height: calc(100% - 88px);">
            <div style="width:450px;" class="ma-auto">
                <h3 class="neutral-lighten-1--text">让变化更简单</h3>
                <div class="mt-12 neutral-lighten-1--text">
                    让变化更简单，让视觉更美好，让体验更丰富，欢迎来到Masa产品系列。
                </div>
                <image class="mt-12" src="/img/login/left.svg"></image>
            </div>
        </div>
    </MCol>
    <MCol Md=8 Sm=12 Class="fill-lighten-1 block-center">
        <Masa.Test.Pages.Authentication.Components.Login HideLogo Elevation="0" Width="500"
            CreateAccountRoute="pages/authentication/register-v2"
            ForgotPasswordRoute="pages/authentication/forgot-password-v2">
        </Masa.Test.Pages.Authentication.Components.Login>
    </MCol>
</MRow>

<a href="https://beian.miit.gov.cn/" target="_blank" class="neutral-lighten-3--text"
    style="position:absolute;bottom:48px;margin-left:63%;text-decoration:none;font-size:14px;">浙ICP备2021013592号-1</a>


@code {
    [Inject]
    public NavigationManager Navigation { get; set; } = default!;

    public void Login(MouseEventArgs args)
    {
        Navigation.NavigateTo(Navigation.BaseUri);
    }
}

其中关于Navigation.NavigateTo 的用法，我问了chatgpt，给出的答案是：
chatgpt回答

可见test项目中大部分的页面只是实现了跳转，没有实现对逻辑上的基本判断。
不过demo项目已经给我们展示了masa团队在项目管理系统框架上的内容是相当丰富的，页面UI也很符合企业的审美。
转眼已经十一点半了，时候不早了，我们明天继续。明天继续学习masa。
明天的目标，跟着文档实现本地开发。