ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库
前端库使用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. 安装前端库的更多相关文章
- 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/ ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 12. Views 下
ASP.NET Core MVC 13. 安装前端库 Partial VIew 就是部分View,他没有自己的数据,数据来自图中白色的那块,它的数据需要传进去,第一个参数是View的名称,第二个参数就 ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 25. 过滤器
在MVC的请求管道 并不是 asp.net core的请求管道.所以说Filter是专用于MVC的 贯穿特性,横穿关注点.比如授权.日志 这里的Authorize其实就是一个Filter,主要用来授 ...
- 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 ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 04. 中间件
注册startup类可以配置我们web应用的启动逻辑,使用的就是UseStartUp方法,asp.net core就会实例化这个类 并调用startup类里面的两个方法ConfigureService ...
- 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/ 这是中文的地址 创建一个项目 名称.描述 ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 01. 创建项目 +项目结构和配置简介
新建项目:Tutotial.Web 解决方案名称可以把web去掉 视频里面把git这个选项勾选了.我就不勾选了 dotnet CLI创建项目 首先必须安装好了.net Core的SDK dotnet ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 05.Controller 的路由
视频地址: https://www.bilibili.com/video/av38392956/?p=5 这里面就包含了MVC相关的库 可以通过打开右侧的Nuget库进行查看 这里修改下 ,只需要静态 ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 06. Controller 返回View
Controller父类会提供很多上下文的相关信息,还提供了很多封装的方法 返回的对象要求实现了IActionResult接口 继承父类,并引入命名空间 写this点就出现很多东西,这些就是上下文的信 ...
随机推荐
- Android Studio一些常用的快捷键
光标移动和窗口切换:1.esc:光标从功能窗口回到编辑窗口 2.alt+num:打开指定的功能窗口,重复操作关闭该窗口. 3.alt+←→:切换编辑的文件. 4.ctrl+home/end:跳转到文件 ...
- 深度神经网络多任务学习(Multi-Task Learning in Deep Neural Networks)
https://cloud.tencent.com/developer/article/1118159 http://ruder.io/multi-task/ https://arxiv.org/ab ...
- 最大熵推导LR
http://www.win-vector.com/dfiles/LogisticRegressionMaxEnt.pdf https://www.zhihu.com/question/2409455 ...
- 安卓开发懒鬼最爱之ButterKnife,依赖注入第三方是库,进一步加速开发速度
转载请注明出处:王亟亟的大牛之路 还在烦躁一大堆findById的控件操作而烦恼么? 平时,我们的那一系列findById是一个"浩大的project"样比例如以下 这是以前一个项 ...
- 【转载】.NET 框架浅析
经过了对C#较长时间的学习以及实践,不断地感受着.NET 框架--这个最本质,然而却似乎让人捉摸不透的概念.特别是经过拜读Anytao博主的<你必须知道的.NET>文章,使我对其概念关系得 ...
- Android WIFI模块分析
一:什么是WIFI WIFI是一种无线连接技术.可用于手机.电脑.PDA等终端. WIFI技术产生的目的是改善基于IEEE802.11标准的无线网络产品之间的互通性,也就是说WIFI是基于802.11 ...
- Vue生命周期方法。
- 项目Alpha冲刺(团队10/10)
项目Alpha冲刺(团队10/10) 团队名称: 云打印 作业要求: 项目Alpha冲刺(团队) 作业目标: 完成项目Alpha版本 团队队员 队员学号 队员姓名 个人博客地址 备注 22160041 ...
- Erlang Garbage Collector
Erlang Garbage Collector | Erlang Solution blog https://www.erlang-solutions.com/blog/erlang-garbage ...
- Android开发环境搭建时遇到问题的解决方法
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/linux_loajie/article/details/33823637 Android开发环境搭建 ...