【大前端++】【混合开发】【node】express 文件服务器本地搭建-模拟加载图片使用

一图胜千言

文件访问路径参考：http://172.20.10.3:3000/static/img/0200_0200_xxxxx.jpg

🚀 快速开始

1. 创建项目并安装依赖

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

2. 基本静态文件服务器

创建 server.js 文件：

const express = require('express');
const path = require('path');const app = express();
const port = 3000;// 设置静态文件目录
app.use(express.static('public'));// 启动服务器
app.listen(port, () => {console.log(`服务器运行在 http://localhost:${port}`);
});

3. 创建静态文件目录

在项目根目录下创建 public 文件夹，并添加一些测试文件：

project/
├── server.js
├── public/
│   ├── index.html
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── app.js
│   └── images/
│       └── logo.png

🔧 高级配置

1. 使用绝对路径（推荐）

const express = require('express');
const path = require('path');const app = express();
const port = 3000;// 使用绝对路径更安全
app.use(express.static(path.join(__dirname, 'public')));app.listen(port, () => {console.log(`服务器运行在 http://localhost:${port}`);
});

2. 设置虚拟路径前缀

// 访问地址: http://localhost:3000/static/css/style.css
app.use('/static', express.static('public'));

3. 配置多个静态文件目录

// Express 会按顺序查找文件
app.use(express.static('public'));
app.use(express.static('assets'));
app.use(express.static('uploads'));

4. 高级选项配置

app.use('/static', express.static('public', {maxAge: '1d',           // 缓存时间etag: true,             // 开启ETaglastModified: true,     // 开启最后修改时间setHeaders: (res, path) => {// 自定义响应头if (path.endsWith('.css')) {res.setHeader('Content-Type', 'text/css');}}
}));

📁 完整项目结构示例

express-static-server/
├── server.js
├── public/
│   ├── index.html
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── app.js
│   └── images/
│       └── logo.png
├── assets/
│   └── download/
│       └── file.pdf
└── uploads/└── user-avatars/└── avatar1.png

🚀 完整的服务器代码

const express = require('express');
const path = require('path');const app = express();
const port = process.env.PORT || 3000;// 配置多个静态文件目录
app.use('/static', express.static(path.join(__dirname, 'public'), {maxAge: '1d',etag: true
}));app.use('/assets', express.static(path.join(__dirname, 'assets'), {maxAge: '7d'
}));app.use('/uploads', express.static(path.join(__dirname, 'uploads')));// 默认首页路由
app.get('/', (req, res) => {res.sendFile(path.join(__dirname, 'public', 'index.html'));
});// 404 处理
app.use((req, res) => {res.status(404).send('404 - 文件未找到');
});// 错误处理中间件
app.use((err, req, res, next) => {console.error(err.stack);res.status(500).send('服务器内部错误');
});app.listen(port, () => {console.log(`🚀 静态文件服务器运行在 http://localhost:${port}`);console.log(`📁 静态文件目录:`);console.log(`   - /static  -> ${path.join(__dirname, 'public')}`);console.log(`   - /assets  -> ${path.join(__dirname, 'assets')}`);console.log(`   - /uploads -> ${path.join(__dirname, 'uploads')}`);
});

📋 访问方式

启动服务器后，你可以通过以下方式访问静态文件：

# 基本访问
http://localhost:3000/index.html
http://localhost:3000/css/style.css
http://localhost:3000/images/logo.png# 带虚拟路径前缀的访问
http://localhost:3000/static/index.html
http://localhost:3000/assets/download/file.pdf
http://localhost:3000/uploads/user-avatars/avatar1.png

🔒 安全建议

1. 不要将敏感文件放在静态目录中
2. 使用路径别名隐藏真实目录结构
3. 设置适当的缓存策略
4. 考虑使用 CDN 加速静态资源

🎯 启动项目

# 启动服务器
node server.js# 或使用 nodemon 实现热重载
npm install -g nodemon
nodemon server.js

---

推荐理由

postman在国内使用已经越来越困难：
1、登录问题严重
2、Mock功能服务基本没法使用
3、版本更新功能已很匮乏
4、某些外力因素导致postman以后能否使用风险较大
5、postman会导致电脑卡顿，而且使用的功能越多越慢，尤其是win电脑，太让人郁闷了
出于以上考虑因此笔者自己开发了一款api调试开发工具SmartApi，满足基本日常开发调试api需求

SmartApi
win版本不大于1M；运行消耗性能极低
macos 版本不大于100M；运行消耗性能极低

非常适合开发设备或性能有限的开发环境

SmartApi只为开发服务

官网地址SmartApi

http://www.smartapi.site/

---

旧版本已停止维护