中间件设置静态资源目录

文章目录

  • 为什么要设置静态资源目录
  • 设置静态资源代码示例

为什么要设置静态资源目录

服务器中的代码,对于外部来说都是不可见的,
所以我们写的html页面,浏览器无法直接访问
如果希望浏览器可以访问,则需要将页面所在的目录设置静态资源目录
设置static中间件后,浏览器访问时,会自动去public目录寻找是否有匹配的静态资源(可以理解为浏览器自动把public目录拼接到服务器地址的后面,我们想要静态资源的时候,不用自己加目录(public),直接服务器网址后面加上资源名字就可以了
在这里插入图片描述
如上图,地址栏中是http://localhost:3000/沈星回.png
而不是http://localhost:3000/public/沈星回.png(意思是public目录不用写)

设置静态资源代码示例

const express = require("express")
const path = require("path")// 创建服务器的实例
const app = express()// 设置static中间件后,浏览器访问时,会自动去public目录寻找是否有匹配的静态资源,默认寻找的是index.html文件
app.use(express.static(path.resolve(__dirname, "./public")))// 配置路由
app.get("/loginaa", (req, res) => {
// 获取到用户输入的用户名和密码
// req.query 表示查询字符串中的请求参数
// console.log(req.query.username)
// console.log(req.query.password)if (req.query.username == "沈星回" && req.query.password == "5201314") {res.send("我知道了,沈星回是你老公!!!")}else {res.send("回答错误,你不是沈夫人")}})// 启动服务器
app.listen(3000, () => {console.log("服务器已起动~")
})

在上面的示例中,express.static 是Express.js提供的内置中间件,用于提供静态文件服务。它接受一个参数,即静态资源目录的路径,这里使用的是相对路径 ‘public’,表示静态资源文件存放在项目根目录下的 public 文件夹中。

接着,通过调用 app.use 方法将静态文件中间件应用到整个应用程序中。这样,当浏览器发出针对 / 路径下的静态资源请求时Express.js会自动查找并返回相应的文件,而不需要你在路由中进行特别的处理。

总之,虽然 use 方法本身不是专门用于设置静态资源目录的,但你可以借助于内置的静态文件中间件来实现这一功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/768513.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构面试常见问题之串的模式匹配(KMP算法)系列-大师改进

😀前言 KMP算法是一种改进的字符串匹配算法,由D.E.Knuth,J.H.Morris和V.R.Pratt提出,因此人们称它为克努特—莫里斯—普拉特操作(简称KMP算法) KMP算法的优势: 提高了匹配效率,时间复杂度为O(m…

IDEA, Pycharm, Goland控制台乱码

IDEA, Pycharm, Goland控制台乱码 问题描述: 控制台出现����等乱码 复现频率: 总是 解决方案: 以IDEA为例 添加 -Dfile.encodingUTF-8位置 idea64.exe.vmoptions 在安装idea的bin目录idea.vmoptions idea客户端 示意图

解决长尾问题,BEV-CLIP:自动驾驶中复杂场景的多模态BEV检索方法

解决长尾问题,BEV-CLIP:自动驾驶中复杂场景的多模态BEV检索方法 理想汽车的工作,原文,BEV-CLIP: Multi-modal BEV Retrieval Methodology for Complex Scene in Autonomous Driving 链接:https://arxiv.org/pdf/2401.…

YoloV8改进策略:Block改进|PKINet

摘要 PKINet是面向遥感旋转框的主干,网络包含了CAA、PKI等模块,给我们改进卷积结构的模型带来了很多启发。本文使用PKINet的Block替换YoloV8的Block,实现涨点。改进方法是我独创首发,给写论文没有思路的同学提供改进思路,欢迎大家订阅! 论文:《Poly Kernel Inception …

Pycharm配置conda

1.下载conda Free Download | Anaconda . 2.配置环境 1.conda自带base环境 2.创建环境 3. Pycharm创建项目,选择环境 3.Pycharm中新建conda环境

CSRF一-WEB攻防-CSRF请求伪造Referer同源置空配合XSSToken值校验复用删除

演示案例: CSRF-无检测防护-检测&生成&利用CSRF-Referer同源-规则&上传&XSSCSRF-Token校验-值删除&复用&留空 #CSRF-无检测防护-检测&生成&利用 检测:黑盒手工利用测试,白盒看代码检验(有无token…

【ESP32S3 Sense接入百度在线语音识别】

视频地址: ESP32S3 Sense接入百度在线语音识别 1. 前言 使用Seeed XIAO ESP32S3 Sense开发板接入百度智能云实现在线语音识别。自带麦克风模块用做语音输入,通过串口发送字符“1”来控制数据的采集和上传。 步骤概括    (1) 在百度云控制端选择“语音…

YiYi-Web项目介绍

YiYi-Web项目介绍 1. 简介2. 使用2.1 后端开发环境2.2 前端开发环境 3. 测试环境:4. 更新日志5. 打包情况6.项目截图 本项目前端是html、css、js、jQuery基础技术。 后端都是最新的SpringBoot技术,不分离版本, 是最基础的项目开发教程&#x…

挺后悔,我敷衍地回答了“程序员如何提升抽象思维“

分享是最有效的学习方式。 博客:https://blog.ktdaddy.com/ 大家好,我是老猫。 大概在月初的时候,我发了一篇文章【当程序员之后?(真心话)】,在这篇文章中,提及了抽象思维对一名程序员的重要性。可能说得也比较笼统&a…

【Flask】Flask数据模型关系

数据模型关系 一对多 如上所示,一个作者关联多个文章,暂时认定,一篇文章只能有一个作者。 作者以及文章的类定义如下所示: class Author(db.Model):id db.Column(db.Integer, primary_keyTrue)name db.Column(db.String(128)…

Godot.NET C# 工程化开发(1):通用Nuget 导入+ 模板文件导出,包含随机数生成,日志管理,数据库连接等功能

文章目录 前言Github项目地址,包含模板文件后期思考补充项目设置编写失误环境visual studio 配置详细的配置看我这篇文章 Nuget 推荐NewtonSoft 成功Bogus 成功Github文档地址随机生成构造器生成构造器接口(推荐) 文件夹设置Nlog 成功!Nlog.configNlogHe…

代码学习记录26----贪心算法

随想录日记part26【把这两天没写的补回来】 t i m e : time: time: 2024.03.22-24 主要内容:今天开始学习贪心算法,基础知识可以看链接,:接下来是针对题目的讲解:1.分配饼干 &#x…

继承和多态(1)(继承部分)

继承 继承的概念 上文就是继承的概念。 必须记住父类也可以称为基类,超类。 子类也可以称为派生类。 继承的语法 在Java中如果要表示类之间的继承关系,需要借助extends关键字,具体如下: 修饰符 class 子类 extends 父类 {//…

网易web安全工程师进阶版课程

课程介绍 《Web安全工程师(进阶)》是由“ i春秋学院联合网易安全部”出品,资深讲师团队通过精炼的教学内容、丰富的实际场景及综合项目实战,帮助学员纵向提升技能,横向拓宽视野,牢靠掌握Web安全工程师核心…

pycharm搭建新的解释器及删除处理

目录 1.创建虚拟环境 个人实际操作: 对于“继承全局站点包”: 2.创建一个新项目 3.删除操作 (1)删除解释器 (2)删除新建项目 1.创建虚拟环境 Pycharm官方文档说明网址: Configure a virt…

【机器学习】包裹式特征选择之序列前向选择法

🎈个人主页:豌豆射手^ 🎉欢迎 👍点赞✍评论⭐收藏 🤗收录专栏:机器学习 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进…

向开发板上移植ip工具:交叉编译 ip工具

一. 简介 前面几篇文章学习了 CAN设备节点的创建,以及如何使能 CAN驱动。 本文学习向开发板上移植ip工具。 二. 向开发板上移植ip工具:交叉编译 ip工具 注意:在移植 ip 命令的时候必须先对根文件系统做个备份!防止操作失误导…

ffmpeg实现媒体流解码

本期主要讲解怎么将MP4媒体流的视频解码为yuv,音频解码为pcm数据;在此之前我们要先了解解复用和复用的概念; 解复用:像mp4是由音频和视频组成的(其他内容流除外);将MP4的流拆分成视频流(h264或h265等)和音频流(AAC或mp3等); 复用:就是将音频和视频打包成MP4或者fl…

Cobalt Strike -- 各种beacon

今天来讲一下cs里面的beacon 其实cs真的功能很强大,自带代理创建,自带beacon通信!!! 一张图,就能说明beacon的工作原理 1.Beacon 每当有一台机器上线之后,我们都会选择sleep时间,…

吴恩达2022机器学习专项课程(一) 3.6 可视化样例

问题预览 1.本节课主要讲的是什么? 2.不同的w和b,如何影响线性回归和等高线图? 3.一般用哪种方式,可以找到最佳的w和b? 解读 1.课程内容 设置不同的w和b,观察模型拟合数据,成本函数J的等高线…