一、项目基础说明
1.1 项目背景
- 实现类似网页版微信的在线聊天室，支持网页端实时聊天、好友管理、消息收发等核心功能。
1.2 项目定位
本项目是一款轻量级网页版在线聊天室应用，模拟主流即时通讯软件核心体验，基于 Spring Boot + WebSocket 技术栈实现，涵盖用户管理、好友关系、实时消息等完整 IM 流程，适合作为前后端全栈开发入门实践项目。
1.3 核心模块与功能需求
- 用户管理模块
- 注册功能：提供注册页面，输入用户名/密码，校验用户名唯一性，注册成功跳转登录页。
- 登录功能：提供登录页面，输入用户名/密码，校验账号合法性，登录成功创建会话并跳转主页面。
- 主界面布局
- 用户信息：左上角展示当前登录用户昵称。
- 会话列表：展示用户所有会话，点击切换会话并加载对应历史消息。
- 好友列表：展示用户所有好友，点击自动创建/切换会话，提供「新增好友」入口。
- 消息区域：顶部显示会话名称，中间滚动展示历史消息，底部提供输入框与发送按钮。
- 消息传输功能
- 选中好友自动生成会话，点击会话加载历史消息。
- 发送消息支持实时推送：对方在线立即接收，对方离线则持久化存储，待上线后查看。
- 添加好友功能
- 支持用户名模糊匹配查找用户，发送带验证消息的好友申请。
- 对方在线/离线均可接收申请，可选择「接受」（建立好友关系）或「拒绝」（忽略申请），离线申请将在对方上线后展示。
二、项目初始化搭建
2.1 技术选型与项目依赖
采用SpringBoot 3 系列版本，创建 Spring 项目时勾选以下核心依赖：
- Spring Web：实现前后端接口交互；
- MySQL Driver：MySQL 数据库驱动；
- MyBatis Framework：持久层框架，操作数据库；
- WebSocket：后续实现实时消息推送（会话管理模块后使用）。
2.2 配置文件初始化
将项目配置文件修改为 resources/application.yml，配置数据库、MyBatis、日志格式，需先配置数据库信息避免打包失败，核心配置如下：
spring:
datasource:
url: jdbc:mysql://127.0.0.1:3306/java_chatroom?characterEncoding=utf8&useSSL=false
username: root
password: 2222
driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
mapper-locations: classpath:mapper/**Mapper.xml
logging:
pattern:
dateformat: HH:mm:ss.SSS
三、客户端主页面布局实现
客户端页面示例：
客户端主页面 client.html 是聊天程序的核心界面，实现左侧用户/会话/好友区域、右侧消息收发区域的布局与样式，结合 CSS 实现背景模糊、标签页切换、列表展示等效果。
3.1 页面整体框架
创建 static/client.html，页面核心分为背景遮罩层（.cover） 和主容器（.client-container），主容器内又分为左侧区域（.left） 和右侧区域（.right），核心结构：
<div class="cover"></div>
<div class="client-container">
<div class="main">
<!-- 左侧：用户信息、搜索框、标签页、会话/好友列表 -->
<div class="left"></div>
<!-- 右侧：会话标题、消息展示、输入框、发送按钮 -->
<div class="right"></div>
</div>
</div>
3.2 核心样式开发
整体样式：
实现背景模糊效果（通过 .cover 设置滤镜 + 背景图，z-index 低于主容器），主容器居中展示，左侧为深色侧边栏，右侧为消息区域，核心 CSS：
左侧区域样式开发： 左侧区域包含用户信息、搜索框、标签页、会话/好友列表，依次实现各模块样式：
- 用户信息：展示登录用户名，深色背景、白色文字，固定高度；
- 搜索框：包含输入框和搜索按钮，适配左侧宽度，按钮添加搜索图标背景；
- 标签页：分为'会话'和'好友'两个标签，各占 50% 宽度，添加图标背景；
- 列表样式：会话列表和好友列表统一样式，设置滚动条、选中效果，隐藏默认滚动条（浏览器扩展 CSS）；
- 隐藏类：添加
.hide类，设置display: none，实现列表的显示/隐藏切换。
右侧区域样式开发： 右侧区域包含会话标题、消息展示区、消息输入框、发送按钮，依次实现各模块样式：
- 会话标题：居中展示，底部加边框，固定高度；
- 消息展示区：分为左侧消息（对方）和右侧消息（自己），分别设置白色、绿色背景，消息包含发送人、时间、内容；
- 输入框：多行文本框，禁止调整大小，适配右侧宽度；
- 发送按钮：居右展示，设置点击效果。
3.3 标签页切换功能实现
创建 static/client.js，编写 JavaScript 代码实现会话标签和好友标签的切换功能，核心逻辑：
- 获取标签页和列表元素，为标签添加点击事件；
- 点击标签时，切换标签图标，并通过添加/移除
.hide类实现列表的显示/隐藏； - 初始化标签页函数，页面加载时执行。
核心代码：
// 实现标签页切换
function initSwitchTab() {
let tabSession = document.querySelector('.tab-session');
let tabFriend = document.querySelector('.tab-friend');
let lists = document.querySelectorAll('.list');
// 点击会话标签
tabSession.onclick = function() {
tabSession.style.backgroundImage = 'url(image/对话.png)';
tabFriend.style.backgroundImage = 'url(image/用户 2.png)';
lists[0].className = 'list';
lists[1].className = 'list hide';
};
// 点击好友标签
tabFriend.onclick = function() {
tabSession.style.backgroundImage = 'url(image/对话 2.png)';
tabFriend.style.backgroundImage = 'url(image/用户.png)';
lists[0].className = 'list hide';
lists[1].className = 'list';
};
}
// 初始化
initSwitchTab();
3.4 获取当前登录用户信息
实现页面加载时从后端获取当前登录用户信息，并展示在左侧用户区域，包含前后端接口和前端交互。
前后端接口约定：
- 请求方式：GET /userInfo
- 响应格式：JSON，返回当前登录用户的
userId和username，密码置空：
{"userId":1,"username":"zhangsan"}
后端接口开发：
修改 UserAPI 类，新增 /userInfo 接口，从 HttpSession 中获取用户信息，抹去密码后返回，核心代码：
@GetMapping("/userInfo")
@ResponseBody
public Object getUserInfo(HttpServletRequest req) {
User user = null;
try {
HttpSession httpSession = req.getSession(false);
user = (User) httpSession.getAttribute("user");
if(user != null) {
user.setPassword(""); // 抹去密码
}
} catch(NullPointerException e) {
user = new User();
}
return user;
}
前端交互实现：
在 client.js 中编写 getUserInfo 函数，通过 AJAX 调用 /userInfo 接口，将用户名展示在左侧用户区域，并将 userId 存入自定义属性，页面加载时执行：
function getUserInfo() {
$.ajax({
type: 'get',
url: '/userInfo',
success: function(body) {
let userDiv = document.querySelector('.user');
userDiv.innerHTML = body.username;
userDiv.setAttribute('user-id', body.userId);
},
error: function() {
alert("获取当前用户信息失败!");
}
});
}
// 页面加载时获取
getUserInfo();
四、用户管理模块实现
用户管理模块是项目基础，实现用户注册、登录的前后端全流程，包含数据库设计、实体类、Mapper 层、API 接口、前端页面开发。
4.1 数据库设计
创建项目核心数据库 java_chatroom，并设计用户表 user，包含用户 ID、用户名（唯一）、密码，同时插入测试数据。
4.2 前后端交互接口约定
（1）登录接口
- 请求方式：POST /login
- 请求头：Content-Type: application/x-www-form-urlencoded
- 请求参数：username=zhangsan&password=123
- 响应格式：JSON，成功返回用户信息，失败返回
userId=0的空对象：
{"userId":1,"username":"zhangsan"}
（2）注册接口
- 请求方式：POST /register
- 请求头：Content-Type: application/x-www-form-urlencoded
- 请求参数：username=zhangsan&password=123
- 响应格式：JSON，成功返回用户信息，失败（如用户名重复）返回
userId=0的空对象。
{"userId":1,"username":"zhangsan"}
4.3 API 接口开发（Controller 层）
创建 api.UserAPI 类，添加 @RestController 注解，注入 UserMapper，实现登录、注册接口，核心逻辑：
- 登录：根据用户名查询用户，验证密码，成功则将用户信息存入
HttpSession，失败返回空 User 对象； - 注册：插入用户信息，捕获用户名重复的异常，失败返回空 User 对象；
- 修复注册后
userId为 0 的问题：在UserMapper.xml的insert标签添加useGeneratedKeys="true" keyProperty="userId"。
核心代码如下：
@RestController
public class UserAPI {
@Resource
UserMapper userMapper;
@PostMapping("/login")
@ResponseBody
public Object login(String username, String password, HttpServletRequest req) {
User user = userMapper.selectByName(username);
if(user == null || !user.getPassword().equals(password)) {
return new User();
}
HttpSession session = req.getSession(true);
session.setAttribute("user", user);
return user;
}
@PostMapping("/register")
@ResponseBody
public Object register(String username, String password) {
User user = null;
try {
user = new User();
user.setUsername(username);
user.setPassword(password);
int ret = userMapper.insert(user);
} catch(org.springframework.dao.DuplicateKeyException e) {
user = new User();
}
return user;
}
}
4.4 前端页面开发
前端基于 HTML+CSS+JavaScript+jQuery 实现，创建静态页面、样式文件，通过 AJAX 调用后端接口，实现登录、注册的页面交互。
登录页面开发：
- 创建登录页面：
static/login.html，包含导航栏、登录容器（用户名输入框、密码输入框、提交按钮）； - 登录样式：创建
css/login.css，设置登录容器、输入框、按钮的样式，实现美观的登录界面； - AJAX 交互：引入 jQuery，编写点击提交按钮的事件，调用
/login接口，验证返回结果，成功跳转到主页面client.html，失败弹出提示。
核心 JS 代码：
<script>
let submitButton = document.querySelector('#submit');
submitButton.onclick = function(){
let username = document.querySelector('#username').value;
let password = document.querySelector('#password').value;
$.ajax({
method:'post',
url:'/login',
data:{username: username, password: password},
success:function(data){
if(data && data.userId > 0){
alert("登录成功!");
location.assign('/client.html');
} else {
alert("登录失败！用户名密码错误！或者该账号已经在别处登录!");
}
}
});
}
</script>
注册页面开发：
- 创建注册页面：
static/register.html，页面结构与登录页面一致，仅修改标题为'注册'； - 样式复用：直接引入
css/common.css和css/login.css，无需额外编写样式； - AJAX 交互：引入 jQuery，编写提交事件，调用
/register接口，成功跳转到登录页面login.html，失败弹出提示。
核心 JS 代码：
<script>
let submitButton = document.querySelector('#submit');
submitButton.onclick = function(){
let username = document.querySelector('#username').value;
let password = document.querySelector('#password').value;
$.ajax({
method:'post',
url:'/register',
data:{username: username, password: password},
success:function(data){
if(data && data.username){
alert('注册成功!');
location.assign('/login.html');
} else {
alert("注册失败!");
}
}
});
}
</script>
五、好友管理模块实现
好友管理模块实现好友列表展示的核心功能，包含数据库设计、实体类、Mapper 层、API 接口、前端交互，为后续添加好友、好友聊天打下基础。
5.1 数据库设计
设计好友表 friend，用于存储用户的好友关系，采用双向存储（用户 A 是用户 B 的好友，则用户 B 也是用户 A 的好友），并插入测试数据。
5.2 前后端接口约定
- 请求方式：GET /friendList
- 接口逻辑：根据当前登录用户的
HttpSession识别用户，查询其好友列表； - 响应格式：JSON 数组，包含每个好友的
friendId和friendName：
[{"friendId":2,"friendName":"lisi"},{"friendId":3,"friendName":"wangwu"}]
5.3 API 接口开发
创建 api.FriendAPI 类，添加 @RestController 注解，注入 FriendMapper，实现 /friendList 接口，核心逻辑：从 HttpSession 获取当前用户，调用 Mapper 查询好友列表，捕获异常返回空列表。
核心代码：
@RestController
public class FriendAPI {
@Resource
private FriendMapper friendMapper;
@GetMapping("/friendList")
@ResponseBody
public Object getFriendList(HttpServletRequest req) {
try {
HttpSession session = req.getSession(false);
User user = (User) session.getAttribute("user");
return friendMapper.selectFriendList(user.getUserId());
} catch(NullPointerException e) {
e.printStackTrace();
return new ArrayList<Friend>();
}
}
}
5.4 前端交互实现
在 client.js 中编写 getFriendList 函数，通过 AJAX 调用 /friendList 接口，将好友列表渲染到左侧好友列表区域，页面加载时执行，核心逻辑：
- 清空好友列表原有内容；
- 遍历后端返回的好友数组，创建
li元素，添加好友名称，插入到好友列表； - 后续补充好友项的点击事件（会话管理模块实现）。
核心代码：
function getFriendList() {
$.ajax({
type:'get',
url:'/friendList',
success:function(body){
let friendList = document.querySelector('#friend-list');
friendList.innerHTML = ''; // 清空原有内容
for(let friend of body){
let li = document.createElement('li');
li.innerHTML = '<h4>'+ friend.friendName +'</h4>';
friendList.appendChild(li);
}
},
error:function(){
alert('获取好友列表失败!');
}
});
}
// 页面加载时获取
getFriendList();
