❗️你有0条未读消息

从零开始,教你写留言板(一)

8/53,每周一篇博,坚持!

我的博客是建立在Hexo的基础上,了解Hexo的朋友应该都知道,Hexo是一种使用Node.js将markdown文件编译成HTML文件的纯静态博客系统。

因此整个博客网站你只需要有一个Web服务器即可,网站的所有内容都是基于HTML、CSS、JS三大件的。这样的好处就是轻量,博客作者也可以将注意力集中在写作上。尤其对于没有技术基础的博主来说,Hexo尤为友好便利:自己只要专注于写作,会点markdown语法就可以了。

但缺点也是同样明显的,正因为是静态博客,所有需要动态交互的地方,如数据持久化、评论、内容推荐、流量统计、分享等等静态博客就提供不了了,这也是所有静态网站的缺陷。Hexo在这方面就需要接入很多的第三方服务来进行补充。如博客的评论系统通常就是使用Disqus,多说,畅言等等。我的博客用过一阵子多说,2017年左右多说关闭切换到了畅言,可以查看我的博客网站大事记

使用第三方评论系统的最大好处是简单,通常只需要注册后将其提供的代码段贴到你需要的位置,页面上做做调整即可,但缺点真的就太多太多了:

  1. 数据安全,你无法掌控你自己的评论数据
  2. 统计不方便,毕竟数据在人家手里
  3. 使用麻烦,用户想要评论通常要经历一串复杂的注册登录过程,讲道理我就是心血来潮想给博主留个言而已,这么复杂我干嘛还要留?
  4. 网站不再维护的风险,多说是活生生的例子。。。

本来作为一个技术党,Hexo博客已经被我修改了很多了,畅言的评论系统最近又增加了绑定手机号才能发表留言这给用户增加了很大的门槛,而且我自己的VPS虽然便宜,但只用来部署网站&搭建科学上网的梯子似乎有点浪费,于是乎想到干脆自己动手撸一套留言系统替换掉畅言好了。

本系列博文就准备将如何从头开始撸一套留言系统整理下来分享,预计会分成三篇博文,从前后端,数据库等方向分享。

第一部分 数据库设计

评论系统的设计

其实从头开始写一个评论系统不是一件难事,想清楚了就是一个收集特定评论数据持久化,反向读取渲染的过程。过程中注意评论数据和文章关联,并且注意回复关系及引文关联等等细节即可。
一个评论系统需要收集哪些数据呢?首先评论者的姓名必须的吧,评论内容必须的吧,然后从我个人的角度来说,我还希望如果评论者再次访问网站时,如果有人回复了他的评论给予提醒,因此得记住回复时回复的是哪条评论,也就是得有个回复ID;同时评论阅读过之后该评论的提醒需要去掉,因此要有是否阅读过的标识;如果评论者拥有自己的网站可以评论时留下网站做一种友情链接的效果,因此也要支持记录下评论者的网站;出于联系或消息提醒等目的也需要记录评论者的邮箱。
收集了这些数据之后,根据评论者所评论的文章的地址做关联,即是一条唯一的文章-评论数据,持久化到数据库。当读者打开该篇博文时,异步加载所有该文章的评论数据渲染出来。
评论者评论时提供的姓名,邮箱等数据可以选择是否记住,如果选择了记住个人信息,则持久化到评论者的本地浏览器中,待该用户下次再次登录时,请求其曾评论过的评论是否有回复,如果有则显示有未读回复消息的提示。根据其打开提示的情况对未读消息数目实时修改。

数据库选型

数据持久化离不开数据库,因此想跟随本博客一起自撸留言系统的前提是得有一台自己VPS机器。
数据库最常用的当属mySql以及noSql领域火热的MongoDB。
这里我采用的是MongoDB,一来是因为我的VPS上已经安装了MongoDB(之前写藏经阁时数据库采用了MongoDB),二来MongoDB我之前已经撸了一套增删改查的接口mongoose-client,使用起来会方便很多,第三,评论系统的后端我准备采用Node.js,搭配MongoDB简直是如虎添翼。

数据库Schema的定义

根据前述所要收集的数据的分析,加上创建时间、是否删除、文章链接等字段我们可以整理出一条评论信息对应的数据Schema如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// infos--MongoDB的collection命,对应mysql的表
infos: {
// 姓名
name: { type: String },
// 邮箱
email: { type: String },
// 网站
website: { type: String },
// 评论
content: { type: String },
// 所评文章链接
url: { type: String },
// 回复评论id
replyId: { type: String },
// 是否删除
isDeleted: { type: Boolean, default: false},
// 提交时间
gmtCreate: { type: Date, default: Date.now},
// 是否已读
readed: { type: Boolean, default: false}
}

数据库增删改查接口

本篇博文里,我将使用mongoose-client提供的数据库操作封装来简化我们的数据操作。
一个评论系统需要哪些操作接口?
最基本的提交评论后的保存接口,查询所有评论的接口,删除某个不和谐评论的接口,查询某个具体条件的接口,更新一般不用,但也一并加上以防万一需要。
保存接口所需传递信息较多,我们采用post方式,其他查询接口采用get方式即可。

这一篇我们主要讲一下基本思路和设计,下一篇我们讲讲如何使用Node.js实际部署评论系统的后端应用,再来具体讲讲这些接口该如何实现。

赞 赏

如果你觉得本文还不错的话也可以赞赏一点~


推荐书目:
JavaScript框架设计

评论
0条评论
还没有评论,大侠坐个沙发?