【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 ,岂不是可以一个文件一个文件把你代码都拉下来。