JavaEE在线人数管理系统

JavaEE在线人数管理系统攻略

概述

本系统是基于JavaEE开发的在线人数管理系统，主要功能是实时展示当前在线用户数并记录历史在线人数信息。

技术栈

本系统主要采用了以下技术：
- 后端框架：Spring框架
- 数据库：MySQL
- 前端框架：Bootstrap和jQuery
- 服务器：Tomcat

实现步骤

步骤一：建立数据库

在MySQL中建立一个名为online_user的数据库，建立user表，表字段如下：

字段名	类型	说明
id	int	主键，自增
name	varchar(50)	用户名
login_time	datetime	登陆时间

步骤二：使用Spring框架实现业务逻辑

使用Spring框架实现业务逻辑，包括以下部分：
- 用户登陆时，向user表插入一条记录；
- 用户退出时，更新user表中的相应记录；
- 实时获取在线用户数，以及前一分钟内的在线用户数并返回给前端。

示例代码：

@Component
public class OnlineUserService {

    @Autowired
    private UserDao userDao;

    /**
     * 用户登陆，向数据库中插入一条记录
     * @param name 用户名
     * @param time 登陆时间
     */
    public void login(String name, Date time) {
        User user = new User();
        user.setName(name);
        user.setLoginTime(time);
        userDao.save(user);
    }

    /**
     * 用户退出，更新数据库中记录
     * @param name 用户名
     * @param time 退出时间
     */
    public void logout(String name, Date time) {
        User user = userDao.findByNameAndLoginTime(name, time);
        if (user != null) {
            user.setLogoutTime(time);
            userDao.save(user);
        }
    }

    /**
     * 获取当前在线用户数
     * @return 当前在线用户数
     */
    public int getCurrentOnlineUserCount() {
        return userDao.countByLogoutTimeIsNull();
    }

    /**
     * 获取前一分钟的在线用户数
     * @return 前一分钟的在线用户数
     */
    public int getPreviousMinuteOnlineUserCount() {
        Calendar calendar = Calendar.getInstance();
        calendar.add(Calendar.MINUTE, -1);
        Date endTime = calendar.getTime();
        calendar.add(Calendar.MINUTE, -1);
        Date startTime = calendar.getTime();
        return userDao.countByLoginTimeBetween(startTime, endTime);
    }

}

步骤三：使用Bootstrap和jQuery实现前端界面

使用Bootstrap和jQuery实现前端界面，包括以下部分：
- 显示当前在线用户数；
- 显示前一分钟的在线用户数；
- 显示在线用户列表。

示例代码：

<div class="row">
    <h2>在线人数管理系统</h2>
</div>
<div class="row">
    <div class="col-sm-4">
        <div class="panel panel-primary">
            <div class="panel-heading">当前在线用户数</div>
            <div class="panel-body">
                <h1 id="current-count" class="text-center"></h1>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="panel panel-primary">
            <div class="panel-heading">前一分钟在线用户数</div>
            <div class="panel-body">
                <h1 id="previous-count" class="text-center"></h1>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="panel panel-primary">
            <div class="panel-heading">在线用户列表</div>
            <ul id="user-list" class="list-group">
            </ul>
        </div>
    </div>
</div>

<script type="text/javascript">
    // 实时更新在线用户数和列表
    setInterval(function() {
        $.ajax({
            url: "/online-user",
            type: "GET",
            contentType: "application/json",
            success: function(data) {
                // 显示当前在线用户数
                $("#current-count").text(data.currentCount);
                // 显示前一分钟在线用户数
                $("#previous-count").text(data.previousCount);
                // 显示在线用户列表
                $("#user-list").empty();
                for (var i in data.userList) {
                    var user = data.userList[i];
                    $("#user-list").append("<li class='list-group-item'>" + user.name + "</li>");
                }
            },
            error: function() {
                console.log("获取数据失败");
            }
        });
    }, 1000);
</script>

示例说明

示例一

假设当前此系统已经在线5个用户，分别是Alice、Bob、Cathy、David、Ella。此时Bob退出系统，更新数据库中相应记录。然后系统将Bob从在线用户列表中剔除，并将当前在线用户数显示为4。

示例二

在特定的时刻，假设此系统共有10个用户在线，分别是Alice、Bob、Cathy、David、Ella、Frank、Grace、Henry、Iris和Jack。此时系统记录下当前在线用户数，并查询前一分钟内在线用户数的个数。假设前一分钟内有7个用户在线，分别是Alice、Bob、Cathy、David、Grace、Henry和Iris。此时系统将当前在线用户数显示为10，同时将之前一分钟内的在线用户数显示为7。