基于Node的Axure文件在線預覽的實現(xiàn)代碼

更新時間：2019年08月28日 15:12:16 作者：Jensen

這篇文章主要介紹了基于Node的Axure文件在線預覽的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

公司現(xiàn)在的產(chǎn)品Axure文檔在生成好Html文件之后，都是通過git來進行管理的，每次文件更新，大家都需要從git上進行拉取，然后在本地查看，更新會出現(xiàn)不及時的問題，大家有時候忘記git拉取導致出現(xiàn)實現(xiàn)效果與最終產(chǎn)品稿不一致。最近在看Koa的東西，因此通過git hooks 搭配Koa來實現(xiàn)了一個在線預覽，實現(xiàn)上大概是根據(jù)訪問路徑查找指定目錄，然后對目錄進行遍歷，然后根據(jù)目錄和文件類型的區(qū)分返回相應的數(shù)據(jù)。

實現(xiàn)

做的過程中需要注意的點，

對于在Git服務端的文件是在.Git文件夾下的，因此我們無法得到其文件目錄，實現(xiàn)的方式是通過git clone的方式將其clone下來，然后通過git hook的方式，當有push操作之后，則執(zhí)行git pull來將文件拉取到本地，通過這種方式來將做到文件的實時更新。
文件的返回，對于圖片文件的讀取方式要通過二進制的方式，對于其它的文件，如css，js之類要通過

Utf-8的方式，開始統(tǒng)一通過binary的方式讀取，然后返回導致圖片可以顯示，但是js執(zhí)行報錯。

實現(xiàn)代碼如下

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');
});

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: