练手项目:BullShit 聊天室(第二天)

BullShit 聊天室开发的第二天

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

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

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

添加用户登录功能

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

此处存疑:在编写 登录/注册 的前端页面时,Jqueryshow()方法无法触发,而另一个类似的按钮可以正常触发,后来删除了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. 前端效果的加入

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

添加好友.gif

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

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基础不足的问题已经没什么好说的了。

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