Koa学习笔记：静态资源服务器

5. 静态资源加载

搭建一个静态资源服务器

0. 参考教程

• koa静态资源加载
• koa官网request部分
• nodejs文档
• 源码github

1. 思路

• 通过url的path获得所查询目录地址
• 如果path代表一个文件就进行读取，并显示
• 如果path代表一个文件夹，就显示文件夹下的文件目录
• 显示文件若是图片需要通过二进制读取写入文件，若文件是文本就通过utf-8格式读取，然后通过utf-8输出

2. 代码实现

1. 目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K17up4kk-1575256653404)(./image/选区_109.png)]

2. 代码实现

const getMimes = url => {
   
  // 通过扩展名得到文件的MIME
  const extname = path.extname(url).slice(1);
  return mimes[extname];
};

app.use(async ctx => {
   
  // fullPath来获取实际文件的目录
  let fullPath = path.resolve(__dirname, staticPath);
  //　通过url获得请求的文件路径地址
  let reqPath = ctx.req.url;
  
  //　获得请求文件的MIME
  let mime = getMimes(reqPath);
  //　根据MIME来判断是否为图片资源
  const isImage = mime && mime.startsWith('image');
  const content = await getContent(fullPath + reqPath, isImage);

  if (isImage) {
   
    // 如果是图片资源需要利用node http原生的方法写入res
    //　response.writeHead()
    ctx.res.writeHead('200');
    ctx.res.write(content, 'binary');
    // response.end()
    ctx.res.end();
  } else {
   
    typeof content === 'string' && (ctx.body = content);
    Array.isArray(content) && (ctx.body = createHtml(content, ctx));
  }
});

// 将扩展名转换为ＭＩＭＥ
let mimes = {
   
  css: 'text/css',
  less: 'text/css',
  gif: 'image/gif',
  html: 'text/html',
  ico: 'image/x-icon',
  jpeg: 'image/jpeg',
  jpg: 'image/jpeg',
  js: 'text/javascript',
  json: 'application/json',
  pdf: 'application/pdf',
  png: 'image/png',
  svg: 'image/svg+xml',
  swf: 'application/x-shockwave-flash',
  tiff: 'image/tiff',
  txt: 'text/plain',
  wav: 'audio/x-wav'