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


Posted in Javascript onAugust 28, 2019

前言

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 Javascript
详解用async/await来处理异步
Aug 28 #Javascript
vue中监听返回键问题
Aug 28 #Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 #Javascript
小程序中this.setData的使用和注意事项
Aug 28 #Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 #Javascript
vue实现标签云效果的方法详解
Aug 28 #Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 #Javascript
You might like
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
js 单引号 传递方法
2009/06/22 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
js charAt的使用示例
2014/02/18 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
Python socket编程实例详解
2015/05/27 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
特步官方商城:Xtep
2017/03/21 全球购物
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
机电一体化职业规划书
2014/01/07 职场文书
八年级生物教学反思
2014/01/22 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
社区禁毒工作方案
2014/06/02 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
交通处罚决定书
2015/06/24 职场文书
Python中的嵌套循环详情
2022/03/23 Python
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA