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