学习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。
明天的目标,跟着文档实现本地开发。

阅读如遇样式问题,请前往个人博客浏览: https://www.raokun.top
拥抱ChatGPT:https://ai.terramours.site
开源项目地址:https://github.com/firstsaofan/TerraMours