基于Node的Axure文件在线预览的实现代码
前言
公司现在的产品Axure文档在生成好Html文件之后,都是通过git来进行管理的,每次文件更新,大家都需要从git上进行拉取,然后在本地查看,更新会出现不及时的问题,大家有时候忘记git拉取导致出现实现效果与最终产品稿不一致。最近在看Koa的东西,因此通过githooks搭配Koa来实现了一个在线预览,实现上大概是根据访问路径查找指定目录,然后对目录进行遍历,然后根据目录和文件类型的区分返回相应的数据。
实现
做的过程中需要注意的点,
- 对于在Git服务端的文件是在.Git文件夹下的,因此我们无法得到其文件目录,实现的方式是通过gitclone的方式将其clone下来,然后通过githook的方式,当有push操作之后,则执行gitpull来将文件拉取到本地,通过这种方式来将做到文件的实时更新。
- 文件的返回,对于图片文件的读取方式要通过二进制的方式,对于其它的文件,如css,js之类要通过
Utf-8的方式,开始统一通过binary的方式读取,然后返回导致图片可以显示,但是js执行报错。
实现代码如下
constKoa=require('koa'); constpath=require('path'); constfs=require('fs'); letmimes={ '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' }; //Scandir functionwalk(reqPath){ letfiles=fs.readdirSync(reqPath); letfileList=[]; for(leti=0,len=files.length;i'+realItem[0]+''; } result=result+''; returnresult; } asyncfunctionfile(url,filePath){ letresultMime=parseMime(url); letcontent; if(resultMime&&resultMime.indexOf('image/')>=0){ content=fs.readFileSync(filePath,'binary'); }else{ content=fs.readFileSync(filePath,'utf8'); } returncontent; } asyncfunctioncontent(ctx,fullStaticPath){ leturl=decodeURI(ctx.url); letreqPath=path.join(fullStaticPath,url); letexist=fs.existsSync(reqPath); letcontent=''; if(!exist){ content='Localfilenotexists'; }else{ letstat=fs.statSync(reqPath); if(stat.isDirectory()){ content=dir(ctx.url,reqPath); }else{ content=awaitfile(ctx.url,reqPath); } } returncontent; } functionparseMime(url){ letextName=path.extname(url); extName=extName?extName.slice(1):'unknown'; returnmimes[extName]; } constapp=newKoa(); conststaticPath='../onlinedoc';`请输入代码` app.use(async(ctx)=>{ letfullStaticPath=path.join(__dirname,staticPath); letresultContent=awaitcontent(ctx,fullStaticPath); letresultMime=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'); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。