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

前言

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

实现

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

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