構建查詢班級網頁：身份證/學號檢索，參考省市區三級聯動模式

需求：輸入身份證號或學號，提交後顯示名單對應信息。架構參考「省市區三級聯動」：前端輸入 → AJAX 請求 → 後端查庫 → JSON 返回 → 前端渲染。

數據庫設計

CREATE TABLE student (
    id VARCHAR(20) PRIMARY KEY,  -- 學號
    id_card VARCHAR(18) UNIQUE,  -- 身份證
    name VARCHAR(50),
    class_id INT,
    FOREIGN KEY (class_id) REFERENCES class(id)
);
CREATE TABLE class (
    id INT PRIMARY KEY,
    name VARCHAR(50)
);

後端接口

@GetMapping("/api/student/query")
public Result query(@RequestParam String keyword) {
    // keyword 可能是學號或身份證
    Student s = studentService.findByIdOrIdCard(keyword);
    return Result.ok(s);
}

前端關鍵點

• 輸入框 input 綁定 debounce（300ms）減少請求
• 載入狀態 disabled + spinner
• 結果渲染模板化，空狀態友好提示

參考教程

省市區三級聯動完整實現 — 邏輯完全可復用，只需換 SQL 與字段。