基于Node的Axure文件在线预览的实现代码

前言

公司现在的产品Axure文档在生成好Html文件之后，都是通过git来进行管理的，每次文件更新，大家都需要从git上进行拉取，然后在本地查看，更新会出现不及时的问题，大家有时候忘记git拉取导致出现实现效果与最终产品稿不一致。最近在看Koa的东西，因此通过git hooks 搭配Koa来实现了一个在线预览，实现上大概是根据访问路径查找指定目录，然后对目录进行遍历，然后根据目录和文件类型的区分返回相应的数据。

实现

做的过程中需要注意的点，

对于在Git服务端的文件是在.Git文件夹下的，因此我们无法得到其文件目录，实现的方式是通过git clone的方式将其clone下来，然后通过git hook的方式，当有push操作之后，则执行git pull来将文件拉取到本地，通过这种方式来将做到文件的实时更新。
文件的返回，对于图片文件的读取方式要通过二进制的方式，对于其它的文件，如css，js之类要通过

Utf-8的方式，开始统一通过binary的方式读取，然后返回导致图片可以显示，但是js执行报错。

实现代码如下

const Koa = require(\'koa\');
const path = require(\'path\');
const fs = require(\'fs\');
let mimes = {
  \'css\': \'text/css\',
  \'html\': \'text/html\',
  \'jpg\': \'image/jpeg\',
  \'jpeg\': \'image/jpeg\',
  \'json\': \'application/json\',
  \'js\': \'text/javascript\',
  \'xml\': \'text/xml\',
  \'png\': \'image/png\',
  \'pdf\': \'application/pdf\',
  \'less\': \'text/css\',
  \'gif\': \'image/gif\',
  \'txt\': \'text/plain\',
  \'tiff\': \'image/tiff\',
  \'svg\': \'image/svg+xml\'
};
// Scan dir
function walk(reqPath) {
  let files = fs.readdirSync(reqPath);
  let fileList = [];
  for (let i = 0, len = files.length; i< len; i++) {
    let item = files[i];
    if (item.startsWith(\'.\')) {
      continue;
    }
    let realPath = reqPath + \'/\' + files[i];
    if (isDir(realPath)) {
      fileList.push(filter(reqPath, files[i]));
    } else {
      fileList.push(files[i]);
    }
  }
  return fileList;
}

function isDir(path){ 
  return fs.existsSync(path) && fs.statSync(path).isDirectory(); 
} 
//
function filter(reqPath, filePath) {
  let files = fs.readdirSync(reqPath + \'/\' + filePath);
  for (let i = 0; i < files.length; i++) {
    let item = files[i];
    if (item.endsWith(\'index.html\')) {
      return filePath + \'/\' + \'index.html\';
    }
  }
  return filePath;
}

function dir(url, reqPath) {
  let contentList = walk(reqPath);
  let result = \'<div align=\"center\" style=\"font-family:arial;font-size:30px;\">Product Document</div><ul>\';
  if (url == \'/\') {
    url = \'\';
  }
  for (let [index, item] of contentList.entries()) {
    let realHref = url + \'/\' + item;
    let realItem = item.split(\'/\');
    result += \'<li> <a style=\"font-family:arial;font-size:20px;\" href=\' + realHref + \'>\' + realItem[0] + \'</a></li>\';
  }
  result = result + \'</ul>\';
  return result;
}

async function file (url, filePath) {
  let resultMime = parseMime(url);
  let content;
  if (resultMime && resultMime.indexOf(\'image/\') >= 0) {
    content = fs.readFileSync(filePath, \'binary\');
  } else {
    content = fs.readFileSync(filePath, \'utf8\');
  }
  return content;
}

async function content(ctx, fullStaticPath) {
  let url = decodeURI(ctx.url);
  let reqPath = path.join(fullStaticPath, url);
  let exist = fs.existsSync(reqPath);
  let content = \'\';
  if (!exist) {
    content = \'Local file not exists\';
  } else {
    let stat = fs.statSync(reqPath);
    if (stat.isDirectory()) {
      content = dir(ctx.url, reqPath);
    } else {
      content = await file(ctx.url, reqPath);
    }
  }
  return content;
}

function parseMime(url) {
  let extName = path.extname(url);
  extName = extName ? extName.slice(1) : \'unknown\';
  return mimes[extName];
}
const app = new Koa();
const staticPath = \'../onlinedoc\';`请输入代码`
app.use(async(ctx) => {
  let fullStaticPath = path.join(__dirname, staticPath);
  let resultContent = await content(ctx, fullStaticPath);
  let resultMime = parseMime(ctx.url);
  if (resultMime) {
    ctx.type = resultMime;
  } 
  if(resultMime && resultMime.indexOf(\'image/\') >= 0) {
    ctx.res.writeHead(200);
    ctx.res.write(resultContent, \'binary\');
    ctx.res.end();
  } else {
    ctx.body = resultContent;
  }
});
app.listen(8080, () => {
  console.log(\'Running\');
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。