ICDYCT / 我能, 你也行

上一篇我们解决了网络日记本 NetJournal 从无到有的核心后台逻辑 . 现在要来解决使用效果了. 谁也不想日记本里面只能用文字+emoji+ascii艺术吧.  那想一想, 最好的解决方案就是 Markdown 了. 启发 找 GPT 一问, 给了一个很好的例子. https://devv.ai/zh/search?threadId=dbr3kt6te3uo 核心代码就是这一小段 document.getElementById('markdown-content').addEventListener('input', function () {   const markdownContent = document.getElementById('markdown-content').value;   const htmlPreview = document.getElementById('html-preview');   htmlPreview.innerHTML = marked.parse(markdownContent); });

前面我们已经实现了 网络记事本 PasteBin , 用于托管自己的一段文本. 演示站:  https://pastebin.icdyct.cloudns.asia/tieludasiliqiuweiyue 如果想作为自己的一份日记本的话, 用起来会有一点不顺手. 比如, 如果你把这个页面作为主要的操作页面, 而不是从别的地方写好了再复制粘贴过来, 那么这个页面并不能让你写一点了保存一下, 再写一点了再保存一下. 你点保存的时候会提示 key 存在冲突. 还有一点就是, 当你确定要修改某一篇日记时, 还要去显示列表中找到它, 有点不方便. 思路 一是实现一下, 在向数据库保存key-value时, 不要检测key是否已存在(在之前的短链系统中, 是检测了的) 二是增加读取指定key-value的小功能. 点击了 Load 按钮之后, 从数据库中把 value 读出来, 再把数据放到原本的操作界面上.  后续操作就可以按以前系统的操作方式使用就好了.

上一篇, 我们找到了合适的代码来显示不同类型的内容. 有的是大段文字, 用textarea来显示; 有的是图片, 用img来显示. 但是我们使用一个怎样的代码结构呢? 我想了一下准备这样: 1. 把不同的显示方式包装为不同的函数, 放到 main.js 中. 如: function buildValueTxt(longUrl) {} function buildValueImg(longUrl) {} function buildValueTxtarea(longUrl) {} 2. 设置一个函数变量, 在不同的 index.html 中, 赋值为不同的函数, 如: 在短链的 index.html 中 buildValueItemFunc = buildValueTxt 在 Pastebin 的 index.html 中 buildValueItemFunc = buildValueTxtarea 在图床的 index.html 中 buildValueItemFunc = buildValueImg 3. 在 main.js 中, 使用同样的代码逻辑: // 长链接信息 Long url child.appendChild(buildValueItemFunc(longUrl))

在 短链系统, 网络记事本系统, 图床系统 中, 已保存数据的列表的显示方式 需求是不同的. 记事本系统, 应该用一个多行文本框来显示 value. 如下: 图床系统, 应该以图片的形式显示 value. 如下: 短链系统就是原来的显示方式. 以文本形式显示全部value即可. 代码已经有了. 功能也是对的.  现在问题是, 怎么合理的设计代码结构, 让 worker.js 里面的配置项可以控制列表的显示方式. 设置什么系统的配置项是在 worker.js 里面. 最多还有一项, 控制加载哪个 index.html 但是实现列表显示的功能在 main.js 里面.  main.js 这个文件在 Github 上. 在 index.html 文件里面指定加载. 如果把 main.js 的文件内容搬出来放到 index.html, 然后不同的系统使用不同的 index.html , 小改一下 JS 代码的逻辑, 实现显示效果的差异.  这样是能够实现效果没错, 但 main.js 里面大段相同的代码要复制到每个 index.html 里面, 太不优雅了.  如果以后, 相同部分的代码需要修改, 那就是霰弹枪伤, 要打开这么多个index.html一个一个的改, 如果改错了, 漏掉了, 就有问题了. - To Be Continued

需求 上一步我们已经实现了图床的核心功能 , 保存和读取数据. 但是为了把图片转换为Base64数据, 还要 另外开一个页面 , 这也太... 所以我们把这个页面"借鉴"到自己图床的操作页面上.

需求 在 NodeSeek 上发贴, 是要自备图床的. 我们已经实现了单纯的KV数据库 . 那么, 同样的原理, 图床不就是一样的事情吗? 发给系统一个path, 系统还给你一个图片的数据.

问题 今天调试 Pastebin 发现一个bug, 如果直接把path改为'password', 就会显示KV中的密码. 以前短链系统的时候, 因为短链系统会把查出来的value做302跳转, 而密码并不是一个网址, 在跳转时就会出问题, 所以就没有暴露这个bug.