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点就出现很多东西,这些就是上下文的信 ...
随机推荐
- MyReport报表引擎1.2.0.1新功能
一维码(Code128B)转换显示. 多联标题. 修正BugSum统计函数问题报表编辑器保存时没有生成新加入的单元格相关的xml数据 相关链接MyReport演示.产品站点 相关文章MyReport ...
- 关于Lisp和函数式编程 & 各种语言对比 & TIOBE
上一篇文章提到了,今天又读到Lisp的一些内容 <为什么Lisp如此先进>ruanyifeng(Link).关于Lisp的八卦,可以参考我前面两篇文章 http://www.cnblogs ...
- BUPT复试专题—统计时间间隔(2013计院)
题目描述 给出两个时间(24小时制),求第一个时间至少要经过多久才能到达第二个时间.给出的时间一定满足的形式,其中x和y分别代表小时和分钟.0≤x<24,0≤y<60. 输入格式 第一行为 ...
- nginx配置初步
nginx配置初步 1,切换至nginx目录,找到配置文件目录 cd /etc/nginx/conf.d 2,拷贝一份conf文件 sudo cp default.conf head.conf 3,进 ...
- [Cypress] install, configure, and script Cypress for JavaScript web applications -- part3
Use custom Cypress command for reusable assertions We’re duplicating quite a few commands between th ...
- 步步为营(十六)搜索(二)BFS 广度优先搜索
上一篇讲了DFS,那么与之相应的就是BFS.也就是 宽度优先遍历,又称广度优先搜索算法. 首先,让我们回顾一下什么是"深度": 更学术点的说法,能够看做"单位距离下,离起 ...
- RBtree插入跟删除图解代码
一.红黑树的简单介绍 RBT 红黑树是一种平衡的二叉查找树.是一种计算机科学中经常使用的数据结构,最典型的应用是实现数据的关联,比如map等数据结构的实现. 红黑树有下面限制: 1. 节 ...
- yii使用CUploadedFile上传文件
一.前端代码 Html代码 <form action="<?php echo $this->createUrl('/upload/default/upload/');? ...
- [LeetCode] 038. Count and Say (Easy) (C++/Python)
索引:[LeetCode] Leetcode 题解索引 (C++/Java/Python/Sql) Github: https://github.com/illuz/leetcode 038. Cou ...
- Spring官方文档翻译——15.1 介绍Spring Web MVC框架
Part V. The Web 文档的这一部分介绍了Spring框架对展现层的支持(尤其是基于web的展现层) Spring拥有自己的web框架--Spring Web MVC.在前两章中会有介绍. ...