简介本资源是微信小程序毕业设计“移动学习平台”的完整项目包面向计算机相关专业做毕业设计或课程设计的学生可作为可运行原型与文档参考。项目采用微信小程序开发工具Java后端MySQLB/S架构实现管理员、教师、学生三类角色的核心流程管理员管理教师、课程分类、班级、课程与作业审核教师维护课程资源和作业审核学生可提交作业、查看审核状态、收藏评论资源并浏览班级课程。包内共1312个文件含241个图片素材、194个js、162个svg、151个vue、127个java、108个json以及98个wxml和95个wxss等覆盖前后端主要代码与界面资源另有sql和mp4演示视频便于直接导入和学习。压缩包大小约33.81MB包含源码、演示视频、说明文档和数据库文件目录结构清晰适合快速跑通并二次开发。目前已有129人学习下载。1. 微信小程序移动学习平台毕设资源能跑通、能改、能答辩的完整骨架做微信小程序毕业设计最怕的不是页面写不出来而是后端接口、数据库、角色权限这些“黑匣子”一碰就翻车。这份移动学习平台毕设资源前端是微信小程序能直接导入的工程后端是 Java MySQL 的 B/S 结构附带演示视频、说明文档和数据库脚本覆盖了管理员、教师、学生三种角色的完整业务闭环。管理员管教师和课程分类教师审核作业和管理课程资源学生提交作业、收藏评论课程资源。不管是做毕业设计还是课程设计拿它当骨架做二开能省掉从零搭环境、造数据的大量时间。下面按我实际拆包的顺序把技术栈、启动步骤、核心逻辑和踩过的坑一次说清。2. 技术栈与角色权限先看懂请求链路再动手改2.1 从小程序到 Java 后端的请求链路这个项目是典型的 B/S 结构微信小程序承担前端页面和交互Java 后端处理业务逻辑MySQL 做数据持久化。小程序里凡是要动态数据的地方都通过 wx.request 发起 HTTP 请求打到后端 REST 接口上。后端常见组合是 Spring Boot MyBatis-PlusController 接收请求Service 写业务Mapper 操作数据库最后把结果序列化成 JSON 返回给小程序。以登录为例完整链路是这样小程序调 /api/login后端按用户名密码查 user 表比对成功后用 JWT 生成 token 返回小程序把 token 存到本地 storage之后每个请求的 header 都带 Authorization 字段后端拦截器解析 token失败就返回 401。这条链路里有一个容易忽略的环节——拦截器怎么判断哪些接口不需要登录。常见做法是给登录、注册这类开放接口加白名单其余接口全部走鉴权。我拆这份源码时会先找 utils/request.js 或 common/request.js 这类公共请求封装。只要把 baseUrl 指到本机后端地址登录、列表、提交作业这些页面基本就能通。所以动手改功能前先画一遍这条请求链路再改代码比盲改前端页面靠谱得多。2.2 三种角色各自能看到什么管理员、教师、学生在界面上看到的内容完全不一样。管理员端是系统级维护管理教师账号、维护课程分类、创建班级、维护课程、审核学生作业、上下架课程资源这类数据变化会直接影响教师端和学生端的数据范围。教师端只看到与自己关联的课程、班级和学生能对学生作业做“通过/退回”审核能往课程里上传资源。学生端聚焦个人学习查看所在班级和可选课程提交作业查看审核结果收藏评论课程资源。权限落地时后端在登录成功时把角色 code 写进 JWT 的 payload拦截器从 token 里取出角色用字符串比对决定放行还是拒绝// 从 token 中取出角色标识 String role JwtUtil.getRoleFromToken(token); // 仅 admin 和 teacher 角色可访问管理接口 if (!admin.equals(role) !teacher.equals(role)) { return Result.error(403, 无权限访问); }这段逻辑不复杂毕设场景完全够用。答辩时老师问“你怎么做权限控制”你直接说“用 JWT 携带角色标识在拦截器里做接口级校验”比一句“用了框架”更有说服力。2.3 数据库核心表看清业务模型数据库脚本是整个资源里信息密度最高的部分。我拆包会先看表名和注释基本能还原作者的整个业务设计。这个项目涉及的核心表大致如下表名关键字段说明userusername, password, role登录账号统一表studentstudent_no, name, class_id学生信息归属班级teacherteacher_no, name, title教师信息classclass_name, teacher_id班级绑定负责教师course_categorycate_name, sort课程分类coursecourse_name, category_id, teacher_id课程挂分类和教师course_resourcecourse_id, file_path, type课程资源文件路径是关键resource_commentresource_id, user_id, content资源评论resource_collectresource_id, student_id资源收藏homeworkstudent_id, course_id, file_path, status作业status 控制审核流程班级表通过 teacher_id 关联负责教师课程表通过 teacher_id 关联授课教师作业表通过 student_id 和 course_id 把学生与课程串起来。最核心的字段是 homework.status0 表示待审核1 表示通过2 表示退回。教师审核作业本质上是一次针对 status 的状态更新不是复杂业务流。还要注意课程资源表和作业表都有 file_path 字段。这说明文件很可能存放在服务器本地磁盘数据库只存路径。如果你把项目部署到别的机器一定要同步迁移文件目录不然图片和附件会全部 404。2.4 表间关系与外键处理表之间的关系不算密集但有几处要留意。student 与 class 是多对一course 与 course_category 是多对一homework 与 student 是多对一。资源评论和收藏都挂在 course_resource 的 ID 上属于一对多。常见做法是删除资源前先处理子表后再删主表-- 删除资源前先清空关联的评论和收藏 DELETE FROM resource_comment WHERE resource_id 1001; DELETE FROM resource_collect WHERE resource_id 1001; DELETE FROM course_resource WHERE id 1001;如果脚本里外键约束写得很严建议改成逻辑删除。给 course_resource 加 is_deleted 字段删除时置 1查询时自动过滤既不会外键爆炸也保留恢复数据的余地。2.5 为什么这份资源适合做毕设骨架三个角色把“信息管理、业务流程、用户自服务”都覆盖到了这是毕业设计评分里常见的几个得分点。你答辩时讲清楚这三条线的请求链路和状态流转评审老师基本挑不出大毛病。改的时候也沿三条线分别加自己的想法比如管理员加导出报表、学生加学习进度、教师加成绩分析都比从零造系统省力。3. 环境搭建与数据初始化把项目从压缩包跑成线上效果3.1 工具链准备与版本对应这个项目的技术栈涉及到微信小程序开发工具、Java、MySQL环境准备需要四样东西JDK8 或 11 都行、MySQL5.7 或 8.0、微信开发者工具、一个数据库管理工具Navicat 或直接用命令行。安装顺序我建议先装 MySQL因为后端启动第一步就是连接数据库。JDK 装完在终端输入 java -version 确认MySQL 装完用 mysql -u root -p 登录确认微信开发者工具装完用测试号扫一下登录。如果本机之前装过别的版本注意环境变量有没有指向对。后端连接数据库的配置一般在 src/main/resources/application.yml 里常见默认账号密码是 root/root 或 root/123456。如果你本机密码不同启动后端必报 Access denied。先把密码改成你自己的省得后面排查一小时。3.2 导入数据库脚本与验证资源里自带 .sql 文件可能是完整建库脚本也可能只是建表和初始数据。我习惯用命令行导入可控性强# 创建数据库并指定 utf8mb4 字符集避免中文乱码 mysql -u root -p -e CREATE DATABASE IF NOT EXISTS mobile_learning DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; # 把 sql 脚本导入到刚创建的库中 mysql -u root -p mobile_learning database.sql如果 sql 文件路径里含空格或中文记得给路径加引号。导入完成后验证 user 表里有没有初始账号-- 检查登录账号表是否已有初始数据 SELECT id, username, role FROM user;如果 user 表是空的说明脚本里只建表没插数据。你需要手动补一条管理员记录。密码字段如果是 MD5 或 BCrypt要去后端代码里找到加密工具类生成对应密文再 INSERT避免前端登录时密码比对不上。3.3 三个批处理脚本先读内容再执行压缩包里带 1-install.bat、2-run.bat、3-build.bat光看名字就知道它是按顺序走的。建议用文本编辑器打开确认脚本里的路径与当前目录一致再执行。1-install.bat 做依赖安装后端执行 Maven 依赖下载前端执行 npm installecho off cd /d %~dp0 echo 安装后端依赖... call mvn install -DskipTests echo 安装前端依赖... cd frontend call npm install echo 安装完成 pause2-run.bat 做后端启动。如果后端是源码工程脚本大概率是 mvn spring-boot:run如果已经打成 jar则是 java -jar target/xxxx.jar。启动后看到 Tomcat started on port 8080 基本就稳了。3-build.bat 做前端构建。如果前端是 uni-app 工程命令是 npm run build:mp-weixin产物输出到 dist/build/mp-weixin 目录再用微信开发者工具导入如果是 HBuilderX 工程也可能直接在 HBuilderX 里运行到微信开发者工具。这里有个常见翻车点压缩包解压后目录结构一变脚本里的相对路径就失效。执行前先确认脚本里的 cd 路径和实际目录是同一层。3.4 微信开发者工具导入与联调配置导入小程序前端工程时注意区分两种工程如果目录里有 manifest.json 和 pages.json它是 uni-app 工程如果只有 app.json、app.js是原生微信小程序工程。uni-app 工程需要先 build 或在 HBuilderX 里运行原生小程序直接在开发者工具里打开工程目录。导入后必改两处appid 换成你自己的测试号baseUrl 改为后端地址。# 本地联调 http://localhost:8080 # 真机预览 http://192.168.x.x:8080同时在微信开发者工具右上角“详情-本地设置”里勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”否则本地联调发 http 请求会被域名校验直接拦截。3.5 后端启动后的联调自测清单后端起来后先用浏览器或 Postman 请求一个登录接口验证连通性。我一般会按这个顺序自测浏览器访问 http://localhost:8080/api/login确认接口没挂。小程序端执行一次登录看是否成功拿到 token。看后端控制台是否打印 SQL。如果能看到 SELECT * FROM user WHERE username... 这样的日志说明链路已经打通。如果控制台没有 SQL优先检查数据库账号密码、连接池配置再看拦截器是否把请求误拦。这套自测清单我每次搭完环境都会跑一遍五分钟内能定位八成问题。提示数据库连接、端口占用、baseUrl 指向的问题占了环境搭建阶段九成以上的报错先按这三项排查不要急着改业务代码。4. 核心功能拆解从登录鉴权到作业审核的代码逻辑这章把三条业务线拆开讲登录鉴权是怎么做的、学生提交作业到教师审核的整条链路、课程资源的管理。看完你就知道改代码该从哪个文件下手。4.1 登录接口与 JWT 鉴权登录接口是整条业务线的入口代码结构一般是这样的PostMapping(/api/login) public Result login(RequestBody LoginRequest req) { // 按用户名和加密后的密码查用户表 User user userMapper.selectOne( new LambdaQueryWrapperUser() .eq(User::getUsername, req.getUsername()) .eq(User::getPassword, MD5Util.encrypt(req.getPassword()))); if (user null) { return Result.error(账号或密码错误); } // 生成 JWT tokenpayload 中携带用户 ID 和角色 String token JwtUtil.generateToken(user.getId(), user.getRole(), user.getNickName()); return Result.success(token); }逻辑不复杂用户名密码查到人生成 JWT 返回查不到就报错。要注意密码比对必须和数据库存储的加密方式一致。如果数据库里是 MD5 密文代码里就要用同一种 MD5 工具类如果数据库是明文那后端大概率没做加密你改代码时要多留个心眼。我拆包时会特意看 JwtUtil 的过期时间设置常见是 2 小时或 12 小时。如果毕设演示时间较长token 中途失效会突然跳回登录页观感很差。把过期时间临时调成 48 小时或者在前端拦截 401 后自动重新登录都能避免这种尴尬。4.2 小程序请求封装与登录态管理前端请求封装是所有页面发请求的必经之路。找到一个封装好的 request.js它的作用就是统一拼 baseUrl、统一带 token、统一处理错误码const request (url, method, data) { return new Promise((resolve, reject) { wx.request({ url: baseUrl url, method: method || GET, data: data || {}, header: { // 从本地 storage 取出登录后保存的 token Authorization: wx.getStorageSync(token), Content-Type: application/json }, success: (res) { // 后端返回 401 时说明登录态失效跳回登录页 if (res.data.code 401) { wx.navigateTo({ url: /pages/login/login }); return; } resolve(res.data); }, fail: reject }); }); };header 里的 Authorization 字段必须和后端拦截器取的名字一致否则后端拿不到 token请求全部 401。我见过前端写 token、后端取 Authorization联调一上午全是 401最后才发现字段名不一致。建议拆包后第一时间把前后端两个字段名对齐。4.3 学生端提交作业文件上传与表单提交学生提交作业是业务闭环里的关键操作涉及图片或文件上传。小程序端基本是 wx.chooseImage 选文件再用 wx.uploadFile 把文件和表单数据一起打过去wx.chooseImage({ count: 1, success: function (res) { const tempFile res.tempFilePaths[0]; wx.uploadFile({ url: baseUrl /api/homework/submit, filePath: tempFile, name: file, formData: { courseId: this.data.courseId, title: this.data.title, content: this.data.content }, success: (res) { const data JSON.parse(res.data); if (data.code 200) { wx.showToast({ title: 提交成功 }); } } }); } });注意这里没有传 studentId因为更安全的做法是从后端 token 里解析用户 ID而不是信任前端传来的参数。后端 upload 接口要做两件事把文件保存到本地磁盘或云存储再把 file_path 和表单字段写入 homework 表。评审如果追问越权问题你答“用户 ID 从 token 解析不从前端取”就是加分项。4.4 教师端审核作业状态流转与列表查询教师审核作业的入口是审核列表后端按教师 ID 关联课程课程关联作业把待审核记录拉回来GetMapping(/api/homework/auditList) public Result auditList(RequestParam Long teacherId) { // 只查询该教师名下课程关联的作业 ListHomeworkVO list homeworkMapper.selectAuditList(teacherId); return Result.success(list); }列表里每条记录的 status 都是 0待审核。审核动作是更新状态通过置 1退回置 2同时把审核意见存到 audit_comment-- 审核通过写入审核意见和审核时间 UPDATE homework SET status 1, audit_comment 内容完整通过, audit_time NOW() WHERE id 88;这里用一个 tinyint 状态字段表达业务流程简单直接也容易在答辩里讲清楚。你不用设计一张审核流程表毕设范围内状态字段完全够用。4.5 课程资源管理与文件访问映射课程资源的管理核心是文件上传和预览。文件存在服务器本地数据库存 URL 相对路径。前端根据文件后缀决定渲染方式图片用 image 标签PDF 用 web-view视频用 video 标签。实际写的时候我一般会在后端加一个静态资源映射把 /files/** 指向磁盘里的真实目录Configuration public class WebConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { // 把 /files/** 的请求映射到服务器本地磁盘目录 registry.addResourceHandler(/files/**) .addResourceLocations(file: uploadPath /); } }如果这段配置缺失上传成功但小程序端无法加载文件会误以为是前端代码有问题实际是后端没有把静态文件暴露出来。资源的收藏、评论功能相对简单就是对两张子表做增删查。需要注意删除资源时同步删除相关收藏和评论否则外键约束会让你删不下去。5. 避坑记录五个高频问题的现象、原因与解决5.1 数据库连接报 Access denied现象后端启动时控制台持续刷 Access denied for user rootlocalhostusing password: YES应用根本起不来。原因application.yml 里配置的数据库账号密码和本机 MySQL 实际不一致或数据库名写错、端口不是默认 3306。解决打开 backend/src/main/resources/application.yml核对 spring.datasource 下的 url、username、passwordspring: datasource: url: jdbc:mysql://localhost:3306/mobile_learning?useUnicodetruecharacterEncodingutf8 username: root password: 123456把 password 改成你本机的真实密码url 里的数据库名也要和脚本建库名一致。改完重启如果还报错用命令行登录 MySQL 确认账号密码确实可用不要凭记忆写。5.2 解压后出现 .baiduyun.downloading.cfg 残留文件现象解压后看到 tki-qrcode.vue.baiduyun.downloading.cfg、uni-load-more.vue.baiduyun.downloading.cfg 这类文件或某些页面功能缺失报错。原因这是网盘客户端未下载完成留下的残留标记原文件没下全并不是资源本身缺少功能。tki-qrcode.vue 是二维码组件uni-load-more.vue 是列表加载更多组件缺失后对应页面会直接报错。解决把 .baiduyun.downloading.cfg 对应的原文件在网盘客户端重新下载完整不要手动改后缀名去伪装。安全做法是解压前先检查压缩包里是否有残留标记文件有的话单独补齐再解压。5.3 真机预览白屏或接口全部失败现象微信开发者工具里一切正常扫码真机预览后页面白屏或接口全部 fail。原因手机端访问 localhost 指向的是手机自己访问不到电脑上的后端同时真机上“不校验合法域名”设置不生效。解决把 baseUrl 改成电脑的局域网 IP比如 http://192.168.x.x:8080确保手机和电脑在同一网络。Windows 下执行 ipconfig 查 IPv4 地址Mac 下执行 ipconfig getifaddr en0。后端 Spring Boot 的 server.address 如果配置了 127.0.0.1也要改成 0.0.0.0 或直接注释否则局域网请求进不来。改完记得重新编译运行。5.4 上传成功但图片加载 404现象学生提交作业时提示上传成功后端文件目录里也有文件但前端按返回的 file_path 访问却 404。原因前端拿到的 file_path 是相对路径比如 /files/xxx.jpg而后端没有配置对应的静态资源映射这个 URL 根本不存在。另一种可能是拼接路径时多了一层斜杠比如 baseUrl 结尾带 /file_path 开头也带 /拼出来变成 //files。解决在后端加上 /files/** 的静态资源映射把请求指到服务器实际存储文件的目录。拼接 URL 时统一处理baseUrl 结尾不要带 /或 file_path 开头不要带 /二选一。Windows 下路径分隔符用 \Linux 和 Mac 用 /代码里建议统一写 /避免部署到不同系统时路径错误。5.5 .bak 备份文件被当成主文件改现象前端工程里有 main.css.bak、IndexAsideStatic.vue.bak、BreadCrumbs.vue.bak同学改样式或组件后页面没任何变化。原因.bak 是备份文件不参与编译。源码运行时真正加载的是 main.css、IndexAsideStatic.vue 这些正式文件。你一直在改 .bak等于改了个寂寞。解决先分清哪些文件参与编译。.vue、.js、.css、.json 这些才是运行文件.bak 可以直接忽略或删掉。想彻底清理在项目根目录执行 find . -name *.bak -delete注意先备份一份再删。血的教训我当年第一次拿到这类工程把 IndexHeader.vue.bak 当成主文件改了十分钟页面纹丝不动才发现从一开始就开错了文件。6. 把毕设改成自己的换皮、加表与答辩演示的落地技巧6.1 换主题色与首页文案小程序前端一般有一个全局样式文件像 main.css 或 App.vue 里定义的主题变量。找到 primary-color 这类变量整体换色再替换首页的轮播图、课程标语外观上立刻不像从资源模板复制来的。改成你自己的课程名称和专业方向比只改配色更有辨识度。6.2 给作业表加评分字段在 homework 表加 score、comment 两个字段教师审核时多填评分。改动涉及后端实体类、Mapper XML、前端审核表单和结果展示页四个地方。加字段之前先梳理数据流不然容易出现数据库导入了但接口返回 JSON 里没有新字段的情况。操作顺序建议是先改 SQL 加字段再改后端实体和 Mapper最后改前端页面每一步完成后用接口测试工具验证一次。6.3 答辩演示脚本三分钟过完三条业务线先不看代码把项目的演示顺序稳定下来。我一般这样走管理员账号登录展示教师列表、课程分类和班级管理切教师账号进入作业审核列表把一条待审核作业通过切学生账号提交一份新作业再切回教师端看审核状态更新。这个顺序能在三分钟内让评审看到三个角色和完整闭环。如果时间充裕再展示一下课程资源的收藏和评论交互。技术提问环节把登录鉴权、状态流转、文件上传映射这三个点讲透基本就能站住脚。6.4 数据备份与恢复练习答辩前可以演练一次“数据库误删恢复”用 Navicat 备份一份数据库然后模拟删一条班级记录再用备份恢复。这个动作能帮你熟悉数据库脚本万一答辩现场演示时数据被弄乱你有后悔药。备份文件放在项目外不要和源码混在一起。从那以后我每次拿到这种带 .bak 和残留下载配置的项目包都会先列一遍文件清单确认哪些参与编译、哪些是备份、哪些是未下全的残留再进 IDE 动手改。这套习惯帮我躲掉了不少低级错误也希望帮到你。本文还有配套的精品资源点击获取