实现思路

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

文件结构

代码

index.js 入口文件

  1. const Koa = require('koa')
  2. const path = require('path')
  3. const getContent = require('./util/content')
  4. const mimes = require('./util/mimes')
  5. const app = new Koa()
  6. const staticPath = './static'
  7. function parseMime(url) {
  8. let extName = path.extname(url)
  9. extName = extName ? extName.slice(1) : 'unknown'
  10. return mimes[extName]
  11. }
  12. app.use(async (ctx) => {
  13. if (ctx.path === '/favicon.ico') return;
  14. let absoluteStaicPath = path.join(__dirname, staticPath)
  15. let content = await getContent(ctx, absoluteStaicPath)
  16. let mime = parseMime(ctx.url)
  17. if (mime) {
  18. ctx.type = mime
  19. }
  20. if (mime && (mime.includes('image/') || mime.includes('video/'))) {
  21. ctx.res.writeHead(200)
  22. ctx.res.write(content, 'binary')
  23. ctx.res.end()
  24. } else {
  25. ctx.body = content
  26. }
  27. })
  28. app.listen(3000, function (params) {
  29. console.log('running at 127.0.0.1:3000')
  30. })

content.js 获取内容

  1. const fs = require('fs')
  2. const path = require('path')
  3. const dir = require('./dir')
  4. const file = require('./file')
  5. function getContent(ctx, absoluteStaticPath) {
  6. let reqPath = path.join(absoluteStaticPath, ctx.url)
  7. const exist = fs.existsSync(reqPath)
  8. let content = ''
  9. if (!exist) {
  10. content = '404 not found'
  11. } else {
  12. let status = fs.statSync(reqPath)
  13. if (status.isDirectory()) {
  14. content = dir(ctx.path, reqPath)
  15. } else {
  16. content = file(reqPath)
  17. }
  18. }
  19. return content
  20. }
  21. module.exports = getContent

file.js 读取文件

  1. const fs = require('fs')
  2. function file(reqPath) {
  3. return fs.readFileSync(reqPath, 'binary')
  4. }
  5. module.exports = file

dir.js 读取文件夹

  1. const walk = require('./walk')
  2. function dir(path, reqPath) {
  3. let {
  4. dirList,
  5. fileList
  6. } = walk(reqPath)
  7. let html = ''
  8. function category(path, type, list) {
  9. html += `<h2>${type}: </h2>`
  10. html += '<ul>'
  11. for (const item of list) {
  12. html += `<li><a href="${path === '/' ? '' : path}/${item}">${item}</a></li>`
  13. }
  14. html += '</ul>'
  15. }
  16. dirList.length && category(path, '文件夹', dirList)
  17. fileList.length && category(path, '文件', fileList)
  18. return html
  19. }
  20. module.exports = dir

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

  1. const fs = require('fs')
  2. const mimes = require('./mimes')
  3. function walk(reqPath) {
  4. const dirList = [], fileList = []
  5. const files = fs.readdirSync(reqPath)
  6. for (const file of files) {
  7. // 判断文件是文件夹还是文件
  8. let file_split = file.split('.')
  9. // 根据mime类型判断, 因为文件夹的名字也中也是可以带有.的
  10. let mimeType = file_split.length > 1 ? file_split[file_split.length-1] : ''
  11. if (mimes[mimeType] === void 0) {
  12. dirList.push(file)
  13. } else {
  14. fileList.push(file)
  15. }
  16. }
  17. return { dirList, fileList }
  18. }
  19. module.exports = walk

mimes.js

  1. const mimes = {
  2. 'css': 'text/css',
  3. 'less': 'text/css',
  4. 'txt': 'text/plain',
  5. 'html': 'text/html',
  6. 'xml': 'text/xml',
  7. 'js': 'text/javascript',
  8. 'json': 'application/json',
  9. 'pdf': 'application/pdf',
  10. 'wav': 'audio/x-wav',
  11. 'wmv': 'video/x-mx-wmv',
  12. 'gif': 'image/gif',
  13. 'jpeg': 'image/jpeg',
  14. 'jpg': 'image/jpeg',
  15. 'png': 'image/png',
  16. 'svg': 'image/svg+xml',
  17. 'tiff': 'image/tiff',
  18. 'icon': 'image/x-icon',
  19. 'mp4': 'video/mp4'
  20. }
  21. 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. 全球定位IP位置 2018(离线版)

    球定位IP位置 2018(离线版) 这次写的软件使用Python写的,所以体积可能有点大 我特地写了GUI打包成了Exe可执行文件,方便小白使用== 只要输入目标ip就能显示目标所在的国家城市和经纬度 ...

  2. importlib 与__import__的区别

    importlib 与__import__的区别 importlib import importlib name = "lib.test" # lib.test指的是lib路劲下的 ...

  3. Linux CentOS7 VMware usermod命令、用户密码管理、mkpasswd命令

    一. usermod命令 usermod可用来修改用户帐号的各项设定 -c, --comment 注释 GECOS 字段的新值 -d, --home HOME_DIR 用户的新主目录 -e, --ex ...

  4. JDBC原理及常见错误分析

    1.JDBC:Java DataBase Connectivity 可以为多种关系型数据库DBMS 提供统一的访问方式,用Java来操作数据库 2.JDBC API 主要功能: 三件事,具体是通过以下 ...

  5. 「NOIP2011」观光公交

    传送门 Luogu 解题思路 有点麻烦,幸好 \(O(n^2)\) 能过... 贪心地想一想,我们如果要用加速器,肯定是要选择车上人数最多的时段加速. 但是我们就会面临这样的情况: 加速了,带来了增益 ...

  6. extract()和extact_first()的区别

    extract()和extact_first()都是提取Selector的data部分.但现在你要先知道什么是Selector. Selector是选择器的意思.具体定义我不知道,但通过下面的例子,你 ...

  7. loadrunner-11安装+破解+汉化

    一.loadrunner-11安装下载地址:链接:https://pan.baidu.com/s/10meUz5DfkS8WleLSOalCtQ 提取码:iw0p 由于LR11安装包三个多G,没办法上 ...

  8. CRM:异步加载下拉列表,三个列表出现同样的下拉框

    异步加载下拉列表,三个列表出现同样的下拉框,原因如下: Spring默认单例,如果Action是单例,那么上一次查询的结果就可能被下一次的查询所调用.所以必须配置action为多例, 如果采用单例模式 ...

  9. NO25 三剑客之SED行天下

    功能说明 Sed是Stream Editor(流编辑器)缩写,是操作.过滤和转换文本内容的强大工具.常用功能有增删改查,过滤,取行. [root@oldboy ~]# sed --version #→ ...

  10. zabbix proxy配置实战案例

    zabbix proxy配置实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.zabbix proxy概述 上一篇博客我们分享了zabbix agent有两种工作模式,即 ...