depy

It is a long and beautiful life.

博客开发-留言板功能从0到1

项目

前言

博客没有留言交互,一方面是我懒的写(因为要考虑到xss漏洞、sql注入漏洞等不必要的麻烦),第二方面是忙着做其他方面的功能去了留言要考虑到文章id、回复等方面的东西实在繁琐。

但这导致我的文章有错误的时候,很难及时反馈给我。经常有读者通过qq、邮箱反馈给我一些错误和博客不完善的地方,我非常感激。于是想着既然不想做单独的文章留言,开发个留言板功能也不错,并且不再需要监控这个没有意义的功能(有时候啥也没事也跟我说服务器挂了)。

思考业务逻辑

603b3dc2b780d.png

这里是大概的业务逻辑,同时也需要思考一下前端。首先,一个用户访问留言板,然后提交留言,提交成功后会当前页面刷新,显示自己已经提交的留言。

我好看的博客前端代码来自https://muguang.me/,  所以也使用他的留言样式,但是需要做一些改动。

  1. 我需要加一个验证码验证

  2. 当我没有回复评论的时候只是单独的评论块,所以前端根据字段(博主回复内容)来更改渲染样式,当有回复内容的时候下面跟随我的留言快(这个可以固定)。而且我的博客评论需要有审核机制,必须有我回复的内容可以提现在前端(很简单,加个sqlwhere就够了)。

  3. 邮件推送的功能我已经写了,无非是在update和add两个方法的控制器加上一个通知的请求,但是update需要根据他的qq号码推送。

动手编写

编写后端,首先思考数据库字段,我目前能想到的如下:

  1. QQ号码(根据qq获取头像美化界面)

  2. 邮箱(收发邮件通知)

  3. 个人网址(前端不显示,但是方便我去看)

  4. 博主回复(这里有缺陷,只能回复一条,或者后期改动,不能以盖楼的形式做,再偷会懒过几周再学习)

  5. 评论时间(前端提交请求的时候创建)

  6. 更新时间(也就是我回复评论的时间)

  7. 留言人姓名

暂时想到这些,于是编写后台。

603b4164057b0.png

写的很好,于是动手开始编写前端界面,略过控制器业务层注册的过程。

603b425ad4eb1.png

少了个提交的框,这个框可以放在上面。

代码如下:

       <form method="post" action="" id="comment-form" class="comment-form" role="form" onsubmit ="">
          <input type="text" name="author" maxlength="12" id="author" class="form-control input-control clearfix" placeholder="姓名 (*)" value="" required>
            <input type="email" name="mail" id="mail" class="form-control input-control clearfix" placeholder="电子邮箱 (*)" value=""  required>
            <input type="url" name="url" id="url" class="form-control input-control clearfix" placeholder="个人网站" value="" required>
             <input type="url" name="url" id="url" class="form-control input-control clearfix" placeholder="QQ号" value="" required>
            <textarea name="text" id="textarea" class="form-control" placeholder="在这里写下你的评论" required ></textarea>

            <button type="submit" class="submit" id="misubmit" style="outline:none">发表评论</button>
        </form>

603b442e3f1d7.png

非常好,但是先不急着写评论测试,先去添加测试数据。

我日 测试的时候才发现,少了个最重要的字段,留言内容,赶紧加上了。

603b4575af884.png

加了两条测试数据,于是去前端写测试代码。

603b469a1c7bf.png

发现已经可以从后台获取内容了,这很好。

然后对代码进行修改,比如头像改成通过qq号获取qq头像。

https://q1.qlogo.cn/g?b=qq&nk=qq号&s=640

并且,我们前文说了,根据博主回复判断有没有子评论楼。所以做个if就好。

603b49fe00398.png

做完了,我们可以发现,有回复的会显示children楼,而没有的只是单独的评论。接下来就是添加多条数据进行分页测试。

603b4c4708caa.png

因为之前根据page标签做过自适应分页,所以没有花时间写代码,于是便写完了分页。(其实也就是系统底层的方法拿过来用)

检查无误后,就可以开始写我比较擅长的后端方法了。首先去写一个提交的js

<script type="text/javascript">

function send(){
	var author = $("#author").val();
	var mail = $("#mail").val();
	var qq = $("#qq").val();	
	var url = $("#url").val();	
	var textarea = $("#textarea").val();	
	var verify = $("#verify").val();
	
	if(!verify){
		Feng.info("请输入验证码!");
	    return false;
	}
	
	var ajax = new $ax("{:url('index/comments/send')}", function (data) {
		console.log(data)
		if (data === 1) {
			Feng.success('评论已经提交,请等待小北的回复');
			$("#img").attr('src',"{:url('admin/Login/verify')}?="+Math.random());
			$("#submit").val('申请成功');
		} else if(data === 433) {
			$("#img").attr('src',"{:url('admin/Login/verify')}?="+Math.random());
			Feng.error('验证码错误');
		}else {
			$("#img").attr('src',"{:url('admin/Login/verify')}?="+Math.random());
			Feng.error('后台系统错误,提交失败,请联系');
		}
	});
	ajax.set('author',author);
	ajax.set('mail',mail);
	ajax.set('qq',qq);
	ajax.set('url',url);
	ajax.set('textarea',textarea);
	ajax.set('verify',verify);
	ajax.start();
}

</script>

之后引入验证码到评论框中

603b4f2eeb6e7.png

我觉得挺丑的,暂时先这样把,等我前端技术变好我再写个更好看的。

经过一下午的编写,之前的前端发现不能用了,换了对form表单进行ajax请求的代码,使得qq、name、mail为必要字段。验证码经过提交后重新刷新(防止验证码复用漏洞造成批量提交)

603b5baaafb60.png

603b5bbb05e47.png

603b5bc8dd307.png

603b5bd728523.png

综上,基本能想到的报错已经写好了。

然后就是使用正则对qq号码、邮箱进行验证筛选,这里百度都有就不贴了。

结果如下:

603b5e09362fd.png

603b5e1d95afb.png

这些做完了,就是做过滤入库的操作了,因为我自己写的框架自带sql注入过滤和xss过滤。直接调用facade的db接口插入即可。

做完之后博客已经可以提交留言了~后台也收到了记录,也成功过滤了xss漏洞和sql注入漏洞。

之后就是通过拓展的邮件,提交时进行邮件通知。但是这里我选择使用钉钉机器人通知,邮件有时候太多会让我错过重要的邮件(比如cve的结果、bugcloud的提交结果等等)

603b63dc42408.png

但是 当我回复这个人的时候 会以他的邮箱和qq邮箱发送提醒邮件 提醒我回复他了

以上 所有的功能已经测试完毕 一个下午开发结束

总结

我还是比较开心的,通过思考、提出问题、解决问题,成功解决了我这个需要更新的功能。希望能够对你的开发过程有所帮助。

我对此感到非常高兴,也希望所有访问我博客的可以多给我提点建议,谢谢各位的阅读!