基于Node的Axure文件在线预览

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

前言

公司现在的产品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">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.休闲娱乐: 网页游戏  直播/交友   H5游戏

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

原生JS使用Blob导出csv文件

最近在做关于文件下载的需求:前端调用接口,然后对返回数据进行过滤、格式化,然后按表格内容拼接生成csv文件,让用户下载。数据中存在 ‘,‘ 逗号问题处理:将整个数据用双引号(英文格式)包裹起来,这样会显示成一个单元格。

Linux下你还知道这些特殊文件?

/dev/null 可无限接收数据,你可以认为是一个黑洞,因此如果我们需要丢弃某些终端输出,可以重定向到这里:所以如果你有不需要的数据可以尽情的往这里写。

Flutter 中如何加载并预览本地的 html 文件

直接进入主题,大概步骤如下:在 assets 创建需要访问 html 文件,这里创建一个files文件夹,专门来放这些静态 html 文件.在 pubspec.yaml 中配置访问位置

使用FileSave.js将网页内容保存到文件

在写Chrome extension时候,偶尔需要将网页的内容保存到文件。要实现此功能,正常的流程是创建Blob对象存放内容,创建url,创建一个 a 标签,然后将连接与Blob对象关联并放到 a标签的href或者download(H5)属性中

微信小程序实现pdf,word等格式文件上传

目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的path地址,文件名,文件的大小等.获取这些信息再结合微信的上传接口wx.uploadFile,即可实现文件上传.

input type=file 上传文件,同一个文件第二次上传无反应

用input file上传文件,掉用onchange方法时,多次上传同一个文件时功能失效,不会发送ajax请求,input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有再内容发生改变的时候去触发

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

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

web前端以文件流的形式导出Excel文件

一般web前端处理导出文件有两种方法:其实现原理就是先把服务端返回的数据流通过URL.createObjectURL()方法转成一个URL,这个URL是存放在内存中的,URL的生命周期是和创建的它的document绑定

在不使用mv命令的情况下移动文件

有时当你需要移动一个文件时,mv 命令似乎不是最佳选项,那么你会如何做呢?不起眼的 mv 命令是在你见过的每个 POSIX 系统中都能找到的有用工具之一。它的作用是明确定义的,并且做得很好

Webpack require.context() 前端工程化之动态导入文件

webpack作为前端构建的打包工具, 把各种资源,例如JS(含JSX)、coffee、css(含less/sass)、图片等都作为模块来处理和使用,它已经做了非常好了,它还有非常多的功能等待我们去发掘,研究。

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

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

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