使用Node.js快速搭建简单的静态文件服务器
2017-02-22 15:24
796 查看
做前端有时会采用一些复杂框架,在文件系统中直接打开页面(用file:///方式打开),往往会报跨域的错,类似于“XMLHttpRequest cannot load ...(文件名). Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.”。这时,我们可以快速搭建一个简单的静态文件服务器,用Node.js最合适。
看过龍太的文章后(地址:http://www.jianshu.com/p/76c1a9f39a36),我觉得这篇文章里的服务器实现还是“麻雀虽小,五脏俱全”的。不过代码有Bug,比如当用户请求一个目录时,代码虽然可以自动搜索目录里的index.html,但在显示过程中出现异常。经过研究和修改,我把原文章中的3个js脚本合为一个,并解决了这个问题。而且优化了体验,比如当运行这个js文件时,载入项目主页的浏览器会自动弹出来。
看过龍太的文章后(地址:http://www.jianshu.com/p/76c1a9f39a36),我觉得这篇文章里的服务器实现还是“麻雀虽小,五脏俱全”的。不过代码有Bug,比如当用户请求一个目录时,代码虽然可以自动搜索目录里的index.html,但在显示过程中出现异常。经过研究和修改,我把原文章中的3个js脚本合为一个,并解决了这个问题。而且优化了体验,比如当运行这个js文件时,载入项目主页的浏览器会自动弹出来。
1.在前端项目根目录下创建server.js,代码如下:
"use strict"; //加载所需要的模块 var http = require('http'); var url = require('url'); var fs = require('fs'); var path = require('path'); var cp = require('child_process'); //创建服务 var httpServer = http.createServer(processRequest); var port = 8080; //指定一个监听的接口 httpServer.listen(port, function() { console.log(`app is running at port:${port}`); console.log(`url: http://localhost:${port}`); cp.exec(`explorer http://localhost:${port}`, function () { }); }); //响应请求的函数 function processRequest (request, response) { //mime类型 var mime = { "css": "text/css", "gif": "image/gif", "html": "text/html", "ico": "image/x-icon", "jpeg": "image/jpeg", "jpg": "image/jpeg", "js": "text/javascript", "json": "application/json", "pdf": "application/pdf", "png": "image/png", "svg": "image/svg+xml", "swf": "application/x-shockwave-flash", "tiff": "image/tiff", "txt": "text/plain", "wav": "audio/x-wav", "wma": "audio/x-ms-wma", "wmv": "video/x-ms-wmv", "xml": "text/xml" }; //request里面切出标识符字符串 var requestUrl = request.url; //url模块的parse方法 接受一个字符串,返回一个url对象,切出来路径 var pathName = url.parse(requestUrl).pathname; //对路径解码,防止中文乱码 var pathName = decodeURI(pathName); //解决301重定向问题,如果pathname没以/结尾,并且没有扩展名 if (!pathName.endsWith('/') && path.extname(pathName) === '') { pathName += '/'; var redirect = "http://" + request.headers.host + pathName; response.writeHead(301, { location: redirect }); //response.end方法用来回应完成后关闭本次对话,也可以写入HTTP回应的具体内容。 response.end(); } //获取资源文件的绝对路径 var filePath = path.resolve(__dirname + pathName); console.log(filePath); //获取对应文件的文档类型 //我们通过path.extname来获取文件的后缀名。由于extname返回值包含”.”,所以通过slice方法来剔除掉”.”, //对于没有后缀名的文件,我们一律认为是unknown。 var ext = path.extname(pathName); ext = ext ? ext.slice(1) : 'unknown'; //未知的类型一律用"text/plain"类型 var contentType = mime[ext] || "text/plain"; fs.stat(filePath, (err, stats) => { if (err) { response.writeHead(404, { "content-type": "text/html" }); response.end("<h1>404 Not Found</h1>"); } //没出错 并且文件存在 if (!err && stats.isFile()) { readFile(filePath, contentType); } //如果路径是目录 if (!err && stats.isDirectory()) { var html = "<head><meta charset = 'utf-8'/></head><body><ul>"; //读取该路径下文件 fs.readdir(filePath, (err, files) => { if (err) { console.log("读取路径失败!"); } else { //做成一个链接表,方便用户访问 var flag = false; for (var file of files) { //如果在目录下找到index.html,直接读取这个文件 if (file === "index.html") { readFile(filePath + (filePath[filePath.length-1]=='/' ? '' : '/') + 'index.html', "text/html"); flag = true; break; }; html += `<li><a href='${file}'>${file}</a></li>`; } if(!flag) { html += '</ul></body>'; response.writeHead(200, { "content-type": "text/html" }); response.end(html); } } }); } //读取文件的函数 function readFile(filePath, contentType){ response.writeHead(200, { "content-type": contentType }); //建立流对象,读文件 var stream = fs.createReadStream(filePath); //错误处理 stream.on('error', function() { response.writeHead(500, { "content-type": contentType }); response.end("<h1>500 Server Error</h1>"); }); //读取文件 stream.pipe(response); } }); }
2.在前端项目根目录下打开命令提示符或终端,输入以下命令就可以启动小服务器啦。
node server.js
相关文章推荐
- 使用Node.js快速搭建简单的静态文件服务器
- 使用Node.js搭建静态资源服务器
- node入门笔记:使用node.js搭建一个简单的服务
- 使用Node.js搭建静态资源服务详细教程
- 使用Node.js 和 MongoDB 为app搭建后端简单教程 附代码
- 使用Node.js快速搭建WebSocket server
- 菜鸟小白使用node.js搭建简单服务器(可请求图片,html,js,css,json等文件)
- 使用node.js搭建一个简单的本地服务器
- 使用Node.js的express框架搭建一个简单项目并且添加了一个路由
- 使用Node.js搭建静态资源服务器
- node.js搭建简单静态文件服务器
- 使用node.js快速搭建简易本地HTTP服务
- hexo —— 简单、快速、强大的Node.js静态博客框架
- hexo —— 简单、快速、强大的Node.js静态博客框架
- 使用Node.js快速搭建WebSocket server
- NodeJS+Node Inspector简单使用
- 使用socket.io和node.js搭建及时通信系统
- 使用Node.js实现一个简单的FastCGI服务器实例
- 使用 Angular.js, Node.js 和 MongoDB开发简单案例
- 快速搭建 Node.js 开发环境以及加速 npm