LibMan—在Visual Studio中管理前端包

LibMan轻量级包管理器

​ 如果读者已经有一定的开发经验，可能知道很多工具可以和Visual Studio一起安装Bootstrap和JQuery等客户端软件包，比如Bower、NPM和WebPack等。但是，现在我们不会使用这些工具，而是使用Library Manager(LibMan)。LibMan是一个轻量级的客户端库管理工具，它可以从文件系统或内容分发网络（Content Delivery Networ，CDN）下载客户端和框架，支持的CDN包括CDNJS、jsDelivr和unpkg。现在将提取所选库文件，并将其置于ASP.NET Core项目的相应位置。

使用LibMan安装Bootstrap

​ LibMan安装有命令行CLI和图形化界面GUI两种方式，这是使用图像化界面的方式进行安装。

• 右击解决方案资源管理器中的项目名称，然后选择添加➡客户端库。
• 在打开的添加客户端库窗口中，保留默认提供程序cdnjs。
• 在库文本框中，输入twitter-bootstrap。选择匹配的条目后，它会尝试安装最新版本。当然，读者可以手动输入所需的版本。它有智能提示。我们将目前的最新版本Bootstrap@4.5.3。
• 读者可以选择包含所有库文件或特定文件。
• 在目标位置文本框中，指定要将库文件复制到的文件夹路径。默认情况下，我们存放的路径地址为wwwroot/lib。
• 单击安装按钮，如图所示。

libman.json文件

​ libman.json是库管理器清单文件。

​ 请注意，在libman.json文件中，我们有一个刚刚安装的Bootstrap客户端库列表。我们也可以直接编辑清单文件来安装客户端软件包，而不是使用LibMan提供的图形化界面。

以下是libman.json中自动生成的代码。

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "twitter-bootstrap@4.5.3",
      "destination": "wwwroot/lib/twitter-bootstrap/"
    }
  ]
}

清理和还原客户端库

​ 要清理库文件，请右击libman.json文件，然后选择清理客户端库，如图所示。

此操作将删除目标文件夹中的所有库文件，但是不会删除libman.json中已存在的内容。

卸载或更新客户端

卸载或更新客户端库的步骤如下：

• 打开libman.json文件。
• 单击要卸载的客户端库，出现一个灯泡💡图标。
• 单击灯泡💡图标，读者可以选择卸载或更新该特定客户端库。

​ 读者也可以删除libman.json文件中的客户端库列表信息并保存文件，它将卸载相应的客户端库。

​ 同样，要升级或降级客户端库，可以直接更改libman.json文件中的版本号。保存文件后，相应的客户端库将更新为指定的版本。在Visual Studio中编辑版本号时，还具有智能提示功能。

libman.json文件说明

{
  "version": "1.0",	//当前的libman文件版本
  "defaultProvider": "cdnjs",	//默认从哪个CDN网络下载文件
  "libraries": [
    {
      "library": "twitter-bootstrap@4.5.3",	//要下载的前端包名称
      "destination": "wwwroot/lib/twitter-bootstrap/"	//存放库的文件路径地址
    },
      {
          "library":"jquery@3.4.1",	//要下载的前端包名称
          "destination":"wwwroot/lib/jquery",	//存放库的文件路径地址
          "provider":"jsdelivr",	//针对某个独立的文件，从其他源下载
          "files":["dist/jquery.js","dist/jquery.min.js"]	//下载该库中特定的文件，而不是下载所有文件
      }
  ]
}

​ 以上代码包含了文件的注释，我相信已经解释得很清楚了。请注意，因为读取的CDN文件是从CDNJS、jsDelivr和unpkg这3个网站下载的，所以可能会收到网速或其他因素的影响。

在网站中自定义CSS样式表

​ 我们将所有特定于站点的CSS放在单独的CSS文件中，将名称为site.css的样式表添加到css文件夹中。我们已经在wwwroot文件夹中创建了这个CSS文件夹。

​ 复制并粘贴以下代码到site.css文件中。

.btn{
    width:75px;
}

在ASP.NET Core应用程序中使用Bootstrap

​ 要在ASP.NET Core应用程序中使用Bootstrap，我们需要在布局文件_Layout.cshtml中包含对Bootstrap.css文件的引用。当然还要引用自定义样式表site.css，代码如下：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="~/css/site.css" rel="stylesheet" />
    <title>@ViewBag.Title</title>
</head>
<body>
    <div class="container">
        @*添加bootstrap的样式类container*@  @RenderBody()
    </div>
   @if (IsSectionDefined("Scripts")) { @RenderSection("Scripts",required:false)}
</body>
</html>

​ 请注意，我们使用Bootstrap中的container类属性来定位页面上的元素。

Details.cshtml视图优化

​ 我们使用Bootstrap4中的样式来定位和设置页面上的元素，代码如下。

@model WebApplication12.ViewModels.HomeDetailsViewModel
@{

    ViewBag.Title = "学生详情";
}
<h3>@Model.PageTitle</h3>


<div class="row justify-content-center m-3">
    <div class="col-sm-6">
        <div class="card">
            <div class="card-header">
                <h1>@Model.Student.Name</h1>
            </div>
            <div class="card-body text-center">
                <img class="card-img-top  " src="~/images/noimage.png" />
                <h4>学生ID : @Model.Student.ID</h4>
                <h4>   邮箱 : @Model.Student.Email</h4>
                <h4>主修科目 : @Model.Student.Major</h4>
            </div>
            <div class="card-footer text-center">
                <a href="#" class="btn btn-primary">返回</a>
                <a href="#" class="btn btn-primary">编辑</a>
                <a href="#" class="btn btn-danger">删除</a>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script src="~/js/JavaScript.js"></script>
}

Index.cshtml视图优化

​ Index.cshtml视图优化的代码如下所示：

@model IEnumerable<Student>
 
@{ ViewBag.Title = "学生列表页面"; }

<div class="card-deck">
    @foreach (var student in Model)
    {
    <div class="card m-3">
        <div class="card-header">
            <h3 class="card-title">@student.Name</h3>
        </div>
        <img class="card-img-top" src="~/images/noimage.png" />

        <div class="card-body text-center">
            <h5 class="card-title">主修科目：@student.Major</h5>
        </div>

        <div class="card-footer text-center">
            <a href="#" class="btn btn-primary">查看</a>
            <a href="#" class="btn btn-primary">编辑</a>
            <a href="#" class="btn btn-danger">删除</a>
        </div>
    </div>
    }
</div> 
 

​ 项目目录结构如图所示：

​ 完成后，运行项目。

​ 运行项目后的Index.cshtml效果如图所示：

​ Details.cshtml效果如图所示：

总结

​ 本篇介绍在Visual Studio中使用LibMan管理前端包，结合上篇介绍MVC路由，到此ASP.NET Core的基础内容已经介绍完了。