企业官网建设流程全解析

简介：面向毕业设计场景的Java微信小程序项目资料包，基于SSM后台与Vue管理端、微信小程序前端，实现健身视频、健身项目、论坛、预约管理、健身打卡与每日热量管理等核心功能，覆盖用户、健身房、管理员三类角色，健身房可发布项目与视频、管理预约，管理员负责审核用户、机构和内容信息。资源共1554个文件，压缩包76.39MB，包含Java源码、Vue页面、小程序WXML/WXSS与JS逻辑、SQL数据库脚本、PNG/JPG图片素材等，前后端代码与数据库脚本配套齐全，目录结构按功能模块划分便于检索。文档部分提供论文、答辩PPT、开题报告，另有环境工具包和相同框架项目的安装教程，可辅助从JDK1.8及IDE配置到数据库导入、项目部署的完整流程，适合用于完整参考和二次开发。目前已有150人学习，适合需要快速搭建健身类小程序毕业设计或学习SSM+小程序整合开发的学生。

1. 为什么健身小助手这类SSM小程序适合当毕业设计落点

做过几套管理系统后会发现，健身小助手这类题目能把微信小程序、SSM后台、Vue管理端、MySQL数据闭环串在一起，不是单纯写增删改查页面。小程序端处理预约、打卡、热量记录；后台管理用户、健身房、视频和项目审核；SSM负责接口和事务一致性。适合基础偏Java、想把毕业设计做成可演示完整系统的人，也适合想快速搭一套能改功能、能写进简历的项目的开发者。本文直接讲清楚工程结构、数据库、权限，以及部署时真正卡人的地方——多数人不是业务代码报错，而是卡在环境变量、微信小程序AppID和request合法域名上。

2. SSM后台与Vue管理端：从目录反推模块边界

2.1 拿到源码后先看什么

这个项目里放着一批以.bak结尾的文件：main.css.bak、update-password.vue.bak、IndexMain.vue.bak、IndexAsideStatic.vue.bak、BreadCrumbs.vue.bak、IndexHeader.vue.bak。它们不是垃圾文件，而是Vue管理端改造前的备份。默认的管理端模板通常自带一套静态布局，实际项目里要把侧边栏、面包屑、头部导航拆成组件，再根据用户的角色动态渲染菜单。保留.bak的好处是，答辩时能明确说出改版前后的差异。

工程运行目录一般是这样组织的：

src/main/java/com/fitness/controller src/main/java/com/fitness/service src/main/java/com/fitness/mapper src/main/resources/mapper src/main/resources/jdbc.properties src/main/webapp/static sql/database.sql

拿到代码后先读pom.xml确认SSM版本和打包方式，再看jdbc.properties里数据库连接是否与本地一致，最后才启动Tomcat。这三个顺序颠倒，就会出现“项目导入成功但页面打不开”的情况。

2.2 后台为什么用SSM而不是Spring Boot

这个项目定位是毕业设计，SSM（Spring + SpringMVC + MyBatis）相比Spring Boot，差异化在可讲解性上。Spring管理Service层Bean和事务传播，SpringMVC负责接口和参数绑定，MyBatis手写SQL方便展示联表、动态SQL和分页。数据库设计又是答辩的高频区，用SSM把SQL露出来，比全封装到JPA里更容易讲清楚。

从环境选择上，JDK 1.8、Eclipse/MyEclipse/STS、Tomcat 8.5这套组合最稳。Spring Boot如果版本没选对，会带来javax.servlet和jakarta.servlet的兼容问题。SSM的XML配置虽然繁琐，但每一步配置都能对应到一个请求链路，出错了更容易定位断点。

2.3 表结构设计的五张核心表

系统的角色分用户、管理员、健身房。常见做法是用户表里加role_type字段区分角色，同时把健身房资料单独存gym_info。这样登录认证走同一张表，业务数据分开存，符合“权限统一、业务隔离”的原则。

核心表建议设计如下：

导入数据库脚本时用utf8mb4字符集，否则有些手机输入的特殊符号会存不进去。外键可以不用，业务层判断即可。预约表里一定要有status字段，0待确认、1已确认、2已完成、3取消。所有时间字段用datetime，避免小程序端格式化时出现时区误差。

2.4 启动后台的步骤与三个bat脚本

下载包里带了1-install.bat、2-run.bat、3-build.bat。1-install.bat用来初始化Maven依赖和本地环境；2-run.bat本质是Maven打包加Tomcat启动；3-build.bat用于重新编译Vue管理端资源。如果是导入IDE启动，顺序是：

set JAVA_HOME=C:\Program Files\Java\jdk1.8.0_281 mvn clean package -DskipTests copy target\fitness.war D:\apache-tomcat-8.5.90\webapps\ catalina.bat run

说明：第二条命令跳过测试打包，第三行把war包复制到Tomcat的webapps目录，第四行前台启动Tomcat。如果端口被占用，改conf/server.xml里的8080端口，或直接杀掉占用进程。环境变量没配好时，命令窗口会闪退，用cmd手动执行上面四行就能看到具体报错。

3. 小程序端核心模块：预约、打卡、热量记录的接口约定

3.1 小程序请求封装与登录态

小程序端的wx.request不能直接访问localhost后台，开发工具里要勾选“不校验合法域名”，真机预览时必须用局域网IP或已备案域名。接口返回结构统一为code、message、data三部分。以下是一个可用的请求封装：

const BASE_URL = 'http://192.168.1.100:8080/fitness'; function request(url, method = 'GET', data = {}) { return new Promise((resolve, reject) => { wx.request({ url: BASE_URL + url, method: method, data: data, timeout: 15000, header: { 'Content-Type': 'application/json', 'Authorization': wx.getStorageSync('token') }, success(res) { if (res.data.code === 200) { resolve(res.data.data); } else if (res.data.code === 401) { wx.removeStorageSync('token'); wx.navigateTo({ url: '/pages/login/login' }); reject(res.data); } else { reject(res.data); } }, fail(err) { reject(err); } }); }); }

BASE_URL里的/fitness是后台上下文路径，如果404就检查这个路径和后端配置。header里手动放Authorization，SSM后端通过拦截器解析token。注意，wx.request成功只代表HTTP请求通了，业务错误靠res.data.code判断。登录态一般用openid换token，有效期设7天，过期后自动跳登录页。

3.2 每日热量管理的数值处理

“每日热量管理”不能把推荐摄入量写死在小程序里，要放到后台配置表或从用户资料计算。基础代谢率常用米夫林-圣杰奥尔公式：

• 男性：BMR = 10 * 体重kg + 6.25 * 身高cm - 5 * 年龄 + 5
• 女性：BMR = 10 * 体重kg + 6.25 * 身高cm - 5 * 年龄 - 161

小程序端计算后保留两位小数，插入打卡记录时同时更新当日汇总。这里常见的坑是字符串拼接导致数值变成文本，比如result = 10 * weight + ...如果weight是字符串，乘号会强制转换，但后面加号可能变成拼接。稳妥写法是先parseFloat再运算：

function calcBMR(gender, weight, height, age) { const w = parseFloat(weight); const h = parseFloat(height); const a = parseInt(age); if (isNaN(w) || isNaN(h) || isNaN(a)) return 0; let bmr = 10 * w + 6.25 * h - 5 * a; bmr += gender === 'male' ? 5 : -161; return Math.round(bmr * 100) / 100; }

说明：isNaN用来防止输入框空值；gender传male或female；Math.round乘100再除以100是保留两位小数的最低成本做法。看到结果是NaN时，先从输入控件的数据类型排查。

3.3 健身视频与项目列表的分页实现

首页同时加载推荐项目、视频、最新打卡动态，如果全在一个接口里联表查询，数据量上来后会慢。常见做法是拆成三个接口：/api/project/list、/api/video/list、/api/feed/list。视频表video_info的核心字段：

列表接口一般用MyBatis手写分页SQL：

SELECT id, name, cover_url, duration, gym_id FROM video_info WHERE review_status = 1 ORDER BY create_time DESC LIMIT #{offset}, #{pageSize}

说明：LIMIT后面第一个参数是偏移量，第二个是每页条数；前端传page和size，后端的offset是（page-1）*size。如果某条新视频在小程序里看不到，多半是review_status不是1，先直接查库确认审核状态再查SQL条件。

3.4 预约项目时的库存扣减

project表里的max_people和booked_count字段用来控制预约人数。并发情况下不能先查再update，要用数据库的原子更新：

UPDATE project SET booked_count = booked_count + 1 WHERE id = #{projectId} AND booked_count < max_people;

返回影响行数为1才代表预约成功。说明：这条SQL把判断和更新合并成一条，MySQL行锁保证同一时刻只有一个请求能修改booked_count。影响行数为0时，回滚已创建的预约记录并提示“名额已满”。事务边界要清楚：开启事务、执行update、执行insert booking、提交；中间任何一步失败就整体回滚。

4. 部署与常见故障：Eclipse、JDK、Tomcat和小程序端的坑

4.1 三个bat脚本的实际用途

1-install.bat、2-run.bat、3-build.bat是针对Windows演示环境写的。1-install.bat把Maven依赖拉到本地并校验JAVA_HOME；2-run.bat把打包和启动Tomcat串起来；3-build.bat负责把Vue管理端编译成静态文件。直接双击运行闪退，是因为bat脚本里没有pause，命令窗口执行完自动关闭。通过cmd进入目录手工执行就能看到日志。

如果1-install.bat在下载依赖时卡住，检查Maven的settings.xml里有没有配置国内镜像。依赖下载失败最常见的标志是target目录下缺少spring-webmvc的jar包。Maven版本不同，settings.xml位置也不同，需要根据JDK和Maven版本调整。

4.2 小程序端高频报错与排查

小程序端最隐蔽的问题是“开发者工具里正常、真机上不行”。用真机预览时，请求的域名必须在小程序后台配置到request合法域名里，开发阶段不校验合法域名的选项只在工具内生效。建议开发时直接用局域网IP，使用同一Wi-Fi再真机调试。

4.3 修改刚进入的加载页面不生效

小程序启动页由app.json的pages数组第一项决定。有些人只改了pages/index/index的标题或布局，却发现运行后还是旧页面。检查两点：一是pages数组里是否同时注册了新路径，二是tabBar里的首页是否还是旧路径。微信会优先使用tabBar第一项作为初始页面。

另外要分清楚，小程序端首页和Vue管理端首页是两套代码。小程序首页是pages/index/index，Vue管理端首页继承默认模板后对应IndexMain.vue。如果你改的是IndexMain.vue.bak这个备份文件，管理端页面显示的是改之前的逻辑，所以会有“后缀为.bak时正常、去掉后缀后异常”的现象。

4.4 数据库连接与JDBC配置

jdbc.properties里的配置决定SSM能否连上MySQL。以下是推荐写法：

jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://127.0.0.1:3306/fitness?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai jdbc.username=root jdbc.password=123456

说明：useUnicode和characterEncoding解决中文乱码；serverTimezone必须加，否则MySQL 8会报时区错误；useSSL可以不加。如果项目lib里是mysql-connector-java 8.x，驱动类要改成com.mysql.cj.jdbc.Driver。启动Tomcat后报ClassNotFoundException，说明mysql驱动没有打包进WEB-INF/lib，执行mvn clean package再看war包内容。

5. 用Swagger维护接口文档并录制作答演示视频

5.1 给SSM接口补Swagger注解

给接口补Swagger可以省去答辩时临时翻代码解释参数。在SpringMVC项目的pom.xml中引入springfox依赖后，配置Docket扫描controller包。Controller上的注解如下：

@Api(tags = "健身项目") @RestController @RequestMapping("/api/project") public class ProjectController { @Autowired private ProjectService projectService; @ApiOperation("查询项目列表") @GetMapping("/list") public Result list(@RequestParam(defaultValue = "1") Integer page, @RequestParam(defaultValue = "10") Integer size) { return Result.ok(projectService.pageList(page, size)); } }

说明：@Api和@ApiOperation只生成文档元数据，不影响业务流程。springfox2.9.2对Spring 5.2有兼容问题，出现启动失败时换成springfox3.0.0或手动维护接口文档。答辩演示不需要把所有接口都生成文档，重点把用户、预约、打卡、审核这几组加注解就行。

5.2 准备一套能讲出业务闭环的演示数据

系统预置账号建议这样准备：用户testuser有预约记录、打卡记录、热量记录，还发过论坛帖子；健身房gymtest有3个已审核项目、2条视频、5条评价；管理员admin后台待审核列表里留一条视频和一条项目申请。这样现场演示时可以直接操作“审核-上架-预约-确认-打卡”的完整闭环。

视频数据不要依赖外网地址。演示现场网络不可控，最好把测试视频放在Tomcat的webapps/ROOT/media目录下，video_url填相对路径或局域网IP。如果没有准备视频文件，就在页面里只展示封面图和标题，不要把video_url指向第三方流媒体地址。

5.3 录屏时的操作顺序与网络面板

推荐顺序是管理端审核、小程序端预约、健身房端处理、数据回显。具体操作：

1. 管理员登录Vue管理端，在视频审核列表里把一条待审核视频改为已通过。
2. 小程序端下拉刷新首页，确认新视频出现在健身视频列表。
3. 使用testuser账号预约健身房项目，提交预约单。
4. 切换到健身房账号（或用另一个浏览器窗口），在预约管理中确认这条预约。
5. 回到小程序端查看预约状态变成已确认，再添加一条打卡记录，看热量统计数值变化。

录屏时先打开浏览器开发者工具的Network面板再开始录制。这样接口的请求URL、状态码、响应时间都会被记录，后期剪辑时可以直接看接口调用顺序，比口头描述“我调用了预约接口”有说服力。小程序端录屏时开启调试器的Network窗口，操作路径与后台呼应。

5.4 用干净环境验收替代“我本机能跑”

功能全部通过后，做一次干净环境验收：删除本地MySQL中的fitness库并重新导入sql脚本，删除Tomcat的work和temp目录，重置Maven仓库中的项目依赖，然后从第一行命令开始执行到能打开登录页。全程控制在10分钟左右，能发现大部分一台机器一个样的环境问题。Tomcat启动缓慢时，在catalina.bat的JAVA_OPTS里加上-Xms512m和-Xmx1024m，然后在命令行输出中确认内存参数生效。最后把初始化数据保留在sql目录中，并写一个说明文档，标注哪些账号对应什么测试数据，这样评审老师照做也能复现。

本文还有配套的精品资源，点击获取