前言
公司现在的产品axure文档在生成好html文件之后,都是通过git来进行管理的,每次文件更新,大家都需要从git上进行拉取,然后在本地查看,更新会出现不及时的问题,大家有时候忘记git拉取导致出现实现效果与最终产品稿不一致。最近在看koa的东西,因此通过git hooks 搭配koa来实现了一个在线预览,实现上大概是根据访问路径查找指定目录,然后对目录进行遍历,然后根据目录和文件类型的区分返回相应的数据。
实现
做的过程中需要注意的点,
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('')) { return filepath + '/' + ''; } } 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'); });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
MFC的静态库.lib、动态库.dll(包含引入库.lib)以及Unicode库示例
CTF 刷题记录(一) 白云新闻搜索(手动与自动化SQL注入)
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论