Node-based online preview of Axure files

Preface

The company's current product Axure documents are managed through git after they have generated good Html files. Every time the files are updated, everyone needs to pull them from git, and then look at them locally. There will be a problem that the update is not timely. Sometimes people forget that git pulling results in different implementation results from the final product draft. Yes. Recently, I was looking at Koa's stuff, so I used git hooks with Koa to realize an online preview, which is about searching the specified directory according to the access path, then traversing the directory, and then returning the corresponding data according to the distinction between directory and file type.

Realization

What should be paid attention to in the process of doing this?

  • For Git server files are in the. Git folder, so we can't get their file directory. The way to achieve this is to clone them by git clone, and then by git hook, when there is a push operation, the git pull is executed to pull the files to the local place. This way the text can be achieved. Real-time updating of components.
  • For the return of files, the way to read picture files is binary, and for other files, such as css, js, etc.

Utf-8 mode, began to read uniformly through the binary mode, and then returned to lead to pictures can be displayed, but the js execution error.

The implementation code is as follows

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';`Please enter the code`
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');
});

Tags: node.js git xml JSON Javascript

Posted on Tue, 27 Aug 2019 21:09:07 -0700 by Lphp