前端库使用npm进行安装,需要先建立webpack.json文件


因为我们没有使用npm安装任何库,所以npm的文件夹是空的

这里是用于开发时构建时引用的库写在这里

这里用到bootStrap 开发时和发布时都要用的所以要放到这里

自己写上,BootStrap的版本号是自己去官网看的

点击保存后npm 就会自动在左下角进行安装了

会依赖的库都安装好了

存放包的模块司机是跟目录的node_modules文件夹下。VS会把这个文件夹排除,因为是不需要加入到源码库的

bootStrap安装到这里,怎么引用呢,早asp.core里面 视图文件应该是是放在wwwroot里面的

为了简单就把node_modules文件件当做一个类似于wwwroot一样。当做静态的视图文件夹
StartUp里面设置的app.UseStaticFiles()可以让wwwroot文件夹内的文件对外可见,让里面的东西可以对外视图

修改,这个中间件只会对路径包含/node_modules为路径进行处理。如果不包含就直接跳到下一个中间件

其实还有一个OverLoad方法可以直接写path路径就可以。但是这么写不知道到哪去找静态文件

所以还是用第一种写法,如果找到物理文件呢?需要用到FileProvier
参数里面需要传递一个物理路径

这里面参数要求是一个绝对路径

这样就可以找到node_modules文件夹

找到对应的文件,直接拖过来

这是拖进来之后的效果

使用一些bootstrap的组件,表明bootstrap起作用了,使用一下Navbar直接把代码copy过去


运行页面测试,报错,这里前面多写了一个斜线

效果出来了

可以看到bootstrap已经加载进来了

前端的验证

表单提交的时候,如何做前端的验证,不提交到后端,在前端验证。
这时候需要用到另外几个前端的库

把三个文件拖进来放在最下面,body结束标签的上面

引入三个组件后,form的前端验证自动就好了。
没有任何网络请求的情况 验证出

可以使用cdm把常用的库放在里面进行引用


使用tagHelper
表示开发环境下要把代码加进去

表示开发的时候本地的这几个js。

exclude非开发环境

cdn如果挂了。这时候有个回落机制,一旦cdn无法访问,就使用本地的这个路径
通过判断window.jQuery这个对象存不存在,来表示cdn是否可以正常访问

其他的两个js需要判断的情况

css的判断

ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库的更多相关文章

  1. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 03. 服务注册和管道

    ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 03. 服务注册和管道 语雀: https://www.yuque.com/yuejiangliu/dotnet/ ...

  2. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 12. Views 下

    ASP.NET Core MVC 13. 安装前端库 Partial VIew 就是部分View,他没有自己的数据,数据来自图中白色的那块,它的数据需要传进去,第一个参数是View的名称,第二个参数就 ...

  3. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 25. 过滤器

    在MVC的请求管道 并不是  asp.net core的请求管道.所以说Filter是专用于MVC的 贯穿特性,横穿关注点.比如授权.日志 这里的Authorize其实就是一个Filter,主要用来授 ...

  4. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 02. Web Host 的默认配置

    视频地址: https://www.bilibili.com/video/av38392956/?p=2 语雀 https://www.yuque.com/yuejiangliu/dotnet/ixt ...

  5. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 04. 中间件

    注册startup类可以配置我们web应用的启动逻辑,使用的就是UseStartUp方法,asp.net core就会实例化这个类 并调用startup类里面的两个方法ConfigureService ...

  6. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 27. CICD Azure DevOps

    VSTS做持续集成 后来改名叫做Azure Deveps https://azure.microsoft.com/zh-cn/services/devops/ 这是中文的地址 创建一个项目 名称.描述 ...

  7. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 01. 创建项目 +项目结构和配置简介

    新建项目:Tutotial.Web 解决方案名称可以把web去掉 视频里面把git这个选项勾选了.我就不勾选了 dotnet CLI创建项目 首先必须安装好了.net Core的SDK dotnet ...

  8. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 05.Controller 的路由

    视频地址: https://www.bilibili.com/video/av38392956/?p=5 这里面就包含了MVC相关的库 可以通过打开右侧的Nuget库进行查看 这里修改下 ,只需要静态 ...

  9. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 06. Controller 返回View

    Controller父类会提供很多上下文的相关信息,还提供了很多封装的方法 返回的对象要求实现了IActionResult接口 继承父类,并引入命名空间 写this点就出现很多东西,这些就是上下文的信 ...

随机推荐

  1. 【转载】一张“神图”看懂单机/集群/热备/磁盘阵列(RAID)

    单机部署(stand-alone):只有一个饮水机提供服务,服务只部署一份 集群部署(cluster):有多个饮水机同时提供服务,服务冗余部署,每个冗余的服务都对外提供服务,一个服务挂掉时依然可用 热 ...

  2. 阿里云 ubuntu 14.04 模板上安装 docker

    ubuntu 14.04 的内核是 3.13 ,所以内核不用升级. 安装过程例如以下: # apt-get update # apt-get install apt-transport-https # ...

  3. The most widely used name server software: BIND

    https://www.isc.org/downloads/bind/ The most widely used name server software: BIND BIND is open sou ...

  4. 【java】itoo项目实战之hibernate 批量保存优化

    在itoo中.基本上每一个系统都有一个导入功能,大量的数据填写进入excel模板中.然后使用导入功能导入的数据库中,这样能够大大的提高工作效率. 那么导入就涉及到了批量保存数据库的问题了. 那么通常情 ...

  5. layer弹出层不居中解决方案,仅显示遮罩,没有弹窗

    问题:项目中layer询问层的弹窗仅显示遮罩层,并不显示弹窗…… 原因:图片太多将layer弹窗挤出屏幕下方,看不见了…… 解决方案:让layer的弹出层居中显示 一.问题描述 用layer做操作结果 ...

  6. Python开发【2.2 异常处理】

    1.Python常见异常类型: Exception 常规错误的基类 AttributeError 对象没有这个属性 IOError 输入/输出操作失败 IndexError 序列中没有此索引(inde ...

  7. Boom!!!计算机系统,从理解到爆炸,Bomblab

    进入文件夹下 ./bomb 開始执行炸弹 对于炸弹command not found之类的鬼畜情况: chmod 777 bomb 然后再执行炸弹 objdump -d bomb > bomb. ...

  8. ECMAScript 实现继承的几种方式

    1. 原形链 function Father() {   this.fatherName = "licus"; } function Children() { this.chidr ...

  9. mvn_action

    validate(验证): 验证项目正确,并且所有必要信息可用. compile(编译): 编译项目源码 test(测试): 使用合适的单元测试框架测试编译后的源码. package(打包): 源码编 ...

  10. BusyBox下ftpget的使用方法

    在终端输入ftpget命令,可以得到以下帮助信息: BusyBox v1.17.4 (2010-12-22 10:59:18 CST) multi-call binary. Usage: ftpget ...