實(shí)現(xiàn)思路

• 首先讀取當(dāng)前路徑下所有的文件和文件夾
• 當(dāng)去點(diǎn)擊某個(gè)列表項(xiàng)時(shí)判斷其實(shí)文件還是文件夾，文件的話直接讀取，文件夾則再次利用上一個(gè)步驟讀取并展示

文件結(jié)構(gòu)

代碼

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 獲取內(nèi)容

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('.')// 根據(jù)mime類型判斷, 因?yàn)槲募A的名字也中也是可以帶有.的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

結(jié)果

來(lái)源

原生koa2 靜態(tài)資源服務(wù)器例子

轉(zhuǎn)載于:https://www.cnblogs.com/guanine/p/9348184.html

總結(jié)

以上是生活随笔為你收集整理的【学习Koa】原生koa2 静态资源服务器例子的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。