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

 更新时间:2019年08月28日 15:12:16   作者:Jensen  
这篇文章主要介绍了基于Node的Axure文件在线预览的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

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

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

相关文章

  • Node.js爬虫如何获取天气和每日问候详解

    Node.js爬虫如何获取天气和每日问候详解

    这篇文章主要给大家介绍了关于Node.js爬虫如何获取天气和每日问候的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Node.js爬虫具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • Nodejs使用mysql2操作数据库的方法完整讲解

    Nodejs使用mysql2操作数据库的方法完整讲解

    MySQL2是一个基于Node.js的MySQL数据库驱动程序,它是MySQL官方推荐的驱动之一,下面这篇文章主要给大家介绍了关于Nodejs使用mysql2操作数据库的相关资料,需要的朋友可以参考下
    2024-01-01
  • 解读node.js中的path路径模块

    解读node.js中的path路径模块

    这篇文章主要介绍了解读node.js中的path路径模块,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Node绑定全局TraceID的实现方法

    Node绑定全局TraceID的实现方法

    这篇文章主要介绍了Node 绑定全局 TraceID的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • windows系统下安装yarn的详细教程

    windows系统下安装yarn的详细教程

    yarn是一个新的JS包管理工具,它的出现是为了弥补npm的一些缺陷,下面这篇文章主要给大家介绍了关于windows系统下安装yarn的详细教程,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • 详解node和ES6的模块导出与导入

    详解node和ES6的模块导出与导入

    在本篇文章里小编给大家分享的是关于node和ES6的模块导出与导入知识点,需要的朋友们可以参考下。
    2020-02-02
  • 从reflect metadata理解Nest实现原理

    从reflect metadata理解Nest实现原理

    这篇文章主要为大家介绍了从reflect metadata理解Nest实现原理示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • NodeJS连接MySQL数据库并进行增删改查操作详解

    NodeJS连接MySQL数据库并进行增删改查操作详解

    本篇是使用NodeJS的模块MySQL操作MySQL数据库的基础教程,连接MySQL数据库并进行增删改查操作详解,需要的朋友可以参考下
    2024-02-02
  • Node.js的特点和应用场景介绍

    Node.js的特点和应用场景介绍

    这篇文章主要介绍了Node.js的特点和应用场景介绍,本文讲解了Node.js的异步I/O、 事件循环与回调函数、单线程、 跨平台等特性,然后总结了它的使用场景,需要的朋友可以参考下
    2014-11-11
  • node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例

    node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例

    这篇文章主要介绍了node.js使用mongoose操作数据库实现购物车的增、删、改、查功能,结合实例形式详细分析了node.js使用mongoose框架操作MongoDB数据实现购物车增删改查相关技巧与使用注意事项,需要的朋友可以参考下
    2019-12-12

最新评论