基于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 相关文章推荐
javascript innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
Tips 带三角可关闭的文字提示
Oct 06 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
详解用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
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
使用js简单实现了tree树菜单
2013/11/20 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
Js视频播放器插件Video.js使用方法详解
2020/02/04 Javascript
JavaScript实现打砖块游戏
2020/02/25 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
python控制台显示时钟的示例
2014/02/24 Python
Python中Collection的使用小技巧
2014/08/18 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Keras设置以及获取权重的实现
2020/06/19 Python
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
大整数数相乘的问题
2012/07/22 面试题
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
教师师德教育的自我评价
2013/10/31 职场文书
cf战队收人广告词
2014/03/14 职场文书
班级读书活动总结
2014/06/30 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python