溢彩画项目是一个基于前后端分离架构开发的课程设计项目，主要实现了一个具有交互性的溢彩画游戏应用。用户可以在前端界面进行颜色选择和棋盘染色操作，后端负责处理逻辑和数据存储。该项目灵感来源于游戏《鸣潮》。
本项目包含前端和后端两部分：
- 前端：使用 Vue3 构建用户界面，实现与用户的交互和界面展示。
- 后端：采用 Spring Boot 3 和 Java 搭建服务，使用 Mysql 数据库存储棋盘状态。
- 展示一个 N * N（按照鸣潮标准为 10 * 8）的棋盘，用于进行溢彩画染色操作。
- 棋盘右侧设置四个可交互的圆形按钮，分别代表 C（青色）、M（品红色）、Y（黄色）、K（黑色）四种颜色。鼠标悬停和点击按钮时呈现不同的图片效果，点击后可直接切换颜色，暂不实现动画效果。
- 点击颜色按钮后，传递点击信号 1（携带 CMYK 信号）给后端。
- 触碰棋盘的任意一格后，传递点击信号 2（棋盘状态、点击位置 X，Y）给后端。
- 棋盘右下角添加一个重置按钮，用于重置棋盘状态。
- 棋盘上方设置六个序号，每个序号对应不同的预制棋盘挑战。
- 棋盘下方提示染色的最终目标。
- 棋盘左上方提示当前使用步数，该步数与计数器绑定，仅在点击信号 1 和点击信号 2 发出后进行计数。
- 实现一个弹窗，默认基于系统时间生成随机种子。
- 后续开放引入玩家自定义棋盘以及预设的关卡挑战模式。
- 当后端判断游戏胜利时，前端显示结算页面。
- 结算页面包含 exit 按钮、祝贺消息和下一关按钮。
- 使用
npm install安装项目依赖。 - 使用
npm run serve启动开发服务器，项目默认运行在 8080 端口。 - 使用
npm run build对项目进行生产环境的打包。 - 使用
npm run lint对代码进行检查和修复。
如需自定义配置，可参考Configuration Reference。
- 使用 Spring Boot 3 和 Java 搭建后端服务。
- 采用 Mysql 数据库存储棋盘状态，通过 Navicat 进行数据库管理。
- 接收前端传递的 JSON 数据，同步记录棋盘状态，使用 0 - 3 代表不同的颜色。
- 接收前端的两个点击信号后进行逻辑处理，包括判断是否胜利和进行四连通区域填充。
- 四连通区域填充逻辑：将自身四个方向上所有的非自身 CMYK 格子同色化。
- 判断棋盘的所有数字是否为同一个数字，若为真则判定游戏胜利，并返回布尔变量给前端。
在Main.java.com.example.resource.application.properties中配置数据库连接，并引用 Spring Web、JPA 和 Mysql Driver 依赖项。
已完成跨域配置，无需额外配置。
在完成主体项目构建后，可能加入登陆校验功能。由前端记录用户信息并传回后端进行验证，同时实现注册功能。
项目中包含测试用的UserService和UserController类，用于测试数据库连接，但与项目核心功能无关。
特别鸣谢豆包。
本项目基于前后端分离，为课程 Java 设计结课制作，最好使用 IDEA 打开。