码迷,mamicode.com
首页 > 其他好文 > 详细

P3 创建项目(下)

时间:2020-03-20 23:47:33      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:内嵌   ide   targe   不同   src   特殊   bootstra   项目文件   中间件   

如何运行.net core的web应用。
上面是使用IIS Express
技术图片
Three,和解决方案名相同,相当于是自己运行这个应用,因为它本身就是一个控制台应用,所以它本身就可以运行。
技术图片
.net core内嵌一个web服务器叫做kestrel。这里可以配置上使用kestrel。当然这个方法也可以不写,因为默认的配置里面已经调用了。具体可以看一下源码
技术图片
这里还是默认的
技术图片
博主喜欢自己运行web应用,而不喜欢用IIS Express。因为有习惯,总想去看控制台的输出。
技术图片

技术图片
Yes
技术图片

然后我们可以看到一个控制台,就运行起来了
技术图片
然后浏览器也被打开了。
技术图片

技术图片
运行项目后,是否打开浏览器。这里默认勾选了。默认就会打开浏览器。
技术图片
这里可以设置环境变量,开发环境还是生产环境就在这里设置。
技术图片
web应用的默认地址或者叫做根地址,它是http和http是都支持。
技术图片
运行默认就跳到5001端口技术图片

IIS Express的选项

技术图片

实际上这些配置都对应一个文件。
技术图片
对应的就是这个文件
技术图片
技术图片
由于我不喜欢Express 所以这里就删掉
技术图片
删掉后
技术图片
再删掉,上面的iisSettings嘴周就留下了profiles里面的Three
技术图片

通过这里配置的环境变量,来判断你是否是开发模式
技术图片
还有一个内置的方法 IsProduction是用来判断是否是生产环境的。
技术图片
还有isStaging
技术图片
如果想把环境变量设置为自己定义的值,例如这里改成OK
技术图片
通过IsEnvironment这里就可以判断了。
技术图片

我们还是改回去
技术图片
这个IsDeveloponment这个方法是在IWebHostEnvironment上的。IWebHostEnvironment也是注入的
下面的意思是只有在开发环境的时候才使用异常页的中间件。
技术图片

.net core 还可以争对不同的环境有不同的配置方法。比如说我们想争对Development单独有一个Configure方法
技术图片
按照方法名来判断,如果你当前的环境是Development那么就会走ConfigureDevelopment这个方法了。
技术图片
ConfigureServices也是同样的道理。后面加上环境名就可以了。
技术图片
以上是方法级别的,可以争对不同的环境有不同的方法。StartUp这个类也可以争对不同的环境有不同的方法
比如说争对Development ,就可以把类改成StartupDevelopment。开发环境就会走这个配置类了。
技术图片
但是如果你是生产环境的时候他就找不到Startup这个类了。它就会报异常错误。
Startup的类改成StartupDevelopment以后,这里就不能再是
技术图片
这里需要使用另外一个方法,把泛型去掉。然后。括号里面的参数是程序集。这个程序集就是Program所在的程序集。这时候就会争对不同的环境找不同的startup类技术图片

静态文件

。net core的静态文件,都应该放在wwwroot的文件夹下面,这里我们手动创建一个。改了名字后,文件夹的图标也变了。说明它是一个特殊的文件夹。
技术图片
放css、javascript、图片等文件。或者是有一些图标,涉及到一些字体。
创建一个images文件夹
技术图片

放一个图片进来。
技术图片

访问这个图片
技术图片
之所以能看到图片是因为我们使用了UseStaticFiles这个中间件
技术图片
如果把它注释掉
技术图片
运行程序,再次访问这个图片、。就访问不到了。技术图片

包管理

技术图片

使用npm安装bootstrap。它需要一个配置文件,我们来添加一个配置文件
技术图片
输入npm搜索一下
技术图片
就叫做package.json
技术图片
输入bootstrap然后后面选择版本号,这里都是有智能提示的。
技术图片

技术图片
保存后,左下角实际上就会去安装这个包
技术图片
在我们的项目文件夹下node_modules文件夹下。
技术图片
显示所有是可以看到这个文件夹的
技术图片
我们要向办法把node_modules下的bootstrap文件 弄到wwwroot下。可以通过复制的方法复制过去,但是这样比较笨
技术图片
VS内置了一些工具,可以自动把相应的文件弄过去。后续再讲。

另外一种安装包的方式

这里先把bootstrap删掉。
技术图片
删掉后,一保存。node_modules里面的包也会自动删除。
技术图片

我们吧package.json这个文件也删掉
技术图片
我们要使用VS里面自带的一个工具
技术图片

Provider这里有几个选项,
cdnjs:是一个cdn的服务商
filesystem:指的是本地的文件系统。
unpkg:是我们要使用的,它实际上使用了npm
技术图片
直接输入我们要安装的包名
技术图片
默认把包里面所有的文件都给选上
技术图片
实际上我们可以单独做选择,只需要选取这一个css就可以了。
技术图片
或者是选择这个不压缩的
技术图片
Target目标的位置。然后点击install
技术图片

技术图片
同时添加了一个libman.json的文件在根目录。
技术图片
libman同时也支持命令行。需要全局安装一个libman。详细的不讲了。看官方文档

在wwwroot目录下创建css文件夹,然后创建site.css
技术图片
在这个css文件件内写点东西
技术图片

css合并和打包

有这样的两个css文件后,
技术图片
实际运行网站的时候,只想有一个css,就需要把这两个css合并。再就是实际运行的css就要进行压缩,把空格亚索掉
所以就需要两个操作,一个是打包一个是压缩。
.net core内置了工具分别进行打包和压缩。
新建bundleconfig.json文件。
技术图片
输入的文件生成未all.min.css
合并的文件是inputFiles的数组配置的两个文件。
技术图片


技术图片
通过nuget安装一个包
技术图片
技术图片
选择项目,然后进行安装
技术图片
安装好之后,build一下这个项目
技术图片
看到下面的输出,可以看到Bundler和Minified在工作。
技术图片


在wwwroot/css下可以看到all.min.css和bootstrap.css
技术图片
技术图片
实际上这个bootstrap并没有进行压缩。
技术图片
为啥没有压缩呢,具体看下文档吧,因为实际博主平时只做webApi很少走web mvc的项目
技术图片
 

结束


 

 

P3 创建项目(下)

标签:内嵌   ide   targe   不同   src   特殊   bootstra   项目文件   中间件   

原文地址:https://www.cnblogs.com/wangjunwei/p/12535744.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!