基于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');
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。