【学习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 # 会在当前目录下启动一个静态资源服务器,默 ...
随机推荐
- antd组件实现上传证书
- SDL 显示汉字
#include "stdafx.h" #pragma comment(lib,"SDL.lib") #pragma comment(lib,"SDL ...
- Spring事务原理分析-部分一
Spring事务原理分析-部分一 什么事务 事务:逻辑上的一组操作,组成这组操作的各个单元,要么全都成功,要么全都失败. 事务基本特性 ⑴ 原子性(Atomicity) 原子性是指事务包含的所有操作要 ...
- coding 321
三大原理(计算机原理.操作系统原理.编译原理)两个协议(TCP与HTTP协议)一种结构(数据结构)
- 4 (计算机网络) DHCP与PXE:IP是怎么来的,又是怎么没的?
如何配置 IP 地址? 那如何配置呢?如果有相关的知识和积累,你可以用命令行自己配置一个地址.可以使用 ifconfig,也可以使用 ip addr.设置好了以后,用这两个命令,将网卡 up 一下,就 ...
- 腾讯云直播生成推流链接node.js版
/** * 获取推流地址 * 如果不传key和过期时间,将返回不含防盗链的url * @param domain 您用来推流的域名 * streamName 您用来区别不同推流地址的唯一流名称 * k ...
- 093、Java中String类之字符串是匿名对象
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- leetcode142 Linked List Cycle II
""" Given a linked list, return the node where the cycle begins. If there is no cycle ...
- mysql 子查询问题
今天在做子查询的时候发现运行报错, 我的代码是select* from (....) device des ,我一直以为的是device是表名,然后dec是别名,后面问了同事才知道from(...)这 ...
- uni-app小程序滑动事件
<view class="relative" @touchmove="handletouchmove" @touchstart="handlet ...