nodejs使用express中静态资源托管(express.static())时遇到的bug
如下:将test.html的页面挂载在服务器上,
const express= require('express')
const fs= require('fs')
let app = express();
// app.use(express.static('node_modules'))
app.use(express.static('node_modules'))
app.listen('4000',()=>{
console.log("http://127.0.0.1:4000")
})
app.get('/',(req,res)=>{
fs.readFile('./test.html','utf-8',(err,data)=>{
console.log(data)
res.end(data)
})
})
test.html如下,页面为一个wangEditor的demo,jq资源在本地引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>
<div id="editor">
<p></p>
</div>
<button class="getsomething">获取</button>
<!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
<script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.js"></script>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()
let getsomething = document.querySelector('.getsomething');
getsomething.onclick= function(){
$.get({
url:'http://127.0.0.1:4040/setids'
})
console.log(editor.txt.html())
}
</script>
</body>
</html>
此时已经设置了静态资源托管,但是调用http://127.0.0.1:4000时会报错,错误为找不到jq资源,如下
此时bug的原因为jq的引入问题(test.html中14行代码)
<script src="./node_modules/jquery/dist/jquery.js"></script>由于
解决方法
法一
由于设置了静态资源托管(app.use(express.static('node_modules')))因此在html中调用资源的时候不需要加上./node_modules,即如下引入即可
<script src="./jquery/dist/jquery.js"></script>
法二
或者为其设置一个虚拟路径,在静态资源管理时使用如下代码
app.use('/node_modules',express.static('node_modules'))
ps:若使用aaa为虚拟路径则修改如下
js文件
app.use('/aaa',express.static('node_modules'))
html中引用
<script src="./aaa/jquery/dist/jquery.js"></script>由于
nodejs使用express中静态资源托管(express.static())时遇到的bug的更多相关文章
- IDEA中静态资源无法找到的原因
IDEA中静态资源无法找到, 原因1:同名的文件但是在不同的包里. 原因2:IDEA重启,web清空缓存. 原因3:错误的文件及路径. 原因4:其他原因排除后,可使用绝招重启试试.
- IntelliJ IDEA+SpringBoot中静态资源访问路径陷阱:静态资源访问404
IntelliJ IDEA+SpringBoot中静态资源访问路径陷阱:静态资源访问404 .embody{ padding:10px 10px 10px; margin:0 -20px; borde ...
- node——通过express模拟Apache实现静态资源托管
1.express中处理静态资源的函数 创建一个app.js作为入口文件,创建一个public文件夹作为静态资源文件夹 var app=express();var fn=express.static( ...
- Spring Boot中静态资源(JS, 图片)等应该放在什么位置
Spring Boot的静态资源,比如图片应该放在什么位置呢, 如果你放在传统WEB共的类似地方, 比如webapp或者WEB-INF下,你会得到一张示意文件未找到的破碎图片.那应该放哪里呢? 百度一 ...
- wpf中静态资源和动态资源的区别
静态资源(StaticResource)指的是在程序载入内存时对资源的一次性使用,之后就不再访问这个资源了. 动态资源(DynamicResource)指的是在程序运行过程中然会去访问资源.
- springboot 应用中静态资源下载
一. 场景介绍 Excel模板静态资源在,应用中的static文件夹中,文件名称包含中文; 需求:页面直接访问下载Excel模板. 二.目录结构 三.后台代码 @GetMapping("/d ...
- 关于web项目中静态资源加载不了的一些解决思路
问题的产生: <!--springMVC前端控制器加载--> <servlet> <servlet-name>springmvc</servlet-name& ...
- Springboot中静态资源和拦截器处理(踩了坑)
背景: 在项目中我使用了自定义的Filter 这时候过滤了很多路径,当然对静态资源我是直接放过去的,但是,还是出现了静态资源没办法访问到springboot默认的文件夹中得文件 说下默认映射的文件夹有 ...
- java中静态资源处理方法
方案一:激活Tomcat的defaultServlet来处理静态文件 在 web.xml 中添加: <servlet-mapping> <servlet-name>defaul ...
随机推荐
- Samtec与Neoconix达成合作并和II-VI推出新产品
序言:Samtec近日动作不断, 近日Samtec与Neoconix达成合作并和II-VI推出新产品,以下是详细内容. Samtec与Neoconix签订Neoconix PCBeam 技术授权协议, ...
- C++ 迷宫寻路问题
迷宫寻路应该是栈结构的一个非常经典的应用了, 最近看数据结构算法应用时看到了这个问题, 想起来在校求学时参加算法竞赛有遇到过相关问题, 感觉十分亲切, 在此求解并分享过程, 如有疏漏, 欢迎指正 问题 ...
- JAVA GC算法详解
生存还是死亡 对象是否需要被垃圾收集器回收主要有两种方式:引用计数法和可达性分析算法 引用计数法 给对象添加一个引用计数器,每当有一个地方引用他的时候,计数器的数值就+1,当引用失效时,计数器就-1: ...
- 基于Unix Socket的可靠Node.js HTTP代理实现(支持WebSocket协议)
实现代理服务,最常见的便是代理服务器代理相应的协议体请求源站,并将响应从源站转发给客户端.而在本文的场景中,代理服务及源服务采用相同技术栈(Node.js),源服务是由代理服务fork出的业务服务(如 ...
- base64编码的图片在网页中显示
<img @error="changeImgSrc(user)" :src="user.src" width="42" height= ...
- CVPR 2020 全部论文 分类汇总和打包下载
CVPR 2020 共收录 1470篇文章,根据当前的公布情况,人工智能学社整理了以下约100篇,分享给读者. 代码开源情况:详见每篇注释,当前共15篇开源.(持续更新中,可关注了解). 算法主要领域 ...
- aosp 制作 rom 刷机 添加厂家二进制驱动 及 出厂镜像
首先介绍下背景知识. aosp 仅是一套源码,不含厂家驱动. CM安卓的厂家驱动是自行提取的. 一般的安卓手机分区,有 boot , system, user , Baseband 基带, recov ...
- DBA_Oracle DBA常用表汇总(概念)--转载
https://www.cnblogs.com/eastsea/p/3799411.html 一.与权限相关的字典 ALL_COL_PRIVS表示列上的授权,用户和PUBLIC是被授予者 ALL_C ...
- 复制图片链接和标题生成Markdown文本
写Markdown的时候常常会需要复制图片链接和标题以插入图片,不借助其他工具的话,一般需要先在Markdown文件中输入插入图片的格式,然后在浏览器中复制图片链接和标题将其依次粘贴到Markdown ...
- oracle使用expdp定时备份数据库
目录 oracle使用expdp备份数据库 备份shell脚本 创建定时任务 oracle使用expdp备份数据库 备份shell脚本 #!/bin/sh #获取当前时间 BACKUPTIME=$(d ...