实现思路

  • 首先读取当前路径下所有的文件和文件夹
  • 当去点击某个列表项时判断其实文件还是文件夹,文件的话直接读取,文件夹则再次利用上一个步骤读取并展示

文件结构

代码

index.js 入口文件

const Koa = require('koa')
const path = require('path')
const getContent = require('./util/content')
const mimes = require('./util/mimes') const app = new Koa() const staticPath = './static' function parseMime(url) {
let extName = path.extname(url)
extName = extName ? extName.slice(1) : 'unknown'
return mimes[extName]
} app.use(async (ctx) => { if (ctx.path === '/favicon.ico') return; let absoluteStaicPath = path.join(__dirname, staticPath)
let content = await getContent(ctx, absoluteStaicPath)
let mime = parseMime(ctx.url) if (mime) {
ctx.type = mime
} if (mime && (mime.includes('image/') || mime.includes('video/'))) {
ctx.res.writeHead(200)
ctx.res.write(content, 'binary')
ctx.res.end()
} else {
ctx.body = content
} }) app.listen(3000, function (params) {
console.log('running at 127.0.0.1:3000')
})

content.js 获取内容

const fs = require('fs')
const path = require('path')
const dir = require('./dir')
const file = require('./file') function getContent(ctx, absoluteStaticPath) { let reqPath = path.join(absoluteStaticPath, ctx.url)
const exist = fs.existsSync(reqPath)
let content = '' if (!exist) {
content = '404 not found'
} else {
let status = fs.statSync(reqPath) if (status.isDirectory()) {
content = dir(ctx.path, reqPath)
} else {
content = file(reqPath)
}
} return content
} module.exports = getContent

file.js 读取文件

const fs = require('fs')

function file(reqPath) {
return fs.readFileSync(reqPath, 'binary')
} module.exports = file

dir.js 读取文件夹

const walk = require('./walk')

function dir(path, reqPath) {

  let {
dirList,
fileList
} = walk(reqPath) let html = ''
function category(path, type, list) {
html += `<h2>${type}: </h2>`
html += '<ul>'
for (const item of list) {
html += `<li><a href="${path === '/' ? '' : path}/${item}">${item}</a></li>`
}
html += '</ul>'
} dirList.length && category(path, '文件夹', dirList)
fileList.length && category(path, '文件', fileList) return html
} module.exports = dir

walk.js 遍历目录,归类文件和文件夹

const fs = require('fs')
const mimes = require('./mimes') function walk(reqPath) { const dirList = [], fileList = []
const files = fs.readdirSync(reqPath) for (const file of files) {
// 判断文件是文件夹还是文件
let file_split = file.split('.')
// 根据mime类型判断, 因为文件夹的名字也中也是可以带有.的
let mimeType = file_split.length > 1 ? file_split[file_split.length-1] : '' if (mimes[mimeType] === void 0) {
dirList.push(file)
} else {
fileList.push(file)
}
} return { dirList, fileList }
} module.exports = walk

mimes.js

const mimes = {
'css': 'text/css',
'less': 'text/css',
'txt': 'text/plain',
'html': 'text/html',
'xml': 'text/xml',
'js': 'text/javascript',
'json': 'application/json',
'pdf': 'application/pdf',
'wav': 'audio/x-wav',
'wmv': 'video/x-mx-wmv',
'gif': 'image/gif',
'jpeg': 'image/jpeg',
'jpg': 'image/jpeg',
'png': 'image/png',
'svg': 'image/svg+xml',
'tiff': 'image/tiff',
'icon': 'image/x-icon',
'mp4': 'video/mp4'
} module.exports = mimes

结果



来源

原生koa2 静态资源服务器例子

【学习Koa】原生koa2 静态资源服务器例子的更多相关文章

  1. 原生node写一个静态资源服务器

    myanywhere 用原生node做一个简易阉割版的anywhere静态资源服务器,以提升对node与http的理解. 相关知识 es6及es7语法 http的相关网络知识 响应头 缓存相关 压缩相 ...

  2. 初始nginx(启动运行) 使用nginx做一个简单的静态资源服务器

    第一次接触nginx的时候,那时候公司还是用的一些不知名的小技术,后来公司发展问题,重新招了人,然后接触到nginx,公司 使用nginx用来做代理服务器,所有请求 都先经过nginx服务器,然后交由 ...

  3. 使用Node.js搭建静态资源服务器

    对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如 ...

  4. 使用 Express 实现一个简单的 SPA 静态资源服务器

    背景 限制 SPA 应用已经成为主流,在项目开发阶段产品经理和后端开发同学经常要查看前端页面,下面就是我们团队常用的使用 express 搭建的 SPA 静态资源服务器方案. 为 SPA 应用添加入口 ...

  5. Nginx——静态资源服务器(一)

    java web的项目中,我们经常将项目部署到Tomcat或者jetty上,可以通过Tomcat或者jetty启动的服务来访问静态资源.但是随着Nginx的普及,用Nginx来作为静态资源服务器,似乎 ...

  6. 【原创】分布式之缓存击穿 【原创】自己动手实现静态资源服务器 【原创】自己动手实现JDK动态代理

    [原创]分布式之缓存击穿   什么是缓存击穿 在谈论缓存击穿之前,我们先来回忆下从缓存中加载数据的逻辑,如下图所示 因此,如果黑客每次故意查询一个在缓存内必然不存在的数据,导致每次请求都要去存储层去查 ...

  7. NodeJS4-8静态资源服务器实战_构建cli工具

    Cli(command-line interface),中文是 命令行界面,简单来说就是可以通过命令行快速生成自己的项目模板等功能(比较熟悉的是vue-cli脚手架这些),把上述写的包做成Cli工具. ...

  8. node静态资源服务器的搭建----访问本地文件夹(搭建可访问静态文件的服务器)

    我们的目标是实现一个可访问静态文件的服务器,即可以在浏览器访问文件夹和文件,通过点击来查看文件. 1.先创建一个文件夹anydoor,然后在该文件夹里npm init一个package.json文件, ...

  9. 使用node搭建静态资源服务器

    安装 npm install yumu-static-server -g 使用 shift+鼠标右键  在此处打开Powershell 窗口 server # 会在当前目录下启动一个静态资源服务器,默 ...

随机推荐

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:"text-danger" 类的文本样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 五子棋C#源码,网络对战版---转载--待学习

    五子棋C#源码,网络对战版 支持网络对战的C#五子棋源码下载,VS2010环境编译后可运行,需要先输入ip地址才行,不是单机版的.部分代码摘录如下://将接收的消息转换成自定义集合MessClass ...

  3. 微信内置浏览器video标签自动全屏的问题

    微信打开h5video视频的时候都会自动全屏播放,有时候影响用户体验 要禁止自动全屏就要加这几个属性 'x5-playsinline':'true', 'webkit-playsinline':'tr ...

  4. JS 自动返回每个月的天数

    );//M代表月份,可以自己手动设置或者选择 date.setDate() var num = date.getDate(); console.log(num) //输出每个月的天数 var time ...

  5. MariaDB——备份与恢复

    备份和恢复 为什么要备份?   灾难恢复:硬件故障.软件故障.自然灾害.黑客攻击.误操作   测试   要注意的点:   备份需要多少时间   能够容忍多少的数据丢失   恢复数据需要在多长时间完成  ...

  6. 信号强度(RSSI)知识整理

    来源: https://www.cnblogs.com/lele/articles/2832885.html 为什么无线信号(RSSI)是负值 答:其实归根到底为什么接收的无线信号是负值,这样子是不是 ...

  7. Django 3.0的新功能

    谷歌翻译的,我修正并且添加了一些内容.凑合看吧. MariaDB的支持 Django现在正式支持MariaDB 10.1和更高版本.有关更多详细信息,请参见MariaDB注释. ASGI支持 Djan ...

  8. ROS-2 : ROS系统层级结构

    一.ROS文件系统层级 ROS的文件和文件夹按如下层级来组织:

  9. 五 Hibernate的其他API,Query&Criteria&SQLQuery

    Query Criteria SQLQuery Query接口:用于接收HQL,用于查询多个对象 HQL:Hibernate Query Language  Query条件查询: Query分页查询: ...

  10. hue中访问impala报错

    hue中访问impala报错:Could not connect to node03:21050 原因:impala服务未启动. 解决方法:在3个节点上都启动impala: 主节点node03启动以下 ...