2018年10月17日 4:00:00
BullShit聊天室开发的第二天
昨天已经完成了聊天室的基本雏形，包括（显示消息，发送消息）两个主要功能。
今天在之前的基础上增加了（用户登录功能），同时优化了昨天遗留的（消息显示问题），优化了用户输入框的部分内容并添加了一些前端效果。
本文对于部分重复的内容不再做赘述。
添加用户登录功能
此处存疑：在编写 登录/注册 的前端页面时，Jquery的show()方法无法触发，而另一个类似的按钮可以正常触发，后来删除了Div中的<form>标签后问题解决了，但事实上在测试用的Demo中并没有发现这个问题。
消息显示问题
在考虑了昨天的遗留之后做了一些思考：JavaScript的计时器会一直执行，为了能更快的获得新的消息，计时器的间隔会很短，而这就一定会造成计时器内的滚动条定位被一直触发，最后使得聊天窗口的滚动条完全没法使用；
之所以需要计时器，是为了能不断的获得数据库中的数据，而这一点却存在着一些问题：按照之前的算法，程序在不断的读取数据，然后写在页面上，事实上我们是否需要一直写呢？
function callBack() {
if (ajaxReq.readyState == 4) {
if(text != ajaxReq.responseText){
text=ajaxReq.responseText;
$("#News_Table").html(text);
//默认滚动条最底部
$("body,html").scrollTop($("table").height());
}
}
}
如上修改了ajax的回调函数之后，每一次程序获得Servlet的反馈后，都会判断本次获取的内容是否发生了改变，如果发生了改变则重新写入新的Html代码，同时修改滚动条的位置，解决了昨天的遗留问题。
用户输入框的优化
在之前的内容中，用户输入框使用的是<input type="text"/>，使用该标签存在一个问题是，input-text并不具有换行的功能，也就是说如果输入的文本足够长，该文本框是一直不断的横向滚动而不是自动换行。
不用多说自然是换成了文本域<textarea></textarea>标签。
前端效果的加入
这里尝试做一个仿英雄联盟的效果用于加好友。
添加好友.gif
值得一提的是，因为类名一样，行为一样，结构一样，这里又遇到了之前白块儿里对于事件解绑的问题，不过这次很快就解决了。
$("#agree,#refused").click(function(){
var height=$(".friend").height();
$(".friend").animate({height:height+100+"px"},300);
$("#agree,#refused").off('click').click(function(){
$(this).parent().hide(300);
})
})
当然这里的写法并没有对应功能，后端的开发还未完成，因此这里只是做了行为处理和测试。
一个非常严重的错误，登录重写
晚一点的时候发现自己写了一个非常傻*的东西，在判定完登录之后跳转页面直接用URL传参了用户的账号，然后在数据库里查询账号的记录并显示了其它的内容。
弊端我就不说了，URL里想上哪个账户就上哪个账户，完全不需要密码……
最后自然是重新处理了代码，验证之后把账号密码存进了Session中，然后在页面开头从Session里取出内容进行验证防止其它更重不允许的跳转。
第二天的内容到这里就结束了，到此为止得到的是一个不含注册的聊天室应用。
从今天的开发中看到最大的问题就是规划，因为没有考虑好功能的实现，太多时间都花在了重写上。其次关于JavaScript基础不足的问题已经没什么好说的了。
给明天定个目标：首先完成注册功能，然后把验证码功能个实装，之后尝试实现添加好友（数据库，后端逻辑）。
网友评论