基于Node的Axure文件在线预览

jiezi

5 年前

公司现在的产品 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');
});

前言

实现