国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

基于Node的Axure文件在線預覽的實現代碼

2019-11-19 10:56:45
字體:
來源:轉載
供稿:網友

前言

公司現在的產品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 dirfunction 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');});

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 五大连池市| 塔河县| 盘山县| 珲春市| 锡林浩特市| 伊通| 禹城市| 邢台市| 敦煌市| 白沙| 内丘县| 台中市| 九台市| 文昌市| 兴义市| 旌德县| 博罗县| 平阴县| 锡林郭勒盟| 修水县| 邯郸县| 汶川县| 乐亭县| 河间市| 桐乡市| 来凤县| 施秉县| 萨嘎县| 东城区| 津南区| 宁晋县| 府谷县| 红河县| 七台河市| 尼勒克县| 曲水县| 颍上县| 鄯善县| 辽宁省| 林口县| 霞浦县|