加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 建站 > 正文

Node.js新手上路——动手撸一个静态资源服务器

发布时间:2019-03-18 01:05:14 所属栏目:建站 来源:携码跑路
导读:简介 本文介绍了一个简单的静态资源服务器的实例项目,希望能给Node.js初学者带来帮助。项目涉及到http、fs、url、path、zlib、process、child_process等模块,涵盖大量常用api;还包括了基于http协议的缓存策略选
副标题[/!--empirenews.page--]

 简介

本文介绍了一个简单的静态资源服务器的实例项目,希望能给Node.js初学者带来帮助。项目涉及到http、fs、url、path、zlib、process、child_process等模块,涵盖大量常用api;还包括了基于http协议的缓存策略选取、gzip压缩优化等;最终我们会发布到npm上,做成一个可以全局安装、使用的小工具。麻雀虽小,五脏俱全,一想是不是还有点小激动?话不多说,放码过来。

文中源码地址在最后附录中。

可先行体验项目效果:

安装:npm i -g here11

任意文件夹地址输入命令:here

step1 新建项目

因为我们要发布到npm上,所以我们先按照国际惯例,npm init,走你!在命令行可以一路回车,有些配置会在最后的发布步骤中细说。

目录结构如下:

Node.js新手上路——动手撸一个静态资源服务器

bin文件夹存放我们的执行代码,web作为一个测试文件夹,里面放了些网页。

step2 码码

step2.1 雏形

静态资源服务器,通俗讲就是我们在浏览器地址栏输入形如“http://域名/test/index.html”的一个地址,服务器从根目录下的对应文件夹找到index.html,读出文件内容并返回给浏览器,浏览器渲染给用户。

  1. const http = require("http");  
  2. const url = require("url");  
  3. const fs = require("fs");  
  4. const path = require("path");  
  5. const item = (name, parentPath) => {  
  6.     let path = parentPath = `${parentPath}/${name}`.slice(1);  
  7.     return `<div><a href="${path}">${name}</a></div>`;  
  8. }  
  9. const list = (arr, parentPath) => {  
  10.     return arr.map(name => item(name, parentPath)).join("");  
  11. }  
  12. const server = http.createServer((req, res) => {  
  13.     let _path = url.parse(req.url).pathname;//去掉search  
  14.     let parentPath = _path;  
  15.     _path = path.join(__dirname, _path);  
  16.     try {  
  17.         //拿到路径所对应的文件描述对象  
  18.         let stats = fs.statSync(_path);  
  19.         if (stats.isFile()) {  
  20.             //是文件,返回文件内容  
  21.             let file = fs.readFileSync(_path);  
  22.             res.end(file);  
  23.         } else if (stats.isDirectory()) {  
  24.             //是目录,返回目录列表,让用户可以继续点击  
  25.             let dirArray = fs.readdirSync(_path);  
  26.             res.end(list(dirArray, parentPath));  
  27.         } else {  
  28.             res.end();  
  29.         }  
  30.     } catch (err) {  
  31.         res.writeHead(404, "Not Found");  
  32.         res.end();  
  33.     }  
  34. });  
  35. const port = 2234;  
  36. const hostname = "127.0.0.1";  
  37. server.listen(port, hostname, () => {  
  38.     console.log(`server is running on http://${hostname}:${port}`);  
  39. }); 

以上这段code就是我们的核心代码了,已经实现了核心功能,本地运行即可看到返回了文件目录,点击文件名便可浏览对应的网页、图片、文本啦。

step2.2 优化

功能实现了,但是我们可以在某些方面做做优化,提升实用性,顺便多学习几个api(装逼技巧)。

1. stream

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读