练手项目：BullShit 聊天室（第二天）

BullShit 聊天室开发的第二天

昨天已经完成了聊天室的基本雏形，包括（显示消息，发送消息）两个主要功能。

今天在之前的基础上增加了（用户登录功能），同时优化了昨天遗留的（消息显示问题），优化了用户输入框的部分内容并添加了一些前端效果。

本文对于部分重复的内容不再做赘述。

添加用户登录功能

• 数据表构建
• 实体类创建
• 前端的编写

此处存疑：在编写 登录/注册 的前端页面时，Jquery的show()方法无法触发，而另一个类似的按钮可以正常触发，后来删除了Div中的<form>标签后问题解决了，但事实上在测试用的Demo中并没有发现这个问题。

1. 消息显示问题

在考虑了昨天的遗留之后做了一些思考：JavaScript的计时器会一直执行，为了能更快的获得新的消息，计时器的间隔会很短，而这就一定会造成计时器内的滚动条定位被一直触发，最后使得聊天窗口的滚动条完全没法使用；

之所以需要计时器，是为了能不断的获得数据库中的数据，而这一点却存在着一些问题：按照之前的算法，程序在不断的读取数据，然后写在页面上，事实上我们是否需要一直写呢？

1
2
3
4
5
6
7
8
9
10

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代码，同时修改滚动条的位置，解决了昨天的遗留问题。

2. 用户输入框的优化

在之前的内容中，用户输入框使用的是<input type="text"/>，使用该标签存在一个问题是，input-text并不具有换行的功能，也就是说如果输入的文本足够长，该文本框是一直不断的横向滚动而不是自动换行。

不用多说自然是换成了文本域<textarea></textarea>标签。

3. 前端效果的加入

这里尝试做一个仿英雄联盟的效果用于加好友。

值得一提的是，因为类名一样，行为一样，结构一样，这里又遇到了之前 白块儿 里对于事件解绑的问题，不过这次很快就解决了。

1
2
3
4
5
6
7

$("#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);
    })
})

当然这里的写法并没有对应功能，后端的开发还未完成，因此这里只是做了行为处理和测试。

4. 一个非常严重的错误，登录重写

晚一点的时候发现自己写了一个非常傻*的东西，在判定完登录之后跳转页面直接用URL传参了用户的账号，然后在数据库里查询账号的记录并显示了其它的内容。

弊端我就不说了，URL里想上哪个账户就上哪个账户，完全不需要密码……

最后自然是重新处理了代码，验证之后把账号密码存进了Session中，然后在页面开头从Session里取出内容进行验证防止其它更重不允许的跳转。

5. 最后

第二天的内容到这里就结束了，到此为止得到的是一个不含注册的聊天室应用。

从今天的开发中看到最大的问题就是规划，因为没有考虑好功能的实现，太多时间都花在了重写上。其次关于JavaScript基础不足的问题已经没什么好说的了。

给明天定个目标：首先完成注册功能，然后把验证码功能个实装，之后尝试实现添加好友（数据库，后端逻辑）。