node静态服务器实现静态读取文件或文件夹


Posted in Javascript onDecember 03, 2019

现在我们已经大致了解了node 的基本工作原理,现在来实现一个系统的功能 读取文件或者文件夹

采坑记录

中文输出乱码问题

res.statusCode = 200
res.setHeader('Content-Type', 'text/plain')
res.end('啊啊和嘎哈啊')

输出中出现中文乱码 附解决方案 ~

res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })

res.writeHead(200, { 'Context-Type': 'text/plain' })
res.write('<head><meta charset="utf-8"/></head>')

文件读取方式

node 允许通过两种方式读取并输出文件

one : 以文件流的形式读取与返回一起进行,快 = 推荐

fs.createReadStream(filePath).pipe(res)

two : 先将文件整个读取,然后将文件内容一起返回,简单说这就是api的蹩脚使用 = 慢

fs.readFile(filePath, (err, data) => {
  if (err) return
  res.end(data)
})

读取文件或者文件夹

废话不说,上代码

require('./config/defaultConfig') 更新为以下

module.exports = {
   // 主机名称
   hostname: '127.0.0.1',
   // 端口号
   port: 6969,
   // 当前文件夹
   root: process.cwd()
  }
// 引入http内置模块
  const http = require('http')
  
  // 引入chalk 用于美化后台打印
  const chalk = require('chalk')
  
  const path = require('path')
  const fs = require('fs')
  // 引入基本配置
  const conf = require('./config/defaultConfig')
  
  // 创建一个server 实例
  const server = http.createServer((rep, res) => {
   // 拿到路径
   const filePath = path.join(conf.root, rep.url)
  
   // 判断是否为文件或者文件夹
   fs.stat(filePath, (err, stats) => {
    // 设置公共头部信息
    res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
    if (err) {
     // 状态码
     res.statusCode = 404
  
     // 找不到提示文本
     res.end(`${filePath} is 404`)
  
     return
    }
    if (stats.isFile()) {
     // 如果是文件 返回文件内容
     res.statusCode = 200
  
     fs.createReadStream(filePath).pipe(res)
    } else if (stats.isDirectory()) {
     // 如果是文件夹,返回文件列表
     fs.readdir(filePath, (err, files) => {
      if (err) return
      res.statusCode = 200
  
      res.end(files.join(','))
     })
    }
   })
  })
  
  // 监听 server 实例
  
  server.listen(conf.port, conf.hostname, () => {
   const addr = `http:// ${conf.hostname}:${conf.port}`
  
   console.info(`server startd at ${chalk.green(addr)}`)
  })

代码优化

上述代码存在很多回调,代码臃肿可读性差。下面利用异步将回调去除,达到优化效果

require-atomic-updates 注意eslint对于此项的限制, 为此将实参await 

const fs = require('fs')

const promisify = require('util').promisify
const stat = promisify(fs.stat)
const readdir = promisify(fs.readdir)

module.exports = async function(rep, res, filePath) {
 // 规避此问题require-atomic-updates报告在异步函数中重新分配变量时可能发生的竞争条件错误
 const awaitRes = await res
 awaitRes.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
 try {
  const stats = await stat(filePath)
  if (stats.isFile()) {
   // 如果是文件 返回文件内容
   awaitRes.statusCode = 200

   fs.createReadStream(filePath).pipe(awaitRes)
  } else if (stats.isDirectory()) {
   // 如果是文件夹,返回文件列表
   const file = readdir(filePath)
   awaitRes.statusCode = 200

   awaitRes.end(file.join(','))
  }
 } catch (ex) {
  // 状态码
  awaitRes.statusCode = 404

  // 找不到提示文本
  awaitRes.end(`${filePath} is 404`)
 }
}

app.js文件变更为

// 引入http内置模块
const http = require('http')

// 引入chalk 用于美化后台打印
const chalk = require('chalk')

const path = require('path')

const route = require('./header/route')
// 引入基本配置
const conf = require('./config/defaultConfig')

// 创建一个server 实例
const server = http.createServer((rep, res) => {
 // 拿到路径
 const filePath = path.join(conf.root, rep.url)
 route(rep, res, filePath)
})

// 监听 server 实例

server.listen(conf.port, conf.hostname, () => {
 const addr = `http:// ${conf.hostname}:${conf.port}`

 console.info(`server startd at ${chalk.green(addr)}`)
})

至此实现了通过hash路径输入,实现文件或文件夹的读取/前进后退

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
React实现评论的添加和删除
Oct 20 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
js实现时分秒倒计时
Dec 03 #Javascript
Vue实现验证码功能
Dec 03 #Javascript
JS实现压缩上传图片base64长度功能
Dec 03 #Javascript
js实现AI五子棋人机大战
May 28 #Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 #Javascript
JavaScript的console命令使用实例
Dec 03 #Javascript
JavaScript实现京东放大镜效果
Dec 03 #Javascript
You might like
php下通过POST还是GET来传值
2008/06/05 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
提高php编程效率技巧
2015/08/13 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
js实现车辆管理系统
2020/08/26 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
Python操作CouchDB数据库简单示例
2015/03/10 Python
python中字符串前面加r的作用
2015/06/04 Python
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
python版百度语音识别功能
2019/07/09 Python
Python3的socket使用方法详解
2020/02/18 Python
python利用opencv保存、播放视频
2020/11/02 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
广告词串烧
2014/03/19 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
2015年科室工作总结
2015/04/10 职场文书
学校开除通知书
2015/04/25 职场文书
检察院起诉意见书
2015/05/20 职场文书
婚宴领导致辞
2015/07/28 职场文书