使用NodeJS 搭建静态服务器
时间:2022-07-28
本文章向大家介绍使用NodeJS 搭建静态服务器,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我们可以使用Node设定一个目录,然后让Web程序变成一个文件服务器。要实现这一点,我们只需要解析request.url中的路径,然后在本地找到对应的文件,把文件内容发送出去就可以了。
解析URL需要用到Node.js提供的url模块,它使用起来非常简单,通过parse()将一个字符串解析为一个Url对象:
var url= require('url');
console.log(url.parse('http://user:pass@host.com:8080/path/to/file?query=string#hash'));
解析之后是:
Url {
protocol: 'http:',
slashes: true,
auth: 'user:pass',
host: 'host.com:8080',
port: '8080',
hostname: 'host.com',
hash: '#hash',
search: '?query=string',
query: 'query=string',
pathname: '/path/to/file',
path: '/path/to/file?query=string',
href:
'http://user:pass@host.com:8080/path/to/file?query=string#hash'
}
处理本地文件目录需要使用Node.js提供的path模块,它可以方便地构造目录:
var path = require('path');
// 解析当前目录:
console.log(path(__dirname));
//__dirname 表示当前所在目录 '/Users'
// 组合完整的文件路径:当前目录+'pub'+'index.html':
var filePath = path.join(__dirname, 'fileServer', 'index.html');
// '/Users/fileServer/index.html'
使用path模块可以正确处理操作系统相关的文件路径。在Windows系统下,返回的路径类似于C:UsersfileServerindex.html
,这样,我们就不关心怎么拼接路径了。
最后,我们实现一个文件服务器file_server.js:
var
http= require('http'),
fs= require('fs'),
url= require('url'),
path= require('path');
// 从命令行参数获取root目录,默认是当前目录:
var root= path.join(__dirname, 'static', 'index.html');
//创建服务器
var server= http.createServer(function(request, response){
//获得ur的path 类似'/css/index.css'
var pathName= url.parse(request.url).pathname;
//获得对应的本地文件路径 类似’static/css/index.css‘
var filePath= path.join(root);
//获取文件状态
console.log(filePath);
fs.stat(filePath, function (err, stats) {
if (!err && stats.isFile()) {
// 没有出错并且文件存在:
console.log('200 ' + request.url);
// 发送200响应:
response.writeHead(200);
// 将文件流导向response:
fs.createReadStream(filePath).pipe(response);
} else {
// 出错了或者文件不存在:
console.log('404 ' + request.url);
// 发送404响应:
response.writeHead(404);
response.end('404 Not Found');
}
});
});
server.listen(8080);
console.log('Server is running at http://127.0.0.1:8080/');
当你的html文件是这样的时候:
<head>
<meta charset="UTF-8">
<title>Road</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<img src="/images/bg.jpeg" alt="11">
<h1>书山有路勤为径,学海无涯苦做舟。</h1>
<script src="js/index.js"></script>
</body>
然后请求http://127.0.0.1:8080/index.html
就会打印出:
当然他只能发起请求,想要请求到并且正确返回还需要设置文件的ContentType属性。 我们可以使用path.extname
获取请求文件的后缀:
let extname = path.extname('css/index.css');
// .css
我们获取到后缀之后就可以根据后缀来设置它的ContentType,这里需要用到一个mime.json文件,然后使用一个函数去匹配:
//mime 读取mime.json 里面存储了常见的文件的ContentType 为请求的对应的文件设置对应的 ContentType 属性
function getContentType(extName, callBack){
// 文件后缀 回调函数
//读取mime.json
fs.readFile('./mime.json', (err, data)=>{
if(err){
//读取失败 抛出错误
throw err;
return;
}
// 读取成功
let mimeJson = JSON.parse(data);
//转码 将json字符串转化成对象
let contentType = mimeJson[extName] || 'text/plain';
//取出对应json中 对应的 请求的后缀的相匹配的 ContentType 属性
callBack(contentType);
//执行这个回调函数 并传参contentType
})
}
搭建静态服务器的步骤应该是:
- 先拿到请求文件的后缀名(extname)
- 引入mime.json 文件并读取->转码
- 匹配和后缀对应的ContentType
- 使用回调函数 所有请求的文件 都会拿到后缀 然后自动匹配相应的ContentType
- 执行getContentType函数
getContentType(extname, (contentType)=>{
res.writeHead(200, {"Content-Type": contentType + ';charset=UTF-8'})
res.end(data)
})
#参考:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- nvm管理工具
- 基于OpenCV的图像卡通化
- shadertoy绘图
- 单基因生信分析流程(6)单基因相似性分析
- 三阴性乳腺癌提取和分析
- 一日一技:更友好的格式化数据提取方案
- 『深度应用』YoloV5 RTX2080Ti TensorRT与PyTorch速度对比
- 0797-使用HDP或CDP的Atlas采集CDH6的元数据和血缘
- 现代通信理论与新技术 PPT笔记整理
- 找找规律——LeetCode题目6:Z字形变换
- 给你点信心——LeetCode题目7:整数反转
- Python -二叉树 创建与遍历算法(很详细,转自国外教程)
- APP流量来源追踪方式——Android篇
- 从浏览器输入网址回车到看到页面过程到底经历了什么?
- Flutter Bloc 官方文档(BlocBuilder翻译)