
简介这是一套面向计算机相关专业学生的教学辅助微信小程序完整项目资源适用于毕业设计、期末大作业及项目实战练习。项目采用SSM框架Spring、SpringMVC、MyBatis完成后端开发前端基于WXML、WXSS与JavaScript构建整体难度适中适合具备一定Java与前端基础的学习者参考。压缩包共1306个文件约59.61MB涵盖java后端源码、js与vue前端脚本、wxml与wxss页面样式、sql数据库脚本、png与svg界面素材以及doc论文、pptx答辩演示和properties、yml等配置文件结构完整、层次清晰。源码经本地编译调试可正常运行并配有数据库文档说明表结构与字段关系便于理解数据流转。已有50人学习下载。读者可据此掌握小程序与SSM整合的开发流程参考论文撰写与答辩展示思路积累从需求分析到测试的完整项目经验。1. 教学辅助微信小程序 SSM一套能跑通的毕设级全栈方案长什么样如果你正在做毕业设计选题是「教学辅助微信小程序」大概率会遇到一个很现实的问题小程序端好写后端一上 SSM 就乱。学生端要登录、要查课表、要看作业、要收通知教师端要发作业、传资料、看提交情况这些功能拆开都不难难的是把它们串成一条能演示、能答辩、能交差的完整链路。这套「教学辅助微信小程序设计 SSM」的方案本质就是前端用微信小程序原生开发后端用 Spring SpringMVC MyBatis 提供接口数据库用 MySQL再配一份论文、PPT 和说明文档。它适合谁适合时间紧、基础一般、但需要一套结构完整、能本地跑起来、能讲清楚技术选型理由的本科毕设选手。下面我按实际落地顺序把环境、接口、数据库、联调和避坑一次讲透。2. 环境与工程结构先把 SSM 后端和微信小程序开发者工具跑起来2.1 后端 SSM 工程的最小依赖与目录划分SSM 不是一门新技术但版本组合很讲究。我一般用 JDK 8 Maven 3.6 Tomcat 8.5 MySQL 5.7这套组合在毕设环境里最稳不容易出现莫名其妙的类找不到。pom.xml里核心依赖就四块Spring、SpringMVC、MyBatis、MySQL 驱动再加一个 Jackson 做 JSON 转换。目录按 controller、service、mapper、entity、utils 五层分别把 SQL 写进 controller答辩老师一眼就能看出结构问题。!-- pom.xml 核心依赖版本按自己环境微调 -- dependencies !-- Spring 核心 -- dependency groupIdorg.springframework/groupId artifactIdspring-context/artifactId version5.3.20/version /dependency !-- SpringMVC -- dependency groupIdorg.springframework/groupId artifactIdspring-webmvc/artifactId version5.3.20/version /dependency !-- MyBatis -- dependency groupIdorg.mybatis/groupId artifactIdmybatis/artifactId version3.5.9/version /dependency dependency groupIdorg.mybatis/groupId artifactIdmybatis-spring/artifactId version2.0.7/version /dependency !-- MySQL 驱动 -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version5.1.49/version /dependency !-- JSON 转换 -- dependency groupIdcom.fasterxml.jackson.core/groupId artifactIdjackson-databind/artifactId version2.13.3/version /dependency /dependencies逻辑说明Spring 负责 IOC 容器管理 service 和 mapperSpringMVC 负责把/api/*请求映射到 controllerMyBatis 负责把实体和 SQL 映射起来。参数上MySQL 驱动 5.1.49 对应 MySQL 5.7如果你本地是 MySQL 8驱动要换成8.0.30并且 URL 加serverTimezoneAsia/Shanghai否则连接会报时区错误。Tomcat 建议用 8.5 而不是 10因为 Tomcat 10 把javax.servlet改成了jakarta.servletSSM 老配置会直接 404。2.2 微信小程序端的目录与请求封装小程序端用原生开发目录就pages、utils、images三块。app.json里配页面路径和窗口样式app.js里做全局登录态管理。请求不要在每个页面里写wx.request统一封在utils/request.js里这样后端换域名或者加 token 只改一处。// utils/request.js 统一请求封装 const BASE_URL http://localhost:8080/teachassist; // 后端项目名 function request(url, method GET, data {}) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL url, method: method, data: data, header: { content-type: application/json, token: wx.getStorageSync(token) || // 登录后存的 token }, success: (res) { if (res.data.code 200) { resolve(res.data.data); } else { wx.showToast({ title: res.data.msg || 请求失败, icon: none }); reject(res.data); } }, fail: (err) { wx.showToast({ title: 网络异常, icon: none }); reject(err); } }); }); } module.exports { request };逻辑说明BASE_URL指向本地 SSM 后端真机调试时要把localhost换成电脑局域网 IP并且微信开发者工具里勾选「不校验合法域名」。参数上token放在 header 里后端用拦截器校验没登录的请求直接返回 401。这里有个细节小程序请求默认超时 60 秒但毕设演示时如果后端没启动页面会一直转圈建议在app.js的onLaunch里先做一次健康检查失败就提示「后端未启动」。2.3 数据库建表与 SSM 映射文件对齐教学辅助系统的核心表就五张user用户、course课程、homework作业、submit提交记录、notice通知。字段名用下划线实体类用驼峰MyBatis 的resultMap里做映射。别用SELECT *答辩时老师问「你查了哪些字段」会答不上来。-- 核心表结构字符集用 utf8mb4 支持表情 CREATE TABLE user ( id INT PRIMARY KEY AUTO_INCREMENT, openid VARCHAR(64) DEFAULT NULL COMMENT 微信 openid, username VARCHAR(32) NOT NULL, password VARCHAR(64) NOT NULL, role TINYINT DEFAULT 0 COMMENT 0学生 1教师, phone VARCHAR(20) DEFAULT NULL, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE homework ( id INT PRIMARY KEY AUTO_INCREMENT, course_id INT NOT NULL, title VARCHAR(128) NOT NULL, content TEXT, deadline DATETIME, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;逻辑说明openid字段是为微信登录预留的学生第一次授权后把 openid 写进 user 表后续免密登录。role用 0 和 1 区分学生和教师比字符串省空间也快。注意deadline用 DATETIME 而不是 DATE因为作业截止要精确到时分。建完表后MyBatis 的mapper.xml里写resultMap把create_time映射到createTime否则查出来是 null。3. 微信登录与手机号获取小程序端拿 codeSSM 端换 openid3.1 小程序登录流程与 code 换取 openid 的接口实现微信小程序的登录不是传统账号密码而是wx.login拿 code后端拿 code 去微信服务器换 openid 和 session_key。很多毕设在这里翻车是因为把appid和secret写在小程序端这是大忌。正确做法是小程序只传 code后端用appid secret code调微信接口。// LoginController.java 微信登录接口 RestController RequestMapping(/api/auth) public class LoginController { Autowired private UserService userService; PostMapping(/login) public Result login(RequestBody MapString, String params) { String code params.get(code); // 后端调微信接口换 openid String url https://api.weixin.qq.com/sns/jscode2session ?appid APPID secret SECRET js_code code grant_typeauthorization_code; String resp HttpUtil.get(url); // 自己封装的 HTTP 工具 JSONObject json JSON.parseObject(resp); String openid json.getString(openid); if (openid null) { return Result.error(微信登录失败); } // 查库没有就注册 User user userService.findByOpenid(openid); if (user null) { user new User(); user.setOpenid(openid); user.setUsername(wx_ openid.substring(0, 8)); userService.insert(user); } String token JwtUtil.createToken(user.getId()); return Result.success(token); } }逻辑说明APPID和SECRET放在后端配置文件里不要硬编码在代码里。jscode2session接口返回 openid 和 session_keysession_key 不要返回给前端。参数上code 只能用一次5 分钟过期所以前端wx.login后要立刻调后端接口。如果返回errcode: 40029说明 code 无效通常是重复使用了同一个 code。3.2 获取手机号的按钮授权与后端解密微信获取手机号需要用户点击按钮授权拿到encryptedData和iv后端用 session_key 做 AES 解密。注意这个功能需要小程序认证个人开发者账号用不了毕设演示时如果没认证可以先用模拟数据。// pages/login/login.js 获取手机号 getPhoneNumber(e) { if (e.detail.errMsg ! getPhoneNumber:ok) { wx.showToast({ title: 您拒绝了授权, icon: none }); return; } // 把 encryptedData 和 iv 传给后端 request(/api/auth/phone, POST, { encryptedData: e.detail.encryptedData, iv: e.detail.iv, token: wx.getStorageSync(token) }).then(res { wx.setStorageSync(phone, res.phone); }); }逻辑说明e.detail.encryptedData是加密的手机号数据iv是解密向量两者必须一起传。后端用AES-128-CBC解密密钥是 session_key。参数上session_key 存在 Redis 里key 用 token过期时间 7 天。如果解密报pad block corrupted通常是 session_key 过期了让用户重新登录即可。3.3 登录态维护与 token 拦截器配置登录成功后后端生成 JWT token 返回给小程序小程序存到 storage每次请求带在 header 里。后端写一个拦截器校验 token 有效性放行登录和注册接口。// AuthInterceptor.java 登录拦截器 public class AuthInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 放行登录接口 if (request.getRequestURI().contains(/api/auth/login)) { return true; } String token request.getHeader(token); if (token null || !JwtUtil.verify(token)) { response.setStatus(401); response.getWriter().write({\code\:401,\msg\:\未登录\}); return false; } return true; } }逻辑说明拦截器在spring-mvc.xml里注册拦截/api/**路径。JwtUtil.verify校验签名和过期时间过期就返回 401。参数上token 有效期设 7 天太短用户老要登录太长不安全。注意小程序端收到 401 后要清空 storage 并跳回登录页否则用户会卡在空白页。4. 教学辅助核心功能落地课表、作业、通知三条链路4.1 课表查询接口与小程序端渲染课表是教学辅助系统里查询频率最高的功能。后端按学生 id 查课程返回 JSON 数组小程序端用wx:for渲染。课表数据一般按周次和节次排列建议后端直接返回排好序的列表前端不做复杂计算。// CourseController.java 查课表 GetMapping(/list) public Result list(RequestParam Integer userId) { ListCourse courses courseService.findByUserId(userId); // 按星期和节次排序 courses.sort(Comparator.comparing(Course::getWeekDay).thenComparing(Course::getSection)); return Result.success(courses); }逻辑说明weekDay是星期几1-7section是第几节1-5。排序放在后端做前端直接渲染。参数上userId从 token 里解析不要从前端传否则可以查别人课表。小程序端用scroll-view做横向滚动每个格子显示课程名和教室。4.2 作业发布与提交的完整闭环作业功能分两端教师发布学生提交。教师端填标题、内容、截止时间学生端看到列表后点进去提交文本或图片。提交记录要存homework_id和student_id防止重复提交。// SubmitController.java 提交作业 PostMapping(/submit) public Result submit(RequestBody SubmitDTO dto) { // 检查是否已提交 Submit exist submitService.findByHomeworkAndStudent(dto.getHomeworkId(), dto.getStudentId()); if (exist ! null) { return Result.error(您已提交过该作业); } Submit submit new Submit(); submit.setHomeworkId(dto.getHomeworkId()); submit.setStudentId(dto.getStudentId()); submit.setContent(dto.getContent()); submit.setSubmitTime(new Date()); submitService.insert(submit); return Result.success(提交成功); }逻辑说明先查再插防止重复提交。参数上content可以是文本如果要传图片先把图片上传到服务器再把 URL 存进 content。注意截止时间要在后端校验超过deadline的提交直接拒绝前端也要做一次提示但后端校验不能省。4.3 通知推送与订阅消息的接入通知功能有两种做法一种是站内通知查数据库另一种是微信订阅消息能推到用户微信上。毕设里站内通知就够用订阅消息需要用户授权而且模板要审核。// pages/notice/notice.js 查通知 onLoad() { request(/api/notice/list, GET, { userId: this.data.userId }) .then(list { this.setData({ notices: list }); }); }逻辑说明通知表里存user_id、title、content、is_read。学生进入通知页时把is_read批量更新为 1。参数上通知按时间倒序最新的在最上面。如果要做订阅消息在wx.requestSubscribeMessage里传模板 id用户同意后后端调微信接口推送但个人开发者账号用不了答辩时说明即可。5. 避坑与排查SSM 小程序联调最容易翻车的 5 个点5.1 跨域问题小程序请求后端报 404 或 CORS现象小程序开发者工具里请求后端控制台报404或者Access-Control-Allow-Origin错误。原因小程序请求的 URL 拼错了或者后端没配跨域。解决先确认BASE_URL和后端项目名一致再在 SpringMVC 配置里加 CORS 过滤器。// CorsFilter.java 跨域配置 Configuration public class CorsFilter implements Filter { Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response (HttpServletResponse) res; response.setHeader(Access-Control-Allow-Origin, *); response.setHeader(Access-Control-Allow-Methods, GET,POST,PUT,DELETE,OPTIONS); response.setHeader(Access-Control-Allow-Headers, Content-Type,token); chain.doFilter(req, res); } }注意Access-Control-Allow-Origin设*在开发阶段可以上线要改成具体域名。小程序真机调试时要在开发者工具里勾选「不校验合法域名」否则请求会被拦截。5.2 数据库连接失败时区、驱动、字符集三连坑现象后端启动报Cannot create PoolableConnectionFactory或者Unknown system variable query_cache_size。原因MySQL 驱动版本和数据库版本不匹配或者 URL 没加时区。解决MySQL 5.7 用5.1.49驱动MySQL 8 用8.0.30驱动URL 统一加useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai。5.3 小程序登录 code 失效40029 与 session_key 过期现象调登录接口返回errcode: 40029或者解密手机号报pad block corrupted。原因code 被重复使用或者 session_key 过期。解决code 只能用一次前端wx.login后立刻调后端session_key 存 Redis 设 7 天过期过期后让用户重新登录。5.4 图片上传失败大小限制与临时路径现象学生提交作业图片后端收不到文件。原因小程序wx.uploadFile的name和后端RequestParam不一致或者图片超过 2MB。解决name统一用file后端用MultipartFile接收图片超过 2MB 先压缩再传。5.5 真机调试白屏域名校验与 HTTPS现象开发者工具里正常真机预览白屏。原因真机请求必须 HTTPS且域名要在小程序后台配置。解决毕设演示用开发者工具的「预览」模式勾选「不校验合法域名」或者用内网穿透工具把本地后端映射成 HTTPS。6. 从能跑到能答辩把 SSM 接口文档和论文数据对齐的 3 个技巧6.1 用 Postman 导出接口文档直接贴进论文附录论文里要写接口设计别手打用 Postman 跑一遍所有接口导出 JSON 或者 Markdown直接贴进附录。每个接口写清楚 URL、方法、参数、返回示例。这样答辩时老师问「你这个接口怎么设计的」你直接翻附录比空口说强。6.2 数据库文档用 Navicat 反向生成字段注释别偷懒数据库文档是毕设必备。用 Navicat 的「逆向数据库到模型」功能生成 ER 图再导出建表 SQL。字段注释一定要写比如role字段注释「0学生 1教师」答辩时老师一看就懂。别用id、name这种没注释的字段显得不专业。6.3 演示前跑一遍完整链路把「后悔药」准备好答辩演示最怕现场翻车。我的习惯是提前一天把后端、数据库、小程序全部重启一遍走一遍「登录 → 查课表 → 交作业 → 看通知」完整链路。如果现场网络不好提前录一个演示视频放在 PPT 里万一真机连不上就放视频。另外数据库提前备份一份 SQL万一演示时数据被改乱直接恢复。这套方案我前后带过几届学生最大的体会是SSM 本身不难难的是前后端联调时的细节。把登录、课表、作业三条链路跑通论文和 PPT 就有了骨架剩下的就是填数据和调格式。希望帮到你。本文还有配套的精品资源点击获取