基于Node的Axure文件在线预览

时间: 2019-07-29阅读: 453标签: 文件

前言

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


实现

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

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

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


实现代码如下

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'); }); " title="" data-original-title="复制">
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">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 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');
});
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4993

Node.js之删除文件夹(含递归删除)

应用场景:比如像Eclipse这样的IDE,右击项目,出现选项,点击选项中的删除,就可以删除这个项目及其下的子目录包含文件(使用electron开发的桌面端项目多少都会用到)。

php使用 header 头下载文件

header() 函数向客户端发送原始的 HTTP 报头。认识到一点很重要,即必须在任何实际的输出被发送之前调用 header() 函数

HTML5中FileReader的使用

HTML5定义了FileReader作为文件API的重要成员用于读取文件,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader 的实例拥有 4 个方法,其中 3 个用以读取文件,另一个用来中断读取。

TypeScript声明文件

当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能。假如我们想使用第三方库 jQuery,一种常见的方式是在 html 中通过 <script> 标签引入 jQuery

HTTP实现xls导出和上传文件处理

需求:导出节目单[不保存文件到本地],输出不同的文件类型[csv,xls,xlsx],上传[csv,xls,xlsx]导入节目单

node.js 中的fs.rename()模块

node.js的核心模块 原生模块。修改文件名称,可更改文件的存放路径,方法说明 : 修改文件名称,可更改文件的存放路径.

js和css文件位置对页面性能有什么影响?

js脚本应该放在底部,原因在于js线程与GUI渲染线程是互斥的关系,如果js放在首部,当下载执行js的时候,会影响渲染行程绘制页面,js的作用主要是处理交互,而交互必须得先让页面呈现才能进行,所以为了保证用户体验,尽量让页面先绘制出来

前端工程师也要掌握的几种文件路径知识

之前在做webpack配置时候多次用到路径相关内容,最近在写项目的时候,有一个文件需要上传到阿里云oss的功能,同时本地服务器也需要保留一个文件备份。多次用到了文件路径相关内容以及Node核心API的path模块

vue读取本地的excel文件并显示在网页上

我想实现读取一个本地的xlsx文件(task_list.xlsx)然后显示在网页上, 一开始选择的方法是建个express server, 通过发送axios请求来实现, 但是觉得只是读取一个本地文件还要搞个server太复杂了

lock文件_我们为什么需要 lock 文件

从 Yarn 横空出世推出 lock 文件以来,已经两年多时间了,npm 也在 5.0 版本加入了类似的功能,lock 文件越来越被开发者们接收和认可。本篇文章想从前端视角探讨一下我们为什么需要 lock 文件,以及它的一些成本与风险,当然其中一些观点对于后端也是适用的

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广