简单netty聊天室（前端部分）

序

分享一下学习 netty 时练手的聊天室项目，目前已经完成了前端部分的一大半，因此写一篇博客来记录一下。
（因为本人是前端白痴，所以只用 jquery 和 bootstrap 等简单工具实现了前端页面，望谅解( ╯▽╰)）

---

简介

本项目（SimpleNettyChatroom）使用 Spring Boot 作为后端开发框架，使用 jQuery 和 Bootstrap 作为前端开发框架，并且配合使用了前端 ajax 技术和后端 netty 框架。

如果想学习或了解更多关于项目源码的内容，欢迎访问和星标我的 github 项目（´v｀）：

https://github.com/ahy231/SimpleNettyChatroom

---

登录页介绍

背景

• 背景借助了CSS渐变色的能力，随意选了三个颜色。参数如下。

background-image: linear-gradient(to right bottom, rgb(153, 204, 255), rgb(255,255,204), rgb(255,204,153));

如果想学习CSS渐变色，可以从下面的入口进入菜鸟教程查看：
CSS3 渐变（Gradients）

你也可以使用 CSS 变色能力做出下面按钮变色背景的效果ヾ(^▽^*)))

输入框内的图标

• 输入框内的图标使用了 fontawesome.com.cn 网站提供的图标，不仅免费，而且非常好看。

强烈安利！！

变色按钮

• 当然是使用了万能的 Bootstrap 做变色按钮！
• 样式如下：

<div class="btn-group">
	<input type="submit" class="btn btn-light btn-outline-dark my-btn" value="登录">
	<input type="button" class="btn btn-light btn-outline-dark my-btn" value="注册" onclick="register()">
</div>

其中 btn-light 设置了按钮默认显示为白色，btn-outline-dark则设置了按钮在 active 状态下显示为黑色。

别忘了在所有按钮最外层加一个 class 为 btn-group 的 div ！这样你的按钮才会成对显示o(^▽^)o

聊天室介绍

• 实现了最基本的功能：退出、查询好友、发送消息

• 退出时使用 ajax 通知后台，删除用户登录信息。
  

• 发送按钮必须要在选中某个用户，并且输入框中有文字时才能点击。
  

• 在搜索框中输入搜索内容一秒后，搜索框使用 ajax 向后端发送请求获取所有匹配的用户信息，返回前端显示。
  
  

这里使用 javascript 的 setTimeout 函数来定时一秒，用 jQuery 的 bind 方法。
如果想学习 javascript 的 setTimeout 函数，可以进入菜鸟教程查看：
Window setTimeout() 方法
如果想学习 jQuery 的 bind 方法，可以进入 W3school 查看：
jQuery 事件 - bind() 方法

未完待续……