簡介這是一套面向高校計算機專業(yè)學生與初學者的體測管理系統(tǒng)Web前端源碼采用學生端與教師端雙視角設(shè)計覆蓋身高、體重、50米跑、立定跳遠、引體向上、1000米等多個常見體測項目的數(shù)據(jù)錄入與匯總管理可作為課程設(shè)計或期末大作業(yè)的完整交付方案。壓縮包共37個文件、總大小13.47MB以17個HTML頁面為主體串聯(lián)登錄注冊、學生體測操作、教師預(yù)覽與數(shù)據(jù)展示等核心流程并搭配4個CSS樣式表與3個JS腳本含jQuery庫實現(xiàn)頁面布局和交互邏輯另有字體圖標、圖片及JSON數(shù)據(jù)文件補充前端資源整體目錄結(jié)構(gòu)清晰便于按模塊查找與二次開發(fā)。已有560人學習。開發(fā)者可從中獲取一套能直接運行的前端項目骨架多頁面跳轉(zhuǎn)組織方式、基于Bootstrap的響應(yīng)式布局、體測項目模塊的UI劃分思路隨包另附項目說明文檔和數(shù)據(jù)表文件能快速理解功能模塊與數(shù)據(jù)表結(jié)構(gòu)的設(shè)計邏輯為期末大作業(yè)或畢業(yè)設(shè)計預(yù)研提供實用參考。1. 大學生體測管理系統(tǒng)純前端源碼包也能撐起完整演示流程“大學生體測管理系統(tǒng)”這個名字聽起來像是要搭后端、連數(shù)據(jù)庫的大工程但實際拆開這個源碼包會發(fā)現(xiàn)整套系統(tǒng)完全跑在瀏覽器本地打開登錄頁錄入身高、體重、50米、跳遠、1000米等體測數(shù)據(jù)切到教師端還能預(yù)覽匯總結(jié)果全程沒有一行后端代碼靠 HTML、CSS、Bootstrap 和 jQuery 就串起了完整流程。很多同學把它當作期末大作業(yè)提交演示時從登錄跑到教師預(yù)覽節(jié)奏順滑。適合兩類人一類是數(shù)據(jù)庫課還沒結(jié)、卻要交一個能現(xiàn)場跑通的系統(tǒng)另一類是剛學完前端基礎(chǔ)想看看別人怎么把十幾個頁面組織成一個可用應(yīng)用。下面我從文件骨架、數(shù)據(jù)存儲、運行調(diào)試到踩坑和改造把這套源碼徹底拆一遍。2. 從解壓目錄到頁面跳轉(zhuǎn)看懂這套系統(tǒng)的文件骨架與登錄邏輯拿到壓縮包的第一步不是雙擊頁面而是先整理目錄。這套系統(tǒng)的文件命名很直白幾乎每個 HTML 都對應(yīng)一個功能頁面資源文件按類型放在獨立目錄里。搞清楚哪些是頁面、哪些是依賴、哪些是數(shù)據(jù)后面改起來才不會抓瞎。2.1 文件分類三張表頁面、資源、數(shù)據(jù)各歸其位先按用途把文件分成四類每類看一眼就知道它在這個系統(tǒng)里扮演什么角色。分類典型文件在系統(tǒng)里的作用登錄與入口頁logIn.html、register.html、index.html、星空圖.html學生登錄、注冊、首頁過渡與裝飾展示體測項目頁P.Etest.html、50m.html、jump.html、weight.html、1000m.html、height.html、ztqq.html、ytxs.html、cogg.html、vision.html主測試臺與各項目成績錄入頁教師端頁面teacherLogIn.html、teacherPreview.html教師登錄與成績預(yù)覽匯總樣式與腳本css/bootstrap.css、P.Etest.css、js/jQuery.min.js、js/mouse.js布局樣式、UI 框架與交互邏輯字體與圖標font/iconfont.ttf、iconfont.css、iconfont.js、iconfont.woff、iconfont.woff2、iconfont.json頁面里的矢量小圖標圖片素材images/.jpg、.png頁面背景與展示圖數(shù)據(jù)數(shù)據(jù)表存放體測成績的表格文件通常可用 Excel 打開P.Etest.html 是整套系統(tǒng)的核心它承載了主測試臺的角色。打開這個文件能看到六個體測項目的入口卡片分別鏈到 50m.html、jump.html、weight.html、1000m.html、height.html、ztqq.html其中 ztqq 對應(yīng)坐位體前屈ytxs 對應(yīng)仰臥起坐cogg 對應(yīng)引體向上vision.html 是視力測試頁。每個項目頁獨立成文件好處是改某個項目的 UI 不會影響其他頁面壞處是成績?nèi)绻淮嬖诟髯皂撁胬锟珥摴蚕砭鸵柚鸀g覽器存儲來做。圖片素材里那兩張 unsplash 風格的照片大概率是登錄頁和主控臺的背景圖如果你要提交課程設(shè)計把這兩張換成校園實拍或截圖會更“像自己做的”。這部分改動成本很低后面我會專門講怎么換。2.2 登錄與注冊入口學生端和教師端的分流設(shè)計先梳理登錄鏈路。入口頁面是 logIn.html注冊頁 register.html 負責收集學生姓名和學號。教師端單獨走 teacherLogIn.html成功后進 teacherPreview.html。這個設(shè)計把兩類用戶徹底分開了學生登錄后進主測試臺教師登錄后進預(yù)覽頁。分工明確演示的時候也好講先讓學生錄入再切教師賬號看匯總。純前端實現(xiàn)登錄沒有真實的賬號校驗常見的做法是把賬號密碼寫在前端 JS 里判斷或用本地存儲存一條注冊記錄。我一般會在 logIn.html 里看到類似這樣的邏輯// logIn.html 中的登錄分流處理 $(#loginBtn).on(click, function () { var role $(#role).val(); // 下拉框選擇學生或教師 var username $(#username).val().trim(); var password $(#password).val().trim(); if (!username || !password) { alert(用戶名和密碼不能為空); return; } // 教師端固定演示賬號學生端允許任意非空賬號進入 if (role teacher) { if (username admin password 123456) { window.location.href teacherPreview.html; } else { alert(教師賬號或密碼錯誤); } } else { window.location.href P.Etest.html; } });這段代碼用 jQuery 綁定了登錄按鈕的點擊事件根據(jù)下拉框里的角色值走不同分支。注意兩個細節(jié)第一個是判斷用戶名單選后再走流程避免空值直接跳轉(zhuǎn)第二個是教師端的賬號密碼硬編碼在 JS 里這是純前端項目最常見的寫法好處是演示時不用配數(shù)據(jù)庫壞處是任何人打開控制臺都能看到密碼。實際交付課程設(shè)計時如果答辯老師問起安全問題可以如實回答這是演示用邏輯真實系統(tǒng)應(yīng)該在服務(wù)端校驗。注冊頁 register.html 的邏輯更簡單把學號和姓名寫入 localStorage然后跳回登錄頁。關(guān)鍵在于寫入鍵名的規(guī)則后面做數(shù)據(jù)聚合時會用到。2.3 主測試臺到項目頁跳轉(zhuǎn)鏈與返回機制P.Etest.html 作為主測試臺它的 HTML 結(jié)構(gòu)里通常是一張卡片網(wǎng)格每張卡片是一個a鏈接指向?qū)?yīng)的項目頁。項目頁錄入完成后瀏覽器返回按鈕可以退回主測試臺但更穩(wěn)妥的做法是每個項目頁提供一個“返回主測試臺”按鈕用 location.href 指回 P.Etest.html。// 項目頁通用的返回邏輯先記錄當前項目名再回主控臺 function goBack(project) { sessionStorage.setItem(lastProject, project); window.location.href P.Etest.html; }這里用 sessionStorage 而不是 localStorage 記錄“從哪個項目回來”是個很實用的細節(jié)。sessionStorage 在標簽頁關(guān)閉后自動清空不會留下歷史痕跡適合存這種臨時導航狀態(tài)。主測試臺如果要做“上次測試項目”的提示讀取這個鍵就行$(function () { var last sessionStorage.getItem(lastProject); if (last) { $(#tip).text(上次錄入項目 last); } });這套跳轉(zhuǎn)鏈設(shè)計得很樸素但足夠撐起課程設(shè)計的演示需求。項目頁之間不互相跳轉(zhuǎn)全部從主測試臺進出路徑清晰也避免了頁面間狀態(tài)傳遞的復雜度。3. 成績存哪、字段怎么定數(shù)據(jù)表結(jié)構(gòu)與前端存儲方案拆解體測系統(tǒng)最核心的問題是成績怎么存。這套源碼里有兩套存儲一份是壓縮包里的“數(shù)據(jù)表”文件另一份是瀏覽器自己的 localStorage。兩套體系分別對應(yīng)兩種使用場景搞清楚它們的結(jié)構(gòu)和關(guān)系才能真正讀懂這套系統(tǒng)。3.1 數(shù)據(jù)表文件里有什么核心字段與記錄格式壓縮包根目錄下的“數(shù)據(jù)表”一般是一份 Excel 或 CSV 格式的成績登記表字段設(shè)計基本遵循高校體測的常用指標。按常見實現(xiàn)推斷它的列結(jié)構(gòu)大致如下字段名類型說明學號 student_id文本學生唯一標識姓名 student_name文本學生姓名性別 gender文本男 / 女身高 height_cm數(shù)值單位厘米體重 weight_kg數(shù)值單位千克50米跑 run_50m數(shù)值單位秒立定跳遠 jump_cm數(shù)值單位厘米1000米跑 run_1000m數(shù)值單位秒坐位體前屈 sit_reach數(shù)值單位厘米仰臥起坐 sit_up數(shù)值單位次數(shù)引體向上 pull_up數(shù)值單位次數(shù)左眼視力 vision_left數(shù)值視力值測試日期 test_date日期本次體測時間這份數(shù)據(jù)表有兩個作用一是作為文檔交付給老師看證明數(shù)據(jù)模型設(shè)計過二是演示時把表格里的數(shù)據(jù)手工錄入系統(tǒng)。它并不參與頁面運行屬于“靜態(tài)數(shù)據(jù)支撐”。如果你要提交課程設(shè)計把這份表的數(shù)據(jù)填上十幾條真實的模擬記錄會在答辯時加分不少。3.2 localStorage 存成績鍵名設(shè)計與讀寫實現(xiàn)運行時的成績錄入走的是 localStorage。每個項目頁錄入成績后把數(shù)據(jù)寫到以項目名和學生標識組合的鍵里。這套鍵名設(shè)計決定了后續(xù)能不能把成績聚合起來我通常建議用統(tǒng)一的命名規(guī)則例如PE_項目_學號。// 保存一條體測成績到 localStorage function saveScore(studentId, project, score) { var key PE_ project _ studentId; var record { studentId: studentId, project: project, score: score, updatedAt: new Date().toISOString() // ISO 格式時間便于排序 }; localStorage.setItem(key, JSON.stringify(record)); return record; } // 讀取某個學生某個項目的成績 function loadScore(studentId, project) { var key PE_ project _ studentId; var raw localStorage.getItem(key); return raw ? JSON.parse(raw) : null; }說明一下兩個參數(shù)updatedAt存的是 ISO 格式時間字符串比時間戳更適合直接展示轉(zhuǎn)成本地時間用new Date(record.updatedAt)即可score字段統(tǒng)一按字符串存方便在表格里原樣顯示需要計算時再parseFloat。這樣設(shè)計的好處是鍵名可枚舉教師預(yù)覽頁能通過遍歷localStorage里所有PE_開頭的鍵把所有成績撈出來。3.3 擴展思路把前端存儲替換成真實數(shù)據(jù)庫如果答辯老師問“這套系統(tǒng)怎么接數(shù)據(jù)庫”你不能只回答“我用 localStorage”。哪怕不實際寫后端也要能說清楚思路。常見做法是把 localStorage 的讀寫函數(shù)替換成 AJAX 請求后端接口接收同樣的字段。數(shù)據(jù)表里的列結(jié)構(gòu)可以直接當作數(shù)據(jù)庫表結(jié)構(gòu)來用我一般會給出這樣的建表參考CREATE TABLE physical_test ( id INT PRIMARY KEY AUTO_INCREMENT, student_id VARCHAR(20) NOT NULL, student_name VARCHAR(50) NOT NULL, gender TINYINT COMMENT 1男 2女, height_cm DECIMAL(5,1), weight_kg DECIMAL(5,1), run_50m DECIMAL(4,2), jump_cm DECIMAL(5,1), run_1000m INT COMMENT 秒, sit_reach DECIMAL(4,1), sit_up INT, pull_up INT, vision_left VARCHAR(10), test_date DATE, UNIQUE KEY uk_student_date (student_id, test_date) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;建表時最值得注意的是一行學生一天只能有一條體測記錄用UNIQUE KEY uk_student_date約束。這是真實系統(tǒng)中容易漏掉的細節(jié)答辯時主動提一句老師會覺得你考慮過數(shù)據(jù)完整性。前端換成 AJAX 時只需要把saveScore里的localStorage.setItem換成$.post(/api/save, record)把loadScore換成$.get(/api/score?studentIdxxxprojectyyy)其余邏輯幾乎不動。這也是這套源碼最有價值的地方數(shù)據(jù)訪問層被集中封裝在幾個函數(shù)里替換成本低。4. 把源碼跑起來的完整流程啟動順序、JS 初始化和參數(shù)調(diào)整這個源碼包有一個隱蔽的啟動要求不要直接雙擊 HTML 文件打開否則部分瀏覽器會限制本地存儲和字體加載。正確的跑法是用本地服務(wù)器方式啟動下面把完整流程和需要調(diào)整的參數(shù)走一遍。4.1 解壓與啟動目錄完整性和入口頁選擇先確認解壓后的目錄結(jié)構(gòu)完整。最容易出的問題是解壓時選擇了“解壓到當前文件夾”導致 css、js、font 目錄被嵌套了一層頁面找不到樣式。正確操作是在壓縮包上解壓到獨立文件夾然后檢查根目錄下能看到css/、js/、font/、images/這些目錄與 HTML 文件平級。啟動推薦用 Python 自帶的 HTTP 服務(wù)幾秒就能起來cd /path/to/解壓后的目錄 python -m http.server 8080然后用瀏覽器打開http://localhost:8080/logIn.html。為什么不直接雙擊因為 localStorage 是綁定協(xié)議和域名的在file://協(xié)議下部分瀏覽器尤其是舊版 Chrome會拒絕寫入表現(xiàn)為成績錄完刷新就沒了。換成http://localhost后localStorage 的讀寫就完全正常iconfont 字體也會從本地服務(wù)正常加載。這一步是整套源碼能穩(wěn)定運行的大前提。4.2 核心 JS 初始化順序jQuery、mouse.js 與樣式表頁面要正常工作依賴加載順序必須正確。這套系統(tǒng)的每個 HTML 頁面幾乎都依賴 jQuery部分頁面還用了 mouse.js 做鼠標特效。正確的引用順序如下!-- 先引用樣式 -- link relstylesheet hrefcss/bootstrap.css link relstylesheet hreffont/iconfont.css link relstylesheet hrefP.Etest.css !-- 再引用腳本jQuery 必須在自定義腳本之前 -- script srcjs/jquery.min.js/script script srcjs/mouse.js/script !-- 頁面自帶的內(nèi)聯(lián)腳本或外部腳本最后加載 -- script srcjs/main.js/script順序錯亂會引發(fā)兩類典型問題一是樣式不生效因為 Bootstrap 樣式被后面的自定義樣式覆蓋布局變亂二是$ is not defined因為頁面內(nèi)聯(lián)腳本執(zhí)行時 jQuery 還沒加載。mouse.js 這個文件的作用通常是給頁面加鼠標跟隨或點擊特效如果它在 jQuery 之后加載卻報錯要看它內(nèi)部是否調(diào)用了$函數(shù)確認依賴關(guān)系。初始化時的參數(shù)主要在頁面頂部打開任意一個項目頁通常能找到類似下面的配置區(qū)// 頁面頂部可調(diào)整的識別參數(shù) var CONFIG { studentId: 20240001, // 默認學號可改成當前登錄學生 project: 50m, // 當前項目名對應(yīng)數(shù)據(jù)表列名 unit: 秒, // 成績單位跳遠是厘米體重是千克 minValue: 0, maxValue: 60 // 50米跑合理范圍超出提示重新輸入 };這些參數(shù)直接決定了成績錄入的校驗范圍。比如 50 米跑男生合理成績在 6 秒到 20 秒之間把maxValue設(shè)成 60 是為了兼容女生和體測免測的寬松錄入。如果你要改成身高項目把unit換成“厘米”、maxValue設(shè)成 220 就行。參數(shù)化設(shè)計的思路值得保留項目頁之間只換配置不換邏輯。4.3 教師預(yù)覽頁與附加頁面演示時怎么用teacherPreview.html 是整包源碼里功能最接近“后臺管理”的頁面。它通過遍歷 localStorage 里全部PE_開頭的鍵按學號聚合后渲染成表格類似這樣function renderTeacherTable() { var keys Object.keys(localStorage).filter(function (k) { return k.indexOf(PE_) 0; }); var rows {}; keys.forEach(function (key) { var record JSON.parse(localStorage.getItem(key)); if (!rows[record.studentId]) { rows[record.studentId] { studentId: record.studentId }; } rows[record.studentId][record.project] record.score; }); // rows 已經(jīng)按學號聚合直接渲染到 table 即可 console.table(rows); }注意這段代碼用console.table輸出只是為了調(diào)試實際演示時要把數(shù)據(jù)拼成 HTML 表格再插入頁面。教師預(yù)覽頁的數(shù)據(jù)來自瀏覽器存儲所以演示順序必須是先登錄學生端錄入成績再打開教師端預(yù)覽。如果先打開教師端表格就是空的會顯得系統(tǒng)“沒數(shù)據(jù)”。附加頁面里的“星空圖.html”是一個純裝飾頁面一般放在登錄頁之前做過渡動畫演示時點一下展示氛圍即可它不參與業(yè)務(wù)邏輯。5. 避坑記錄這套體測系統(tǒng)最容易翻車的五個問題這套源碼被人問得最多的不是功能不夠而是“為什么我打開和教程不一樣”。以下五個坑是我在實際拆解時反復遇到的按現(xiàn)象、原因、解決的順序?qū)懬宄?.1 畫面白屏或樣式全亂現(xiàn)象雙擊 index.html 或 logIn.html 后頁面純白控制臺報錯Failed to load resource或者頁面沒有樣式文字從上往下堆成一豎列。原因絕大多數(shù)是目錄結(jié)構(gòu)被破壞。解壓工具把內(nèi)層文件夾又包了一層css/bootstrap.css在二級目錄里頁面用相對路徑css/bootstrap.css找不到文件。另一個常見原因是直接雙擊 HTML 使用file://協(xié)議訪問瀏覽器攔截了本地子資源加載。解決先檢查 HTML 文件與css、js、font目錄是否平級。然后放棄雙擊改用我在 4.1 里寫的python -m http.server方式訪問。這兩個動作能解決九成白屏問題。5.2 刷新頁面后已錄成績?nèi)肯КF(xiàn)象在項目頁錄入成績點返回再進入成績還在一刷新頁面表格空了或者切換教師端后一條記錄都沒有。原因?qū)懭牒妥x取 localStorage 的鍵名不一致。有的頁面保存時用PE_50m_20240001讀取時卻寫成了PE_50m_20240001以外的拼接方式比如把項目名放在前面或者多拼了一個下劃線。還有一種是瀏覽器對file://協(xié)議下的 localStorage 做了隔離刷新后直接拿不到。解決先把所有頁面里的saveScore和loadScore函數(shù)統(tǒng)一成同一套鍵名規(guī)則。其次強制用http://localhost訪問。判斷是不是鍵名問題在瀏覽器控制臺執(zhí)行Object.keys(localStorage)把全部鍵打出來人眼比對一下能否對應(yīng)上。5.3 iconfont 圖標顯示成方塊現(xiàn)象頁面上應(yīng)該出現(xiàn)的剪刀、小人、刷新等小圖標全部變成了一個個空心方塊占位但內(nèi)容錯誤。原因iconfont 的樣式文件font/iconfont.css雖然被引用了但字體文件路徑不對。HTML 在student/子目錄時CSS 里寫的font/iconfont.ttf相對路徑指到了錯誤位置導致字體資源 404瀏覽器只能用系統(tǒng)缺省字形渲染。解決檢查所有頁面前提是圖標必須和 CSS 同源訪問。推薦把iconfont.css里的src: url(iconfont.woff2)改成相對 CSS 文件的路徑例如url(../font/iconfont.woff2)。更省事的辦法是保證所有頁面都放在根目錄不要放進子目錄。5.4 控制臺報錯$ is not defined現(xiàn)象打開項目頁后頁面元素都在但沒有任何交互按鈕點了沒反應(yīng)控制臺紅色報錯Uncaught ReferenceError: $ is not defined。原因jQuery 沒有被加載或者加載順序晚于頁面內(nèi)聯(lián)腳本。打開瀏覽器開發(fā)者工具的 Network 標簽?zāi)芸吹絡(luò)Query.min.js這一行是紅色 404 或者加載順序靠后。解決把script srcjs/jquery.min.js/script移到所有自定義腳本之前。同時檢查 jQuery 文件本身是否存在有的壓縮包因為壓縮工具的問題會把文件名多一個空格或后綴jQuery.min.js變成了jQuery.min.js (1)復制代碼時引入路徑必然 404。5.5 數(shù)據(jù)表用 Excel 打開中文亂碼現(xiàn)象解壓出的“數(shù)據(jù)表”文件用 Excel 打開后學號姓名全是亂碼但用記事本打開卻能正常顯示中文。原因文件實際編碼是 UTF-8而舊版 Excel 默認按 GBK 解析無 BOM 的 UTF-8 文件導致中文錯亂。這類數(shù)據(jù)表文件多為工程人員在非 Windows 環(huán)境導出的比較常見。解決用記事本打開文件另存為時編碼選“帶 BOM 的 UTF-8”再用 Excel 打開就正常了。如果你用的是 WPS直接在打開對話框里選“UTF-8 編碼”也能解決。順帶一個習慣拿到任何數(shù)據(jù)表先右鍵用記事本看前兩行確認編碼再交給 Excel能少踩很多坑。6. 讓課程設(shè)計顯得更完整演示動線設(shè)計、換膚與數(shù)據(jù)表加字段6.1 兩分鐘演示動線演示這門課設(shè)不要按開發(fā)順序講按業(yè)務(wù)順序走評委更容易跟上。我的習慣動線是先打開“星空圖.html”停在進入頁一秒點進登錄頁學生端注冊一個演示賬號進入主測試臺依次在身高、體重、50米、跳遠四個項目頁錄入四組數(shù)據(jù)返回主測試臺退出登錄切到教師端輸入演示賬號進預(yù)覽頁展示聚合后的表格。這一套下來錄入了、查到了、角色分開了評估點全覆蓋。6.2 低成本改造清單給這套源碼“換皮”是最劃算的改造。改動三處即可讓頁面看起來和原版明顯不同第一處是 HTML 里的title標簽改成自己學校的課程設(shè)計題目第二處是登錄頁背景圖把 images 目錄里的 unsplash 圖替換成截圖或自制 banner注意保持 JPG 格式和原文件名第三處是 P.Etest.css 里的主色調(diào)全局搜索#409EFF這類色值替換成紅色或綠色UI 風格立刻變化。改完用 5.1 的方式跑一遍確認樣式?jīng)]被引錯。6.3 提交前強制走一遍的五項檢查每次提交前我都強制自己按這張清單走一遍第一清空瀏覽器全部站點數(shù)據(jù)后重新錄入完整的五條學生成績教師端能正確聚合。第二換一臺電腦或換一個瀏覽器打開確認不依賴特定環(huán)境。第三把“數(shù)據(jù)表”用 Excel 重新打開檢查編碼和中文字段。第四隨機點開三個項目頁確認返回按鈕都能回到主測試臺。第五把 jQuery 引用路徑從相對路徑改成能通行的根路徑。這套檢查能過濾掉絕大多數(shù)會被答辯現(xiàn)場暴露的問題。這套源碼讓我想起自己第一次拿到別人寫的期末項目時的狀態(tài)頁面打開一片亂折騰半小時發(fā)現(xiàn)只是啟動方式不對。從那以后我每次拿到陌生前端源碼包都強制先起本地服務(wù)器、再看目錄結(jié)構(gòu)、最后才打開頁面這套順序幫我少走了很多彎路。希望幫到你。本文還有配套的精品資源點擊獲取