簡介這是一套面向高校計(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頁面為主體串聯(lián)登錄注冊(cè)、學(xué)生體測(cè)操作、教師預(yù)覽與數(shù)據(jù)展示等核心流程并搭配4個(gè)CSS樣式表與3個(gè)JS腳本含jQuery庫實(shí)現(xiàn)頁面布局和交互邏輯另有字體圖標(biāo)、圖片及JSON數(shù)據(jù)文件補(bǔ)充前端資源整體目錄結(jié)構(gòu)清晰便于按模塊查找與二次開發(fā)。已有560人學(xué)習(xí)。開發(fā)者可從中獲取一套能直接運(yùn)行的前端項(xiàng)目骨架多頁面跳轉(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ù)庫的大工程但實(shí)際拆開這個(gè)源碼包會(huì)發(fā)現(xiàn)整套系統(tǒng)完全跑在瀏覽器本地打開登錄頁錄入身高、體重、50米、跳遠(yuǎn)、1000米等體測(cè)數(shù)據(jù)切到教師端還能預(yù)覽匯總結(jié)果全程沒有一行后端代碼靠 HTML、CSS、Bootstrap 和 jQuery 就串起了完整流程。很多同學(xué)把它當(dāng)作期末大作業(yè)提交演示時(shí)從登錄跑到教師預(yù)覽節(jié)奏順滑。適合兩類人一類是數(shù)據(jù)庫課還沒結(jié)、卻要交一個(gè)能現(xiàn)場(chǎng)跑通的系統(tǒng)另一類是剛學(xué)完前端基礎(chǔ)想看看別人怎么把十幾個(gè)頁面組織成一個(gè)可用應(yīng)用。下面我從文件骨架、數(shù)據(jù)存儲(chǔ)、運(yùn)行調(diào)試到踩坑和改造把這套源碼徹底拆一遍。2. 從解壓目錄到頁面跳轉(zhuǎn)看懂這套系統(tǒng)的文件骨架與登錄邏輯拿到壓縮包的第一步不是雙擊頁面而是先整理目錄。這套系統(tǒng)的文件命名很直白幾乎每個(gè) HTML 都對(duì)應(yīng)一個(gè)功能頁面資源文件按類型放在獨(dú)立目錄里。搞清楚哪些是頁面、哪些是依賴、哪些是數(shù)據(jù)后面改起來才不會(huì)抓瞎。2.1 文件分類三張表頁面、資源、數(shù)據(jù)各歸其位先按用途把文件分成四類每類看一眼就知道它在這個(gè)系統(tǒng)里扮演什么角色。分類典型文件在系統(tǒng)里的作用登錄與入口頁logIn.html、register.html、index.html、星空?qǐng)D.html學(xué)生登錄、注冊(cè)、首頁過渡與裝飾展示體測(cè)項(xiàng)目頁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)目成績錄入頁教師端頁面teacherLogIn.html、teacherPreview.html教師登錄與成績預(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頁面里的矢量小圖標(biāo)圖片素材images/.jpg、.png頁面背景與展示圖數(shù)據(jù)數(shù)據(jù)表存放體測(cè)成績的表格文件通?？捎?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è)試頁。每個(gè)項(xiàng)目頁獨(dú)立成文件好處是改某個(gè)項(xiàng)目的 UI 不會(huì)影響其他頁面壞處是成績?nèi)绻淮嬖诟髯皂撁胬锟珥摴蚕砭鸵柚鸀g覽器存儲(chǔ)來做。圖片素材里那兩張 unsplash 風(fēng)格的照片大概率是登錄頁和主控臺(tái)的背景圖如果你要提交課程設(shè)計(jì)把這兩張換成校園實(shí)拍或截圖會(huì)更“像自己做的”。這部分改動(dòng)成本很低后面我會(huì)專門講怎么換。2.2 登錄與注冊(cè)入口學(xué)生端和教師端的分流設(shè)計(jì)先梳理登錄鏈路。入口頁面是 logIn.html注冊(cè)頁 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ù)覽頁。分工明確演示的時(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ù)庫壞處是任何人打開控制臺(tái)都能看到密碼。實(shí)際交付課程設(shè)計(jì)時(shí)如果答辯老師問起安全問題可以如實(shí)回答這是演示用邏輯真實(shí)系統(tǒng)應(yīng)該在服務(wù)端校驗(yàn)。注冊(cè)頁 register.html 的邏輯更簡單把學(xué)號(hào)和姓名寫入 localStorage然后跳回登錄頁。關(guān)鍵在于寫入鍵名的規(guī)則后面做數(shù)據(jù)聚合時(shí)會(huì)用到。2.3 主測(cè)試臺(tái)到項(xiàng)目頁跳轉(zhuǎn)鏈與返回機(jī)制P.Etest.html 作為主測(cè)試臺(tái)它的 HTML 結(jié)構(gòu)里通常是一張卡片網(wǎng)格每張卡片是一個(gè)a鏈接指向?qū)?yīng)的項(xiàng)目頁。項(xiàng)目頁錄入完成后瀏覽器返回按鈕可以退回主測(cè)試臺(tái)但更穩(wěn)妥的做法是每個(gè)項(xiàng)目頁提供一個(gè)“返回主測(cè)試臺(tái)”按鈕用 location.href 指回 P.Etest.html。// 項(xiàng)目頁通用的返回邏輯先記錄當(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)簽頁關(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)目頁之間不互相跳轉(zhuǎn)全部從主測(cè)試臺(tái)進(jìn)出路徑清晰也避免了頁面間狀態(tài)傳遞的復(fù)雜度。3. 成績存哪、字段怎么定數(shù)據(jù)表結(jié)構(gòu)與前端存儲(chǔ)方案拆解體測(cè)系統(tǒng)最核心的問題是成績?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 格式的成績登記表字段設(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ùn)行屬于“靜態(tài)數(shù)據(jù)支撐”。如果你要提交課程設(shè)計(jì)把這份表的數(shù)據(jù)填上十幾條真實(shí)的模擬記錄會(huì)在答辯時(shí)加分不少。3.2 localStorage 存成績鍵名設(shè)計(jì)與讀寫實(shí)現(xiàn)運(yùn)行時(shí)的成績錄入走的是 localStorage。每個(gè)項(xiàng)目頁錄入成績后把數(shù)據(jù)寫到以項(xiàng)目名和學(xué)生標(biāo)識(shí)組合的鍵里。這套鍵名設(shè)計(jì)決定了后續(xù)能不能把成績聚合起來我通常建議用統(tǒng)一的命名規(guī)則例如PE_項(xiàng)目_學(xué)號(hào)。// 保存一條體測(cè)成績到 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)目的成績 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ù)覽頁能通過遍歷localStorage里所有PE_開頭的鍵把所有成績撈出來。3.3 擴(kuò)展思路把前端存儲(chǔ)替換成真實(shí)數(shù)據(jù)庫如果答辯老師問“這套系統(tǒng)怎么接數(shù)據(jù)庫”你不能只回答“我用 localStorage”。哪怕不實(shí)際寫后端也要能說清楚思路。常見做法是把 localStorage 的讀寫函數(shù)替換成 AJAX 請(qǐng)求后端接口接收同樣的字段。數(shù)據(jù)表里的列結(jié)構(gòu)可以直接當(dāng)作數(shù)據(jù)庫表結(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)目錄完整性和入口頁選擇先確認(rèn)解壓后的目錄結(jié)構(gòu)完整。最容易出的問題是解壓時(shí)選擇了“解壓到當(dāng)前文件夾”導(dǎo)致 css、js、font 目錄被嵌套了一層頁面找不到樣式。正確操作是在壓縮包上解壓到獨(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)為成績錄完刷新就沒了。換成http://localhost后localStorage 的讀寫就完全正常iconfont 字體也會(huì)從本地服務(wù)正常加載。這一步是整套源碼能穩(wěn)定運(yùn)行的大前提。4.2 核心 JS 初始化順序jQuery、mouse.js 與樣式表頁面要正常工作依賴加載順序必須正確。這套系統(tǒng)的每個(gè) HTML 頁面幾乎都依賴 jQuery部分頁面還用了 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 !-- 頁面自帶的內(nèi)聯(lián)腳本或外部腳本最后加載 -- script srcjs/main.js/script順序錯(cuò)亂會(huì)引發(fā)兩類典型問題一是樣式不生效因?yàn)?Bootstrap 樣式被后面的自定義樣式覆蓋布局變亂二是$ is not defined因?yàn)轫撁鎯?nèi)聯(lián)腳本執(zhí)行時(shí) jQuery 還沒加載。mouse.js 這個(gè)文件的作用通常是給頁面加鼠標(biāo)跟隨或點(diǎn)擊特效如果它在 jQuery 之后加載卻報(bào)錯(cuò)要看它內(nèi)部是否調(diào)用了$函數(shù)確認(rèn)依賴關(guān)系。初始化時(shí)的參數(shù)主要在頁面頂部打開任意一個(gè)項(xiàng)目頁通常能找到類似下面的配置區(qū)// 頁面頂部可調(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: 秒, // 成績單位跳遠(yuǎn)是厘米體重是千克 minValue: 0, maxValue: 60 // 50米跑合理范圍超出提示重新輸入 };這些參數(shù)直接決定了成績錄入的校驗(yàn)范圍。比如 50 米跑男生合理成績?cè)?6 秒到 20 秒之間把maxValue設(shè)成 60 是為了兼容女生和體測(cè)免測(cè)的寬松錄入。如果你要改成身高項(xiàng)目把unit換成“厘米”、maxValue設(shè)成 220 就行。參數(shù)化設(shè)計(jì)的思路值得保留項(xiàng)目頁之間只換配置不換邏輯。4.3 教師預(yù)覽頁與附加頁面演示時(shí)怎么用teacherPreview.html 是整包源碼里功能最接近“后臺(tái)管理”的頁面。它通過遍歷 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ù)覽頁的數(shù)據(jù)來自瀏覽器存儲(chǔ)所以演示順序必須是先登錄學(xué)生端錄入成績?cè)俅蜷_教師端預(yù)覽。如果先打開教師端表格就是空的會(huì)顯得系統(tǒng)“沒數(shù)據(jù)”。附加頁面里的“星空?qǐng)D.html”是一個(gè)純裝飾頁面一般放在登錄頁之前做過渡動(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 后頁面純白控制臺(tái)報(bào)錯(cuò)Failed to load resource或者頁面沒有樣式文字從上往下堆成一豎列。原因絕大多數(shù)是目錄結(jié)構(gòu)被破壞。解壓工具把內(nèi)層文件夾又包了一層css/bootstrap.css在二級(jí)目錄里頁面用相對(duì)路徑css/bootstrap.css找不到文件。另一個(gè)常見原因是直接雙擊 HTML 使用file://協(xié)議訪問瀏覽器攔截了本地子資源加載。解決先檢查 HTML 文件與css、js、font目錄是否平級(jí)。然后放棄雙擊改用我在 4.1 里寫的python -m http.server方式訪問。這兩個(gè)動(dòng)作能解決九成白屏問題。5.2 刷新頁面后已錄成績?nèi)肯КF(xiàn)象在項(xiàng)目頁錄入成績點(diǎn)返回再進(jìn)入成績還在一刷新頁面表格空了或者切換教師端后一條記錄都沒有。原因?qū)懭牒妥x取 localStorage 的鍵名不一致。有的頁面保存時(shí)用PE_50m_20240001讀取時(shí)卻寫成了PE_50m_20240001以外的拼接方式比如把項(xiàng)目名放在前面或者多拼了一個(gè)下劃線。還有一種是瀏覽器對(duì)file://協(xié)議下的 localStorage 做了隔離刷新后直接拿不到。解決先把所有頁面里的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ī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)缺省字形渲染。解決檢查所有頁面前提是圖標(biāo)必須和 CSS 同源訪問。推薦把iconfont.css里的src: url(iconfont.woff2)改成相對(duì) CSS 文件的路徑例如url(../font/iconfont.woff2)。更省事的辦法是保證所有頁面都放在根目錄不要放進(jìn)子目錄。5.4 控制臺(tái)報(bào)錯(cuò)$ is not defined現(xiàn)象打開項(xiàng)目頁后頁面元素都在但沒有任何交互按鈕點(diǎn)了沒反應(yīng)控制臺(tái)紅色報(bào)錯(cuò)Uncaught ReferenceError: $ is not defined。原因jQuery 沒有被加載或者加載順序晚于頁面內(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)入頁一秒點(diǎn)進(jìn)登錄頁學(xué)生端注冊(cè)一個(gè)演示賬號(hào)進(jìn)入主測(cè)試臺(tái)依次在身高、體重、50米、跳遠(yuǎn)四個(gè)項(xiàng)目頁錄入四組數(shù)據(jù)返回主測(cè)試臺(tái)退出登錄切到教師端輸入演示賬號(hào)進(jìn)預(yù)覽頁展示聚合后的表格。這一套下來錄入了、查到了、角色分開了評(píng)估點(diǎn)全覆蓋。6.2 低成本改造清單給這套源碼“換皮”是最劃算的改造。改動(dòng)三處即可讓頁面看起來和原版明顯不同第一處是 HTML 里的title標(biāo)簽改成自己學(xué)校的課程設(shè)計(jì)題目第二處是登錄頁背景圖把 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é)生成績教師端能正確聚合。第二換一臺(tái)電腦或換一個(gè)瀏覽器打開確認(rèn)不依賴特定環(huán)境。第三把“數(shù)據(jù)表”用 Excel 重新打開檢查編碼和中文字段。第四隨機(jī)點(diǎn)開三個(gè)項(xiàng)目頁確認(rèn)返回按鈕都能回到主測(cè)試臺(tái)。第五把 jQuery 引用路徑從相對(duì)路徑改成能通行的根路徑。這套檢查能過濾掉絕大多數(shù)會(huì)被答辯現(xiàn)場(chǎng)暴露的問題。這套源碼讓我想起自己第一次拿到別人寫的期末項(xiàng)目時(shí)的狀態(tài)頁面打開一片亂折騰半小時(shí)發(fā)現(xiàn)只是啟動(dòng)方式不對(duì)。從那以后我每次拿到陌生前端源碼包都強(qiáng)制先起本地服務(wù)器、再看目錄結(jié)構(gòu)、最后才打開頁面這套順序幫我少走了很多彎路。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取