【StartNode】工作站 --Article Module
前言:startnode的日志模块完成后,一直觉得只有日志可能不够用,有时候会记录长内容,这个时候就需要用到编辑器进行文章编辑了。
Article Module mark
startnode 引入了 md 编辑器,使用的是 md-editor-v3,并为 node 增加了静态资源代理和接收图片接口。
node-静态资源代理
单纯使用node,并不像express一样,设置静态资源文件非常方便,你得对请求链接进行判断:
const server = http.createServer((req, res) => {
/* 不处理favicon请求 */
if (url.parse(req.url).path == "/favicon.ico") return;
/* 静态资源文件处理 */
if (req.url.indexOf("/public/") !== -1) {
//判断请求路径是否包含public目录(简单判断)
console.log("获取静态文件");
readFile("." + req.url).then((data) => {
res.write(data, "binary");
res.end();
});
return;
}
...
}
然后你就可以访问public文件夹下的文件了。
node-图片上传
看md-editor-v3给的上传函数demo里要将请求头请求类型设置为“multipart/form-data”,这样设置就会将参数以文件形式传入;
不过后续处理的时候,接收到的数据会是webkitformboundary,带有额外的编码,然后我图片文件一直写入失败(写入了但是图片无法显示)...
烦内,后来进行多方百度,将请求类型设置为application/octet-stream,并且对接收参数进行buffer处理:
else if (
method === "POST" &&
contentType.includes("application/octet-stream")
) {
const data = [];
req.on("data", (chunk) => {
data.push(chunk);
});
req.on("end", () => {
const buffer = Buffer.concat(data);
processDateWithReq(method, pathname, query, {}, {}, req, res, buffer);
});
} else {
...
}
同样,接口操作函数也需要对接受到的buffer进行处理:
import fs from "node:fs";
import { checkFolderPath, generateDirectory } from "../../tool/file/base.js";
/**
* 将请求上传的img写入指定文件夹下。
*/
export function postImg(req, res, query, post, filesr, prames) {
const updatelist = query.update.split("-").splice(0, 2);
// 年份文件夹和月份文件夹
const ypath = process.cwd() + "/public/img/" + updatelist[0];
const mpath = ypath + "/" + updatelist[1];
// 文件夹存在性判断
checkFolderPath(ypath)
? console.log("postimg-存在年份文件夹")
: generateDirectory(ypath);
checkFolderPath(mpath)
? console.log("postimg-存在月份文件夹")
: generateDirectory(mpath);
// 创建一个文件名
const fileName = Date.now() + ".png";
const imgpath = mpath + "/" + Date.now() + ".png";
const imageData = Buffer.from(prames);
fs.writeFile(imgpath, imageData, (error) => {
if (error) {
console.error(`图片上传失败: ${error}`);
return;
}
console.log(`图片上传成功`);
res.writeHead(200, {
"Content-Type": "text/html; charset=utf-8",
Author: "zhangsan",
});
const response = {
success: true,
message: "图片上传成功",
imgname: fileName,
fileposition:
"http://localhost:3090/public/img/" + updatelist[0] + "/" + updatelist[1],
};
res.end(JSON.stringify(response));
});
}
ok,这样就完成了图片资源的上传。
md-editor-v3 save数据转md
md-editor-v3是可以直接存md数据的,不过由于我开始疏忽,没看清文档,所以一直传的是html数据。
所以我在后台做的时候,做了一次html转md操作。
这里我们用turndown这个库进行转换,在node下引入这个库。记得做好配置,不然他不会解析h标签。
import turndownService from "turndown";
const turndownServiceOption = {
headingStyle: "atx",
hr: "___",
bulletListMarker: "-",
codeBlockStyle: "fenced",
fence: "```",
emDelimiter: "_",
strongDelimiter: "**",
linkStyle: "inlined",
linkReferenceStyle: "full",
preformattedCode: "false",
};
...
const turndown = new turndownService(turndownServiceOption);
const markdown = turndown.turndown(JSON.parse(data));
...
other
这个编辑器仍在继续开发,还有一些bug...
-
Node
-
StartNode
-
md-editor-v3
猫猫小登教我前端!
猫猫学长教我前端
如果我的url 是 xxxx.com/public/../package.json ,岂不是可以一个文件一个文件把你代码都拉下来。