纯 JS 代码实现一个评论系统

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2365 天前的主题，其中的信息可能已经有所发展或是发生改变。

去年多说关闭的时候心血来潮写了一个评论系统了自用。后来觉得维护自己的服务器太麻烦了，所以有心血来潮又重新基于 AWS lamda 重构了. 一百多行 JavaScript 完成了 API.

GitHub: https://github.com/metrue/YoYo

17 条回复 • 2018-06-06 10:16:50 +08:00

Braid

2018-06-05 10:00:25 +08:00

内容无法管控就没什么意义了

nine99

2018-06-05 10:13:15 +08:00

不错，相比另外那些简洁很多

nine99

2018-06-05 10:13:31 +08:00

向你学习下 AWS lambda

yamedie

2018-06-05 10:39:30 +08:00

发现个角度刁钻的问题... 评论内容是根据页面 url 聚集的, 但如果 url 后面被一些浏览器追加了参数(比如微信的?from=singlemessage), 那么 url 有参数的文章和 url 无参数的文章, 评论区就会形成 2 个"平行宇宙"哈哈

举个栗子:
https://minghe.me/2017-04-18-YoYo:%E8%87%AA%E5%B7%B1%E6%89%93%E9%80%A0%E4%B8%80%E4%B8%AA%E8%AF%84%E8%AE%BA%E6%9C%8D%E5%8A%A1.html
和
https://minghe.me/2017-04-18-YoYo:%E8%87%AA%E5%B7%B1%E6%89%93%E9%80%A0%E4%B8%80%E4%B8%AA%E8%AF%84%E8%AE%BA%E6%9C%8D%E5%8A%A1.html?0=1

只有一个?0=1 的差别, 评论列表就会完全不一样哦~

yamedie

2018-06-05 10:51:54 +08:00

https://minghe.me/2017-04-18-YoYo:%E8%87%AA%E5%B7%B1%E6%89%93%E9%80%A0%E4%B8%80%E4%B8%AA%E8%AF%84%E8%AE%BA%E6%9C%8D%E5%8A%A1.html?0=1#footer

yamedie

2018-06-05 10:54:24 +08:00

额没打完就发出了, 如果 url 里带#footer 这样的锚点, 又会形成平行宇宙.

另外这种方案没有人工审核和验证码, 怎么防止闷声作大死的敏感信息, 怎么防止类似 SQL 注入之类的脚本攻击?

koodai

2018-06-05 12:43:39 +08:00 via iPhone

@yamedie 源码 src 底下去自己扩展即可，现在的代码是取了当前页面的 url，你可以对这个参数做调整。
比如在页面 header 里面预留一个识别 url 唯一性的参数值。
非常简单

metrue

2018-06-05 16:21:29 +08:00

@Braid

图方便直接使用 YoYo 部署好的。内容存储在 YoYo 的 aws 上。

当然代码是开源，你也可以只部署一套，一个命令而已，所以的东西都在你自己管控下.

metrue

2018-06-05 16:23:30 +08:00

@yamedie 对的， @koodai 说的很对.

不过确实是一个 bug，找时间修一下的。

metrue

2018-06-05 17:28:28 +08:00

@yamedie bug 已经修复并且部署了。

yamedie

2018-06-05 22:22:48 +08:00 via Android

@metrue 够快，有些 wordpress 默认没有开启静态化，url 比如 xx.com/?p=123，会不会造成新的困扰？匿了。。

metrue

2018-06-05 22:26:38 +08:00

@yamedie 这要更加需求定制了。或者有什么我还没有想到的方法。

yamedie

2018-06-06 08:09:13 +08:00 via Android

@metrue 想到个粗暴的办法就是提供 2 个 js 让用户选 1 个用，一个是忽略 url 参数和锚点的，另一个是不忽略的（#锚点的话，因为有些单页应用用锚点做路由，这种情况也不能忽略）

yamedie

2018-06-06 08:13:05 +08:00 via Android

或者 1 个 js 也行，window 对象下放一个布耳值开关，开关为 false 或不存在就怎样，true 就怎样

metrue

2018-06-06 09:05:19 +08:00

@yamedie

如果想做可以配置的话，直接把配置附着在 YoYo 的 div 节点即可, 比如类似这样:

<div id="YoYo" data-yoyo-config-enable-fullpath="true"></div>
<script src="https://yoyo-client-production.s3.amazonaws.com/dist/index.js"></script>

yamedie

2018-06-06 09:12:21 +08:00

@metrue 完美

Braid

2018-06-06 10:16:50 +08:00

@metrue 嗯，开源产品可能不需要关注这些问题，我说的管控是指的类似为什么多说评论系统关闭了，这些商业化的产品。