ASP.NET Core MVC 从入门到精通之wwwroot和客户端库

news2024/11/18 20:02:53

随着技术的发展,ASP.NET Core MVC也推出了好长时间,经过不断的版本更新迭代,已经越来越完善,本系列文章主要讲解ASP.NET Core MVC开发B/S系统过程中所涉及到的相关内容,适用于初学者,在校毕业生,或其他想从事ASP.NET Core MVC 系统开发的人员。 经过前几篇文章的讲解,初步了解ASP.NET Core MVC项目创建,启动运行,以及命名约定,创建控制器,视图,模型,接收参数,传递数据,路由,页面布局等内容,今天继续讲解ASP.NET Core MVC wwwroot和客户端库等相关内容,仅供学习分享使用。

wwwroot文件夹概述

通过模板创建的ASP.NET Core MVC项目,会在程序根目录创建一个wwwroot文件夹。此文件夹又称为webroot文件夹,主要用于存放静态资源文件,如:html,JavaScript,css样式等内容。默认情况下,存在wwwroot文件夹下的所有静态资源都可以通过Http请求提供服务。在新的框架中,且只有存放于wwwroot目录下的静态资源可以直接通过Http访问,其他目录下的静态资源都将阻止。

静态资源中间件

为了使wwwroot目录下的静态资源能够被Http直接访问,需要在程序启动时【Program.cs】加载静态资源中间件。如下所示:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

//1. 启动静态资源服务中间件
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

静态资源示例

根据模板创建的ASP.NET Core MVC项目,直接运行,会通过路由设置,默认加载Home/Index页面,如下所示:

在wwwroot目录下,创建index.html,内容如下所示:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>静态首页</title>
</head>
<body>
    <h1>公子小六</h1>
    <h2>这是静态首页</h2>
</body>
</html>

在Program.cs启动文件中,添加默认文件中间件【app.UseDefaultFiles();】,如下所示:

var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}
app.UseHttpsRedirection();


//0. 允许默认文件映射
app.UseDefaultFiles();
//1. 启动静态资源服务中间件
app.UseStaticFiles();


app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

再次运行程序,会发现静态默认首页Index.html会替换之前默认的Home/Index路由视图,如下所示:

通过以上示例得出在结论:默认静态资源首页优先级高于默认路由。

修改默认资源名称

默认启动静态资源名称为Index.html,可以通过DefaultFilesOptions指定默认的首页加载顺序和名称。如下所示:

var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}
app.UseHttpsRedirection();

//默认文件启动项
DefaultFilesOptions options = new DefaultFilesOptions();
options.DefaultFileNames.Add("Hello.html");
//0. 允许默认文件映射
app.UseDefaultFiles(options);

//1. 启动静态资源服务中间件
app.UseStaticFiles();

app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

修改后再次启动,发现加载的依然是Index.html,而不是Hello.html。经过调试发现,DefaultFilesOptions的默认加载页面,会自动填充4个默认页面名称。后面添加的页面名称会在原有默认页面之后。如下所示:

 经过以上分析,删除默认的index.html页面,重新启动,默认首页变成了Hello.html页面,如下所示:

 静态资源文件除了可以通过静态资源中间件来实现【app.UseStaticFiles()】,还可以通过文件服务中间件来实现,如下所示:

FileServerOptions options = new FileServerOptions();
options.DefaultFilesOptions.DefaultFileNames.Add("Hello.html");
app.UseFileServer(options);

修改静态资源目录

默认的静态资源目录为wwwroot,一般也是通用的webroot文件夹名称,如果需要修改成其他目录 ,可以通过WebApplication.CreateBuilder(options)中的选项进行修改,接线所示:

WebApplicationOptions weboptions = new WebApplicationOptions() { WebRootPath="wwwroot2" };
var builder = WebApplication.CreateBuilder(weboptions);

修改后,重新运行程序,如下所示:

注意:为了让wwwroot2生效,必须修改原有的wwwrooot文件名称或者删除wwwroot文件夹,否则wwwroot2将不生效。

客户端库

客户端库主要是指JavaScript,CSS等第三方库,在ASP.NET Core MVC项目中,安装客户端库如下所示:

在项目名称处右键,选择添加,客户端库,如下所示:

 在打开的客户端库添加窗口,可以选择需要的库名称,进行搜索,然后进行安装即可,如下所示:

 安装成功后,在目标位置即可进行查看,如下所示:

以上就是关于ASP.NET Core MVC项目中wwwroot和客户端库相关内容。关于客户端库在安装成功后,如何在页面中引用,将在后续章节中进行介绍。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/451473.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

remvw布局

文章目录 rem&vw布局rem布局方式原理使用第三框架 vw布局方式原理使用 rem&vw混合布局方式vw方案案例 rem&vw布局 rem布局方式 原理 rem是相对于根元素&#xff08;html元素&#xff09;的字体大小来计算的&#xff0c;因此可以根据不同的屏幕尺寸和设备类型自动…

EF Core入门

文章目录 前言一、EF Core环境搭建二、基本的增删改查1.增加数据2.查询数据3.修改数据&#xff0c;删除数据 前言 EF Core是微软官方提供的ORM框架。EF Core不仅可以操作Microsoft SQL Server、MySQL、Oracle、PostgreSQL等数据库&#xff0c;而且可以操作Azure Cosmos DB等No…

【让你惊呼的“神器”,ChatGPT inside】

让你惊呼的“神器”&#xff0c;ChatGPT inside ChatGPT 的横空出世&#xff0c;已经搅动了整个科技圈。而它给自然语言处理领域带来的革命性变革&#xff0c;也为很多初创公司和开发者打开了新世界的大门。 在过去&#xff0c;自然语言处理技术通常只被各大科技巨头藏私&…

玩机搞机----root面具的安装 更新 隐藏root 德尔塔面具等等综合解析

目前的机型都是root面具&#xff0c;今天的帖子主要分析下面具的一些使用常识。一般面具如何使用一参考我前面的帖子。基本步骤都是解锁bl---修补boot---刷入boot----安装面具apk。但目前很多app会检测系统root&#xff0c;对于有些敏感类软件例如银行等等然后会检测当前系统ro…

C/C++每日一练(20230423)

目录 1. 多组输入求和 ※ 2. 螺旋矩阵 II &#x1f31f;&#x1f31f; 3. 路径交叉 &#x1f31f;&#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Golang每日一练 专栏 Python每日一练 专栏 C/C每日一练 专栏 Java每日一练 专栏 1. 多组…

用golang实现traceroute

Traceroute 概念 traceroute是一种网络诊断工具&#xff0c;通过traceroute可以诊断出本机到目的地IP之间的路由情况&#xff0c;例如路由跳数、延迟、是否可达等信息。该工具在linux环境下的命令是traceroute或者tracepath&#xff0c;在windows下命令是tracert。 工作原理…

动态路由四大天王:OSPF、RIP、IS-IS、BGP,收藏这篇文章足以!

在计算机网络中&#xff0c;OSPF、RIP、IS-IS、BGP 都是常见的路由协议。它们分别具有不同的特点和适用场景。本文将对这四种路由协议进行对比&#xff0c;以帮助读者更好地了解它们的优缺点和适用范围。 OSPF OSPF&#xff08;Open Shortest Path First&#xff09;是一种链路…

中文编程最高境界,不用编程,会用excel就会用,香不香?

一直以来&#xff0c;关于中文编程的争议从未消停过。现如今&#xff0c;中文编程发展又是如何&#xff1f; ★为了实现中文编程&#xff0c;从未停下脚步 我们知道&#xff0c;中国人一直以来为了实现中文编程付出了不懈的努力&#xff0c;前前后后研发了几十种中文编程语言。…

JavaSE补充 | 了解数据结构与常用集合的源码分析

目录 一&#xff1a;数据结构 1. 数据结构剖析 1.1 研究对象一&#xff1a;数据间逻辑关系 1.2 研究对象二&#xff1a;数据的存储结构&#xff08;或物理结构&#xff09; 1.3 研究对象三&#xff1a;运算结构 2. 常见存储结构之&#xff1a;数组 3. 常见存储结构之&am…

奇葩的new Date()

大家平时在开发的时候有没被new Date()折磨过&#xff1f;就是它的诸多怪异的设定让你每每用的时候&#xff0c;都可能不小心踩坑。造成程序意外出错&#xff0c;却一下子找不到问题出处&#xff0c;那叫一个烦透了…… 下面&#xff0c;我就列举它的“四宗罪”及应用思考 可恶…

微前端运行时

目录 微前端运行时基于 SPA 的微前端架构应用生命周期 微前端运行时 谈到微前端绕不开的话题就是为什么不适用 iframe 作为承载微前端子应用的容器&#xff0c;其实从浏览器原生的方案来说&#xff0c;iframe 不从体验角度上来看几乎是最可靠的微前端方案了&#xff0c;主应用…

关于FPV图传系统时延讨论

关于FPV图传系统时延讨论 1. 源由2. 时延测试方法3. 时延测试资料4. 关于模拟图传5. 关于FPV时延感受5.1 静态时延5.2 动态时延 6. 参考资料7. 附录 DJI 图传系统 1. 源由 视频图传系统最重要的几个指标&#xff1a; 分辨率视角帧率时延传输距离 目前高清图传主要规则&#…

【Cartopy基础入门】如何丝滑的加载Geojson数据

原文作者&#xff1a;我辈李想 版权声明&#xff1a;文章原创&#xff0c;转载时请务必加上原文超链接、作者信息和本声明。 Cartopy基础入门 【Cartopy基础入门】Cartopy的安装 【Cartopy基础入门】如何丝滑的加载Geojson数据 文章目录 Cartopy基础入门一、Geojson数据来源二…

C语言 非本地跳转 实现native层TryCatch

前言 最近研究native hook的技术&#xff0c;了解到了这个非本地跳转&#xff0c;本文就是介绍他&#xff0c;对于解决native crash非常有用。 非本地跳转介绍 C语言的本地跳转是指goto、break、continue等语句&#xff0c;但是这个语句最大局限就是只能实现函数内部的跳转。…

Day3 自学Pytorch 数据集 torchvision.transforms类&torchvision.datasets.ImageFolder类

1.torchvision.transforms类 可调用的函数列表https://pytorch.org/vision/stable/transforms.html 介绍几个常用的函数&#xff1a; ① transforms.Resize(&#xff09; 将图像转换成目标大小 参数列表&#xff1a; size (sequence or int)&#xff1a; &#xff08;h,w&a…

Scala 中的 List 列表详解

目录 一、不可变长的List列表 1.List列表的声明与遍历 2.List列表的map、flatMap函数 3.List列表的filter过滤函数 4.List列表的count计数函数 二、可变长的List列表 1.可变长List声明 2.可变长List的添加方法 三、List列表其余的方法与函数 一、不可变长的List列表 …

任务调度原理 通俗讲解详细(FreeRTOS)

寄存器说明 以cortex-M3&#xff0c;首先先要了解比较特别的几个寄存器&#xff1a; r15 PC程序计数器&#xff08;Program Counter&#xff09;,存储下一条要执行的指令的地址。 r14 LR连接寄存器&#xff08;Link Register &#xff09;&#xff0c;保存函数返回地址&#x…

记忆化搜索-滑雪

题意 给定一个 R 行 C 列的矩阵&#xff0c;表示一个矩形网格滑雪场。 矩阵中第 i 行第 j 列的点表示滑雪场的第 i 行第 j 列区域的高度。 一个人从滑雪场中的某个区域内出发&#xff0c;每次可以向上下左右任意一个方向滑动一个单位距离。 当然&#xff0c;一个人能够滑动到某…

论文笔记:基于U-Net深度学习网络的地震数据断层检测

0 论文简介 论文&#xff1a;基于U-Net深度学习网络的地震数据断层检测 发表&#xff1a;2021年发表在石油地球物理勘探 1 问题分析和主要解决思路 问题&#xff1a;断层智能识别&#xff0c;就是如何利用人工智能技术识别出断层。 解决思路&#xff1a;结合&#xff35;-N…

nginx快速入门

本文应侧重操作应用&#xff0c;复杂原理详见相关理论类笔记 Nginx 快速入门笔记 Nginx 的简介 1. 什么是 nginx ​ Nginx 可以作为静态页面的 web 服务器&#xff0c;同时还支持 CGI 协议的动态语言&#xff0c;比如 perl、php等。但是不支持 java。Java 程序只能通过与 t…