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

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

效果图:

前端是做成了响应式,移动端:

文章详情页:

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

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

综合上面的需求,也就是六个表:

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

2.文章表:保存文章

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

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

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

6.网站信息表:相当于参数表,用来展示网站信息(关于网站、浏览量、管理员密码之类的)

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

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

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

有几个细节:

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

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

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

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

会转成:

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

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

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值