nodejs app.use(express.static) 静态文件托管 (四)

时间:2018-11-01 23:13 作者:Mr.Pan 阅读数:688


        在上一章中,实现了调用模板文件输出到浏览器中,但是页面上没有任何的样式,也没有显示任何图片,此时此刻,作为一名.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下的子路径即可,举例说明:

image.png



开始改动项目代码


app.js 改动后如图:

nodejs app.use(express.static)  静态文件托管


新增 site.css 样式文件

在public/css 文件夹下新增 site.css 样式文件

image.png




Index.html 改动后如图: 

nodejs app.use(express.static)  静态文件托管

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 , 如图

nodejs app.use(express.static)  静态文件托管


运行效果如图:

nodejs app.use(express.static)  静态文件托管



推荐文章

[推荐] .NET Core 学习资料精选:入门

[推荐] 数据库常见死锁原因及处理

[推荐] C# 设置Excel数据自适应行高、列宽的2种情况 (转)

[推荐] C++ vector 和set结合数字去重练习

[推荐] win7 .net core 部署 The library hostfxr.dll was found, but loading it from C:\<path_to_app>\hostfxr.dll failed

[推荐] JdbcTemplate多数据源使用

[推荐] 深入学习Redis(2):持久化

[推荐] asp.net core系列 67 Web压力测试工具WCAT

[推荐] .Net Core 2.0 获取客户端IP地址

[推荐] 第七天 让你的container实现跨主机访问

[推荐] nodejs app.use(express.static) 静态文件托管 (四)

[推荐] 8天玩转并行开发——第八天 用VS性能向导解剖你的程序

[推荐] C++ Lambda表达式练习

[推荐] C++ 稀疏表的练习

[推荐] Spring Boot 2 (五):Docker Compose + Spring Boot + Nginx + Mysql 实践

[推荐] asp.net core系列 33 EF查询数据 (2)

[推荐] 试试发布

[推荐] C++中 *p++ 到底是 *(p++) 还是 (*p)++ 1. 猜想

[推荐] JavaWeb-Log4j: WARN No appenders could be found for logger

[推荐] C++ 模板练习


评论列表

   回复 引用
#1楼    2018/11/2 14:05:30    童俊强
沙发~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



注册用户登录后才能发表评论,请登录注册,访问 博客首页