简介这是一份面向毕业设计、课程设计及期末大作业的Java游戏服务网站源码包基于SpringBoot框架实现整体采用B/S架构与MVC分层技术栈涵盖Java、MySQL、MyBatis、Ajax、Vue等。适合计算机、电子信息工程等专业学生作为项目参考也可直接用于二次开发与功能扩展。包内共646个文件以Java后端源码、Vue前端组件、SVG图标、JavaScript脚本、XML配置及图片素材为主项目结构清晰从用户交互到数据库操作均有完整实现压缩包大小约22.18MB下载后即可导入IDEA或Eclipse配合MySQL 5.7运行。当前已有593人学习/下载源码经过严格测试可放心使用。作者还提供使用问题解答遇到环境配置或调试问题可及时沟通。这份资源能帮助你完整理解游戏服务网站的开发流程快速搭建一个可演示、可扩展的SpringBoot项目。1. 为什么说这套 Java 游戏服务网站代码不止是一个毕业设计拿到压缩包后第一感觉是杂乱一堆.vue.bak文件几个bat脚本没有 README。如果你按常规思路去 IDEA 里直接打开大概率会一头雾水。把这套资源拆开看它实际上是一个采用 SpringBoot Vue 前后端分离结构的游戏服务网站源码后端用 MyBatis 操作 MySQL 5.7前端由update-password.vue、IndexMain.vue、IndexHeader.vue这些组件拼出完整页面配合main.js进行路由和接口请求。它覆盖了用户注册、登录、改密、首页展示、侧边栏菜单等游戏服务站点最常遇到的模块适合正在做毕业设计、课程设计的人拿来二次开发也适合想摸清 SpringBoot 接口如何与 Vue 组件联动的网页后端开发者。这里的.bak不是损坏文件而是作者在 Windows 下保存的备份版本理解了它的存在这个项目就能跑起来。2. 拆资源结构.vue.bak 备份如何还原成可运行的前端页面2.1 .vue.bak 与 .js.bak 在项目中的真实角色从文件清单看前端部分保留的是update-password.vue.bak、IndexMain.vue.bak、IndexAsideStatic.vue.bak、BreadCrumbs.vue.bak、IndexHeader.vue.bak和main.js.bak。这类.bak后缀在 Windows 开发环境里非常常见通常是 IDEA、VS Code 或文本编辑器在保存时自动生成的备份也可能是作者在调整代码前手动复制留下的基线版本。这个基线版本不是垃圾而是可以回滚的现场。还原思路很简单把.bak去掉恢复成 Vue 组件和入口文件。但这里有一个经常被忽略的坑如果压缩包内原本就有同名.vue直接改名会覆盖现有文件可能把已经修好的组件顶掉。正确的做法是先看文件大小和修改时间再用 diff 工具比较两个版本的内容。如果没有现成的.vue那么将所有.bak改名后前端工程就能恢复到一个可编译的状态。注意main.js.bak不能简单改名为main.js就完事因为它内部引用了IndexAsideStatic、IndexMain这些组件路径大小写错误在 Windows 上可能不报错部署到 Linux 服务器时会直接白屏。2.2 在 Windows 和 macOS 下批量还原备份文件我一般会在 PowerShell 或 Git Bash 里用一条命令处理避免手工一个个右键重命名。# 将当前目录下所有 .vue.bak 文件还原为 .vue for f in *.vue.bak; do mv $f ${f%.vue.bak}.vue done # 单独处理入口文件 mv main.js.bak main.js这段脚本使用了 bash 参数扩展${f%.vue.bak}表示删除变量f尾部匹配的.vue.bak保留前面的文件主名。*.vue.bak保证只处理这类备份不会误伤其他文件。在 Windows 下如果不想装 Git Bash也可以在 cmd 中写ren *.vue.bak *.vue但通配符处理批量后缀偶尔会丢名字所以 Powershell 中更推荐Get-ChildItem -Filter *.vue.bak | Rename-Item -NewName { $_.Name -replace \.vue\.bak$, .vue }这里-replace用的是正则表达式把结尾的.vue.bak替换为.vue比 cmd 的通配符更可靠。2.3 从 bat 脚本反推作者的启动流程压缩包里的2-run.bat、3-build.bat和build.bat、run.bat看起来重复但用文本编辑器打开后往往能看出区别。常见的一种组合是run.bat直接执行mvn spring-boot:run -DskipTests用内嵌 Tomcat 启动后端build.bat执行mvn clean package -DskipTests打包出可部署的 jar/war。而带序号的2-run.bat、3-build.bat可能是作者在给整套流程排执行顺序比如先运行后端再把构建产物复制到发布目录。为了防止拿错脚本建议下载后先执行类型检查。echo off rem 2-run.bat 的内容示例 mvn spring-boot:run -DskipTests pauseecho off rem 3-build.bat 的内容示例 mvn clean package -DskipTests copy target\*.jar D:\deploy\game-website\ pause参数-DskipTests的含义是跳过单元测试在本地调试时能节省编译时间mvn clean package会先清空 target 目录再重新编译打包。SpringBoot 2.x 对应的内嵌 Tomcat 是 9.0这里资源描述里写 Tomcat 8.0/9.0 都有说明作者既用过外置 Tomcat 也用过内嵌模式。如果 IDE 是 IntelliJ IDEA我更喜欢直接执行mvn spring-boot:run控制台会把 SQL 和接口日志打印出来排错比 bat 窗口更直观。2.4 这些文件到底放在哪个目录下面这张表是我拆包后对照前端 Vue 工程常见结构做的判断作用是把文件名映射到实际目录避免还原后放错位置导致页面 404。文件名推测用途还原后的推荐位置update-password.vue.bak修改密码弹窗或页面组件src/views/user/或src/pages/IndexMain.vue.bak后台首页主区域组件src/views/index/IndexHeader.vue.bak顶部导航条src/layout/或src/components/layout/IndexAsideStatic.vue.bak静态侧边菜单src/layout/BreadCrumbs.vue.bak面包屑导航src/components/main.js.bakVue 应用入口配置 Vue、router、axiossrc/main.js需要注意表格只是参考。实际文件里如果写了相对路径导入比如import Header from /components/IndexHeader那么必须保证IndexHeader.vue放对地方否则npm run serve或build阶段就会报模块找不到。3. SpringBoot 后端从 Maven 依赖到接口路由的设计3.1 为什么这套资源选择 SpringBoot MyBatis游戏服务网站通常需要处理用户登录、密码修改、游戏列表、公告内容等数据操作查询条件多SQL 直接可控。MyBatis 相比 JPA 在这个场景下更直观尤其是多表关联和动态条件写 XML 比用 Hibernate 的 Criteria 更容易调试。SpringBoot 则利用自动配置省掉了大量的 Spring XML 配置开发时只需要关注application.yml和 Mapper。JDK 1.8 Maven 3.6 MySQL 5.7 是 2018 到 2022 年间最稳妥的组合SpringBoot 2.3/2.5 可以正常跑在这套环境上如果擅自换到 JDK 17 和 SpringBoot 3原来的代码很可能会因为javax到jakarta的包名迁移大量报错。所以拿到资源后第一件事就是检查本机的 JDK 是否真的切换到了 1.8。3.2 后端目录结构controller / service / mapper 怎么分层解压后端代码后通常能看到下面的包结构。这是 SpringBoot MyBatis 最常见的三层组织方式src/main/java/com/game/website/ ├── controller # 接收请求做参数校验返回 Result ├── service # 业务逻辑事务控制 ├── mapper # MyBatis 数据访问接口 ├── entity # 与表对应的实体类 └── config # 跨域过滤器、拦截器controller 只负责 Http 协议层service 承载真正的业务判断mapper 只做数据读写。这样分的好处是游戏服务网站以后新增一个充值订单模块只需要加一个 controller 方法和对应的 mapper 方法原有代码不用大动。新手最常犯的错误是把 SQL 逻辑写在 controller 里这样一旦接口变多事务边界和代码复用都会很难受。我一般会在 service 实现类上标Service在修改类方法上标Transactional避免半截写入。3.3 一个典型的改密接口从 Vue 表单到 Controller 传参既然资源里有update-password.vue.bak就以修改密码功能来说明前后端接口对接。后端先定义一个 DTO 接收 JSON 格式的请求体public class UpdatePasswordDTO { private Integer userId; private String oldPwd; private String newPwd; // 省略 getter/setter }然后 controller 把请求交给 serviceRestController RequestMapping(/api/user) public class UserController { Resource private UserService userService; PostMapping(/updatePassword) public Result updatePassword(RequestBody Valid UpdatePasswordDTO dto) { return userService.updatePassword(dto); } }这里的RequestBody告诉 Spring 把前端 POST 上来的 JSON 反序列化成UpdatePasswordDTOValid可以配合NotBlank做非空校验。service 内部需要做三件事检查旧密码是否匹配、对新密码做加盐哈希、执行 UPDATE。如果只查询明文密码然后直接 update游戏服务站在数据库泄露时会非常被动所以至少要用 MD5 加盐或 BCrypt 处理。对应前端的 Ajax 调用使用 axios 时通常这样写axios.post(/api/user/updatePassword, { userId: this.userId, oldPwd: this.oldPwd, newPwd: this.newPwd }).then(res { if (res.data.code 200) { this.$message.success(密码修改成功下次登录请使用新密码) } else { this.$message.error(res.data.message) } }).catch(err { console.error(update password error, err) })前端路径必须和后端RequestMapping、PostMapping拼出来的地址一致否则会命中 404。开发阶段如果前后端分离需要在vue.config.js里配置 devServer 的 proxy把/api转发到http://localhost:8080如果这套资源把 Vue 打包后的文件直接放在 SpringBoot 的src/main/resources/static下那么就不存在跨域问题浏览器请求的是同源地址。3.4 application.yml 里最影响启动成功率的三个配置项SpringBoot 能启动起来但接口报错三分之一的情况出在数据库配置和 Mapper 映射配置上。以 MySQL 5.7 为基准下面是一个可以照抄的最小配置server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/game_website?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.game.website.entitycharacterEncodingutf8解决中文乱码serverTimezoneAsia/Shanghai解决 MySQL 5.7 连接时区报错useSSLfalse则能避免本地开发时的 SSL 警告刷屏。mapper-locations固定扫描resources/mapper下的 XML如果你的 XML 文件放在别处必须同步改这里否则启动不报错但每次 Mapper 方法执行都会提示Invalid bound statement。注意驱动类名在 MySQL 5.7 时是com.mysql.jdbc.Driver换成 MySQL 8 需要改为com.mysql.cj.jdbc.Driver这属于最常见的环境迁移问题。4. MySQL 5.7 与 MyBatis游戏服务网站的数据落地细节4.1 建库建表一张用户表需要哪些字段游戏服务网站最核心的表是用户表和游戏信息表。用户表至少需要用户名、密码、邮箱、注册时间游戏表需要游戏名、封面图、分类、价格、上下架状态。下面给出一个最小可用的用户表 SQL重点在字符集和唯一索引CREATE DATABASE IF NOT EXISTS game_website DEFAULT CHARACTER SET utf8mb4; USE game_website; CREATE TABLE sys_user ( id INT NOT NULL AUTO_INCREMENT, username VARCHAR(50) NOT NULL, password VARCHAR(100) NOT NULL, email VARCHAR(100) DEFAULT NULL, status TINYINT DEFAULT 1, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;表名用sys_user而不是user是因为user在 MySQL 里是存在敏感意义的名称虽然加反引号也能用但后续和权限表关联时容易混淆。密码字段设为 VARCHAR(100) 是为了容纳 BCrypt 这类长度超过 32 位的哈希结果如果沿用 MD5 存储 32 位字符也可以改小但从扩展角度建议保留 100。status字段可以用 1 表示启用、0 表示禁用游戏服务网站登录时通常会在 SQL 里带上status 1条件。4.2 用 SQLyog 或 Navicat 把 SQL 脚本导入数据库拿到 SQL 文件后不要直接在命令行敲推荐用图形化工具。SQLyog 和 Navicat 的操作基本一致步骤如下新建 MySQL 连接主机localhost端口3306用户名root密码填本机 MySQL 的密码端口不是 3306 的话改成实际的。连接成功后在左侧导航找到game_website数据库如果没有就先执行第 4.1 节的建库语句。右键数据库选择运行 SQL 文件选中资源里的.sql文件注意文件编码要选 UTF-8。执行完成后刷新表列表确认sys_user、game_info、notice等表都已生成。针对每条 SELECT 做一次简单测试比如SELECT * FROM sys_user LIMIT 5确认中文没有乱码。LIMIT 5在这里的作用是避免表数据量过大时直接全表查询卡住工具界面。执行 SQL 文件报错时优先看是否因为字符集不匹配Navicat 默认会按 UTF-8 解析如果 SQL 文件是 GBK 保存的需要把编码改成 ANSI 再执行。4.3 MyBatis 的 XML 映射动态条件与参数说明在 SpringBoot 里Mapper 接口和 XML 文件一对一是最常见的用法。接口定义方法时方法名要和 XML 中的 id 保持一致参数用Param指定名字。Mapper public interface SysUserMapper { SysUser findUserByUsername(Param(username) String username); }对应resources/mapper/SysUserMapper.xmlselect idfindUserByUsername parameterTypestring resultTypecom.game.website.entity.SysUser SELECT id, username, password, email, status, create_time FROM sys_user WHERE username #{username} AND status 1 /select这里#{username}会被 MyBatis 转义成预编译参数防止 SQL 注入AND status 1是一个很常见的过滤条件意思是只允许启用状态的用户登录。如果要把修改密码的功能做成可复用接口可以在 XML 里写updateupdate idupdatePassword UPDATE sys_user SET password #{newPwd} WHERE id #{userId} /update注意UPDATE语句没带status条件说明该操作对禁用用户也能生效严谨一点应该在 service 层先检查用户状态再执行更新。MyBatis 动态 SQL 里的if标签在查询条件不定时很好用比如后台管理页支持按用户名和邮箱搜索select idsearchUser resultTypecom.game.website.entity.SysUser SELECT * FROM sys_user where if testusername ! null and username ! AND username LIKE CONCAT(%, #{username}, %) /if if testemail ! null and email ! AND email #{email} /if /where /selectwhere标签会自动去掉第一个AND避免拼接出来的 SQL 在WHERE后面直接出现AND语法错误。LIKE CONCAT(%, #{username}, %)比直接写%${username}%安全后者会因为${}直接拼接导致 SQL 注入风险。4.4 本地联调最容易踩的四个坑把下面的排查表存下来能省很多时间现象原因处理手段页面中文变问号数据库/表字符集不是 utf8mb4或 JDBC URL 缺少 characterEncoding重建表并使用utf8mb4URL 追加?characterEncodingutf8启动报ClassNotFoundException: com.mysql.jdbc.Drivermysql-connector-java 版本不对使用 5.1.49或把驱动类换成com.mysql.cj.jdbc.Driver调用接口报Invalid bound statement (not found)Mapper XML 没有被打包进 classpath或 namespace 写错检查target/classes/mapper下是否有 XML核对 namespaceUnknown column status实体类属性名与表字段映射不一致开启 MyBatis 驼峰映射map-underscore-to-camel-case: true或写清楚 resultMap5. 把下载包变成能运行的站点最后几步部署与留档技巧5.1 先跑哪个 bat 脚本拿到手后我建议先执行2-run.bat因为它既然排在前面大概率是用于启动本地服务。打开的瞬间可以看到mvn spring-boot:run的输出等待Started Application in x seconds出现再访问http://localhost:8080。如果端口被占用改application.yml里的server.port为 8081 重新启动。如果build.bat执行后生成的是.war说明作者用的是外置 Tomcat 部署这时候要把application.yml里的server.port去掉否则会和 Tomcat 自身的端口冲突用mvn spring-boot:run则是内嵌容器启动不需要外置 Tomcat 参与。5.2 运行是否正常的快速验证清单检查项操作预期结果后端进程执行 2-run.bat 后看控制台出现Started日志数据库连通登录 SQLyog 查询sys_user能查到默认账号前端页面访问http://localhost:8080跳转登录页或首页改密接口在update-password页面提交返回code2005.3 把 .bak 文件当成可回滚基线最后想分享一个使用上的小技巧不要在新的 Git 项目里删掉.bak。这套资源没有附带版本管理.bak文件就相当于手动备份点。我习惯在修改组件前执行git diff --no-index IndexMain.vue.bak IndexMain.vue这条命令不需要提前 init 仓库直接比较两个文件看到变更后再决定是否需要回滚。在修改任何组件前先执行git diff --no-index IndexMain.vue.bak IndexMain.vue change.patch要回滚时直接patch -p1 change.patchGit Bash 和 macOS 都自带 patch 命令这份.bak才真正起到了版本留档的作用。本文还有配套的精品资源点击获取 SpringBoot+Vue游戏服务网站源码：.bak备份还原与部署实战
简介这是一份面向毕业设计、课程设计及期末大作业的Java游戏服务网站源码包基于SpringBoot框架实现整体采用B/S架构与MVC分层技术栈涵盖Java、MySQL、MyBatis、Ajax、Vue等。适合计算机、电子信息工程等专业学生作为项目参考也可直接用于二次开发与功能扩展。包内共646个文件以Java后端源码、Vue前端组件、SVG图标、JavaScript脚本、XML配置及图片素材为主项目结构清晰从用户交互到数据库操作均有完整实现压缩包大小约22.18MB下载后即可导入IDEA或Eclipse配合MySQL 5.7运行。当前已有593人学习/下载源码经过严格测试可放心使用。作者还提供使用问题解答遇到环境配置或调试问题可及时沟通。这份资源能帮助你完整理解游戏服务网站的开发流程快速搭建一个可演示、可扩展的SpringBoot项目。1. 为什么说这套 Java 游戏服务网站代码不止是一个毕业设计拿到压缩包后第一感觉是杂乱一堆.vue.bak文件几个bat脚本没有 README。如果你按常规思路去 IDEA 里直接打开大概率会一头雾水。把这套资源拆开看它实际上是一个采用 SpringBoot Vue 前后端分离结构的游戏服务网站源码后端用 MyBatis 操作 MySQL 5.7前端由update-password.vue、IndexMain.vue、IndexHeader.vue这些组件拼出完整页面配合main.js进行路由和接口请求。它覆盖了用户注册、登录、改密、首页展示、侧边栏菜单等游戏服务站点最常遇到的模块适合正在做毕业设计、课程设计的人拿来二次开发也适合想摸清 SpringBoot 接口如何与 Vue 组件联动的网页后端开发者。这里的.bak不是损坏文件而是作者在 Windows 下保存的备份版本理解了它的存在这个项目就能跑起来。2. 拆资源结构.vue.bak 备份如何还原成可运行的前端页面2.1 .vue.bak 与 .js.bak 在项目中的真实角色从文件清单看前端部分保留的是update-password.vue.bak、IndexMain.vue.bak、IndexAsideStatic.vue.bak、BreadCrumbs.vue.bak、IndexHeader.vue.bak和main.js.bak。这类.bak后缀在 Windows 开发环境里非常常见通常是 IDEA、VS Code 或文本编辑器在保存时自动生成的备份也可能是作者在调整代码前手动复制留下的基线版本。这个基线版本不是垃圾而是可以回滚的现场。还原思路很简单把.bak去掉恢复成 Vue 组件和入口文件。但这里有一个经常被忽略的坑如果压缩包内原本就有同名.vue直接改名会覆盖现有文件可能把已经修好的组件顶掉。正确的做法是先看文件大小和修改时间再用 diff 工具比较两个版本的内容。如果没有现成的.vue那么将所有.bak改名后前端工程就能恢复到一个可编译的状态。注意main.js.bak不能简单改名为main.js就完事因为它内部引用了IndexAsideStatic、IndexMain这些组件路径大小写错误在 Windows 上可能不报错部署到 Linux 服务器时会直接白屏。2.2 在 Windows 和 macOS 下批量还原备份文件我一般会在 PowerShell 或 Git Bash 里用一条命令处理避免手工一个个右键重命名。# 将当前目录下所有 .vue.bak 文件还原为 .vue for f in *.vue.bak; do mv $f ${f%.vue.bak}.vue done # 单独处理入口文件 mv main.js.bak main.js这段脚本使用了 bash 参数扩展${f%.vue.bak}表示删除变量f尾部匹配的.vue.bak保留前面的文件主名。*.vue.bak保证只处理这类备份不会误伤其他文件。在 Windows 下如果不想装 Git Bash也可以在 cmd 中写ren *.vue.bak *.vue但通配符处理批量后缀偶尔会丢名字所以 Powershell 中更推荐Get-ChildItem -Filter *.vue.bak | Rename-Item -NewName { $_.Name -replace \.vue\.bak$, .vue }这里-replace用的是正则表达式把结尾的.vue.bak替换为.vue比 cmd 的通配符更可靠。2.3 从 bat 脚本反推作者的启动流程压缩包里的2-run.bat、3-build.bat和build.bat、run.bat看起来重复但用文本编辑器打开后往往能看出区别。常见的一种组合是run.bat直接执行mvn spring-boot:run -DskipTests用内嵌 Tomcat 启动后端build.bat执行mvn clean package -DskipTests打包出可部署的 jar/war。而带序号的2-run.bat、3-build.bat可能是作者在给整套流程排执行顺序比如先运行后端再把构建产物复制到发布目录。为了防止拿错脚本建议下载后先执行类型检查。echo off rem 2-run.bat 的内容示例 mvn spring-boot:run -DskipTests pauseecho off rem 3-build.bat 的内容示例 mvn clean package -DskipTests copy target\*.jar D:\deploy\game-website\ pause参数-DskipTests的含义是跳过单元测试在本地调试时能节省编译时间mvn clean package会先清空 target 目录再重新编译打包。SpringBoot 2.x 对应的内嵌 Tomcat 是 9.0这里资源描述里写 Tomcat 8.0/9.0 都有说明作者既用过外置 Tomcat 也用过内嵌模式。如果 IDE 是 IntelliJ IDEA我更喜欢直接执行mvn spring-boot:run控制台会把 SQL 和接口日志打印出来排错比 bat 窗口更直观。2.4 这些文件到底放在哪个目录下面这张表是我拆包后对照前端 Vue 工程常见结构做的判断作用是把文件名映射到实际目录避免还原后放错位置导致页面 404。文件名推测用途还原后的推荐位置update-password.vue.bak修改密码弹窗或页面组件src/views/user/或src/pages/IndexMain.vue.bak后台首页主区域组件src/views/index/IndexHeader.vue.bak顶部导航条src/layout/或src/components/layout/IndexAsideStatic.vue.bak静态侧边菜单src/layout/BreadCrumbs.vue.bak面包屑导航src/components/main.js.bakVue 应用入口配置 Vue、router、axiossrc/main.js需要注意表格只是参考。实际文件里如果写了相对路径导入比如import Header from /components/IndexHeader那么必须保证IndexHeader.vue放对地方否则npm run serve或build阶段就会报模块找不到。3. SpringBoot 后端从 Maven 依赖到接口路由的设计3.1 为什么这套资源选择 SpringBoot MyBatis游戏服务网站通常需要处理用户登录、密码修改、游戏列表、公告内容等数据操作查询条件多SQL 直接可控。MyBatis 相比 JPA 在这个场景下更直观尤其是多表关联和动态条件写 XML 比用 Hibernate 的 Criteria 更容易调试。SpringBoot 则利用自动配置省掉了大量的 Spring XML 配置开发时只需要关注application.yml和 Mapper。JDK 1.8 Maven 3.6 MySQL 5.7 是 2018 到 2022 年间最稳妥的组合SpringBoot 2.3/2.5 可以正常跑在这套环境上如果擅自换到 JDK 17 和 SpringBoot 3原来的代码很可能会因为javax到jakarta的包名迁移大量报错。所以拿到资源后第一件事就是检查本机的 JDK 是否真的切换到了 1.8。3.2 后端目录结构controller / service / mapper 怎么分层解压后端代码后通常能看到下面的包结构。这是 SpringBoot MyBatis 最常见的三层组织方式src/main/java/com/game/website/ ├── controller # 接收请求做参数校验返回 Result ├── service # 业务逻辑事务控制 ├── mapper # MyBatis 数据访问接口 ├── entity # 与表对应的实体类 └── config # 跨域过滤器、拦截器controller 只负责 Http 协议层service 承载真正的业务判断mapper 只做数据读写。这样分的好处是游戏服务网站以后新增一个充值订单模块只需要加一个 controller 方法和对应的 mapper 方法原有代码不用大动。新手最常犯的错误是把 SQL 逻辑写在 controller 里这样一旦接口变多事务边界和代码复用都会很难受。我一般会在 service 实现类上标Service在修改类方法上标Transactional避免半截写入。3.3 一个典型的改密接口从 Vue 表单到 Controller 传参既然资源里有update-password.vue.bak就以修改密码功能来说明前后端接口对接。后端先定义一个 DTO 接收 JSON 格式的请求体public class UpdatePasswordDTO { private Integer userId; private String oldPwd; private String newPwd; // 省略 getter/setter }然后 controller 把请求交给 serviceRestController RequestMapping(/api/user) public class UserController { Resource private UserService userService; PostMapping(/updatePassword) public Result updatePassword(RequestBody Valid UpdatePasswordDTO dto) { return userService.updatePassword(dto); } }这里的RequestBody告诉 Spring 把前端 POST 上来的 JSON 反序列化成UpdatePasswordDTOValid可以配合NotBlank做非空校验。service 内部需要做三件事检查旧密码是否匹配、对新密码做加盐哈希、执行 UPDATE。如果只查询明文密码然后直接 update游戏服务站在数据库泄露时会非常被动所以至少要用 MD5 加盐或 BCrypt 处理。对应前端的 Ajax 调用使用 axios 时通常这样写axios.post(/api/user/updatePassword, { userId: this.userId, oldPwd: this.oldPwd, newPwd: this.newPwd }).then(res { if (res.data.code 200) { this.$message.success(密码修改成功下次登录请使用新密码) } else { this.$message.error(res.data.message) } }).catch(err { console.error(update password error, err) })前端路径必须和后端RequestMapping、PostMapping拼出来的地址一致否则会命中 404。开发阶段如果前后端分离需要在vue.config.js里配置 devServer 的 proxy把/api转发到http://localhost:8080如果这套资源把 Vue 打包后的文件直接放在 SpringBoot 的src/main/resources/static下那么就不存在跨域问题浏览器请求的是同源地址。3.4 application.yml 里最影响启动成功率的三个配置项SpringBoot 能启动起来但接口报错三分之一的情况出在数据库配置和 Mapper 映射配置上。以 MySQL 5.7 为基准下面是一个可以照抄的最小配置server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/game_website?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 123456 driver-class-name: com.mysql.jdbc.Driver mybatis: mapper-locations: classpath:mapper/*.xml type-aliases-package: com.game.website.entitycharacterEncodingutf8解决中文乱码serverTimezoneAsia/Shanghai解决 MySQL 5.7 连接时区报错useSSLfalse则能避免本地开发时的 SSL 警告刷屏。mapper-locations固定扫描resources/mapper下的 XML如果你的 XML 文件放在别处必须同步改这里否则启动不报错但每次 Mapper 方法执行都会提示Invalid bound statement。注意驱动类名在 MySQL 5.7 时是com.mysql.jdbc.Driver换成 MySQL 8 需要改为com.mysql.cj.jdbc.Driver这属于最常见的环境迁移问题。4. MySQL 5.7 与 MyBatis游戏服务网站的数据落地细节4.1 建库建表一张用户表需要哪些字段游戏服务网站最核心的表是用户表和游戏信息表。用户表至少需要用户名、密码、邮箱、注册时间游戏表需要游戏名、封面图、分类、价格、上下架状态。下面给出一个最小可用的用户表 SQL重点在字符集和唯一索引CREATE DATABASE IF NOT EXISTS game_website DEFAULT CHARACTER SET utf8mb4; USE game_website; CREATE TABLE sys_user ( id INT NOT NULL AUTO_INCREMENT, username VARCHAR(50) NOT NULL, password VARCHAR(100) NOT NULL, email VARCHAR(100) DEFAULT NULL, status TINYINT DEFAULT 1, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id), UNIQUE KEY uk_username (username) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;表名用sys_user而不是user是因为user在 MySQL 里是存在敏感意义的名称虽然加反引号也能用但后续和权限表关联时容易混淆。密码字段设为 VARCHAR(100) 是为了容纳 BCrypt 这类长度超过 32 位的哈希结果如果沿用 MD5 存储 32 位字符也可以改小但从扩展角度建议保留 100。status字段可以用 1 表示启用、0 表示禁用游戏服务网站登录时通常会在 SQL 里带上status 1条件。4.2 用 SQLyog 或 Navicat 把 SQL 脚本导入数据库拿到 SQL 文件后不要直接在命令行敲推荐用图形化工具。SQLyog 和 Navicat 的操作基本一致步骤如下新建 MySQL 连接主机localhost端口3306用户名root密码填本机 MySQL 的密码端口不是 3306 的话改成实际的。连接成功后在左侧导航找到game_website数据库如果没有就先执行第 4.1 节的建库语句。右键数据库选择运行 SQL 文件选中资源里的.sql文件注意文件编码要选 UTF-8。执行完成后刷新表列表确认sys_user、game_info、notice等表都已生成。针对每条 SELECT 做一次简单测试比如SELECT * FROM sys_user LIMIT 5确认中文没有乱码。LIMIT 5在这里的作用是避免表数据量过大时直接全表查询卡住工具界面。执行 SQL 文件报错时优先看是否因为字符集不匹配Navicat 默认会按 UTF-8 解析如果 SQL 文件是 GBK 保存的需要把编码改成 ANSI 再执行。4.3 MyBatis 的 XML 映射动态条件与参数说明在 SpringBoot 里Mapper 接口和 XML 文件一对一是最常见的用法。接口定义方法时方法名要和 XML 中的 id 保持一致参数用Param指定名字。Mapper public interface SysUserMapper { SysUser findUserByUsername(Param(username) String username); }对应resources/mapper/SysUserMapper.xmlselect idfindUserByUsername parameterTypestring resultTypecom.game.website.entity.SysUser SELECT id, username, password, email, status, create_time FROM sys_user WHERE username #{username} AND status 1 /select这里#{username}会被 MyBatis 转义成预编译参数防止 SQL 注入AND status 1是一个很常见的过滤条件意思是只允许启用状态的用户登录。如果要把修改密码的功能做成可复用接口可以在 XML 里写updateupdate idupdatePassword UPDATE sys_user SET password #{newPwd} WHERE id #{userId} /update注意UPDATE语句没带status条件说明该操作对禁用用户也能生效严谨一点应该在 service 层先检查用户状态再执行更新。MyBatis 动态 SQL 里的if标签在查询条件不定时很好用比如后台管理页支持按用户名和邮箱搜索select idsearchUser resultTypecom.game.website.entity.SysUser SELECT * FROM sys_user where if testusername ! null and username ! AND username LIKE CONCAT(%, #{username}, %) /if if testemail ! null and email ! AND email #{email} /if /where /selectwhere标签会自动去掉第一个AND避免拼接出来的 SQL 在WHERE后面直接出现AND语法错误。LIKE CONCAT(%, #{username}, %)比直接写%${username}%安全后者会因为${}直接拼接导致 SQL 注入风险。4.4 本地联调最容易踩的四个坑把下面的排查表存下来能省很多时间现象原因处理手段页面中文变问号数据库/表字符集不是 utf8mb4或 JDBC URL 缺少 characterEncoding重建表并使用utf8mb4URL 追加?characterEncodingutf8启动报ClassNotFoundException: com.mysql.jdbc.Drivermysql-connector-java 版本不对使用 5.1.49或把驱动类换成com.mysql.cj.jdbc.Driver调用接口报Invalid bound statement (not found)Mapper XML 没有被打包进 classpath或 namespace 写错检查target/classes/mapper下是否有 XML核对 namespaceUnknown column status实体类属性名与表字段映射不一致开启 MyBatis 驼峰映射map-underscore-to-camel-case: true或写清楚 resultMap5. 把下载包变成能运行的站点最后几步部署与留档技巧5.1 先跑哪个 bat 脚本拿到手后我建议先执行2-run.bat因为它既然排在前面大概率是用于启动本地服务。打开的瞬间可以看到mvn spring-boot:run的输出等待Started Application in x seconds出现再访问http://localhost:8080。如果端口被占用改application.yml里的server.port为 8081 重新启动。如果build.bat执行后生成的是.war说明作者用的是外置 Tomcat 部署这时候要把application.yml里的server.port去掉否则会和 Tomcat 自身的端口冲突用mvn spring-boot:run则是内嵌容器启动不需要外置 Tomcat 参与。5.2 运行是否正常的快速验证清单检查项操作预期结果后端进程执行 2-run.bat 后看控制台出现Started日志数据库连通登录 SQLyog 查询sys_user能查到默认账号前端页面访问http://localhost:8080跳转登录页或首页改密接口在update-password页面提交返回code2005.3 把 .bak 文件当成可回滚基线最后想分享一个使用上的小技巧不要在新的 Git 项目里删掉.bak。这套资源没有附带版本管理.bak文件就相当于手动备份点。我习惯在修改组件前执行git diff --no-index IndexMain.vue.bak IndexMain.vue这条命令不需要提前 init 仓库直接比较两个文件看到变更后再决定是否需要回滚。在修改任何组件前先执行git diff --no-index IndexMain.vue.bak IndexMain.vue change.patch要回滚时直接patch -p1 change.patchGit Bash 和 macOS 都自带 patch 命令这份.bak才真正起到了版本留档的作用。本文还有配套的精品资源点击获取