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

3.2 核心样式开发

整体样式：通过 .cover 设置滤镜和背景图，z-index 低于主容器，实现背景模糊效果。主容器居中，左侧深色侧边栏，右侧消息区。

左侧区域：包含用户信息、搜索框、标签页及列表。用户信息固定高度深色背景；搜索框适配宽度；标签页分为'会话'和'好友'，各占 50%；列表统一样式并隐藏默认滚动条；添加 .hide 类控制显示隐藏。

右侧区域：包含会话标题、消息展示区、输入框和发送按钮。消息区分左右对齐（自己绿色，对方白色），输入框禁止调整大小。

3.3 标签页切换功能实现

在 static/client.js 中编写逻辑，监听标签点击事件，切换图标背景并通过添加/移除 .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].classList.add('list');
    lists[0].classList.remove('hide');
    lists[1].classList.add('hide');
  };

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

// 初始化
initSwitchTab();

3.4 获取当前登录用户信息

页面加载时需从后端获取当前用户信息并展示。

接口约定：GET /userInfo，返回 JSON 格式的 userId 和 username（密码置空）。

后端实现：修改 UserAPI 类，新增接口从 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;
}

前端交互：调用 AJAX 获取数据，将用户名渲染到左侧区域，并将 userId 存入自定义属性。

function getUserInfo() {
  $.ajax({
    type: 'get',
    url: '/userInfo',
    success: function (body) {
      let userDiv = document.querySelector('.user');
      if (body && body.username) {
        userDiv.innerHTML = body.username;
        userDiv.setAttribute('user-id', body.userId);
      }
    },
    error: function () {
      alert("获取当前用户信息失败!");
    }
  });
}
getUserInfo();

四、用户管理模块实现

该模块实现用户注册与登录的全流程，涉及数据库设计、实体映射及前后端交互。

4.1 数据库设计

创建数据库 java_chatroom，设计 user 表，包含 ID、用户名（唯一）、密码，并插入测试数据。

4.2 前后端交互接口约定

• 登录：POST /login，参数为 username 和 password。成功返回用户信息，失败返回 userId=0 的空对象。
• 注册：POST /register，参数同上。成功返回用户信息，失败（如重复）返回空对象。

4.3 API 接口开发（Controller 层）

在 api.UserAPI 类中注入 UserMapper，实现登录与注册逻辑。

关键点：

1. 登录成功将用户存入 HttpSession。
2. 注册时捕获 DuplicateKeyException 异常处理重复用户名。
3. 修复注册后 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+JS+jQuery 实现登录与注册页面。

登录页面：创建 static/login.html，引入 jQuery，编写提交事件调用 /login 接口。验证成功跳转 client.html，失败弹出提示。

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

注册页面：结构类似登录页，调用 /register 接口，成功跳转登录页。

五、好友管理模块实现

好友管理模块负责展示好友列表，为后续聊天功能打下基础。

5.1 数据库设计

设计 friend 表存储好友关系，采用双向存储机制（A 是 B 的好友，则 B 也是 A 的好友）。

5.2 前后端接口约定

• 请求方式：GET /friendList
• 逻辑：根据 Session 识别用户，查询其好友列表。
• 响应：JSON 数组，包含 friendId 和 friendName。

5.3 API 接口开发

在 api.FriendAPI 类中实现 /friendList 接口，从 Session 获取用户 ID，调用 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 函数，调用接口后将数据渲染到左侧列表区域。

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