一、静态文件应用方面

  ASP.NET Core 静态文件应用,主要分为两方面:网站访问静态文件整合

二、案例

1、访问静态文件

  我们都知道,在 ASP.NET 项目中,我们的静态文件一般要放在 wwwroot(项目默认),比如CSS、JS、HTML、IMG、PNG 等等。 如果在 wwwroot 文件目录下放一张图片,启动程序是不能直接访问的。我们需要在 Startup.css 启动程序中,添加一个静态访问的中间建 UseStaticFiles() 即可实例如下如所示

.NET Core MVC 静态文件应用

 

 

 然后我们就可以在浏览器中访问到我们的静态文件了。

.NET Core MVC 静态文件应用

 

 

 2、修改默认wwwroot目录 

  在项目中,如果习惯其他原因,我们想不叫 wwwroot ,我们是可以改为其他的名称。如我们现在就该为public。我们只需要在 Program.cssCreateHostBuilder() 中添加 UseContentRoot("public") 即可。实例如下

.NET Core MVC 静态文件应用

 

 

 如果你没有 public 这个根目录,你启动程序就会报错,因为你已经改了目录名称。

.NET Core MVC 静态文件应用

 

 

 3、使用包管理器(libman)管理

  libman 主要是为了管理我们的CSS、JS,比如我们的jquery.js、bootstrap框架等等的前端工具。那么如何添加呢,我们需要在 wwwroot右键菜单-》添加-》客户端

.NET Core MVC 静态文件应用

 

 在弹出的 “添加客户端库” 中,选择 unpkg ,输入前端框架名称,如 bootstrap 选择添加所有库或者选择特点文件即可,目标位置是可以修改的。但必须放在 wwwroot 目录下,点击安装即可。

.NET Core MVC 静态文件应用

 

 安装后,可能我们需要稍等一下,可能网速慢等原因,下载该框架需要点时间。下载完成后,我们会在项目路径下,生成一个 libman.json 文件

.NET Core MVC 静态文件应用

 

 这就是我们使用 libman 下载的前端框架,如果我们的 boostrap 框架删除了,我们只需在 libman.json 上右键还原客户端即可。

.NET Core MVC 静态文件应用

 

 4、对 JS 和 CSS 捆绑和压缩

  在网页设计中,如何我们需要引用很多的 JS 和 CSS 我们感觉代码非常的多,我们可以使用捆绑的形式,将多个 CSS 和 JS 捆绑在一起,方便使用,那么我们需要使用 NuGet 安装一个工具 “BuildBundlerMinifier”我们如果安装呢?那么需要在项目上右键-》管理 NuGet 程序包

.NET Core MVC 静态文件应用

 

 在浏览中,搜索BuildBundlerMinifier 安装即可

.NET Core MVC 静态文件应用

 

 安装完成后,我们在项目路径下,新建一个json文件 bundleconfig.json 的文件,实例如下

.NET Core MVC 静态文件应用

 

我们需要在里面写需要压缩的为一个的文件,示例如下

  {
    "outputFileName": "wwwroot/css/web.min.css",
    "inputFiles": [
      "wwwroot/web.css",
      "wwwroot/index.css"
    ]
  }
]

 

.NET Core MVC 静态文件应用

 

 编译项目就会在 wwwroot/css目录下面生成一个web.min.css

.NET Core MVC 静态文件应用

 

 如果不想要压缩的css,我们可以修改一个配置,如下所示

[
  {
    "outputFileName": "wwwroot/css/web.min.css",
    "inputFiles": [
      "wwwroot/web.css",
      "wwwroot/index.css"
    ],
    "minify": {
      "enabled": false
    }

  }
]

 

.NET Core MVC 静态文件应用

 

 如果我们想压缩 js 也同理。

[
  {
    "outputFileName": "wwwroot/css/web.min.css",
    "inputFiles": [
      "wwwroot/web.css",
      "wwwroot/index.css"
    ],
    "minify": {
      "enabled": false
    }
  },
  {
    "outputFileName": "wwwroot/js/web.min.js",
    "inputFiles": [
      "wwwroot/web.js",
      "wwwroot/index.js"
    ],
    "minify": {
      "enabled": false
    }
  }
]

三、总结

  学得不深入,有不对的地方,欢迎提提意见,谢谢!!!

相关文章:

  • 2018-09-10
  • 2022-12-23
  • 2022-12-23
  • 2021-06-01
  • 2021-11-15
  • 2021-12-22
  • 2021-07-15
  • 2022-12-23
猜你喜欢
  • 2022-01-12
  • 2022-12-23
  • 2022-12-23
  • 2021-09-29
  • 2021-06-21
  • 2022-01-04
  • 2021-12-27
相关资源
相似解决方案