中间件设置静态资源目录

news2024/11/17 1:48:58

文章目录

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

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

服务器中的代码,对于外部来说都是不可见的,
所以我们写的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.coloradmin.cn/o/1542116.html

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

相关文章

C语言——sizeof与strlen的对比

一.sizeof 我们在学习操作符的时候&#xff0c;就了解到了sizeof操作符&#xff0c;它的作用是求参数所占内存空间的大小&#xff0c;单位是字节。如果参数是一个类型&#xff0c;那就返回参数所占的字节数。 #include <stdio.h>int main() {int a 10;size_t b sizeo…

surface go 2简单的配置

1.基本的配置信息 cpu 4425Y 感觉还是比较的弱 但是处理基本的网页浏览或收发电子邮件还是很不错的 2. C:\Users\win>systeminfo 主机名: DESKTOP-F5TT6HJ OS 名称: Microsoft Windows 10 专业版 OS 版本: 10.0.19045 暂缺 Build 19045 …

机器学习——贝叶斯分类器(基础理论+编程)

目录 一、理论 1、初步引入 2、做简化 3、拉普拉斯修正 二、实战 1、计算P(c) 2、计算P(x|c) 3、实战结果 1、数据集展示 2、相关信息打印 一、理论 1、初步引入 在所有相关概率都已知的理想情形下&#xff0c;贝叶斯决策论考虑如何基于这些概率和误判损失来选择最…

STM32通过串口发送指令控制LED灯亮灭OLED并显示命令

先来看看程序运行的结果吧&#xff1a; 接下来就不说废话了&#xff0c;自己看源代码吧&#xff01;每一行我都做了注释&#xff1a; 首先是主函数main.c文件&#xff1a; #include "stm32f10x.h" // Device header #include "OLED.h" …

学习SpringBoot笔记--知识点(1)

目录 SpringBoot介绍 创建一个最基础的springbooot项目 使用Spring Initializr创建springboot项目 Spring Boot 自动配置机制 SpringBoot常用注解 1.组件注册 2.条件注解 3.属性绑定 SpringBoot自动配置流程​编辑 学习SpringBoot的方法 ​编辑 SpringBoot日志配置…

AJAX——JSON

目录 一、JSON概述 二、JSON对象语法 三、JSON序列化方法 四、JSON与XML比较 五、Java对象与Json对象的转换 六、Js解析服务器发送过来的JSON字符串 七、$.getJSON() 一、JSON概述 JSON简介:JSON的全称为JavaScript Object Nation(JavaScript 对象表示语法)&#xff0c;…

基于nodejs+vue的BBS论坛系统python-flask-django-php

为了更好地发挥本系统的技术优势&#xff0c;根据BBS论坛系统的需求&#xff0c;本文尝试以B/S架构设计模式中的express框架&#xff0c;nodejs语言为基础&#xff0c;通过必要的编码处理、BBS论坛系统整体框架、功能服务多样化和有效性的高级经验和技术实现方法&#xff0c;旨…

【Web】NKCTF 2024 个人wp(部分)

目录 my first cms 全世界最简单的CTF attack_tacooooo 属实太菜了&#xff0c;3/4 my first cms 一眼搜版本2.2.19 CVE -CVE-2024-27622 GitHub - capture0x/CMSMadeSimple 访问/admin/login.php 爆出弱口令&#xff0c;后台登录 admin Admin123 Extensions > User D…

<Linux> 模拟实现文件流 - 简易版

目录 1. FILE 结构设计 2、函数使用及分析 3、文件打开 fopen 4. 缓冲区刷新fflush 5. 数据写入fwrite 6. 文件关闭 fclose 7. 测试 8. 小结 1. FILE 结构设计 在设计 FILE 结构体前&#xff0c;首先要清楚 FILE 中有自己的缓冲区及冲刷方式 缓冲区的大小和刷新方式因…

【云开发笔记No.6】腾讯CODING平台

腾讯云很酷的一个应用&#xff0c;现在对于研发一体化&#xff0c;全流程管理&#xff0c;各种工具层出不穷。 云时代用云原生&#xff0c;再加上AI&#xff0c;编码方式真是发生了质的变化。 从前&#xff0c;一个人可以写一个很酷的软件&#xff0c;后来&#xff0c;这变得…

Day08 Java复习8 Spring MVC概念

Day09 Java复习9 Spring MVC spring mvc 的核心组件是什么&#xff1f; DispatcherServlet 1.JAVA 和Spring 、Spring Boot 、Spring MVC的关系 你要举办一个生日派对&#xff0c;而且你希望它既特别又好玩。Java就像是举办派对的地方&#xff0c;Spring、Spring Boot和Spri…

javaSSM公司招聘管理系统IDEA开发mysql数据库web结构计算机java编程maven项目

一、源码特点 IDEA开发SSM公司招聘管理系统是一套完善的完整企业内部系统&#xff0c;结合SSM框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;MAVEN方式加 载&#xff0c;系统具有完整的源代码和…

银行监管报送系统介绍(六):客户风险数据报送系统

【概念定义】 银监会决定从2013年起实行新版客户风险统计制度&#xff0c;对各政策性银行、国有商业银行、股份制商业银行进行客户信息汇总统计。 客户风险统计信息&#xff0c;是指新版客户风险统计报送信 息。客户风险统计报送信息包括但不限于对公及同业客户授信和 表内外业…

设计模式(十二):中介者模式(行为型模式)

Mediator&#xff0c;中介者模式&#xff1a;用一个中介对象封装一些列的对象交互。属于行为型模式 Facade&#xff0c;外观模式&#xff1a;为子系统中的一组接口提供一致的界面&#xff0c;facade 提供了一高层接口&#xff0c;这个接口使得子系统更容易使用。属于结构型模式…

Rust并发编程thread多线程和channel消息传递

安全高效的处理并发是 Rust 诞生的目的之一&#xff0c;主要解决的是服务器高负载承受能力。 并发&#xff08;concurrent&#xff09;的概念是指程序不同的部分独立执行&#xff0c;这与并行&#xff08;parallel&#xff09;的概念容易混淆&#xff0c;并行强调的是"同…

npm、nrm、nvm详解与应用

本文全面介绍了 npm、nrm 以及 nvm 这三个与 Node.js 开发密切相关的工具。首先&#xff0c;对 npm 进行了定义和功能解释&#xff0c;包括其在依赖管理、项目管理、脚本执行、版本控制和社区贡献等方面的作用。接着&#xff0c;详细介绍了 npm 的常用命令和设置下载源的操作&a…

python综合实战案例-数据分析

Python是进行数据分析的好工具&#xff0c;今天就是借助一个案例给大家进行数据分析讲解。 本例设计一个log.txt⽂件&#xff0c;该文件记录了某个项⽬中某个 api 的调⽤情况&#xff0c;采样时间为每分钟⼀次&#xff0c;包括调⽤次数、响应时间等信息&#xff0c;⼤约18万条数…

java数据结构与算法刷题-----LeetCode451. 根据字符出现频率排序

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. hash统计出现次数后排序2. 桶排序 1. hash统计出现次数后排序…

WebClient 同步、异步调用实现对比

文章目录 一、概述二、pom依赖三、代码结构四、源码传送1、异步代码2、同步代码3、完整代码 一、概述 WebClient是Spring WebFlux模块提供的一个非阻塞的基于响应式编程的进行Http请求的客户端工具&#xff0c;从Spring5.0开始WebClient作为RestTemplete的替代品&#xff0c;有…

初探Flink集群【持续更新】

周末下雨&#xff0c;倒杯茶&#xff0c;在家练习Flink相关。 开发工具&#xff1a;IntelliJ Idea 第一步、创建项目 打开Idea&#xff0c;新建Maven项目&#xff0c;包和项目命名 在pom.xml 文件中添加依赖 <properties><flink.version>1.13.0</flink.vers…