【学习Koa】原生koa2 静态资源服务器例子
实现思路
- 首先读取当前路径下所有的文件和文件夹
- 当去点击某个列表项时判断其实文件还是文件夹,文件的话直接读取,文件夹则再次利用上一个步骤读取并展示
文件结构
代码
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
结果
来源
【学习Koa】原生koa2 静态资源服务器例子的更多相关文章
- 原生node写一个静态资源服务器
myanywhere 用原生node做一个简易阉割版的anywhere静态资源服务器,以提升对node与http的理解. 相关知识 es6及es7语法 http的相关网络知识 响应头 缓存相关 压缩相 ...
- 初始nginx(启动运行) 使用nginx做一个简单的静态资源服务器
第一次接触nginx的时候,那时候公司还是用的一些不知名的小技术,后来公司发展问题,重新招了人,然后接触到nginx,公司 使用nginx用来做代理服务器,所有请求 都先经过nginx服务器,然后交由 ...
- 使用Node.js搭建静态资源服务器
对于Node.js新手,搭建一个静态资源服务器是个不错的锻炼,从最简单的返回文件或错误开始,渐进增强,还可以逐步加深对http的理解.那就开始吧,让我们的双手沾满网络请求! Note: 当然在项目中如 ...
- 使用 Express 实现一个简单的 SPA 静态资源服务器
背景 限制 SPA 应用已经成为主流,在项目开发阶段产品经理和后端开发同学经常要查看前端页面,下面就是我们团队常用的使用 express 搭建的 SPA 静态资源服务器方案. 为 SPA 应用添加入口 ...
- Nginx——静态资源服务器(一)
java web的项目中,我们经常将项目部署到Tomcat或者jetty上,可以通过Tomcat或者jetty启动的服务来访问静态资源.但是随着Nginx的普及,用Nginx来作为静态资源服务器,似乎 ...
- 【原创】分布式之缓存击穿 【原创】自己动手实现静态资源服务器 【原创】自己动手实现JDK动态代理
[原创]分布式之缓存击穿 什么是缓存击穿 在谈论缓存击穿之前,我们先来回忆下从缓存中加载数据的逻辑,如下图所示 因此,如果黑客每次故意查询一个在缓存内必然不存在的数据,导致每次请求都要去存储层去查 ...
- NodeJS4-8静态资源服务器实战_构建cli工具
Cli(command-line interface),中文是 命令行界面,简单来说就是可以通过命令行快速生成自己的项目模板等功能(比较熟悉的是vue-cli脚手架这些),把上述写的包做成Cli工具. ...
- node静态资源服务器的搭建----访问本地文件夹(搭建可访问静态文件的服务器)
我们的目标是实现一个可访问静态文件的服务器,即可以在浏览器访问文件夹和文件,通过点击来查看文件. 1.先创建一个文件夹anydoor,然后在该文件夹里npm init一个package.json文件, ...
- 使用node搭建静态资源服务器
安装 npm install yumu-static-server -g 使用 shift+鼠标右键 在此处打开Powershell 窗口 server # 会在当前目录下启动一个静态资源服务器,默 ...
随机推荐
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类:"text-danger" 类的文本样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 五子棋C#源码,网络对战版---转载--待学习
五子棋C#源码,网络对战版 支持网络对战的C#五子棋源码下载,VS2010环境编译后可运行,需要先输入ip地址才行,不是单机版的.部分代码摘录如下://将接收的消息转换成自定义集合MessClass ...
- 微信内置浏览器video标签自动全屏的问题
微信打开h5video视频的时候都会自动全屏播放,有时候影响用户体验 要禁止自动全屏就要加这几个属性 'x5-playsinline':'true', 'webkit-playsinline':'tr ...
- JS 自动返回每个月的天数
);//M代表月份,可以自己手动设置或者选择 date.setDate() var num = date.getDate(); console.log(num) //输出每个月的天数 var time ...
- MariaDB——备份与恢复
备份和恢复 为什么要备份? 灾难恢复:硬件故障.软件故障.自然灾害.黑客攻击.误操作 测试 要注意的点: 备份需要多少时间 能够容忍多少的数据丢失 恢复数据需要在多长时间完成 ...
- 信号强度(RSSI)知识整理
来源: https://www.cnblogs.com/lele/articles/2832885.html 为什么无线信号(RSSI)是负值 答:其实归根到底为什么接收的无线信号是负值,这样子是不是 ...
- Django 3.0的新功能
谷歌翻译的,我修正并且添加了一些内容.凑合看吧. MariaDB的支持 Django现在正式支持MariaDB 10.1和更高版本.有关更多详细信息,请参见MariaDB注释. ASGI支持 Djan ...
- ROS-2 : ROS系统层级结构
一.ROS文件系统层级 ROS的文件和文件夹按如下层级来组织:
- 五 Hibernate的其他API,Query&Criteria&SQLQuery
Query Criteria SQLQuery Query接口:用于接收HQL,用于查询多个对象 HQL:Hibernate Query Language Query条件查询: Query分页查询: ...
- hue中访问impala报错
hue中访问impala报错:Could not connect to node03:21050 原因:impala服务未启动. 解决方法:在3个节点上都启动impala: 主节点node03启动以下 ...