编写个人博客网站的一次经历

我是一直学习java后端开发的，于是想用所学知识写一个网站，记录自己的一些学习知识点或者生活点滴，注意是写，不是搭建，网上有很多的搭建网站教程，界面也多好看，但是为了巩固自己的知识，还是自己写比较好，也就是一个代码一个代码敲上去的。网站地址

效果图：

前端是做成了响应式，移动端：

文章详情页：

既然是web项目，那就采用前后端分离式开发，毕竟是当今主流，现在没谁还用jsp开发啦。

前后端开发的好处就是前后端分开开发，各自不影响，我是从后端开始的，毕竟是学习java后端的人，首先是设计表，想了想自己的需求：以文章为中心，写文章，看文章，根据文章标签查询，评论文章，既然有了评论，那就要用户，有用户，就要注册、登录，还有就是网站陌生人留言了。

综合上面的需求，也就是六个表：

1.文章分类表：所有的文章标签

2.文章表：保存文章

3.用户表：保存用户信息

4.评论表：保存用户对文章的评论

5.留言表：保存陌生人留言

6.网站信息表：相当于参数表，用来展示网站信息（关于网站、浏览量、管理员密码之类的）

设计好数据库表之后，就是编写crud的时候啦，搭建一个SSM项目，用mybatis铺好了dao层的crud，以后就是业务层的事情了，上面的需求来看，业务其实不多，个人网站也用不来了那么多，我在写的时候把所有表对应的crud都写好了，毕竟就是后端也就多几行代码的事情，但是想了下，前端要是多个接口那得多写多少代码，比如博客如果还要修改的话，那又得写个界面，还有留言的管理，评论管理，我写这些没用啊，我是开发人员，直接在数据库里面删除、修改不是方便得多吗，最后业务就只有增加和查找。

上面的需求只有写文章麻烦点，因为文字比较多，选用blob类型存储，在插入文章的时候把具体文字转成字节数组，存到数据库，查的时候反向转成String返给前端。这里插入的内容就是html字符串了，前端用的是百度富文本编辑器，编辑器编辑的内容提交到后台是以html字符串的形式，那么后端就直接接收，转字节存数据库；前端通过ajax获取的文章信息同样也是html字符串，那么只需要将一个

的内容替换成这个数据就好了，内容、格式都是以当初写文章的时候为准，前端只需要创建一个空div来承接这个结果就好了。

用户评论也是如此，将后台查询的结果通过js操作dom节点拼接到文章的下面就好，这个具体的格式就得自己设计了，我用的是bootsrap组件来排版的，效果还行。

有几个细节：

分页查询博客列表：像csdn一样，有一个博客列表，显示标题，开头一些描述，编写时间，访问量，评论数之类的，这个开头的描述需要处理一下，前后端处理都行，比如后端传是个文章的信息来，前端for循环遍历追加到div中，同时将一个文章的第一段文字截取出来展示，其他省去。我是后端处理，考虑到一个文章的内容比较多，前端如果不用传过来也是耗大量资源，加之是一个列表，会浪费很大部分网络资源的。

陌生人评论：这里是每个人都能评论，要考虑加一个验证，不然有无聊的人去用脚本瞎提交很多无意义的数据，那数据库不就炸了吗。还有就是后台需要过滤掉js脚本内容（这个简单，正则替换下就行），因为前端是直接把后端传回的留言拼接上去的，所以会执行一些script。

其他的就是js一点击一变换，比如点击博客；js获取当前选中标签、获取当前页码，然后调用后端接口，将结果设置到中间的div中。

写博客的话就引用一个富文本编辑器，编辑器会把内容转成html字符串：比如

会转成：

那么前端获取文章的时候也就是得到这个字符串。另外还支持附件，图片各种功能，也会转换成等等。

github地址：https://github.com/1510460325/blog2