• 一起学Blazor WebAssembly 开发(2)


    上篇文章讲了Blazor的两种模式的区别及各自的使用场景,本篇就开始学习WebAssembly模式,本篇主要学习的是创建项目及认识项目结构:

    1. 创建项目
    从零开始一起学Blazor WebAssembly 开发(2)

     

    从零开始一起学Blazor WebAssembly 开发(2)

    选择Blazor应用

    从零开始一起学Blazor WebAssembly 开发(2)

     

    从零开始一起学Blazor WebAssembly 开发(2)

    选择WebAssemblyApp,并且勾选PWA,之后的文章会说到PWA

    从零开始一起学Blazor WebAssembly 开发(2)

    创建成功后,运行项目,成功运行

    1. 认识项目结构
    从零开始一起学Blazor WebAssembly 开发(2)

    项目结构

    创建好的项目分成以上几个区域,wwwroot,Pages,Shared,_Imports.razor,App.razor,Program,以下分别介绍下各个部分,这里是我个人的对这个项目的理解,有不对的欢迎指正。

    从零开始一起学Blazor WebAssembly 开发(2)

    Program

    项目运行开始是从Program进来的,builder.RootComponents.Add<App>("app");这里的‘App’类 对应了App.Razor, 括号里的app 对应了 wwwroot下index.html里的<app>标签。名称要一致。index.html算是整个单页应用最大的母版。

    从零开始一起学Blazor WebAssembly 开发(2)

    index.html

    日常使用的通用的js都写在这个index.html里

    从零开始一起学Blazor WebAssembly 开发(2)

    App.Razor

    App.Razor里主要看一个地方就行,就是默认Layout的设置,这里默认的是MainLayout,如果Pages里的Razor 不做特殊声明的话,就是默认使用这个。如果想使用别的,就可以代码头部加@layout LoginLayout (这里是举例,不一定叫LoginLayout)

    从零开始一起学Blazor WebAssembly 开发(2)

     

    @page 代表的单页应用里的页面路径

    从零开始一起学Blazor WebAssembly 开发(2)

     

    从代码中可以看到大部分之前用js来做的这里用到了C#来写了。比如这里的获取天气信息json数据的,这里用了HttpClient读取。代码很清晰,对于.net开发人员确实是很友好。

    从零开始一起学Blazor WebAssembly 开发(2)

    _imports.razor

    _imports.razor里放了一些引用的命名空间。

    以上来块,整个页面的结构是index.html->Layout->Page 一层层嵌套而成。页面之间跳转使用page里的@page来设置路径。不同页面想用不同的layout可以单独设置,很多逻辑可以用C#来实现。这是默认项目给到的东西,下篇将会结合实际项目登录功能讲一个结合js使用的功能。

  • 相关阅读:
    [leetcode] First Missing Positive
    [leetcode] Can Place Flowers
    [leetcode] Maximum Product of Three Numbers
    [leetcode] Generate Parentheses
    蓝桥杯 PREV-7 连号区间数
    蓝桥杯 PREV-3 带分数(dfs)
    蓝桥杯 PREV-2 打印十字图
    团体程序设计天梯赛 L3-016 二叉搜索树的结构 (30分)
    团体程序设计天梯赛 L3-020 至多删三个字符 (30分)(DP)
    团体程序设计天梯赛 L3-011 直捣黄龙 (30分)
  • 原文地址:https://www.cnblogs.com/wcoolly/p/13263228.html
Copyright © 2020-2023  润新知