簡介面向Java Web課程期末作業(yè)的實(shí)戰(zhàn)項(xiàng)目基于MVC架構(gòu)完整實(shí)現(xiàn)學(xué)生信息的增刪改查、用戶登錄及權(quán)限控制內(nèi)容覆蓋數(shù)據(jù)庫設(shè)計到前端頁面展示適合初學(xué)Java Web的學(xué)生作為課程設(shè)計參考或期末作業(yè)模板。資源共209個文件壓縮包僅4.57MB包含11個Java源碼、37個編譯后的class文件、4個SQL數(shù)據(jù)庫腳本、2個jar依賴包以及150張運(yùn)行截圖另有工程配置文件與說明文檔可幫助理解項(xiàng)目目錄結(jié)構(gòu)與部署方式。已有414人學(xué)習(xí)瀏覽。借助這套資料可快速在Eclipse/IDEA中導(dǎo)入工程并執(zhí)行SQL腳本還原數(shù)據(jù)庫結(jié)合源碼掌握J(rèn)DBC或ORM框架的數(shù)據(jù)庫操作、JSP/Servlet的請求響應(yīng)流程及MVC分層思想運(yùn)行截圖和界面素材也能為實(shí)驗(yàn)報告和答辯PPT提供直觀支撐。1. Java Web期末作業(yè)學(xué)生信息管理系統(tǒng)別急著寫代碼先想清楚交作業(yè)要什么Java Web期末作業(yè)做學(xué)生信息管理系統(tǒng)是計算機(jī)相關(guān)專業(yè)學(xué)生大概率繞不開的一道題。我見過太多人一拿到題目就打開 IDEA 新建項(xiàng)目悶頭寫了兩周增刪改查結(jié)果課堂演示三分鐘翻車瀏覽器白屏、中文亂碼、數(shù)據(jù)庫連不上。這個作業(yè)真正的難點(diǎn)從來不是 CRUD 怎么寫而是你能不能在一臺相對干凈的電腦上用最短時間把“登錄 → 查詢 → 增刪改 → 分頁 → 退出”這條閉環(huán)跑通并且把每個環(huán)節(jié)的技術(shù)點(diǎn)講明白。下面按我實(shí)際交付課程設(shè)計時最省時間的路徑來走從選型、建庫、寫代碼到現(xiàn)場演示讓新手拿到一條能復(fù)現(xiàn)的完整鏈路熟手也能直接抄到關(guān)鍵配置和踩坑邊界。2. 技術(shù)選型與項(xiàng)目骨架Servlet JSP 還是 Spring Boot期末作業(yè)的邊界在哪2.1 三種選型的對比從“能跑”到“能講”期末作業(yè)的評分邏輯通常是三件事代碼量夠、功能能跑、老師追問答得上。其中第三點(diǎn)最容易被忽視也最決定你是 80 分還是 60 分。我見過用 Spring Boot 寫完很流暢的學(xué)生被老師一句“你的自動配置是怎么起來的”問住也見過用 JSP Servlet 的因?yàn)槊總€環(huán)節(jié)都說得清原理最后拿了不錯的分?jǐn)?shù)。所以選型第一原則不是“哪個時髦”而是“哪個你能講透”。常見做法有三種。第一種是 JSP Servlet JDBC直接對應(yīng)課程里的 Java Web 章節(jié)Servlet、Filter、Session、JSP 標(biāo)簽庫全部能用上。第二種是 Spring Boot Thymeleaf開發(fā)效率高配置文件少但自動配置像個黑匣子老師往深了問容易接不住。第三種是 Spring Boot Vue 前后端分離工程上很正規(guī)但對期末作業(yè)來說方案偏重要處理跨域、兩套工程、打包部署演示現(xiàn)場一旦端口沖突或沒網(wǎng)很難收場。我的建議很直接如果你是第一次做 Java Web 項(xiàng)目就選 JSP Servlet如果你已經(jīng)工作、想用期末作業(yè)練手 Spring Boot那就提前準(zhǔn)備“為什么用 Spring Boot、它和 Servlet 的關(guān)系”這類問題。別選前后端分離除非你已經(jīng)有一個能獨(dú)立演示的前端環(huán)境。下面所有代碼示例都基于 JSP Servlet JDBC Druid 連接池這是課程設(shè)計中最穩(wěn)的組合。技術(shù)方案學(xué)習(xí)成本演示穩(wěn)定性老師追問難度代碼量JSP Servlet JDBC低高低原理都在課程范圍內(nèi)中等Spring Boot Thymeleaf中中高容易追問自動配置和原理低Spring Boot Vue高低部署復(fù)雜高涉及前后端聯(lián)調(diào)高2.2 用 IDEA 2024 創(chuàng)建 Maven Web 項(xiàng)目的最小步驟先把環(huán)境準(zhǔn)備說清楚。JDK 用 8 或 11 都能跑通本文示例IDEA 用 2024 版本。手邊沒有 JDK 的話先去把 Java 環(huán)境變量配置好一個常見坑是JAVA_HOME指向了 JRE 而不是 JDK導(dǎo)致 Maven 編譯時報javac找不到。環(huán)境變量這事屬于基本功卡住了就先用java -version和javac -version兩個命令確認(rèn)。IDEA 2024 新建項(xiàng)目時選擇 Maven Archetype 的maven-archetype-webapp骨架會自動生成一個最簡 Web 工程。如果你的 IDEA 骨架列表里找不到它可以先創(chuàng)建一個普通 Maven 項(xiàng)目然后手動補(bǔ)出src/main/webapp目錄并在pom.xml里把打包方式改成war。骨架生成后的目錄結(jié)構(gòu)是這樣的src/main/java src/main/resources src/main/webapp src/main/webapp/WEB-INF/web.xml src/main/webapp/WEB-INF/jsp src/main/webapp/css src/main/webapp/jspom.xml里需要引入四類東西Servlet API、JSTL、MySQL 驅(qū)動、Druid 連接池。下面這份依賴可以當(dāng)作最小集合project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd modelVersion4.0.0/modelVersion groupIdcom.example/groupId artifactIdstudent-manager/artifactId version1.0-SNAPSHOT/version packagingwar/packaging dependencies dependency groupIdjavax.servlet/groupId artifactIdjavax.servlet-api/artifactId version4.0.1/version scopeprovided/scope /dependency dependency groupIdjavax.servlet/groupId artifactIdjstl/artifactId version1.2/version /dependency dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId version8.0.33/version /dependency dependency groupIdcom.alibaba/groupId artifactIddruid/artifactId version1.2.20/version /dependency /dependencies /project這里的servlet-api依賴必須寫成provided意思是編譯時可用、運(yùn)行時由 Tomcat 提供。如果不寫provided打出來的 WAR 會把 Tomcat 自帶的 Servlet 類重復(fù)打包啟動輕則告警、重則沖突。JSTL 是用來在 JSP 頁面里寫循環(huán)和判斷的后面列表頁會用到。MySQL 驅(qū)動的版本要跟本機(jī)數(shù)據(jù)庫版本匹配示例用的是 MySQL 8 對應(yīng)版本。2.3 數(shù)據(jù)庫三張表與連接池配置學(xué)生信息管理系統(tǒng)最少要有用戶表和學(xué)生表為了讓項(xiàng)目看著飽滿一點(diǎn)我一般會再加一張班級表學(xué)生表通過class_id關(guān)聯(lián)班級表。這樣既方便做下拉篩選也天然多出一個“班級管理”的小功能點(diǎn)。建庫腳本可以直接貼進(jìn) Navicat 或命令行執(zhí)行CREATE DATABASE student_db DEFAULT CHARACTER SET utf8mb4; USE student_db; CREATE TABLE t_user ( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(50) NOT NULL UNIQUE, password VARCHAR(100) NOT NULL ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE t_class ( id INT PRIMARY KEY AUTO_INCREMENT, class_name VARCHAR(50) NOT NULL ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; CREATE TABLE t_student ( id INT PRIMARY KEY AUTO_INCREMENT, stu_no VARCHAR(20) NOT NULL UNIQUE, name VARCHAR(50) NOT NULL, gender VARCHAR(4), age INT, class_id INT, phone VARCHAR(20), email VARCHAR(50), create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP, CONSTRAINT fk_student_class FOREIGN KEY (class_id) REFERENCES t_class(id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; INSERT INTO t_user(username, password) VALUES (admin, 123456); INSERT INTO t_class(class_name) VALUES (軟件工程2101), (計算機(jī)科學(xué)2102);字符集一定要用utf8mb4而不是utf8。utf8mb4是 MySQL 里真正完整的 UTF-8 實(shí)現(xiàn)存表情符號和特殊字符不會亂碼。t_student里的create_time字段是給列表排序用的默認(rèn)值設(shè)為當(dāng)前時間后面分頁時按它倒序體驗(yàn)會自然很多。數(shù)據(jù)庫連接這里不要用DriverManager每訪問一次就開一個連接量小沒事老師問“連接池是什么”的時候你容易答空。更穩(wěn)的做法是引入 Druid用配置文件加一個工具類。src/main/resources下新建db.propertiesdriverClassNamecom.mysql.cj.jdbc.Driver urljdbc:mysql://localhost:3306/student_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/ShanghaiallowPublicKeyRetrievaltrue usernameroot password你自己的密碼 initialSize5 maxActive10 maxWait3000serverTimezoneAsia/Shanghai這個參數(shù)在 MySQL 8 下必須加否則 JDBC 會報時區(qū)錯誤useSSLfalse是跳過本地開發(fā)時的 SSL 握手allowPublicKeyRetrievaltrue是為了解決 MySQL 8 下用密碼登錄時偶發(fā)的公鑰檢索報錯。連接池的工具類用一個靜態(tài)代碼塊把數(shù)據(jù)源初始化好import com.alibaba.druid.pool.DruidDataSourceFactory; import javax.sql.DataSource; import java.io.InputStream; import java.sql.Connection; import java.sql.SQLException; import java.util.Properties; public class DbUtils { private static DataSource ds; static { try { InputStream in DbUtils.class.getClassLoader() .getResourceAsStream(db.properties); Properties props new Properties(); props.load(in); ds DruidDataSourceFactory.createDataSource(props); } catch (Exception e) { throw new ExceptionInInitializerError(e); } } public static Connection getConnection() throws SQLException { return ds.getConnection(); } }這段工具類里最關(guān)鍵的是getConnection()不再每次 new 連接而是從連接池里借。參數(shù)initialSize5是啟動時預(yù)建 5 個空閑連接maxActive10是池子最多同時給出 10 個連接。期末演示場景下這兩個值已經(jīng)足夠調(diào)大反而浪費(fèi)本機(jī)資源。老師問為什么用連接池你就答“避免頻繁創(chuàng)建銷毀連接拿連接的時間能省幾十毫秒”這已經(jīng)是一個合格的加分點(diǎn)。3. 核心功能實(shí)現(xiàn)用 Filter Servlet 把登錄、CRUD、分頁一次做通3.1 登錄會話與權(quán)限攔截Filter 只寫一次所有頁面都生效登錄校驗(yàn)不能在每個 Servlet 里都寫一遍那樣代碼重復(fù)度太高還容易漏。正確做法是用 Filter 做統(tǒng)一攔截請求先過 Filter檢查 Session 里有沒有登錄用戶沒有就重定向到登錄頁有才放行到目標(biāo) Servlet。這樣所有業(yè)務(wù)頁面一次攔截老師問“怎么控制未登錄訪問”的時候你可以直接指這一處代碼。import javax.servlet.*; import javax.servlet.annotation.WebFilter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; WebFilter(/*) public class LoginFilter implements Filter { Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletRequest req (HttpServletRequest) request; HttpServletResponse resp (HttpServletResponse) response; String uri req.getRequestURI(); // 登錄頁、登錄接口、靜態(tài)資源不需要登錄就能訪問 if (uri.contains(/login) || uri.endsWith(.css) || uri.endsWith(.js) || uri.endsWith(.png) || uri.endsWith(.jpg)) { chain.doFilter(request, response); return; } // 沒有登錄用戶就踢回登錄頁 if (req.getSession().getAttribute(user) null) { resp.sendRedirect(req.getContextPath() /login.jsp); return; } chain.doFilter(request, response); } }注意uri.contains(/login)這個判斷比較粗但足夠覆蓋login.jsp和LoginServlet兩個路徑。如果你把登錄接口命名為doLogin之類的就要把判斷改成對應(yīng)字符串。.css、.js這些靜態(tài)資源必須放行否則瀏覽器加載樣式時會被攔到登錄頁頁面打開后沒有排版。登錄成功后的會話控制我用一個LoginServlet來收口import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; WebServlet(/login) public class LoginServlet extends HttpServlet { Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding(UTF-8); String username req.getParameter(username); String password req.getParameter(password); UserDao userDao new UserDao(); User user userDao.findByUsernameAndPassword(username, password); if (user null) { req.setAttribute(error, 用戶名或密碼錯誤); req.getRequestDispatcher(/login.jsp).forward(req, resp); } else { req.getSession().setAttribute(user, user); resp.sendRedirect(req.getContextPath() /student?actionlist); } } }這里的兩個細(xì)節(jié)值得背下來。登錄失敗用forward轉(zhuǎn)發(fā)因?yàn)橐獛е鴈rror提示回到登錄頁并且保留用戶輸入登錄成功用sendRedirect重定向因?yàn)槿绻恢囟ㄏ蛴脩舭?F5 刷新會把登錄請求重復(fù)提交。會話默認(rèn)超時時間是 30 分鐘Tomcat 的web.xml里可以調(diào)但期末項(xiàng)目用默認(rèn)值就行。3.2 學(xué)生信息的增刪改查DAO 層與 PreparedStatement 防注入DAO 層就是把所有 SQL 收在同一個類里Servlet 只負(fù)責(zé)拿參數(shù)和跳轉(zhuǎn)頁面。這樣頁面改了不碰 SQLSQL 改了不碰頁面。下面這段是一個精簡但完整的StudentDao核心方法覆蓋了列表、新增、修改、刪除、按 ID 查詢五件事import java.sql.*; import java.util.ArrayList; import java.util.List; public class StudentDao { public ListStudent findAll() { String sql SELECT * FROM t_student ORDER BY create_time DESC; ListStudent students new ArrayList(); try (Connection conn DbUtils.getConnection(); PreparedStatement ps conn.prepareStatement(sql); ResultSet rs ps.executeQuery()) { while (rs.next()) { students.add(mapRow(rs)); } } catch (SQLException e) { throw new RuntimeException(e); } return students; } public Student findById(int id) { String sql SELECT * FROM t_student WHERE id ?; try (Connection conn DbUtils.getConnection(); PreparedStatement ps conn.prepareStatement(sql)) { ps.setInt(1, id); try (ResultSet rs ps.executeQuery()) { if (rs.next()) { return mapRow(rs); } } } catch (SQLException e) { throw new RuntimeException(e); } return null; } public int insert(Student s) { String sql INSERT INTO t_student(stu_no, name, gender, age, class_id, phone, email) VALUES(?, ?, ?, ?, ?, ?, ?); try (Connection conn DbUtils.getConnection(); PreparedStatement ps conn.prepareStatement(sql)) { ps.setString(1, s.getStuNo()); ps.setString(2, s.getName()); ps.setString(3, s.getGender()); ps.setInt(4, s.getAge()); ps.setInt(5, s.getClassId()); ps.setString(6, s.getPhone()); ps.setString(7, s.getEmail()); return ps.executeUpdate(); } catch (SQLException e) { throw new RuntimeException(e); } } public int update(Student s) { String sql UPDATE t_student SET stu_no?, name?, gender?, age?, class_id?, phone?, email? WHERE id?; try (Connection conn DbUtils.getConnection(); PreparedStatement ps conn.prepareStatement(sql)) { ps.setString(1, s.getStuNo()); ps.setString(2, s.getName()); ps.setString(3, s.getGender()); ps.setInt(4, s.getAge()); ps.setInt(5, s.getClassId()); ps.setString(6, s.getPhone()); ps.setString(7, s.getEmail()); ps.setInt(8, s.getId()); return ps.executeUpdate(); } catch (SQLException e) { throw new RuntimeException(e); } } public int delete(int id) { String sql DELETE FROM t_student WHERE id?; try (Connection conn DbUtils.getConnection(); PreparedStatement ps conn.prepareStatement(sql)) { ps.setInt(1, id); return ps.executeUpdate(); } catch (SQLException e) { throw new RuntimeException(e); } } private Student mapRow(ResultSet rs) throws SQLException { Student s new Student(); s.setId(rs.getInt(id)); s.setStuNo(rs.getString(stu_no)); s.setName(rs.getString(name)); s.setGender(rs.getString(gender)); s.setAge(rs.getInt(age)); s.setClassId(rs.getInt(class_id)); s.setPhone(rs.getString(phone)); s.setEmail(rs.getString(email)); return s; } }所有 SQL 都用?占位符和PreparedStatement這是期末作業(yè)里最容易拿分也最容易翻車的點(diǎn)。如果你圖省事用字符串拼接寫 SQL搜索框里輸入1 OR 11就能把整個表拉出來甚至刪掉這在答辯現(xiàn)場被演示出來基本等于交白卷。PreparedStatement的setXxx方法第一個參數(shù)從 1 開始第二個參數(shù)是實(shí)際值它會在數(shù)據(jù)庫端做參數(shù)轉(zhuǎn)義輸入的內(nèi)容永遠(yuǎn)只是數(shù)據(jù)不參與 SQL 語法解析。findAll在正式分頁場景里其實(shí)用不上真正工作的是后面queryPage方法。但保留它是為了方便臨時調(diào)試數(shù)據(jù)量小的時候直接findAll看一眼對不對再去談分頁。3.3 分頁與條件搜索一個 PageBean 解決 80% 的列表需求期末作業(yè)里“分頁”是老師最常問的功能。很多同學(xué)直接用 SQL 里L(fēng)IMIT寫死偏移量然后頁面上一頁下一頁地裸調(diào)這也能跑但代碼很散。我習(xí)慣的做法是封裝一個極簡的PageBeanT把所有和分頁有關(guān)的字段都包進(jìn)去import java.util.List; public class PageBeanT { private int currentPage 1; private int pageSize 10; private long total; private ListT list; public long getTotalPage() { if (total 0) { return 0; } return total % pageSize 0 ? total / pageSize : total / pageSize 1; } public int getCurrentPage() { return currentPage; } public void setCurrentPage(int currentPage) { this.currentPage currentPage; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize pageSize; } public long getTotal() { return total; } public void setTotal(long total) { this.total total; } public ListT getList() { return list; } public void setList(ListT list) { this.list list; } }getTotalPage()的寫法是一個細(xì)節(jié)total % pageSize 0時正好整除頁數(shù)是商否則商加 1。比如 25 條數(shù)據(jù)、每頁 10 條總頁數(shù)是 3。這個計算如果寫成(int) Math.ceil(total / pageSize)反而容易因?yàn)檎麛?shù)除法丟精度不如直接用取余判斷。分頁查詢帶著關(guān)鍵詞搜索是另一個容易寫錯的地方。很多人只給數(shù)據(jù)列表 SQL 加了LIMIT忘記COUNT查詢也要帶同樣的搜索條件結(jié)果總條數(shù)是全表的頁面跳著跳著頁數(shù)就不對了。下面是我常用的queryPage寫法public PageBeanStudent queryPage(int currentPage, int pageSize, String keyword) { PageBeanStudent pb new PageBean(); pb.setCurrentPage(currentPage); pb.setPageSize(pageSize); StringBuilder where new StringBuilder( WHERE 11 ); ListObject condParams new ArrayList(); if (keyword ! null !keyword.trim().isEmpty()) { where.append( AND (name LIKE ? OR stu_no LIKE ?) ); String like % keyword.trim() %; condParams.add(like); condParams.add(like); } // 先查總條數(shù)條件必須和列表查詢一致 String countSql SELECT COUNT(*) FROM t_student where; try (Connection conn DbUtils.getConnection(); PreparedStatement ps conn.prepareStatement(countSql)) { for (int i 0; i condParams.size(); i) { ps.setObject(i 1, condParams.get(i)); } try (ResultSet rs ps.executeQuery()) { if (rs.next()) { pb.setTotal(rs.getLong(1)); } } } catch (SQLException e) { throw new RuntimeException(e); } // 再查當(dāng)前頁數(shù)據(jù)排序交給 SQL不要在 Java 里做 String listSql SELECT * FROM t_student where ORDER BY create_time DESC LIMIT ?, ?; int offset (currentPage - 1) * pageSize; try (Connection conn DbUtils.getConnection(); PreparedStatement ps conn.prepareStatement(listSql)) { int idx 1; for (Object param : condParams) { ps.setObject(idx, param); } ps.setInt(idx, offset); ps.setInt(idx, pageSize); try (ResultSet rs ps.executeQuery()) { ListStudent students new ArrayList(); while (rs.next()) { students.add(mapRow(rs)); } pb.setList(students); } } catch (SQLException e) { throw new RuntimeException(e); } return pb; }注意兩個參數(shù)列表必須分開處理countSql只需要搜索條件列表 SQL 才需要追加offset和pageSize。如果復(fù)用同一個參數(shù)列表把offset也傳進(jìn)count總條數(shù)就會算錯。排序我用ORDER BY create_time DESC在數(shù)據(jù)庫里做盡量不要把全部數(shù)據(jù)查出來在 Java 內(nèi)存里排序那是冒泡排序該干的事不是 Web 項(xiàng)目該干的事。Servlet 里拿到請求參數(shù)后還要做一層數(shù)字容錯。用戶可能在地址欄手動輸入?pageabc這時Integer.parseInt會拋異常頁面直接 500。常見的兜底寫法是String pageStr req.getParameter(page); int page 1; if (pageStr ! null) { try { page Integer.parseInt(pageStr); } catch (NumberFormatException e) { page 1; } } studentDao.queryPage(page, 10, keyword);頁碼越界也要處理小于 1 就設(shè)為 1大于總頁數(shù)就設(shè)為總頁數(shù)。否則用戶點(diǎn)下一頁點(diǎn)到?jīng)]數(shù)據(jù)時頁面空蕩蕩的現(xiàn)場體驗(yàn)很扣分。4. 前端頁面與交互原生 HTML CSS 讓作業(yè)看著像個成品4.1 布局一頁式管理臺與狀態(tài)提示的寫法期末評審里頁面不用驚艷但必須整潔統(tǒng)一。最省力的做法是抽一個公共頭部 JSP每個頁面都 include 它頂部導(dǎo)航和側(cè)邊菜單只寫一次。后續(xù)要加菜單改一個文件就夠。這里的關(guān)鍵是路徑必須用${pageContext.request.contextPath}拼不能寫死/student或相對路徑否則在不同層級的頁面里會找錯資源。% page pageEncodingUTF-8 % % taglib prefixc urihttp://java.sun.com/jsp/jstl/core % c:set varctx value${pageContext.request.contextPath} / div classtopbar span classbrand學(xué)生信息管理系統(tǒng)/span span classuser-info 歡迎你${sessionScope.user.username} a href${ctx}/logout退出/a /span /div div classsidebar a href${ctx}/student?actionlist學(xué)生列表/a a href${ctx}/student?actionaddPage新增學(xué)生/a a href${ctx}/class?actionlist班級管理/a /divsessionScope.user.username是 EL 表達(dá)式直接從 Session 里取當(dāng)前登錄用戶名不需要在 Servlet 里再往 request 放一遍。logout是一個小 Servlet做的事情就是session.invalidate()然后重定向回登錄頁三行代碼但能讓你的系統(tǒng)有始有終。樣式方面我一般不會引入整套 Bootstrap。第一演示現(xiàn)場可能沒外網(wǎng)CDN 加載不出來頁面就裸奔了第二老師知道你手寫 CSS 反而會覺得你基礎(chǔ)扎實(shí)。下面這份極簡樣式足夠撐起演示場面* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, sans-serif; background: #f5f7fa; } .topbar { height: 56px; background: #2c3e50; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; } .topbar a { color: #fff; text-decoration: none; } .sidebar { width: 200px; position: fixed; top: 56px; bottom: 0; background: #34495e; padding-top: 16px; } .sidebar a { display: block; color: #ddd; padding: 12px 20px; text-decoration: none; } .sidebar a:hover { background: #2c3e50; color: #fff; } .content { margin-left: 200px; padding: 24px; }布局上最需要注意的細(xì)節(jié)是側(cè)邊欄用了position: fixed內(nèi)容區(qū)就要加margin-left抵消側(cè)邊欄寬度。如果你漏了margin-left內(nèi)容會從側(cè)邊欄下面穿過去現(xiàn)場展示時所有頁面都錯位這種低級錯誤一旦出現(xiàn)比功能缺失更影響觀感。表格頁面再加一個常規(guī)的table樣式邊框、行間距、操作按鈕的顏色統(tǒng)一一下整體就夠看了。4.2 表單校驗(yàn)與二次確認(rèn)把低級錯誤擋在提交前新增和編輯共用一個表單頁面這是很常見的做法。表單里的校驗(yàn)我推薦純 JavaScript不引 jQuery、不引 Vue。期末項(xiàng)目場景下任何外部依賴都是潛在風(fēng)險點(diǎn)現(xiàn)場斷網(wǎng)時CDN 加載失敗你的校驗(yàn)就失效了。而且原生 JavaScript 幾十行完全能覆蓋“必填、格式、范圍”這類需求。function checkStudentForm() { var name document.getElementById(name).value.trim(); if (!name) { alert(姓名不能為空); return false; } var stuNo document.getElementById(stuNo).value.trim(); if (!stuNo) { alert(學(xué)號不能為空); return false; } var age parseInt(document.getElementById(age).value, 10); if (isNaN(age) || age 10 || age 60) { alert(年齡必須在10到60之間); return false; } var phone document.getElementById(phone).value.trim(); if (phone !/^1[3-9]\d{9}$/.test(phone)) { alert(手機(jī)號格式不正確); return false; } return true; }這段代碼有幾個設(shè)計取舍要說清楚。手機(jī)號校驗(yàn)先判空再正則因?yàn)槭謾C(jī)號可以不是必填正則^1[3-9]\d{9}$是大陸手機(jī)號最寬松的校驗(yàn)只判斷首位和位數(shù)不引入復(fù)雜的號段規(guī)則演示場景夠用。年齡用parseInt轉(zhuǎn)換后判斷范圍能擋住“abc”這類輸入。后面的表單提交這樣綁定form action${ctx}/student methodpost onsubmitreturn checkStudentForm() input typehidden nameaction valueinsert / input typehidden nameid value${student.id} / !-- 其他輸入框 -- button typesubmit保存/button /formonsubmit返回false時表單不會提交這是瀏覽器原生行為。同樣的表單既用于新增也用于編輯靠一個隱藏的action字段區(qū)分新增時提交insert編輯時提交update。id字段在新增時為空編輯時回填Servlet 里判斷這個字段即可。刪除操作的二次確認(rèn)也別省a hrefjavascript:void(0) onclickif (confirm(確定刪除該學(xué)生嗎)) { location.href${ctx}/student?actiondeleteid${s.id} } classbtn btn-danger刪除/a確認(rèn)框彈出來后點(diǎn)“確定”才發(fā)請求點(diǎn)“取消”什么都不發(fā)生。這行代碼能擋住大部分手滑操作。需要強(qiáng)調(diào)一點(diǎn)前端校驗(yàn)只是體驗(yàn)不是安全邊界。攻擊者可以繞過頁面直接往 Servlet 發(fā)請求所以 Servlet 里必須再校驗(yàn)一次必填字段和數(shù)字范圍。前端校驗(yàn)幫你擋住正常用戶的誤操作后端校驗(yàn)幫你擋住異常請求兩者不能互相替代。5. Java Web期末作業(yè)避坑指南5 個讓項(xiàng)目當(dāng)場翻車的問題5.1 中文亂碼三個位置各管各的坑現(xiàn)象頁面本身中文正常但往數(shù)據(jù)庫里插入學(xué)生姓名后變成???或者 JSP 轉(zhuǎn)發(fā)之后的列表頁顯示一串亂碼又或者 URL 里帶中文搜索關(guān)鍵字Servlet 取出來是亂碼。原因Java Web 的中文亂碼從來不是一個原因而是三個位置都要編碼一致。第一請求參數(shù)解析時如果request.setCharacterEncoding(UTF-8)沒在讀取參數(shù)前調(diào)用POST 參數(shù)按ISO-8859-1解析中文必亂第二響應(yīng)輸出時response.setContentType(text/html;charsetUTF-8)沒設(shè)置瀏覽器會亂猜第三JDBC 連接串里沒帶characterEncodingutf8MySQL 連接層的字符集和庫表不一致數(shù)據(jù)入庫時變成問號。解決最省心的做法是寫一個EncodingFilter在所有業(yè)務(wù)代碼之前統(tǒng)一處理請求和響應(yīng)編碼。import javax.servlet.*; import java.io.IOException; public class EncodingFilter implements Filter { Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { request.setCharacterEncoding(UTF-8); response.setContentType(text/html;charsetUTF-8); chain.doFilter(request, response); } }在web.xml里注冊時url-pattern必須寫/*并且放在過濾器列表的第一個位置。如果還有別的 Filter編碼 Filter 必須最先執(zhí)行因?yàn)楹罄m(xù) Filter 和 Servlet 都要基于它設(shè)置好的編碼讀寫數(shù)據(jù)。數(shù)據(jù)庫那邊確認(rèn)db.properties里的 URL 帶了characterEncodingutf8建表語句用utf8mb4這條鏈就閉合了。檢查亂碼時按“頁面 → 請求 → 數(shù)據(jù)庫”一層層排查不要一上來就改代碼。5.2 頁面能打開但樣式全丟靜態(tài)資源和路徑雙重坑現(xiàn)象登錄頁能打開但沒有任何樣式整個頁面是純 HTML登錄成功后跳到學(xué)生列表圖片和 CSS 全部加載失敗控制臺一堆 404。原因兩個。第一LoginFilter攔截了/*后沒有放行靜態(tài)資源瀏覽器請求/css/style.css時被重定向到登錄頁重定向返回的是一段 HTML樣式自然加載不了。第二JSP 里用了相對路徑比如hrefcss/style.css在login.jsp里能加載到了student/list.jsp這種深層路徑時瀏覽器會去找/student/css/style.css結(jié)果還是 404。解決Filter 放行靜態(tài)資源這在 3.1 的代碼里已經(jīng)做了JSP 里統(tǒng)一用絕對路徑。我習(xí)慣在每個 JSP 頂部先聲明ctxc:set varctx value${pageContext.request.contextPath} / link relstylesheet href${ctx}/css/style.css這樣無論頁面在哪個目錄層級瀏覽器都會從項(xiàng)目根路徑開始找資源。檢查的時候看一眼瀏覽器地址欄如果 CSS 地址沒有contextPath前綴基本就是路徑問題。5.3 數(shù)據(jù)庫驅(qū)動加載失敗和時區(qū)報錯現(xiàn)象Tomcat 啟動后第一次訪問頁面報ClassNotFoundException: com.mysql.cj.jdbc.Driver或者頁面能打開但執(zhí)行查詢時報The server time zone value GMT is unrecognized。原因驅(qū)動包沒進(jìn)運(yùn)行環(huán)境。如果你用 IDEA 的 Artifacts 方式部署Maven 依賴默認(rèn)會進(jìn) lib但如果依賴的 scope 寫錯成provided運(yùn)行時就拿不到。第二類是 MySQL 8 和 JDBC 驅(qū)動之間的時區(qū)協(xié)商失敗必須顯式指定時區(qū)。解決先檢查pom.xml里 MySQL 驅(qū)動依賴的scope確認(rèn)是compile默認(rèn)值不是provided。再看db.properties的 URL 后面是否帶了serverTimezoneAsia/Shanghai驅(qū)動類名也要對得上MySQL 8 用com.mysql.cj.jdbc.DriverMySQL 5 用com.mysql.jdbc.Driver。這兩個驅(qū)動類名看起來只差一個cj但用錯了會直接ClassNotFoundException。如果你的項(xiàng)目里兩個版本驅(qū)動都試過記得清理一下本地 Maven 倉庫的舊 jar避免 IDEA 拿了緩存里的老版本。5.4 Tomcat 啟動失敗端口被占用現(xiàn)象IDEA 點(diǎn)啟動 Tomcat控制臺幾秒后報Address already in use: JVM_Bind null:8080或者彈窗提示端口沖突。原因上一次運(yùn)行的 Java 進(jìn)程沒有退出8080 端口還被占用也可能是本地其它開發(fā)服務(wù)占了 8080。這個坑看起來低級但在答辯前的緊張時刻最容易出現(xiàn)因?yàn)楹脦讉€人共用一個演示機(jī)器前面的人項(xiàng)目沒停你后啟動就沖突了。解決Windows 下打開命令行netstat -ano | findstr :8080 taskkill /PID 1234 /F1234換成netstat結(jié)果顯示的占用進(jìn)程 PID。macOS 或 Linux 用lsof -i:8080和kill -9 PID。如果你不想殺進(jìn)程直接改 Tomcat 端口也行IDEA 的 Run Configuration 里把 HTTP port 改成 8081但注意改完后所有訪問地址都要帶新端口。這里還有個血淚經(jīng)驗(yàn)改端口前先確認(rèn)老師演示用的就是新端口不然現(xiàn)場說“我項(xiàng)目在 8081”等于自己給自己加難度。5.5 SQL 注入搜索框里一句密碼直接把表刪了現(xiàn)象搜索框輸入1 OR 11列表返回了全部學(xué)生甚至有人在登錄頁密碼框輸入 OR 11 --直接繞過登錄成功。這是 Web 項(xiàng)目安全里最典型的應(yīng)用層注入比防火墻和服務(wù)器安全配置更貼近你的代碼。原因SQL 語句是用字符串拼接出來的用戶輸入的內(nèi)容被當(dāng)成了 SQL 語法的一部分。比如下面這段反面寫法// 反面教材不要這樣寫 String sql SELECT * FROM t_user WHERE username username AND password password ;當(dāng)password是 OR 11 --時拼出來的 SQL 變成SELECT * FROM t_user WHERE usernameadmin AND password OR 11 --OR 11恒為真后面的--把真實(shí)密碼條件注釋掉于是這條查詢直接通過。如果業(yè)務(wù)代碼里再順手執(zhí)行了DELETE結(jié)果就是整表數(shù)據(jù)被清空。解決所有 SQL 一律用PreparedStatement占位符就像本文所有 DAO 代碼那樣。占位符把輸入當(dāng)字符串參數(shù)傳給數(shù)據(jù)庫而不是拼進(jìn) SQL 語法樹注入語句自然失效。老師問 SQL 注入時你把上面這個反面例子和PreparedStatement的正確寫法對比講出來這比背概念得分高得多。還有一個小細(xì)節(jié)登錄接口的密碼不要用 SQL 條件去匹配先按用戶名查出用戶再在 Java 里比對密碼哈希這樣一個用戶存在與否就不會通過 SQL 暴露出來。6. 讓作業(yè)多拿 10 分的驗(yàn)證清單與演示技巧6.1 驗(yàn)收自測清單答辯前最怕的是“自己覺得沒問題現(xiàn)場一演示就崩”。我每次交付前都會走一遍下面的清單照著操作預(yù)期結(jié)果全部符合才算過關(guān)驗(yàn)證項(xiàng)操作預(yù)期結(jié)果冷啟動關(guān)閉 Tomcat重新啟動后訪問首頁正常進(jìn)入登錄頁無報錯登錄輸入錯誤密碼頁面提示用戶名或密碼錯誤登錄成功輸入 admin / 123456跳轉(zhuǎn)到學(xué)生列表顯示當(dāng)前用戶名未登錄攔截不登錄直接訪問/student?actionlist被重定向回登錄頁中文新增新增一名“張三”并保存列表出現(xiàn)記錄無亂碼分頁造 25 條數(shù)據(jù)后翻頁共 3 頁頁碼正確上一頁/下一頁可用搜索搜索框輸入“張”只顯示姓名帶“張”的記錄刪除點(diǎn)刪除并確認(rèn)記錄消失刷新后不再出現(xiàn)這個清單本身也可以寫進(jìn)項(xiàng)目 README老師打開你的項(xiàng)目時看到一份自測報告印象分會明顯不一樣。6.2 演示時的講解順序真正演示時不要從頭念代碼更不要在 IDE 里找文件找半天。我的習(xí)慣是先講業(yè)務(wù)閉環(huán)再講一個技術(shù)亮點(diǎn)。業(yè)務(wù)閉環(huán)就是“登錄進(jìn)入系統(tǒng) → 看到分頁列表 → 搜索 → 新增一條 → 修改它 → 刪除它 → 退出登錄”全程兩三分鐘功能全覆蓋。技術(shù)亮點(diǎn)選一個你最熟的講深一點(diǎn)。比如登錄攔截的 Filter 是怎么放行靜態(tài)資源的、PreparedStatement 為什么能防 SQL 注入、分頁的COUNT和LIMIT為什么條件一致。一個點(diǎn)講透勝于十個點(diǎn)泛泛而談。有一個我踩過的教訓(xùn)演示前一定要做一次“冷啟動測試”就是把瀏覽器緩存、Cookie 和本地歷史記錄全部清掉再打開項(xiàng)目。我有一次沒清瀏覽器狀態(tài)現(xiàn)場登錄時直接帶著上一次的舊 Session 跳到列表頁老師沒看到登錄流程追問了一句“你是不是沒做登錄校驗(yàn)”解釋了半天才說清。后來我每次答辯前都強(qiáng)制自己按上面的驗(yàn)證清單過一遍寧可多花十分鐘也不在現(xiàn)場解釋“剛才其實(shí)可以”。希望這個習(xí)慣也能幫到你。本文還有配套的精品資源點(diǎn)擊獲取