基于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 相关文章推荐
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 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
建立动态的WML站点(一)
2006/10/09 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
JQuery设置获取下拉菜单某个选项的值(比较全)
2014/08/05 Javascript
javascript对中文按照拼音排序代码
2014/08/20 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
Javascript缓存API
2016/06/14 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
Vue自定义指令实现checkbox全选功能的方法
2018/02/28 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Django中使用group_by的方法
2015/05/26 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
详解Python中where()函数的用法
2018/03/27 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
公司年底活动方案
2014/08/17 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技