简介面向计算机相关专业毕业设计或课程设计的微信小程序校友会系统完整项目采用微信小程序开发工具搭配 Java 后端与 MySQL 数据库的 B/S 架构覆盖管理员与用户双重角色包含校友管理、生活动态、表白墙、论坛、兼职信息、校园新闻等模块可帮助学习者快速理解前后端分离的小程序业务实现。压缩包共含 1203 个文件以 Java 后端逻辑、Vue 管理端页面、小程序 JS/WXML/WXSS 前端文件为主并有 SQL 数据库脚本、项目说明、演示视频等配套内容整体大小约 32.91MB便于直接导入开发工具运行和二次修改。资源已有 258 人学习/下载适合需要完整毕设项目参考、锻炼小程序开发与管理系统联调能力的学生。包内附带的演示视频和说明文档能辅助还原项目效果数据库脚本和配置文件降低了环境搭建门槛各功能模块划分清晰是完成课程设计或毕业设计的实用参考。1. 微信小程序毕业设计选“校友会系统”这套交付包到底能帮你省多少事微信小程序毕业设计选校友会系统属于一眼看上去平平无奇、交付时最容易翻车的类型。原因很简单它同时涉及微信登录、校友录列表、活动报名、留言捐赠四条链路每条链路都不难但任何一条断了演示当场就能看出问题。标题里的“源码演示视频说明数据库”四件套其实是在告诉你这套东西的交付标准视频用来确认效果说明用来少猜配置数据库脚本用来省掉从零建表的时间源码用来做二次开发。适合谁适合想在两到三周内把系统跑通、再把题目改成“校友信息管理”“校友活动报名系统”等自己课题方向的同学。2. 拿到交付包先做这三件事导库、起服务、改地址跑通最小闭环2.1 解压后先分清四件套分别干什么用这类交付包解压后通常能见到四类内容小程序端源码、后端接口服务、说明文档、SQL 数据库脚本外加一段演示视频。很多同学一上来就双击打开微信开发者工具结果页面空白然后开始怀疑代码有问题。我的习惯是倒过来先花五分钟看说明文档再导数据库再启动后台服务最后开小程序。原因很简单小程序只是个壳首页的校友动态、活动列表、登录状态全部要向后端接口要数据。数据库空着后台服务没起来前端代码再完整也白搭。说明文档里一般会写清楚技术栈、默认端口、数据库名和默认账号这决定了你后面用哪条命令去启动服务。2.2 导入数据库建库、导库、验表三步走数据库脚本通常是一份 .sql 文件我习惯用命令行导入而不是打开 Navicat 图形界面直接跑。命令行方式能把字符集问题暴露得更早方便排查。假设脚本叫 alumni.sql按照下面三条命令依次执行mysql -u root -p -e CREATE DATABASE IF NOT EXISTS alumni DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; mysql -u root -p alumni alumni.sql mysql -u root -p -e USE alumni; SHOW TABLES;第一条命令创建数据库并指定 utf8mb4 编码避免后面中文乱码第二条命令把脚本里的建表语句和初始数据导入 alumni 库第三条命令验证表是否存在能正常列出一串表名就说明导入成功。如果你看到的是 ERROR 1046 或 ERROR 1146 这类报错基本是没选库或表结构没建全回头检查 SQL 文件里有没有 USE alumni 这一句。2.3 启动后台服务两种最常见后台的启动命令校友会系统的后端见的最多的是 Spring Boot 和 Node.js 两种。判断方法很粗暴目录里有 pom.xml 或 .jar 文件就是 Java 系有 package.json 就是 Node 系。不要只看说明文档怎么写以仓库里实际依赖文件为准。Java 后台常见启动方式java -jar alumni-server.jar --server.port8080Node 后台常见启动方式npm install npm run start启动成功的标志不是“终端没报错”而是控制台出现 Started 或 listening on port 8080 之类的明确日志。如果你遇到端口被占用最省事的办法是换个端口启动比如把 8080 改成 8081同时把小程序端的接口地址同步改掉。数据库连不上的报错一般集中在 URL、账号、密码三项逐一比对说明文档即可。2.4 用开发者工具导入小程序端改掉这个配置微信开发者工具里选择“导入项目”目录指向源码中的小程序端文件夹。AppID 先用测试号就行它不会影响本地联调。导入完成后找到管理接口地址的配置文件常见的文件名叫 config.js 或 request.js把 baseUrl 改成你的后端地址// config.js —— 后端接口前缀 module.exports { baseUrl: http://127.0.0.1:8080/api };这段代码的作用是把所有 wx.request 请求的公共前缀集中管理避免每个页面写死地址。改完后重新编译如果首页能看到活动列表或校友数据最小闭环就算通了。这一步没通的话先不要继续加功能否则后面所有问题都会叠加在“接口不通”之上排查难度成倍增加。3. 校友会系统的五大功能模块从数据库表到小程序页面逐一落地3.1 业务表设计一份可以抄的建表 SQL校友会系统无论怎么改业务表基本围绕五个实体用户、校友档案、活动、报名记录、捐赠留言。表设计是答辩评委几乎必问的地方因此建表逻辑值得自己过一遍。这里给一套适合毕设的简化表结构CREATE TABLE alumni_user ( id INT AUTO_INCREMENT PRIMARY KEY, openid VARCHAR(64) UNIQUE, nickname VARCHAR(64), avatar_url VARCHAR(255), phone VARCHAR(20), role TINYINT DEFAULT 0, -- 0:普通校友 1:管理员 create_time DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE alumni_info ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT, name VARCHAR(32), major VARCHAR(64), graduate_year VARCHAR(16), company VARCHAR(128), position VARCHAR(64), city VARCHAR(32) ); CREATE TABLE activity ( id INT AUTO_INCREMENT PRIMARY KEY, title VARCHAR(128), content TEXT, location VARCHAR(128), start_time DATETIME, enroll_start DATETIME, enroll_deadline DATETIME, max_num INT DEFAULT 0 ); CREATE TABLE activity_registration ( id INT AUTO_INCREMENT PRIMARY KEY, activity_id INT, user_id INT, period VARCHAR(16), -- 上午场/下午场 register_time DATETIME DEFAULT CURRENT_TIMESTAMP, UNIQUE KEY uk_act_user (activity_id, user_id) ); CREATE TABLE donation ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT, amount DECIMAL(10,2), message VARCHAR(255), donate_time DATETIME DEFAULT CURRENT_TIMESTAMP );这几张表的关系很清晰一位用户可以对应一条校友档案用户与活动是多对多关系通过报名记录表关联捐赠留言挂在用户下。唯一索引 uk_act_user 用来在数据库层面挡住同一用户重复报名这个设计点在答辩时值得主动讲出来。后期如果需求增加比如要记录“参加了几届活动”用 ALTER TABLE 修改表结构加字段就行不用推翻重来。下面是各表的核心职责方便快速记忆表名作用关键字段alumni_user微信登录用户与角色openid、phone、rolealumni_info校友档案major、graduate_year、companyactivity活动发布与报名时间enroll_deadline、max_numactivity_registration活动报名关联activity_id、user_id、唯一索引donation捐赠与留言amount、message3.2 登录链路wx.login 与手机号授权怎么配合现在不少校友会系统要求微信小程序登录获取手机号目的是把校内手机号和微信身份绑定。手机号授权和 wx.login 登录是两件事wx.login 拿到的是临时凭证 code后端用来换 openid手机号授权需要用户点按钮触发开发者工具里模拟不了。两者配合的代码一般长这样Page({ handlePhoneLogin(e) { const phoneCode e.detail.code; // 手机号快速验证返回的动态令牌 if (!phoneCode) { wx.showToast({ title: 未授权手机号, icon: none }); return; } wx.login({ success: async (res) { const lc res.code; // 微信登录凭证 const { data } await wx.request({ url: ${getApp().globalData.baseUrl}/auth/login, method: POST, data: { loginCode: lc, phoneCode } }); wx.setStorageSync(token, data.token); wx.setStorageSync(userId, data.userId); } }); } });注意这里出现了两个 codee.detail.code 来自手机号按钮的授权回调res.code 来自 wx.login来源不同不能混用。后端拿到 loginCode 后调用微信的 jscode2session 接口换 openid拿到 phoneCode 后调用手机号快速验证接口换手机号两个结果再关联写入 alumni_user 表。答辩时如果被问“手机号和 openid 哪个是唯一标识”答案是 openid因为手机号可能换号openid 是微信体系内的稳定身份。3.3 活动报名表单单选框与防重复提交报名页面最常见的交互是让校友选择参加上午场还是下午场这就是微信小程序单选按钮的典型使用场景。WXML 里写一组 radio-groupradio-group bindchangeonPeriodChange label classradio-item radio valuemorning checked / 上午场 /label label classradio-item radio valueafternoon / 下午场 /label /radio-groupJS 里提交时先校验登录态再校验是否选择了场次最后把 activityId、period、userId 组装成对象 POST 到后台onSubmit() { const token wx.getStorageSync(token); if (!token) { wx.showToast({ title: 请先登录, icon: none }); return; } if (!this.data.period) { wx.showToast({ title: 请选择场次, icon: none }); return; } wx.request({ url: ${getApp().globalData.baseUrl}/activity/register, method: POST, header: { Authorization: Bearer ${token} }, data: { activityId: this.data.activityId, period: this.data.period } }); }前端校验只是体验后端必须再做一次校验。常见做法是后端先查活动是否在报名时间窗口内再用 3.1 里的唯一索引兜底重复报名否则快速连点两次按钮报名表里就会多出两条相同记录。把“前端体验、后端兜底”这句话讲清楚整个数据库增删改查的功力就体现出来了。3.4 校友录列表下拉刷新与分页参数校友录和活动列表通常走的是同一套分页逻辑。小程序端常见做法是用 onPullDownRefresh 刷新第一页用 onReachBottom 触发下一页加载onPullDownRefresh() { this.setData({ page: 1, list: [] }); this.loadList(); }, onReachBottom() { this.setData({ page: this.data.page 1 }); this.loadList(); }, async loadList() { const { data } await wx.request({ url: ${getApp().globalData.baseUrl}/alumni/list?page${this.data.page}limit10 }); this.setData({ list: this.data.list.concat(data.rows) }); wx.stopPullDownRefresh(); }分页参数 page 从 1 开始limit 表示每页条数。这里最容易踩的坑是后端返回字段名对不上比如接口返回的是 rows前端代码却读 list结果列表永远为空还有 total 和 page 的关系没说清导致下拉刷新时 page 重置逻辑出错。联调时打开 Network 面板看一次实际返回结构比对着代码猜快得多。4. 真机预览与上线配置从模拟器到手机只剩这几个变量要改4.1 开发工具的 Network 面板先学会看请求“死”在哪项目跑通之后最常打交道的就是开发者工具调试器里的 Network 面板。每次刷新页面面板里都会列出小程序发出的所有请求点开任意一条能看到状态码、响应体和耗时。状态码基本能定位问题方向请求一直 pending多半是后台没启动或地址不可达401 / 403登录态失效或 token 没传404接口路径不对前后端约定不一致500后端代码或数据库表结构有问题。很多改到半夜都解决不了的“页面空白”其实答案就在响应体那几行英文里。Network 面板就是小程序端的黑匣子学会读它排错效率至少翻一倍。4.2 真机预览为什么模拟器能跑手机就白屏这是做小程序毕设几乎必踩的一个坑模拟器里一切正常手机扫码一进来页面空白。原因不复杂——模拟器里 127.0.0.1 指向电脑本身后台服务能访问到手机里 127.0.0.1 指向手机自己手机上并没有后台服务请求自然失败。解决方法是把 baseUrl 从 127.0.0.1 改成电脑在局域网里的 IP同时保证手机和电脑连同一个 Wi-Fi// config.js —— 真机调试时改成电脑局域网IP module.exports { baseUrl: http://192.168.1.101:8080/api };电脑 IP 在 Windows 下用 ipconfig 查macOS 或 Linux 用 ifconfig 查。改完重新编译再预览。如果换了局域网 IP 手机仍然超时优先检查电脑防火墙是否拦了 8080 端口临时关闭或放行端口即可。另一个玄学细节是预览时尽量选“预览”而不是“真机调试”真机调试的请求走了代理通道行为表现和纯预览不一样容易把问题带偏。4.3 上线与答辩合法域名、https 和正式 AppID很多教程会让你在开发者工具里勾选“不校验合法域名”这样开发阶段能请求任意 http 地址包括 127.0.0.1。但这句话的正确理解是它只跳过了本地校验并不代表线上小程序也能这样做。如果小程序要正式发布请求域名必须满足三个条件使用正式 AppID、域名已备案、接口是 https 且在公众平台配置了 request 合法域名。答辩时如果声称系统“已经上线了”评委掏出手机打开正式版点几下域名不在白名单里会直接红条报错。我的建议是除非学校明确要求否则毕设答辩阶段用真机预览演示即可不必为了“上线”去折腾备案和 HTTPS 证书。4.4 页面适配顶部导航栏高度和安全区校友会系统如果用了自定义导航栏就得处理微信小程序顶部导航栏高度在不同机型上的差异。写死一个 px 值在 iPhone 上可能正常换到 Android 就偏了。常用的计算方式是利用胶囊按钮的位置反推导航栏高度const { statusBarHeight } wx.getWindowInfo(); const { top, height } wx.getMenuButtonBoundingClientRect(); const navBarHeight (top - statusBarHeight) * 2 height;statusBarHeight 是状态栏高度top 和 height 是右上角胶囊按钮的位置和尺寸两者相减得到胶囊与状态栏的间距乘 2 后加上胶囊高度就能得到自定义导航栏应该占用的总高度。底部如果有报名按钮还要在样式里加 padding-bottom: env(safe-area-inset-bottom)防止按钮被 iPhone 底部横条遮挡。这两处适配做完真机观感基本就稳了。5. 避坑排查校友会系统从交付包到能演示的 5 个常见翻车现场5.1 模拟器里点“获取手机号”按钮一直没反应现象开发者工具里点击“获取手机号”按钮要么没反应要么直接报错。原因开发者工具模拟不了微信的“手机号快速验证”组件它依赖真机环境才能返回动态令牌。部分同学在模拟器里测不通手机号登录就以为是代码问题反复改了一个晚上。解决开发阶段不要依赖手机号登录先用 wx.login 换 openid 完成登录流程手机号登录留到真机预览时再验证。演示时如果现场用的是模拟器就主动用微信登录入口不要当场和手机号按钮死磕。5.2 导入数据库后中文全变成问号现象SQL 导入成功后台能看到表但页面里活动标题、校友姓名全是“????”。原因建库时没指定 utf8mb4或者导入时连接字符集与库字符集不一致。图形界面工具有时会自动处理命令行导入时问题会暴露得更直接。解决建库时用 DEFAULT CHARACTER SET utf8mb4导入前在命令行执行 SET NAMES utf8mb4;再重新导入。已经导坏的库可以先 DROP 再重建不要在原库上反复 ALTER。5.3 后台启动提示端口被占用现象执行 java -jar 或 npm run start 后控制台报 Address already in use服务起不来。原因8080 端口被其他程序占用了常见的是电脑里已有其他开发服务在跑。解决先确认占用来源Windows 下用 netstat -ano | findstr 8080 查 PIDmacOS / Linux 用 lsof -i :8080。如果是无关程序直接换端口启动比如 --server.port8081同时把小程序端 config.js 里的 baseUrl 同步改掉。端口这个问题在答辩现场出现率很高提前换好并写进说明文档更省心。5.4 同一用户连点两次报名报名表出现两条记录现象快速双击报名按钮后台数据库里同一用户报名了同一活动两次列表页也显示两条。原因前端只做了按钮 loading但 loading 不是原子操作后端也没有做查重或唯一约束。解决在活动报名表上建唯一索引这是 3.1 里 uk_act_user 字段存在的意义。后端接口里先按 activity_id 和 user_id 查记录已存在就直接返回“您已报名”再配合数据库唯一索引兜底。这个坑在答辩提问环节很受评委待见因为它能引出“前端体验与后端兜底”的完整讨论。5.5 真机预览时页面还是上一版内容现象修改完代码重新编译模拟器里是新页面但手机扫码看到的还是旧界面。原因开发者工具或微信客户端缓存了上一次的预览包预览号没有更新。解决开发者工具里点击“清缓存-清除全部缓存”再重新编译和预览。手机上如果有多个开发者工具预览入口退出小程序重新扫一次码。这个坑经常发生在答辩前改完最后一个 bug 之后提前处理能避免现场尴尬。6. 答辩演示技巧让评委相信这套校友会系统“真能跑”答辩演示的核心不是功能多而是流程顺。我常用的演示顺序是先讲系统解决了什么再演示真机最后补技术设计。前 30 秒内把“微信登录、校友录、活动报名、捐赠留言”四个主功能点挨个点一遍评委基本就能建立整体印象后面具体页面讲起来更轻松。演示前可以做一张这样的检查清单项目要求后台服务已启动端口未被占用数据库有活动、校友、报名等测试数据真机预览二维码已生成与电脑同局域网网络面板无 4xx / 5xx 红色请求备用方案演示视频已缓存到手机断网可放映数据预置也有技巧活动表里放三条不同状态的数据分别是“报名中”“已截止”“未开始”这样每次点进去都能展示不同的前端逻辑校友录里预置一条包含本专业老师和知名校友的资料答辩时顺手一指就能讲出系统的应用场景。三个应答口径值得提前想好手机号授权在模拟器里为什么失效、报名表唯一索引的作用、为什么选 MySQL 而不是别的数据库。前两个分别对应你真实踩过的坑和设计亮点第三个答“熟悉、资料多、毕设生态通用”就够了。我自己的教训是有一次演示现场临时换了 Wi-Fi手机连不上后台列表全部空白。从那次之后我的习惯是演示包里永远留一份缓存好的演示视频真机出问题就切视频兜底。这套系统的价值不在代码量而在你能否把它完整讲成“我能独立部署、能解释设计、能处理故障”的作品。希望这篇笔记帮你少踩几个坑祝答辩顺利。本文还有配套的精品资源点击获取