公司现在的产品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('index.html')) {
return filePath + '/' + 'index.html';
}
}
return filePath;
}
function dir(url, reqPath) {
let contentList = walk(reqPath);
let result = '<div align="center">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 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');
});
PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现。
首先我们定义一个input标签type=file、然后我们定义一个jsReadFiles的方法将文件作为参数;当上传文件的时候读取这个文件。图片上传成功,只是图片路径变成了base64编码的形式。
HTML5读取文件主要利用的就是FileReader这个API,它的使用需要从一个构造函数开始,保存文件的关键是生成文件对象,可以使用URL.createObjectURL()方法实现,该方法能返回给定对象的URL,用在<a>标签的href属性上就可以创建可下载的文件链接。
在JavaScript文件中存储敏感数据,不仅是一种错误的实践方式,而且还是一种非常危险的行为,长期以来大家都知道这一点。
比如我写了一个JS文件,这个文件需要调用另外一个JS文件,该如何实现呢?这篇文章主要介绍:在js文件中引入另一个js文件的实现
最近有这样一个需求,就是在HTML页面中有个按钮导出,点击它,将构造一个文档并存储到本地文件系统中。另外还有个按钮,点击它,从本地文件系统中读取一个文件并对内容进行分析。
从 Yarn 横空出世推出 lock 文件以来,已经两年多时间了,npm 也在 5.0 版本加入了类似的功能,lock 文件越来越被开发者们接收和认可。本篇文章想从前端视角探讨一下我们为什么需要 lock 文件,以及它的一些成本与风险,当然其中一些观点对于后端也是适用的
什么是断点续传?就是下载文件时,不必重头开始下载,而是从指定的位置继续下载,这样的功能就叫做断点续传。前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段将文件进行拼接。
form表单的enctype属性:规定了form表单数据在发送到服务器时候的编码方式.。application/x-www-form-urlencoded:默认编码方式,multipart/form-data:指定传输数据为二进制数据,例如图片、mp3、文件,text/plain:纯文本的传输。空格转换为“+”,但不支持特殊字符编码。
适用场景: 网络绝对路径的URL文件或图片,不存储到本地,转换成stream,直接使用HTTPClient传送到SpringBoot的服务端,将文件存储下来,并返回一个文件地址。目前分层架构的系统越来越多这种需求,所以记录下来以备不时之需。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!