翼度科技»论坛 编程开发 .net 查看内容

Blazor Server 从头开始:01 创建项目

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
最近手痒,正好阳性在家,就打算把代码再捡起来看看,学习下这些年来都有什么新东西出现。就看到了微软出的.Net 7 Blazor相关的内容。
走了一遍微软官方的教程,发现用处不大,(可能是年纪已高,也可能是断代太久),所以给这段时间立个小目标,从头开始学习一下这个Blazor。
有关Blazor Server 和Web WebAssembly 的区别已经有大把的人在说,就不再赘述(其实对于新手来说,选定一个研究就是了,没必要纠结)。
 
准备工作


  • 根据自己的操作系统,从官网下载最新版本的 Visual Studio (我的是Mac Arm64 17.4 版本);
  • 在Visual Studio安装程序中,将 Web相关的组件都够选上(因为我已安装好,不想卸载重装,就不罗列具体哪些组件了)
  • 等待安装程序完成更新后,即可。
创建项目


  • 打开安装好的Visual Studio,选择「新建」
  • 依次选择「Web控制台 -- 应用」-->「ASP.NET Core -- Blazor Server应用空 (C#」,点击继续
  • 目标框架「.Net 7」,取消勾选「高级:配置HTTPS」,点击继续
  • 输入项目名称(这里我使用“BlazorServerDemo”),选择位置文件夹(这里我使用默认),点击创建
  • Visual Studio 会自动打开项目窗口,点击上方「调试 -- 开始调试」,此时弹出浏览器窗口,并显示 “Hello World”字样
  • 创建项目完成
  

项目结构

默认自动创建的项目结构:

  • Pages                  视图文件,Razor组件

    • _Host.cshtml    实现为 Razor 页面的应用的根页面,指定根 App 组件 (App.razor) 的呈现位置。
    • Index.razor       Razor组件

  • Properties

    • launchSettings.json

  • wwwroot              静态文件

    • CSS

      • site.css


  • _Imports.razor       包括要包含在应用组件 (.razor) 中的常见 Razor 指令,如用于命名空间的 @using 指令。
  • App.razor              应用的根组件,用于使用 Router 组件来设置客户端路由。appsettings.json    基本应用参数

    • appsettings.Development.json

  • MainLayout.razor   UI 布局
  • Program.cs           应用的入口点,用于设置 ASP.NET Core 主机 并包含应用的启动逻辑,其中包括服务注册和请求处理管道配置
自定义创建的其他目录:

  • Data        向应用的组件提供示例数据。
  • Shared     包含共享组件和样式表
  

总结思考


  •  .razor 文件是Razor组件文件,内涵描述组件的所有内容(HTML以及对应的逻辑代码)
  • Blazor 相对于其他Web框架而言,比较友好的是可以直接使用C#写页面逻辑
  • 与当前很多应用较广泛的前端框架(JS语言)类似的组件编写风格
  • 空白模板相对更适合作为Blazor项目的起点,而不是Blazor Server模板

来源:https://www.cnblogs.com/skyler/archive/2022/12/26/17005644.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具