校园网
校园网账户状态、在线设备、上网记录——不用登录学校自助平台,App 里就能查。
前提条件
校园网查询需要先绑定智慧校园账号。如果还没绑定,页面会引导你去绑定。
绑定入口
「我的」→「绑定账号」→ 选择「智慧校园」进行绑定。详见 账号与绑定。
功能说明
账户状态
进入「校园网」页面,顶部卡片展示当前账户的使用情况:
| 项目 | 说明 |
|---|---|
| 已用时长 | 今日累计在线时长 |
| 已用流量 | 今日累计使用的流量 |
在线设备
页面中部展示当前在线的所有设备,每台设备显示:
| 信息 | 说明 |
|---|---|
| 设备名称 | 手机/电脑的设备名 |
| IP 地址 | 分配的内网 IP |
| MAC 地址 | 设备物理地址 |
| 上线时间 | 本次连接的起始时间 |
| 已用时长 | 该设备本次在线时长 |
| 已用流量 | 该设备本次使用的流量 |
上网记录
页面底部展示历史上网记录,每条记录显示上线/下线时间、使用时长、流量消耗、IP 和设备信息。
后端实现
校园网数据来自学校校园网自助服务平台。后端通过智慧校园账号登录自助平台,模拟请求获取账户状态、在线设备列表和上网记录。
| 接口 | 说明 |
|---|---|
GET /network/account | 获取账户使用概况 |
GET /network/online | 获取在线设备列表 |
GET /network/login-history | 获取上网记录 |
GET /network/devices | 获取绑定设备列表 |
所有接口均需要 JWT 认证和智慧校园账号绑定。
前端实现
前端页面分为三个区域,从上到下依次为:
- 账户状态卡片:展示已用时长和已用流量,用醒目的颜色突出关键数据
- 在线设备列表:每台设备一张卡片,显示设备名、IP、MAC、上线时间和使用情况
- 上网记录列表:上下行对照布局,展示每次连接的详细信息
页面支持下拉刷新,骨架屏加载。
