【2】Blazor目录结构解读

原创

已于 2024-07-29 18:24:25 修改 · 1.4k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#Blozar #C#

于 2024-07-29 17:34:25 首次发布

【2】Blazor目录结构解读

一、目录结构图
二、目录结构详解
三、主要指令
四、文件渲染页面结构图

一、目录结构图

在这里插入图片描述

二、目录结构详解

Properties

LaunchSetting.json

设置各个运行环境的端口等信息

wwwroot

在 Blazor Server 应用程序中，wwwroot 目录用于存放静态文件。这些文件包括 CSS 样式表、JavaScript 文件、图像和其他不需要服务器端处理的资源。当应用程序运行时，这些文件可以直接从服务器发送到客户端浏览器。

Data

在 Blazor Server 应用程序中，Data 目录通常用于存放与数据相关的代码和文件。这些文件和代码可能包括数据模型、数据访问服务、上下文类等。

WeatherForecast.cs

这是一个示例数据模型文件，用于定义应用程序中的数据结构

public class WeatherForecast
{
   
   
    public DateTime Date {
   
    get; set; }
    public int TemperatureC {
   
    get; set; }
    public string Summary {
   
    get; set; }

    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}

WeatherForecastService

这是一个示例数据服务文件，提供获取和处理数据的方法

public class WeatherForecastService
{
   
   
    private static readonly string[] Summaries = new[]
    {
   
   
        "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
    };

    public Task<WeatherForecast[]> GetForecastAsync(DateTime startDate)
    {
   
   
        var rng = new Random();
        return Task.FromResult(Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
   
   
            Date = startDate.AddDays(index),
            TemperatureC = rng.Next(-20, 55),
            Summary = Summaries[rng.Next(Summaries.Length)]
        }).ToArray());
    }
}

Pages

在 Blazor Server 应用程序中，Pages 目录主要用于存放页面组件。这些页面组件是应用程序的主要用户界面部分，通常用 Razor 文件（.razor 文件）编写。每个 Razor 文件代表一个页面或视图，并可以包含 HTML、C# 代码和 Razor 语法。

_Host.cshtml

@page "/"
@namespace TrendSimulation.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
//设置基础页面样式框架
@{
   
   
    Layout = "_Layout";
}
//引入App组件
<component type="typeof(App)" render-mode="ServerPrerendered" />

_Layout.cshtml

@using Microsoft.AspNetCore.Components.Web
@namespace TrendSimulation.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
	//指定字符编码为 UTF-8，支持多种语言字符。
    <meta charset="utf-8" />
    //设置视口，使页面在不同设备上具有适应性。
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    //设置基 URL，帮助解析相对路径。
    <base href="~/" />
    // 引入 Bootstrap CSS 文件，提供页面的样式。
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    //引入自定义 CSS 文件，应用额外的样式。
    <link href="css/site.css" rel="stylesheet" />
    //引入另一个自定义 CSS 文件，提供额外的样式。
    <link href="TrendSimulation.styles.css" rel="stylesheet" />
    //插入 HeadOutlet 组件，它用于 Blazor 的服务器端渲染模式，
    //可以插入动态的 <title> 或 <meta> 标签。render-mode="ServerPrerendered" 表示服务器预渲染组件。
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
	//渲染主内容区域，这将插入各个页面的主体内容。
    @RenderBody()
	//显示 Blazor 错误 UI 的容器。它会在发生错误时显示一个用户友好的错误消息。
    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details