复旦大学2022春季高级Web技术PJ

小组成员：

• 李洋圳
• 袁逸聪
• 赵书誉
• 袁浩

本项目是一个可供多人在线的Web3D教学式场景，参与者进入虚拟场景，与棋盘交互，共同尝试解决八皇后问题。

点击项目链接进行体验~

玩家还可以在用户中心选择自己喜欢的虚拟形象，或者听天由命随机！

• 需求规划：共同完成

• 前台搭建

  • 前端：李洋圳 袁逸聪（需求对接）
  • 后端：赵书誉 袁浩（需求对接）

• 虚拟场景：袁浩 袁逸聪

• 具体负责模块

  • 李洋圳：前端搭建，前端页面美化
  • 赵书誉：数据库搭建，后端搭建，后端结构图绘制
  • 袁浩：虚拟场景环境与人物模型，socketio同步，后端搭建，项目部署
  • 袁逸聪：虚拟场景棋盘，socketio同步，前端搭建，前端页面美化，文档与接口管理

项目共分为3个部分

• backend：springboot后端，管理持久化数据
• frontend：vue前端，包含threejs页面渲染
• socketio：socketio的server部分，转发threejs数据进行同步

核心代码在/src/main/java/com/company/project下

• /configurer：项目初始化配置
• /core：共同核心功能
• /dao：数据库接口
• /model：数据模型
• /service：功能实现类
• /util：工具
• /web：controller类，对外提供接口
• Application.java:项目启动入口

本项目的核心在于虚拟场景，因此后端采用简单设计，有待增加虚拟场景数量后拓展。

后端提供的主要功能是用户管理与虚拟场景使用情况统计。

• 用户
  • 身份验证
    • 使用临时生成的token，后端存储token-用户对应关系，前端发送请求携带token以表明身份
• 虚拟场景
  • 使用情况
    • 记录虚拟场景的使用次数，以表征其热度
  • 通过情况
    • 记录虚拟场景的通关比例，以表征其难度

数据库结构

• ChessBoard
  • 由ChessGrid组成，根据状态有不同外显
    • 皇后：深紫色
    • 皇后影响范围：淡紫色
    • 预选指示器中心：深绿色
    • 预选指示器影响范围：浅绿色
  • 棋盘接受外部请求，管理所有格子的状态
    • 本地请求：预选则指示器，本地渲染，指示将要覆盖的格子
    • 同步请求：放置或拿走皇后，发送请求到socketio server，server转发给所有客户端一起处理

设计概览

核心代码见/node/app.js

socket io开发非常方便！内容全部写在一个文件也不显得臃肿

> socket io server：监听时间并处理，如转发等
io.sockets.on('connection', function(socket){
  	socket.on('update', function(data){
		socket.userData.x = data.x;
		socket.userData.y = data.y;
		socket.userData.z = data.z;
		socket.userData.heading = data.h;
		socket.userData.pb = data.pb,
		socket.userData.action = data.action;
	});
}

> socket io client:发送与监听事件
socket.emit('update',...)
socket.on('update',...)

1. 注册与登录
   1. 账号由邮箱、密码组成
   2. 密码要求6-18位，由数字、大写字母、小写字母组成，至少包含其中两种
   3. 邮箱不可重复注册，提供重复检验与回显提示
2. 用户后台
   1. 用户后台提供选择进入虚拟场景的链接
   2. 用户后台显示邮箱
   3. 用户后台可预览进入虚拟场景所用的虚拟形象
   4. 用户后台显示各场景使用历史
3. 虚拟场景入口
   1. 虚拟场景提供回到用户后台的链接
   2. 本阶段不必实现场景

虚拟场景为多人在线可交互的八皇后问题

1. 棋盘
   1. 黑白相间的国际象棋棋盘
   2. 本地功能：本地玩家角色处在棋盘格子上时，显示预选指示器，表明选中的格子与选中后将被覆盖的格子范围，指示器仅在本地生效
   3. 同步功能：玩家角色处在棋盘格子上时，可以放置或拿走皇后
      1. 皇后覆盖范围内的格子无法交互
      2. 非皇后格子交互后放置皇后，同步给所有玩家
      3. 皇后格子交互后拿走皇后，同步给所有玩家
2. 玩家角色
   1. 玩家角色只能在平面上移动，通过改变自身位置选中脚下的棋盘格
   2. 本地玩家角色
      1. 本地玩家角色附带本地相机，相机以第三人称视角围绕角色转动
      2. 需要限制相机的转动范围，使其不越过地面
   3. 同步玩家角色
      1. 客户端还需要同步显示其他玩家角色的位置，但不需要渲染相机
3. 聊天室
   1. 聊天界面固定显示在屏幕下方，打开时遮盖游戏场景，不改变场景大小
   2. 按下回车打开聊天界面，打开时输入框获取焦点
   3. 输入内容再按下回车即发送，信息同步给所有在线玩家
   4. 输入框中无内容时按下回车关闭输入框

1. 主页：供未登录用户浏览，介绍项目情况，并提供注册、登录页面的链接
2. 注册、登录：提供注册、登录功能，成功后跳转到用户后台
3. 用户后台：提供虚拟场景入口，可以查看虚拟场景使用历史
4. 虚拟场景

本项目统一采用小驼峰法传输变量，对前端、后端及数据库都适用

对常用变量命做如下规定

本项目采用RESTFUL风格API规范

• 注册登录
  • 注册，创建账号
  • 查看邮箱重复性，查看账号
  • 登录，创建token
  • 登出，删除token
• 用户后台
  • 创建虚拟场景进入记录
  • 查看虚拟场景进入记录
• 虚拟场景
  • 用户进入虚拟场景
  • 用户通过虚拟场景
  • 查看虚拟场景进入情况
  • 查看虚拟场景通过情况

此处展示所有接口通用的返回参数

接口实际返回参数为通用参数加上各自的输出参数

${ip}:${port}/api/user/account GET

输入参数

输出参数

${ip}:${port}/api/user/account POST

输入参数

${ip}:${port}/api/user/token POST

输入参数

输出参数

${ip}:${port}/api/user/token DELETE

输入参数

${ip}:${port}/api/history POST

输入参数

${ip}:${port}/api/history GET

输入参数

${ip}:${port}/api/record POST

输入参数

${ip}:${port}/api/record/all GET

输入参数

输出参数

${ip}:${port}/api/stat POST

输入参数

${ip}:${port}/api/stat/all GET

输入参数

输出参数