【Java 实战项目】多用户网页版聊天室：项目总览与用户 & 好友管理模块实现

文章目录

- 一、项目基础说明
- - [1.1 项目背景](#1.1 项目背景)
  - [1.2 项目定位](#1.2 项目定位)
  - [1.3 核心模块与功能需求](#1.3 核心模块与功能需求)
- 二、项目初始化搭建
- - [2.1 技术选型与项目依赖](#2.1 技术选型与项目依赖)
  - [2.2 配置文件初始化](#2.2 配置文件初始化)
- 三、客户端主页面布局实现
- - [3.1 页面整体框架](#3.1 页面整体框架)
  - [3.2 核心样式开发](#3.2 核心样式开发)
  - [3.3 标签页切换功能实现](#3.3 标签页切换功能实现)
  - [3.4 获取当前登录用户信息](#3.4 获取当前登录用户信息)
- 四、用户管理模块实现
- - [4.1 数据库设计](#4.1 数据库设计)
  - [4.2 前后端交互接口约定](#4.2 前后端交互接口约定)
  - [4.3 API接口开发（Controller层）](#4.3 API接口开发（Controller层）)
  - [4.4 前端页面开发](#4.4 前端页面开发)
- 五、好友管理模块实现
- - [5.1 数据库设计](#5.1 数据库设计)
  - [5.2 前后端接口约定](#5.2 前后端接口约定)
  - [5.3 API接口开发](#5.3 API接口开发)
  - [5.4 前端交互实现](#5.4 前端交互实现)

本文详细讲解基于SpringBoot开发网页版聊天程序的全过程，从项目搭建到用户管理、客户端页面布局、好友管理模块逐步实现，完成会话管理模块前的核心开发内容，实现用户注册、登录、好友列表展示等基础功能。

一、项目基础说明

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、日志格式，需先配置数据库信息避免打包失败，核心配置如下：

yaml 复制代码

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），核心结构：

html 复制代码

<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类实现列表的显示/隐藏；
初始化标签页函数，页面加载时执行。

核心代码：

javascript 复制代码

// 实现标签页切换
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].classList = 'list';
        lists[1].classList = 'list hide';
    }

    // 点击好友标签
    tabFriend.onclick = function() {
        tabSession.style.backgroundImage = 'url(image/对话2.png)';
        tabFriend.style.backgroundImage = 'url(image/用户.png)';
        lists[0].classList = 'list hide';
        lists[1].classList = 'list';
    }
}
// 初始化
initSwitchTab();

3.4 获取当前登录用户信息

实现页面加载时从后端获取当前登录用户信息，并展示在左侧用户区域，包含前后端接口和前端交互。

前后端接口约定：

请求方式：GET /userInfo
响应格式：JSON，返回当前登录用户的userId和username，密码置空：
json 复制代码
```
{
    "userId": 1,
    "username": "zhangsan"
}
```

后端接口开发：

修改UserAPI类，新增/userInfo接口，从HttpSession中获取用户信息，抹去密码后返回，核心代码：

java 复制代码

@GetMapping("/userInfo")
@ResponseBody
public Object getUserInfo(HttpServletRequest req) {
    User user = null;
    try {
        HttpSession httpSession = req.getSession(false);
        user = (User) httpSession.getAttribute("user");
        user.setPassword(""); // 抹去密码
    } catch (NullPointerException e) {
        user = new User();
    }
    return user;
}

前端交互实现：

在client.js中编写getUserInfo函数，通过AJAX调用/userInfo接口，将用户名展示在左侧用户区域，并将userId存入自定义属性，页面加载时执行：

javascript 复制代码

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的空对象：
json 复制代码
```
{
    "userId": 1,
    "username": "zhangsan"
}
```

（2）注册接口

请求方式：POST /register
请求头：Content-Type: application/x-www-form-urlencoded
请求参数：username=zhangsan&password=123
响应格式：JSON，成功返回用户信息，失败（如用户名重复）返回userId=0的空对象。

json 复制代码

{
  "userId": 1,
  "username": "zhangsan"
}

4.3 API接口开发（Controller层）

创建api.UserAPI类，添加@RestController注解，注入UserMapper，实现登录、注册接口，核心逻辑：

登录：根据用户名查询用户，验证密码，成功则将用户信息存入HttpSession，失败返回空User对象；
注册：插入用户信息，捕获用户名重复的异常，失败返回空User对象；
修复注册后userId为0的问题：在UserMapper.xml的insert标签添加useGeneratedKeys="true" keyProperty="userId"。

核心代码如下：

java 复制代码

@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代码：

javascript 复制代码

<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代码：

javascript 复制代码

<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：

json 复制代码

[
    {
        "friendId": 2,
        "friendName": "lisi"
    },
    {
        "friendId": 3,
        "friendName": "wangwu"
    }
]

5.3 API接口开发

创建api.FriendAPI类，添加@RestController注解，注入FriendMapper，实现/friendList接口，核心逻辑：从HttpSession获取当前用户，调用Mapper查询好友列表，捕获异常返回空列表。

核心代码：

java 复制代码

@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元素，添加好友名称，插入到好友列表；
后续补充好友项的点击事件（会话管理模块实现）。

核心代码：

javascript 复制代码

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();