Express访问静态资源(express.static)
在开发全栈的时候,html页面需要显示一些图片,视频之类的资源。这些资源被称为“静态资源”,即对每一个用户来讲都是相同的资源。写这篇博文通过对比前后端调用静态资源的方式来记录express框架下静态资源的访问方法。
前端调用静态资源
初入前端的同志应该知道,前端里调用静态资源只是用来测试程序的“缓兵之计”,因为网页的资源一定是来自后端服务器的。在还没有对接服务器的情况下,以播放视频为例,前端是如何实现的呢。
既然只有前端那视频只能是在本地的资源。视频和html文件应在同一目录中:
在video,html文件中输入以下代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
</head><body><p>video:</p><video id="video1" controls width="300px" autoplay><source src="1.mp4" type="video/mp4"></video>
</body>
</html>
由html代码可知,视频的路径是由video标签内部的src="1.mp4"决定的,因为html文件和视频文件在同一目录下,因此地址直接写文件名称即可。
Express访问静态资源
当前端要显示后端的静态资源时,就变得比较讲究了。首先,node.js中需要将静态文件放在一个静态目录中。
静态目录的做法:
1.在工程中新建一个文件夹,命名为public。
2.将静态资源全部放在public文件夹中,本次将1.mp4放入:
3.在app.js中设置静态路径,首先导入path模块:
const path = require('path');
4.设置静态路径。__dirname是当前文件所在绝对目录的意思。
app.use('/static',express.static(path.join(__dirname,'public')));
JS代码实现:
JS中的代码比较休闲,只需要传送html页面和设置静态路径就好了。
var express = require('express');
var app = express();
const path = require('path');
app.use('/static',express.static(path.join(__dirname,'public')));
app.get('/', function (req, res) {res.sendFile( __dirname + "/" + "video.html" );
});// 显示html页面var server = app.listen(8080, function () {var host = server.address().address;var port = server.address().port;// 服务器IP地址为127.0.0.1 端口为8888console.log( "server is running"+host+port);});
HTML5代码实现:
html5代码需要稍微修改一下路径。将原先的1.mp4修改为static/1.mp4。项目的根目录是project,而视频在project里的子目录中,因此需要加文件目录符+虚拟路径“static”。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
</head><body><p>video:</p><video id="video1" controls width="300px" autoplay><source src="static/1.mp4" type="video/mp4"></video>
</body>
</html>
代码跑起来,完工:
Express访问静态资源(express.static)相关推荐
- 关于使用NodeJS+Express搭建服务器访问静态资源的一些填坑经验
前言 NodeJs是一个能让前端开发工程师变成全栈工程师的神器.最近在搞一个私活,需要上传图片到服务器存储.按照以前的想法,是用Java写代码搭服务器.奈何,大学毕业后就一直在搞前端和安卓开发.Jav ...
- vue打包后css路径_Vue打包后访问静态资源路径问题
Vue打包后访问静态资源路径问题 Vue介绍中static文件夹里放的是静态资源目录,如图片.字体等. 我们发现运行npm run start后本地图片路径是没问题的,但是打包上传后会怎么样呢? 我们 ...
- SpringBoot中访问静态资源
场景 在SpringBoot中加载静态资源和在普通的web应用中不一样. 默认情况下: SpringBoot从classpath的/static,/public或者 /META-INF/resourc ...
- Spring中拦截/和拦截/*的区别 - 不能访问到返回的JSP - 访问静态资源(jpg,js等)
最近碰到了一个spring的web.xml无法跳转到index.html页面的小问题,查了之后从下面这篇文章中受益,特此转发,谢谢!!! 一.我们都知道在基于Spring的Application中,需 ...
- 第六篇:Spring Boot 访问静态资源
Spring Boot的默认静态资源的路径为: spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/ ...
- Spring Boot整合Servlet,Filter,Listener,访问静态资源
目录 Spring Boot整合Servlet(两种方式) 第一种方式(通过注解扫描方式完成Servlet组件的注册): 第二种方式(通过方法完成Servlet组件的注册) Springboot整合F ...
- springboot 整合 Servlet、Filter、Listener、访问静态资源
springboot 整合 Servlet.Filter.Listener.访问静态资源 1.引入pom.xml依赖 <dependency><groupId>org.spri ...
- 【转载】SpringMVC访问静态资源
在SpringMVC中常用的就是Controller与View.但是我们常常会需要访问静态资源,如html,js,css,image等. 默认的访问的URL都会被DispatcherServlet所拦 ...
- SpringBoot访问静态资源(图片)
SpringBoot中的静态资源访问 springboot访问静态资源的几种方式 (优先级从高到低) (1)在src/main/resources/目录下创建 META-INF/resources文件 ...
- 记录使用nginx部署静态资源流程,以及遇到的访问静态资源404问题
nginx部署静态资源 将网站静态资源(HTML,JavaScript,CSS,img等文件)与后台应用分开部署实现动静分离,提高用户访问静态代码的速度,降低对后台应用访问,减轻后台服务器的压力. 将 ...
最新文章
- 2020 年,让 OKR 助力你稳住 flag 清单!
- 苹果树的故事(转发的)
- C++Primer笔记之复制控制
- 局部特征(2)——Harris角点
- logging 模块
- ubuntu获取root权限_群辉 SSH 获取 root 权限
- python爬虫简单示例_最简单爬虫示例(入门级)
- matlab 日期加小时数_MATLAB时间与日期的基本操作
- eclipse打不开,报错 java was started with exit code=13
- 银行比赛计算机录入技巧,“金手指”、翻打传票、汉字录入……恒丰银行劳动技能竞赛现场高手过招精彩不断...
- matlab 函数输出 向量,matlab中的函数返回向量
- 【博学谷学习记录】超强总结,用心分享 | 人工智能常用数据可视化库 matplotlib 入门(1)
- PHPMyWind后台登录密码忘记的解决办法
- Echarts显示行政区域图并上色
- fork()创建子进程步骤、函数用法及常见考点(内附fork()过程图)
- 登链钱包(一款功能强大的以太坊钱包)完全开源
- 一个简单的神经网络,三种常见的神经网络
- 怎么查看php-fpm的错误日志,php fpm如何开启错误日志
- 2023年品牌营销趋势是什么?如何提升品牌知名度
- 转换CLOB字段类型为VARCHAR2