基于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');
});

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