当前位置： 首页 > article >正文

Node.js Express 处理静态资源

article 2026/2/19 14:51:01

目录

 

1. 什么是静态资源？

2. 安装 Express

3. 目录结构

4. 创建 server.js

5. 创建 public/index.html

6. 创建 public/style.css

7. 创建 public/script.js

8. 运行服务器

9. 结语

 

1. 什么是静态资源？

静态资源指的是 HTML、CSS、JavaScript、图片 等文件，Express 可以使用 express.static() 让这些文件被浏览器直接访问。

2. 安装 Express

mkdir express-static && cd express-static  # 创建项目目录
npm init -y  # 初始化项目
npm install express  # 安装 Express

3. 目录结构

express-static/
│── public/      # 存放静态资源
│   ├── index.html
│   ├── style.css
│   ├── script.js
│   ├── image.jpg
│── server.js    # Express 服务器

4. 创建 server.js

文件名：server.js（JavaScript 代码）

// server.js
const express = require('express'); // 引入 Express
const app = express(); // 创建 Express 应用
const port = 3000; // 端口号// 配置 Express 提供静态资源
app.use(express.static('public'));// 启动服务器
app.listen(port, () => {console.log(`服务器运行在 http://localhost:${port}`);
});

5. 创建 public/index.html

文件名：index.html（HTML 代码）

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Express 静态资源</title><link rel="stylesheet" href="style.css">
</head>
<body><h1>欢迎访问 Express 静态页面！</h1><img src="image.jpg" alt="示例图片"><script src="script.js"></script>
</body>
</html>

6. 创建 public/style.css

文件名：style.css（CSS 代码）

body {font-family: Arial, sans-serif;text-align: center;background-color: #f4f4f4;
}
h1 {color: #333;
}

7. 创建 public/script.js

文件名：script.js（JavaScript 代码）

console.log('静态资源加载成功！');

8. 运行服务器

在终端执行：

node server.js

然后在浏览器访问：
http://localhost:3000/index.html

页面将展示 “欢迎访问 Express 静态页面！”，同时加载 CSS 样式和 JavaScript 脚本。

9. 结语

本文介绍了如何使用 Express 提供静态资源，包括 HTML、CSS、JavaScript 和图片。只需使用 express.static('public')，即可让浏览器直接访问 public 目录中的文件，适合构建简单的静态网站或前后端分离项目。🚀

 

相关文章：

Node.js Express 处理静态资源

目录 1. 什么是静态资源&#xff1f; 2. 安装 Express 3. 目录结构 4. 创建 server.js 5. 创建 public/index.html 6. 创建 public/style.css 7. 创建 public/script.js 8. 运行服务器 9. 结语 1. 什么是静态资源&#xff1f; 静态资源指的是 HTML、CSS、JavaScript、…...

编程日记 2025/12/21 20:52:07

2025企业级项目设计三叉戟：权限控制+错误监控+工程化提效实战指南

一、权限系统设计&#xff1a;动态路由与按钮级控制的终极方案 1. 权限系统架构设计痛点 路由权限滞后&#xff1a;传统方案需页面加载后动态计算路由表&#xff0c;导致首屏白屏时间增加30%按钮颗粒度不足&#xff1a;基于角色的权限控制&#xff08;RBAC&#xff09;无法满…...

编程日记 2026/2/16 20:07:36

DeepSeek-V3新版本DeepSeek-V3-0324

中国人工智能初创公司深度求索&#xff08;DeepSeek&#xff09;2025年3月24日深夜低调上线了DeepSeek-V3的新版本DeepSeek-V3-0324&#xff0c;参数量为6850亿&#xff0c;在代码、数学、推理等多个方面的能力再次显著提升&#xff0c;甚至代码能力追平美国Anthropic公司大模型…...

编程日记 2025/6/28 15:18:16

108回回目设计

由于108回完整目录篇幅极长&#xff0c;我将以分卷缩略核心回目详解形式呈现&#xff0c;既保证完整性&#xff0c;又避免信息过载。以下是凝练后的完整框架与部分代表性回目&#xff1a; 第一卷&#xff1a;京口草鞋摊的野望&#xff08;1-36回&#xff09; 核心矛盾&#xf…...

编程日记 2025/7/7 5:57:45

探索：如何构建一个自我的AI辅助的开发环境？

构建支持AI的开发辅助环境并实现全流程自动化&#xff0c;需要整合开发工具链、AI模型服务和自动化流水线。以下是分步实施指南&#xff0c;包含关键技术栈和架构设计&#xff1a; 一、开发环境基础架构 1. 工具链集成平台 #mermaid-svg-RFSaibQJwVEcW9fT {font-family:"…...

编程日记 2026/2/18 18:52:47

国产RISC-V车规芯片当前现状分析——从市场与技术角度出发

摘要 随着汽车产业的智能化、电动化转型加速&#xff0c;车规级芯片的战略地位日益凸显。RISC-V指令集凭借其开源、灵活、低功耗等优势&#xff0c;成为国产车规芯片的重要发展方向。本文从市场与技术两个维度出发&#xff0c;深入分析国产RISC-V车规芯片的现状。通过梳理国内…...

编程日记 2025/5/18 12:43:39

华为eNSP-配置静态路由与静态路由备份

一、静态路由介绍 静态路由是指用户或网络管理员手工配置的路由信息。当网络拓扑结构或者链路状态发生改变时&#xff0c;需要网络管理人员手工修改静态路由信息。相比于动态路由协议&#xff0c;静态路由无需频繁地交换各自的路由表&#xff0c;配置简单&#xff0c;比较适合…...

编程日记 2026/2/19 4:58:09

数据分析中，文件解析库解析内容样式调整（openpyxl 、tabulate）

CSV文件&#xff1a;使用Python标准库中的csv模块&#xff0c;通过简单的文本解析来读取数据。 Excel文件&#xff1a;使用专门的库&#xff08;如openpyxl、xlrd&#xff09;来解析复杂的文件格式&#xff0c;或者使用pandas库来简化读取过程。 openpyxl openpyxl 是一个 Pyt…...

编程日记 2025/5/27 22:50:50

时尚界正在试图用AI，创造更多冲击力

数字艺术正以深度融合的方式&#xff0c;在时尚、游戏、影视等行业实现跨界合作&#xff0c;催生了多样化的商业模式&#xff0c;为创作者和品牌带来更多机会&#xff0c;数字艺术更是突破了传统艺术的限制&#xff0c;以趣味触达用户&#xff0c;尤其吸引了年轻一代的消费群体…...

编程日记 2026/2/18 10:48:05

ai画图comfyUI 精准定位gligen。允许指定图像中多个对象的位置和大小

基础功能下&#xff0c;outpainting是内容填充&#xff0c;拉近拉远镜头&#xff0c;自动填充旁边物体。嵌入模型也需要单独下载&#xff0c;演示完示例后推荐模型站有更直观效果介绍和用法。选中精确定位。看一眼坐标&#xff0c;直接默认出一张图。然后修改定位&#xff0c;和…...

编程日记 2026/2/15 7:15:15

Python @property 装饰器深度使用教程

一、基础概念与核心原理 1. 装饰器本质 property 是 Python 内置的属性管理装饰器&#xff0c;它将类方法转换为类属性访问接口。其核心价值在于&#xff1a; ​封装性&#xff1a;隐藏属性操作的具体实现​可维护性&#xff1a;在不改变外部接口的前提下修改内部逻辑​安全…...

编程日记 2025/12/3 2:39:47

#VCS# 关于 +incdir+xxx 编译选项的注意点

前段时间，工作中遇到百思不得其解的坑。 按照以往的理解，没有找到任何可能问题点。今天总结下来。 学习目标： +incdir+ 是 VCS 编译器中用于指定 包含文件(include files) 搜索路径的重要选项，主要用于指定 `include 指令的搜索目录。 一 基本功能 作用：添加 Verilog/S…...

编程日记 2025/12/6 9:02:37

DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例7，TableView16_07 列拖拽排序示例

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 DeepSeek 助力 Vue3 开发：打造丝滑的表格（Table）之添加行拖拽排序功能示例7，TableView16_07 列…...

编程日记 2026/2/17 0:42:23

JAVA学习-练习试用Java实现“实现一个Hadoop程序，对大数据集中的文本数据进行自然语言处理和关键词筛选”

问题&#xff1a; 使用java语言&#xff0c;实现一个Hadoop程序&#xff0c;对大数据集中的文本数据进行自然语言处理和关键词筛选。 解答思路&#xff1a; 使用Java语言和Hadoop实现自然语言处理和关键词筛选&#xff0c;你需要创建一个MapReduce程序。以下是一个简单的示例&…...

编程日记 2025/12/12 2:26:34

使用idea开发spark程序

新建scala 项目 创建lib目录 将spark jars/ 路径下所有jar 复制到 lib目录 添加依赖 创建scala 程序 package sparkimport org.apache.spark.{SparkConf, SparkContext}object WordCount {def main(args: Array[String]): Unit {val conf new SparkConf().setAppName(&q…...

编程日记 2026/2/12 20:29:20

看懂roslunch输出

自编了一个demo 第一步&#xff1a;创建功能包 cd ~/catkin_ws/src catkin_create_pkg param_demo roscpp第二步&#xff1a;写 main.cpp 创建文件&#xff1a;param_demo/src/param_node.cpp #include <ros/ros.h> #include <string>int main(int argc, char*…...

编程日记 2025/5/25 3:02:02

洛谷题单1-B2005 字符三角形-python-流程图重构

题目描述 给定一个字符&#xff0c;用它构造一个底边长 5 5 5 个字符&#xff0c;高 3 3 3 个字符的等腰字符三角形。 输入格式 输入只有一行&#xff0c;包含一个字符。 输出格式 该字符构成的等腰三角形&#xff0c;底边长 5 5 5 个字符&#xff0c;高 3 3 3 个字符…...

编程日记 2025/9/13 7:23:30

学习日记0327

A cross-domain knowledge tracing model based on graph optimal transport 我们使用gnn来学习这些节点的特征。在此基础上&#xff0c;我们使用显式分布距离度量对齐来自两个不同域的特征向量&#xff0c;旨在最小化域差异&#xff0c;实现最大的跨域知识转移。 AEGOT-CDKT…...

编程日记 2026/2/15 1:23:38

CSS学习笔记6——网页布局

目录 一、元素的浮动属性、清除浮动 清除浮动的其他方法 1、使用空标签清除浮动影响 2、使用overflow属性清除浮动 3、使用伪元素清除浮动影响 原理 overflow属性 二、元素的定位 1、相对定位 2、绝对定位 ​编辑 3、固定定位 z-index层叠等级属性 一、元素的浮动…...

编程日记 2026/2/16 12:48:31

dubbo http流量接入dubbo后端服务

简介 dubbo协议是基于TCP的二进制私有协议&#xff0c;更适合作为后端微服务间的高效RPC通信协议&#xff0c;也导致dubbo协议对于前端流量接入不是很友好。在dubo框架中&#xff0c;有两种方式可以解决这个问题&#xff1a; 多协议发布【推荐】&#xff0c;为dubbo协议服务暴…...

编程日记 2025/4/9 10:00:40

线程同步——互斥锁

线程同步——互斥锁 目录 一、基本概念 二、打印成对出现的字母 三、生产者消费者&#xff08;有限缓冲问题&#xff09; 3.1 基本概念 3.2 代码实现 一、基本概念 互斥锁是一种用于控制对共享资源访问的同步机制。它确保在同一时间内&#xff0c;只有一个线程可以访问被…...

编程日记 2026/2/16 7:40:26

机试题——村落基站建设

题目描述 假设村落以二叉树的形状分布&#xff0c;我们需要选择在哪些村落建设基站。如果某个村落建设了基站&#xff0c;那么它和它相邻的村落&#xff08;包括本节点、父节点和子节点&#xff09;也会有信号覆盖。目标是计算出最少需要建设的基站数。 输入描述 输入为一个…...

编程日记 2026/2/16 13:05:11

C#实现HTTP服务器：处理文件上传---解析MultipartFormDataContent

完整项目托管地址&#xff1a;https://github.com/sometiny/http HTTP还有重要的一块&#xff1a;文件上传。 这篇文章将详细讲解下&#xff0c;前面实现了同一个链接处理多个请求&#xff0c;为了方便&#xff0c;我们独立写了一个HTTP基类&#xff0c;专门处理HTTP请求。 ht…...

编程日记 2026/2/19 9:57:52

leetcoed0044. 通配符匹配 hard

1 题目&#xff1a;通配符匹配 官方难度&#xff1a;难 给你一个输入字符串 (s) 和一个字符模式 ( p ) &#xff0c;请你实现一个支持 ‘?’ 和 ‘*’ 匹配规则的通配符匹配&#xff1a; ‘?’ 可以匹配任何单个字符。 ‘*’ 可以匹配任意字符序列&#xff08;包括空字符序…...

编程日记 2026/2/12 10:00:32

蓝桥杯嵌入式第十二届程序设计题

一、题目概览 设计一个小型停车计费系统 二、分模块实现 1、LCD void disp_proc() {if(view0){char text[30];sprintf(text," Data");LCD_DisplayStringLine(Line2,(uint8_t *)text);sprintf(text," CNBR:%d ",Cnum);LCD_DisplayStri…...

编程日记 2026/2/15 0:30:48

第十四届MathorCup高校数学建模挑战赛-C题：基于 LSTM-ARIMA 和整数规划的货量预测与人员排班模型

目录 摘要 一、 问题重述 1.1 背景知识 1.2 问题描述 二、 问题分析 2.1 对问题一的分析 2.2 对问题二的分析 2.3 对问题三的分析 2.4 对问题四的分析 三、 模型假设 四、 符号说明 五、 问题一模型的建立与求解 5.1 数据预处理 5.2 基于 LSTM 的日货量预测模型 5.3 日货量预测…...

编程日记 2026/2/16 20:07:51

python多态、静态方法和类方法

目录 一、多态 二、静态方法 三、类方法 一、多态 多态&#xff08;polymorphism&#xff09;是面向对象编程中的一个重要概念&#xff0c;指的是同样的方法调用可以在不同的对象上产生不同的行为。在Python中&#xff0c;多态是通过方法的重写&#xff08;override&#x…...

编程日记 2026/2/17 19:22:07

DTMF从2833到inband的方案

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 之前的文章中介绍过通过dialplan拨号计划配置的方法&#xff0c;实现2833到inband的转换&#xff0c;但是实际生产环境中的场景会更复杂&#xff0c;无法预先在dialplan中设置好相关参数和函数。 环境 CentOS 7.9 fr…...

编程日记 2026/2/14 7:12:43

在Vue 3 + TypeScript + Vite 项目中安装和使用 SCSS

在Vue 3 TypeScript Vite 项目中安装和使用 SCSS 1、安装 SCSS 的相关依赖 npm install sass --save-dev2、配置 Vite 对于 Vue 3&#xff0c;Vite 已经内置了对 SCSS 的支持&#xff0c;通常不需要额外的配置。但是&#xff0c;如果需要自定义配置&#xff0c;可以在路径…...

编程日记 2026/2/17 2:56:25

Uni-app入门到精通：tabBar节点实现多页面的切换

tabBar节点用于实现多页面的切换。对于一个多tabBar应用&#xff0c;可以通过tabBar节点配置项指定一级导航栏&#xff0c;以及tabBar切换时显示的对应页面。在pages.json中提供tabBar节点配置&#xff0c;不仅是为了方便快速开发导航&#xff0c;更重要的是提示App平台和小程序…...

编程日记 2026/2/19 9:57:45