NET6完整项目实战系列第2篇:网站项目目录解析

项目生成后的目录如下图,我们逐个分析一下这些文件的用途先。

1. wwwroot 目录用于存放 css文件、JS文件、图片文件、第三方前端框架/库文件等,这个目录的特别之处在于页面中如果要引用其中的文件,

比如 site.css 时 , 其路径不需要加 wwwroot 这个文件夹路径。打开 _Layout.cshtml 这个文件, 如下图:

这里的路径是 "~/css/site.css" ,不是 "~/wwwroot/css/site.css" ,即使 wwwroot 这个文件夹真实存在,如下图:

问题:为什么微软会在WebAPP中定义这样一个文件夹呢,是因为NET6(其实从netcore诞生就存在了)中所有的服务都是以中间件的形式提供的,

访问css、js、image这些静态文件也是以中间件的形式提供的,必须授权了才能访问,但是一个网站不可避免会用到这样一些文件,我们

一般也不会给这些文件设置访问权限,所以对那些不需要特别控制访问权限的静态文件可以都放在wwwroor这个文件夹中。如果我们在项目

中新建一个文件夹 ,里面放一张图片,当我们在网址上输入图片的URL打开这张图片的时会报错,无法直接查看这张图片,必须要给这个目录

配置相应的中间件服务才行。

2. asp-append-version=true 这个属性是 razor page 中定义的一个服务器属性,如果设置为 true 后,访问网站后点鼠标右键“查看页面源代码”,

可以看到这行代码将生成一个带查询字符串的url ,如下图:

 

其作用是防止浏览器缓存 site.css 这个文件。每次刷新页面时,浏览器都会到服务器上重新抓取 site.css ,利用这个特性,我们可以在开发阶段设置 asp-append-version=true,

防止更改样式后因为浏览器缓存而不能马上看到页面要呈现的效果。发布到生产环境时可以设为 false , 让浏览器缓存 site.css,节约网络带宽,加快网站的访问速度。

 

3 . wwwroot下的 lib 这个目录用于放第三方的库文件,比如jquery、bootstrap等,bootstrap 是一个前端框架,功能比较强大,一些常用的显示效果能很轻松的实现,

比如页面数据显示时自动适应PC、手机等不同设备的宽度。

 

4. Pages下是所有的页面文件, shared目录下存放一些通用页面,比如布局页或者视图页,布局页用于定义整个网站的框架结构,视图页用于将一些重复度高的功能抽离出来,方便其他页面引用。

像登录这样的功能就可以单独拿出来做成一个视图页,需要用到的页面引用它就可以了,后期维护起来很方便。

布局页或视图页一般以“_” 开头,在Razor Pages中,以下划线“_”开头的页面是不能在浏览器中直接访问的,只能被其他页面引用。

5. appsettings.json是网站的配置文件,是以JSON格式存储的。

 

6.Program.cs是网站的启动文件,一般会配置类和接口的依赖注入关系以及启用特定的中间件。

7.其他补充:

_ViewStart.cshtml 和 _ViewImports.cshtml 是所有页面都会继承的两个视图页,但作用不同,_ViewStart.cshtml 中只有一行代码,如下图:

它用于为所有页面自动套用 _Layout.cshtml 这个布局页,如果删除这个文件后还希望 index.cshtml 套用 _Layout.cshtml 布局页的话,

可以在index.cshtml中加上如下的代码:

简而言之 , 如果不想在每个页面中都写 Layout = "_Layout"; 这样一行代码,就保留 _ViewStart.cshtml 文件,否则可以删除。

 

_ViewImports.cshtml 中的代码如下:

很明显,这个视图页的功能就是把页面都需要引用的名称空间等资源包括进来,防止每个页面中都去写这些重复的代码。最大的好处是当我们改了某个类的名称空间后,

只要改这个文件就可以了,否则所有引用的页面都要去修改,如果项目中有上百个文件的话,这个工作量也是比较头大的。

 

_ValidationScriptsPartial.cshtml 中的代码如下:

这里引入了Jquery的2个插件,如果需要用到Jquery的这2个插件,需要在相应的页面中加入如下的代码:<partial name="_ValidationScriptsPartial" /> ,

partial是服务端的标签,用于引入视图页,name属性后面是视图页的名称,不需要.cshtml 这个扩展名。

加入这行代码后,就可以在页面中调用Jquery插件中的函数了。VS2022中虽然生成了_ValidationScriptsPartial.cshtml这个视图文件,

但是没有被任何页面引用,不需要使用的话是可以删除的。

注:在NET6 Razor Pages 中,所有对页面、视图页、布局页的引用都不需要加上文件扩展名,直接使用名称就可以了。

 

最后,我们来看一下 _Layout.cshtml 这个文件的内容:

除了HTML标签外,重点看1、2、3这三处的代码,其作用如下:

1、@ViewData["Title"] 用于显示页面的标题。

比如 Index.cshtml 引用了 _Layout.cshtml这个布局页 , 我们希望访问 http://localhost:5208/index 时浏览器标题显示为 Home Page , 需要在Index.cshtml中加上如下的代码:

浏览器访问后呈现的效果如下:

 

2、@RenderBody() 用于输出对应页面的内容,比如 Index.cshtml 中对应输出红框中的部分:

3、@await RenderSectionAsync("Scripts", required: false) 用于页面引入一段脚本,当然也可以是HTML标签等,required: false 表示内容可以为空。

比如:要在 Index.cshtml 中引用  index.js 这个脚本文件,可以这样写:

@section 后的名称要和_Layout.cshtml 中定义的一致(这里是Scripts), 访问 index.cshtml 文件后查看页面源代码 , 可以看到 index.js 出现在了指定的位置:

如果我们把 @section Scripts{ <script type="text/javascript" src="~/js/index.js"></script> } 换成 <script type="text/javascript" src="~/js/index.js"></script> 会怎么样呢?

查看index.cshtml 页面源代码如下:

可以看到,index.js 出现的位置发生了变化。如果我们要让一段 javascript 代码出现在指定的地方,使用 @section 指令是唯一的选择。特别是一些 js 文件,

相互之间往往有依赖关系,在页面中出现的顺序是有要求的,使用@section指令可以很好的解决这个问题。

同样的道理,如果我们想在 _Layout.cshtml的 <head></head>之间插入一段Style 代码,可以这样写:

Index.cshtml 中这样写就可以了:

访问页面后“查看页面源代码”如下,它位于<head></head>标签之间而不是其他位置:

 

因为在 _Layout.cshtml 中定义 @await RenderSectionAsync("Scripts", required: false) 时设置 required:false,所以Index.cshtml 中

没有 @section Scripts{ <script type="text/javascript" src="~/js/index.js"></script> } 这条语句时访问页面也不会出错,如果设置 required:true , 那么访问

index.cshtml时会报错,如下:

 

@section 指令相当于一个占位符,引用的页面可以把某段代码放在指定的位置,如果这段代码必须要有,设置 required:true 就可以了,否则设为 false。

 

posted @ 2022-03-09 00:54  屏风马  阅读(2598)  评论(0编辑  收藏  举报