在上一章中,实现了调用模板文件输出到浏览器中,但是页面上没有任何的样式,也没有显示任何图片,此时此刻,作为一名.Net 开发人员我想到了.Net Core中的 UseStaticFiles(),
在nodejs中提供静态化的方法是express.static(),还是以演示项目blog3为例
在app.js 中增加下面的代码
app.use('/public',express.static(__dirname+'/public'));//将文件设置成静态
express.static(),提供静态化,参数为静态化的文件夹路径,如果public为一级目录,可以直接写成 express.static(‘public’)
app.use() , 为请求注册中间件,
参数‘/public’,可以理解为匹配规则,/public 路径下所有请求都走静态化文件
也可以理解为虚拟目录(为静态化文件夹起一个别名),不一定是public,也可以是/cc 或者 /wwwroot
__dirname ,全局变量,指向当前运行脚本所在的目录
app.use(express.static(__dirname+'/public'));//将文件设置成静态
没有参数 ‘/public’ 也是可以的,但是在页面引用静态文件时,直接写public下的子路径即可,举例说明:
开始改动项目代码
app.js 改动后如图:
新增 site.css 样式文件
在public/css 文件夹下新增 site.css 样式文件
Index.html 改动后如图:
href='/public/css/site.css' 这里的/public,就是刚才的规则名称(别名),要前后对应,如果前面写
app.use('/public',express.static(__dirname+'/wwwroot'));
href='/wwwroot/css/site.css' ,这里也要相应变动,即使项目中文件夹名称为public ,也要遵守静态化别名规则。
将app.js 与index.html 稍作变动,将匹配规则 /public 改为 /abc , 如图
运行效果如图: