簡介這份資源是面向高校計(jì)算機(jī)相關(guān)專業(yè)畢業(yè)設(shè)計(jì)場景的微信小程序?qū)W生信息管理平臺完整項(xiàng)目包采用微信小程序開發(fā)工具、MySQL、Java與B/S架構(gòu)實(shí)現(xiàn)適合正在準(zhǔn)備畢設(shè)或需要小程序后臺管理系統(tǒng)實(shí)戰(zhàn)案例的學(xué)生與開發(fā)者參考。包內(nèi)包含源碼、說明文檔、數(shù)據(jù)庫腳本與演示視頻壓縮包約122.07MB文件以項(xiàng)目源碼、數(shù)據(jù)庫文件、說明文檔及演示視頻為主分別對應(yīng)系統(tǒng)實(shí)現(xiàn)、數(shù)據(jù)建表、部署說明與功能演示等用途。功能上前臺覆蓋成績查詢、課表查詢、考試安排查詢、補(bǔ)考查詢與普通話查詢后臺則提供管理員管理、學(xué)生管理、專業(yè)管理、班級管理及考試成績、考場與普通話成績等考試管理模塊業(yè)務(wù)閉環(huán)較為完整。目前已有1042人學(xué)習(xí)下載讀者可據(jù)此快速理解小程序端與Java服務(wù)端、MySQL數(shù)據(jù)庫之間的協(xié)作方式并對照演示視頻與說明文檔完成環(huán)境搭建、功能復(fù)現(xiàn)與二次開發(fā)為畢業(yè)設(shè)計(jì)選題、答辯展示與代碼排錯提供可落地的參考方案。1. 學(xué)生信息管理平臺小程序從源碼到數(shù)據(jù)庫一套能跑通的畢業(yè)設(shè)計(jì)拆解每年到了畢業(yè)設(shè)計(jì)季總有一批同學(xué)卡在同一個地方選題定了「學(xué)生信息管理平臺」技術(shù)棧選了微信小程序但真到動手時發(fā)現(xiàn)前端頁面能畫出來數(shù)據(jù)庫表不知道怎么設(shè)計(jì)增刪改查接口寫完一調(diào)就報(bào)錯最后演示視頻只能對著靜態(tài)頁面硬講。這個標(biāo)題對應(yīng)的正是這樣一套完整交付物——微信小程序端的學(xué)生信息管理平臺附帶源碼、說明文檔、數(shù)據(jù)庫腳本和演示視頻。它解決的核心問題不是「怎么做一個好看的界面」而是「怎么讓一個小程序真正連上數(shù)據(jù)庫把學(xué)生信息的增刪改查跑通」。適合的人群很明確正在做畢業(yè)設(shè)計(jì)、需要一套可運(yùn)行可講解的完整項(xiàng)目、對微信小程序開發(fā)有基礎(chǔ)但缺乏全棧串聯(lián)經(jīng)驗(yàn)的在校學(xué)生。接下來我會按實(shí)際落地順序把環(huán)境搭建、數(shù)據(jù)庫設(shè)計(jì)、接口實(shí)現(xiàn)、聯(lián)調(diào)排錯這幾個環(huán)節(jié)拆開講中間會穿插我踩過的坑和參數(shù)配置建議。2. 環(huán)境準(zhǔn)備與項(xiàng)目結(jié)構(gòu)把源碼跑起來之前先搞清這幾件事2.1 開發(fā)工具與運(yùn)行環(huán)境的選擇拿到一個微信小程序項(xiàng)目源碼第一件事不是急著點(diǎn)「編譯」而是先確認(rèn)本機(jī)環(huán)境能不能撐起來。學(xué)生信息管理平臺這類項(xiàng)目通常包含三部分小程序前端、后端服務(wù)、數(shù)據(jù)庫。前端用微信開發(fā)者工具打開后端常見的是 Node.js 或 PHP 寫的接口層數(shù)據(jù)庫一般是 MySQL 或 SQLite。我一般會先看項(xiàng)目根目錄有沒有package.json或composer.json這能直接告訴你后端用什么語言、依賴哪些包。如果是 Node.js 后端需要本機(jī)裝 Node 14 以上版本如果是 PHP建議 PHP 7.4 或 8.0搭配 MySQL 5.7 以上。微信開發(fā)者工具去官網(wǎng)下穩(wěn)定版就行安裝后用小程序的 AppID 登錄沒有 AppID 就選「測試號」但要注意測試號不支持某些高級接口比如獲取手機(jī)號。數(shù)據(jù)庫這塊如果源碼里帶的是.sql文件直接用 Navicat 或命令行導(dǎo)入。命令行導(dǎo)入的命令是mysql -u root -p student_db student_db.sql這條命令的意思是用 root 用戶登錄 MySQL把student_db.sql文件里的建表和插入語句執(zhí)行到student_db這個庫里。執(zhí)行前需要先手動創(chuàng)建student_db庫或者確認(rèn) sql 文件里已經(jīng)包含CREATE DATABASE語句。導(dǎo)入完成后用SHOW TABLES;確認(rèn)表是否都建好了。提示導(dǎo)入 sql 文件時如果報(bào)「Unknown character set」錯誤多半是 sql 文件用了 utf8mb4 而本機(jī) MySQL 版本太低升級到 5.7 以上就能解決。2.2 項(xiàng)目目錄結(jié)構(gòu)與關(guān)鍵文件定位一個典型的學(xué)生信息管理平臺小程序項(xiàng)目目錄結(jié)構(gòu)大致是這樣的student-manager/ ├── miniprogram/ # 小程序前端代碼 │ ├── pages/ │ │ ├── index/ # 首頁 │ │ ├── student-list/ # 學(xué)生列表 │ │ ├── student-add/ # 添加學(xué)生 │ │ └── student-edit/ # 編輯學(xué)生 │ ├── utils/ │ │ └── request.js # 網(wǎng)絡(luò)請求封裝 │ └── app.js # 全局邏輯 ├── server/ # 后端接口 │ ├── routes/ │ │ └── student.js # 學(xué)生相關(guān)接口 │ ├── db.js # 數(shù)據(jù)庫連接配置 │ └── app.js # 服務(wù)入口 └── database/ └── student_db.sql # 數(shù)據(jù)庫腳本拿到項(xiàng)目后先改server/db.js里的數(shù)據(jù)庫連接配置把 host、user、password、database 四個參數(shù)改成你本機(jī)的。然后啟動后端服務(wù)通常是node app.js或npm run start。后端跑起來后用瀏覽器訪問http://localhost:3000/student/list看能不能返回 JSON 數(shù)據(jù)。如果返回了數(shù)據(jù)說明后端和數(shù)據(jù)庫通了如果報(bào)錯先看控制臺輸出的錯誤信息最常見的是數(shù)據(jù)庫密碼不對或者表名寫錯。前端這邊打開微信開發(fā)者工具導(dǎo)入miniprogram目錄然后在utils/request.js里把 baseURL 改成你本機(jī)的 IP 加端口。注意這里不能用localhost因?yàn)槲⑿砰_發(fā)者工具的模擬器雖然能訪問本機(jī)但真機(jī)調(diào)試時手機(jī)和電腦不在同一個網(wǎng)絡(luò)環(huán)境下會連不上。我一般會改成局域網(wǎng) IP比如http://192.168.1.100:3000這樣模擬器和真機(jī)都能用。2.3 數(shù)據(jù)庫表結(jié)構(gòu)設(shè)計(jì)與字段類型選擇學(xué)生信息管理平臺的核心表一般就三張學(xué)生表、班級表、用戶表。學(xué)生表是重點(diǎn)字段設(shè)計(jì)直接影響后續(xù)增刪改查的難易程度。下面是一個我常用的學(xué)生表結(jié)構(gòu)CREATE TABLE student ( id int(11) NOT NULL AUTO_INCREMENT COMMENT 主鍵, student_no varchar(20) NOT NULL COMMENT 學(xué)號, name varchar(50) NOT NULL COMMENT 姓名, gender tinyint(1) DEFAULT 1 COMMENT 性別 1男 2女, class_id int(11) DEFAULT NULL COMMENT 班級ID, phone varchar(20) DEFAULT NULL COMMENT 手機(jī)號, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 創(chuàng)建時間, PRIMARY KEY (id), UNIQUE KEY student_no (student_no) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4 COMMENT學(xué)生信息表;這里有幾個參數(shù)值得展開說。student_no加了唯一索引防止重復(fù)錄入同一個學(xué)號這是血淚經(jīng)驗(yàn)——不加唯一約束的話批量導(dǎo)入時很容易出現(xiàn)兩條一樣的數(shù)據(jù)后面查重很麻煩。gender用 tinyint 而不是 varchar省空間也方便前端做單選框映射。class_id是外鍵關(guān)聯(lián)班級表的但這里沒有寫FOREIGN KEY約束因?yàn)樾〕绦蝽?xiàng)目里后端做關(guān)聯(lián)查詢更靈活加了外鍵反而在刪除班級時容易報(bào)錯。create_time用DEFAULT CURRENT_TIMESTAMP讓數(shù)據(jù)庫自動填時間后端插入時就不用管這個字段了。字符集統(tǒng)一用 utf8mb4避免學(xué)生姓名里有生僻字或 emoji 時出現(xiàn)亂碼。表引擎用 InnoDB支持事務(wù)后面如果要加批量導(dǎo)入功能會用到。3. 增刪改查接口實(shí)現(xiàn)從后端路由到小程序請求的完整鏈路3.1 后端接口的四個核心路由寫法學(xué)生信息的增刪改查后端一般用 Express 框架寫四個路由。先看代碼// server/routes/student.js const express require(express); const router express.Router(); const db require(../db); // 查詢學(xué)生列表支持按姓名模糊搜索 router.get(/list, (req, res) { const { keyword , page 1, pageSize 10 } req.query; const offset (page - 1) * pageSize; const sql SELECT s.*, c.class_name FROM student s LEFT JOIN class c ON s.class_id c.id WHERE s.name LIKE ? OR s.student_no LIKE ? ORDER BY s.id DESC LIMIT ? OFFSET ?; const params [%${keyword}%, %${keyword}%, Number(pageSize), offset]; db.query(sql, params, (err, results) { if (err) return res.json({ code: 500, msg: 查詢失敗 }); res.json({ code: 200, data: results }); }); }); // 新增學(xué)生 router.post(/add, (req, res) { const { student_no, name, gender, class_id, phone } req.body; if (!student_no || !name) { return res.json({ code: 400, msg: 學(xué)號和姓名不能為空 }); } const sql INSERT INTO student (student_no, name, gender, class_id, phone) VALUES (?, ?, ?, ?, ?); db.query(sql, [student_no, name, gender, class_id, phone], (err, result) { if (err) { if (err.code ER_DUP_ENTRY) { return res.json({ code: 400, msg: 學(xué)號已存在 }); } return res.json({ code: 500, msg: 添加失敗 }); } res.json({ code: 200, msg: 添加成功, id: result.insertId }); }); }); // 修改學(xué)生 router.put(/update, (req, res) { const { id, name, gender, class_id, phone } req.body; const sql UPDATE student SET name ?, gender ?, class_id ?, phone ? WHERE id ?; db.query(sql, [name, gender, class_id, phone, id], (err, result) { if (err) return res.json({ code: 500, msg: 修改失敗 }); if (result.affectedRows 0) return res.json({ code: 404, msg: 學(xué)生不存在 }); res.json({ code: 200, msg: 修改成功 }); }); }); // 刪除學(xué)生 router.delete(/delete/:id, (req, res) { const { id } req.params; const sql DELETE FROM student WHERE id ?; db.query(sql, [id], (err, result) { if (err) return res.json({ code: 500, msg: 刪除失敗 }); if (result.affectedRows 0) return res.json({ code: 404, msg: 學(xué)生不存在 }); res.json({ code: 200, msg: 刪除成功 }); }); }); module.exports router;這段代碼里有幾個關(guān)鍵點(diǎn)。查詢接口用了LEFT JOIN關(guān)聯(lián)班級表這樣前端列表里能直接顯示班級名稱而不是班級 ID省去前端再發(fā)一次請求。分頁用LIMIT ? OFFSET ?參數(shù)從 query 里取默認(rèn)第一頁每頁 10 條。模糊搜索用LIKE %keyword%同時匹配姓名和學(xué)號這樣用戶輸入學(xué)號或姓名都能搜到。新增接口里判斷了ER_DUP_ENTRY錯誤碼這是 MySQL 唯一索引沖突時返回的捕獲后給前端提示「學(xué)號已存在」比直接報(bào) 500 友好得多。修改和刪除接口都檢查了affectedRows如果為 0 說明這條記錄不存在返回 404 而不是假裝成功。注意db.query的參數(shù)化查詢里L(fēng)IMIT和OFFSET后面的參數(shù)在 MySQL 驅(qū)動里有時會被當(dāng)成字符串處理導(dǎo)致語法錯誤。解決辦法是用Number()轉(zhuǎn)一下或者直接拼接到 SQL 里但確保是整數(shù)。3.2 小程序端請求封裝與頁面調(diào)用小程序端不建議在每個頁面里直接寫wx.request而是封裝一個統(tǒng)一的請求函數(shù)?？创a// miniprogram/utils/request.js const BASE_URL http://192.168.1.100:3000; function request(options) { return new Promise((resolve, reject) { wx.request({ url: BASE_URL options.url, method: options.method || GET, data: options.data || {}, header: { Content-Type: application/json }, success(res) { if (res.data.code 200) { resolve(res.data); } else { wx.showToast({ title: res.data.msg || 請求失敗, icon: none }); reject(res.data); } }, fail(err) { wx.showToast({ title: 網(wǎng)絡(luò)異常, icon: none }); reject(err); } }); }); } module.exports { request };這個封裝做了三件事統(tǒng)一拼接 baseURL、統(tǒng)一處理業(yè)務(wù)狀態(tài)碼、統(tǒng)一彈提示。頁面里調(diào)用時只需要const { request } require(../../utils/request); Page({ data: { list: [], keyword: , page: 1 }, onLoad() { this.loadList(); }, loadList() { request({ url: /student/list, data: { keyword: this.data.keyword, page: this.data.page, pageSize: 10 } }).then(res { this.setData({ list: res.data }); }); }, onSearch(e) { this.setData({ keyword: e.detail.value, page: 1 }, () { this.loadList(); }); } });這里onSearch里先setData再在回調(diào)里調(diào)loadList是因?yàn)閟etData是異步的直接調(diào)loadList拿到的還是舊的 keyword。這個坑我踩過不止一次頁面搜索沒反應(yīng)查了半天才發(fā)現(xiàn)是時序問題。3.3 單選框與表單數(shù)據(jù)的綁定處理學(xué)生信息里性別字段用單選框微信小程序里用radio-group組件。綁定方式radio-group bindchangeonGenderChange labelradio value1 checked{{gender 1}} /男/label labelradio value2 checked{{gender 2}} /女/label /radio-grouponGenderChange(e) { this.setData({ gender: Number(e.detail.value) }); }注意e.detail.value拿到的是字符串?dāng)?shù)據(jù)庫里 gender 是 tinyint所以要用Number()轉(zhuǎn)一下。不轉(zhuǎn)的話后端接收到的就是1而不是1雖然 MySQL 會自動轉(zhuǎn)換但在嚴(yán)格模式下可能報(bào)錯。表單提交前最好做一次校驗(yàn)學(xué)號和姓名必填手機(jī)號用正則簡單驗(yàn)證一下格式避免臟數(shù)據(jù)進(jìn)庫。4. 聯(lián)調(diào)排錯與常見翻車場景數(shù)據(jù)庫連不上、請求跨域、真機(jī)白屏4.1 數(shù)據(jù)庫連接失敗的三種典型表現(xiàn)第一種后端啟動時報(bào)ECONNREFUSED。這說明 MySQL 服務(wù)沒啟動或者db.js里的 host 和端口不對。先確認(rèn)本機(jī) MySQL 是否在運(yùn)行Windows 下看服務(wù)列表Mac 下用brew services list。端口默認(rèn) 3306如果改過要同步改配置。第二種報(bào)ER_ACCESS_DENIED_ERROR。這是用戶名或密碼錯誤。有時候密碼里包含特殊字符在配置文件里需要轉(zhuǎn)義。還有一種情況是 MySQL 8.0 默認(rèn)用了caching_sha2_password認(rèn)證插件老版本的 Node mysql 驅(qū)動不支持需要改用戶認(rèn)證方式ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 你的密碼; FLUSH PRIVILEGES;第三種報(bào)ER_BAD_DB_ERROR。數(shù)據(jù)庫不存在要么是沒導(dǎo)入 sql 文件要么是db.js里 database 名字寫錯了。用SHOW DATABASES;確認(rèn)一下。4.2 小程序請求跨域與域名校驗(yàn)問題微信開發(fā)者工具里如果后端接口沒配 HTTPS 且沒在后臺配置合法域名請求會失敗。開發(fā)階段可以在開發(fā)者工具里勾選「不校驗(yàn)合法域名、web-view業(yè)務(wù)域名、TLS 版本以及 HTTPS 證書」這樣就能用http://localhost或局域網(wǎng) IP 調(diào)試。但真機(jī)預(yù)覽時這個選項(xiàng)不生效真機(jī)要求必須 HTTPS 且域名已備案。畢業(yè)設(shè)計(jì)演示一般用開發(fā)者工具模擬器就夠了如果非要真機(jī)演示可以用內(nèi)網(wǎng)穿透工具把本機(jī)服務(wù)映射到一個 HTTPS 域名但要注意內(nèi)網(wǎng)穿透工具的穩(wěn)定性和安全性。提示真機(jī)調(diào)試時如果頁面白屏但控制臺沒報(bào)錯先檢查request.js里的 BASE_URL 是不是寫的localhost。手機(jī)上的localhost指向手機(jī)自己不是你的電腦。4.3 數(shù)據(jù)渲染不出來的排查順序列表頁空白先看控制臺有沒有報(bào)錯。如果沒有報(bào)錯但數(shù)據(jù)不顯示按這個順序查第一loadList有沒有被調(diào)用在函數(shù)第一行加console.log(load)確認(rèn)第二接口返回的res.data是不是數(shù)組有時候后端返回的是{ code: 200, data: { list: [...] } }前端卻按res.data直接渲染層級對不上第三wx:for的wx:key有沒有寫不寫 key 雖然能渲染但會有警告某些情況下會導(dǎo)致更新異常第四setData的字段名和 wxml 里綁定的變量名是否一致大小寫敏感。4.4 批量導(dǎo)入學(xué)生數(shù)據(jù)時的性能與去重畢業(yè)設(shè)計(jì)演示時經(jīng)常需要一次性導(dǎo)入幾十條學(xué)生數(shù)據(jù)。如果循環(huán)調(diào)add接口每調(diào)一次發(fā)一次請求速度慢還容易超時。更好的做法是后端加一個批量導(dǎo)入接口接收數(shù)組用INSERT INTO ... VALUES (...), (...), ...一次性插入。去重的話在插入前先用SELECT student_no FROM student WHERE student_no IN (...)查出已存在的學(xué)號過濾掉再插入。批量插入時注意單條 SQL 的長度限制MySQL 默認(rèn)max_allowed_packet是 4MB幾百條數(shù)據(jù)沒問題上千條就要分批。5. 演示視頻錄制與答辯講解的實(shí)用技巧5.1 演示視頻的錄制節(jié)奏與重點(diǎn)展示演示視頻一般 3 到 5 分鐘不要從頭到尾錄操作過程而是按「功能模塊 技術(shù)亮點(diǎn)」來組織。我建議的順序是先花 20 秒展示項(xiàng)目整體架構(gòu)圖小程序端、后端、數(shù)據(jù)庫三層然后用 1 分鐘演示登錄和首頁接著 1 分半演示學(xué)生列表的搜索、分頁、新增、編輯、刪除最后 1 分鐘展示數(shù)據(jù)庫表結(jié)構(gòu)和關(guān)鍵代碼片段。錄制時用 OBS 或系統(tǒng)自帶錄屏分辨率 1080P麥克風(fēng)提前試音。操作速度不要太快每個功能點(diǎn)停留 2 到 3 秒讓觀看者看清結(jié)果。5.2 答辯時被問到數(shù)據(jù)庫設(shè)計(jì)的應(yīng)答思路答辯老師最常問的三個數(shù)據(jù)庫問題為什么用這個字段類型、有沒有考慮并發(fā)、數(shù)據(jù)量大了怎么辦。字段類型就按前面說的答學(xué)號用 varchar 因?yàn)榭赡芎帜感詣e用 tinyint 省空間時間用 datetime 方便排序。并發(fā)問題在畢業(yè)設(shè)計(jì)層面一般不會真遇到但可以答「當(dāng)前用連接池管理數(shù)據(jù)庫連接后續(xù)如果并發(fā)量大會考慮加 Redis 緩存」。數(shù)據(jù)量大了可以答「列表接口做了分頁單頁最多 100 條后續(xù)可以加索引優(yōu)化查詢速度」。關(guān)鍵是表現(xiàn)出你思考過這些問題而不是背答案。5.3 源碼二次修改的邊界與注意事項(xiàng)拿到源碼后改界面樣式、加字段、調(diào)接口參數(shù)都沒問題但有幾處不要輕易動數(shù)據(jù)庫連接池的配置、后端路由的注冊順序、小程序app.json里的頁面路徑。改數(shù)據(jù)庫表結(jié)構(gòu)時記得同步改后端 SQL 語句和前端表單字段三處不一致就會報(bào)錯。如果要在現(xiàn)有基礎(chǔ)上加功能比如加一個「成績管理」模塊建議新建表和路由文件不要在學(xué)生表上硬加字段否則后面維護(hù)會很亂。5.4 從畢業(yè)設(shè)計(jì)到可展示項(xiàng)目的最后一步最后一步是把項(xiàng)目部署到一個能公網(wǎng)訪問的環(huán)境這樣答辯時可以直接用手機(jī)演示不用依賴開發(fā)者工具。后端可以部署到云服務(wù)器數(shù)據(jù)庫用云數(shù)據(jù)庫小程序端把 BASE_URL 改成公網(wǎng)地址。部署時注意數(shù)據(jù)庫密碼不要硬編碼在代碼里用環(huán)境變量傳入。小程序提交審核需要企業(yè)主體畢業(yè)設(shè)計(jì)用測試號或體驗(yàn)版就夠了體驗(yàn)版掃碼就能用不需要審核。我自己做這類項(xiàng)目時養(yǎng)成了一個習(xí)慣每改完一個功能先在開發(fā)者工具里跑一遍再用真機(jī)預(yù)覽跑一遍最后把數(shù)據(jù)庫里的數(shù)據(jù)導(dǎo)出備份一份。這樣即使改崩了也能快速回滾。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取