首页 / ASP.NET / ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库

ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1721字，纯文字阅读大概需要3分钟。

内容图文

前端库使用npm进行安装，需要先建立webpack.json文件
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
因为我们没有使用npm安装任何库，所以npm的文件夹是空的
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
这里是用于开发时构建时引用的库写在这里
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
这里用到bootStrap 开发时和发布时都要用的所以要放到这里
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
自己写上，BootStrap的版本号是自己去官网看的
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
点击保存后npm 就会自动在左下角进行安装了
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
会依赖的库都安装好了
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
存放包的模块司机是跟目录的node_modules文件夹下。VS会把这个文件夹排除，因为是不需要加入到源码库的
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
bootStrap安装到这里，怎么引用呢，早asp.core里面 视图文件应该是是放在wwwroot里面的
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
为了简单就把node_modules文件件当做一个类似于wwwroot一样。当做静态的视图文件夹
StartUp里面设置的app.UseStaticFiles（）可以让wwwroot文件夹内的文件对外可见，让里面的东西可以对外视图
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
修改，这个中间件只会对路径包含/node_modules为路径进行处理。如果不包含就直接跳到下一个中间件
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
其实还有一个OverLoad方法可以直接写path路径就可以。但是这么写不知道到哪去找静态文件
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
所以还是用第一种写法，如果找到物理文件呢？需要用到FileProvier
参数里面需要传递一个物理路径
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
这里面参数要求是一个绝对路径
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
这样就可以找到node_modules文件夹
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
找到对应的文件，直接拖过来
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
这是拖进来之后的效果
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
使用一些bootstrap的组件，表明bootstrap起作用了，使用一下Navbar直接把代码copy过去
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
运行页面测试，报错，这里前面多写了一个斜线
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
效果出来了
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
可以看到bootstrap已经加载进来了

前端的验证

表单提交的时候，如何做前端的验证，不提交到后端，在前端验证。
这时候需要用到另外几个前端的库
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
把三个文件拖进来放在最下面，body结束标签的上面
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
引入三个组件后，form的前端验证自动就好了。
没有任何网络请求的情况 验证出
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
可以使用cdm把常用的库放在里面进行引用
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片

ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
使用tagHelper
表示开发环境下要把代码加进去
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
表示开发的时候本地的这几个js。
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
exclude非开发环境
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
cdn如果挂了。这时候有个回落机制，一旦cdn无法访问，就使用本地的这个路径ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
通过判断window.jQuery这个对象存不存在，来表示cdn是否可以正常访问
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
其他的两个js需要判断的情况
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片
css的判断
ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库 - 文章图片

 

内容总结

以上是互联网集市为您收集整理的ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库全部内容，希望文章能够帮你解决ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 13. 安装前端库所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/820892.html

来源：【匿名】