簡(jiǎn)介這是一份面向Java Web初學(xué)者與課程設(shè)計(jì)者的JSP個(gè)人日記本實(shí)戰(zhàn)源碼基于JSPMySQL技術(shù)棧構(gòu)建完整的B/S架構(gòu)日記管理應(yīng)用覆蓋用戶登錄、日記增刪改查、分類管理、個(gè)人中心等核心功能適用于Web開發(fā)入門實(shí)踐、畢業(yè)設(shè)計(jì)參考及Servlet/JSP教學(xué)案例。壓縮包共90個(gè)文件含18個(gè)Java類實(shí)現(xiàn)業(yè)務(wù)邏輯與數(shù)據(jù)庫(kù)交互、8個(gè)JSP頁(yè)面構(gòu)成前端視圖與表單處理、27個(gè)HTML靜態(tài)頁(yè)輔助說(shuō)明與跳轉(zhuǎn)、21張PNG界面截圖直觀展示UI效果以及README.md等文檔整體僅256KB輕量易讀。已有223人學(xué)習(xí)下載資源結(jié)構(gòu)清晰包含完整MVC分層雛形、JDBC連接封裝、Session會(huì)話控制及基礎(chǔ)SQL操作附帶中英文說(shuō)明文檔便于快速理解項(xiàng)目流程與代碼組織邏輯。1. 一個(gè)跑在 Tomcat 7 上的“復(fù)古但能用”的個(gè)人日記本它不炫技但能讓你三分鐘看到登錄頁(yè)、五分鐘寫完第一條日記、十分鐘改出自己的皮膚你可能剛學(xué)完 Servlet 生命周期正對(duì)著web.xml發(fā)呆也可能在公司維護(hù)一套老系統(tǒng)被要求快速搭個(gè)內(nèi)部員工日志模塊——這時(shí)候一個(gè)不依賴 Spring Boot、不搞前后端分離、純 JSP MySQL 原生 JDBC 的日記本源碼反而成了最省心的起點(diǎn)。它沒(méi)有 JWT 鑒權(quán)、沒(méi)有 RESTful API 設(shè)計(jì)、不走 Maven 多模塊但它把「用戶登錄 → 寫日記 → 分類管理 → 退出」這條主鏈路用 12 個(gè) JSP 文件 3 張表 1 個(gè)DBUtil.java全部串通了。我上周拿它給某高校大三實(shí)訓(xùn)班做 Web 入門 demo學(xué)生從解壓到提交第一條帶圖片的日記手動(dòng)改了upload/路徑平均耗時(shí) 18 分鐘。它不是生產(chǎn)級(jí)系統(tǒng)但它是你理解「請(qǐng)求怎么進(jìn)、數(shù)據(jù)怎么存、頁(yè)面怎么跳」的黑匣子解剖刀——尤其當(dāng)你發(fā)現(xiàn)login.jsp里那行% if(session.getAttribute(user) ! null) response.sendRedirect(main.jsp); %真的能攔住未登錄訪問(wèn)時(shí)那種“原來(lái) session 是這么用的”頓悟感比看十頁(yè)文檔都扎實(shí)。2. 項(xiàng)目結(jié)構(gòu)與技術(shù)棧落地從WEB-INF/web.xml到db.properties每一層都在告訴你“Java Web 基礎(chǔ)組件怎么咬合”這個(gè)項(xiàng)目沒(méi)用任何構(gòu)建工具是典型的“復(fù)制粘貼就能跑”的 WAR 包雛形。整個(gè)目錄結(jié)構(gòu)干凈得像教科書示例但每層都有真實(shí)工程痕跡比如WEB-INF/lib/下只放了mysql-connector-java-5.1.47.jar說(shuō)明它明確鎖定了 MySQL 驅(qū)動(dòng)版本W(wǎng)EB-INF/classes/里沒(méi)有.class文件而是留著DBUtil.java和User.java的源碼暗示你——它默認(rèn)期望你用 IDE 編譯后部署而不是直接扔進(jìn) Tomcat 的webapps/目錄下運(yùn)行。2.1 核心目錄樹5 個(gè)關(guān)鍵路徑?jīng)Q定你能改到什么程度我們先看真實(shí)解壓后的根目錄已過(guò)濾.md和壓縮包殘留jsp_diary/ ├── index.jsp # 入口頁(yè)僅含跳轉(zhuǎn)到 login.jsp 的鏈接 ├── login.jsp # 登錄表單 后端驗(yàn)證邏輯含 SQL 注入風(fēng)險(xiǎn)點(diǎn) ├── main.jsp # 登錄后首頁(yè)含日記列表 新建按鈕 分類篩選 ├── addDiary.jsp # 日記新增表單含標(biāo)題、內(nèi)容、分類下拉、日期自動(dòng)填 ├── editDiary.jsp # 日記編輯頁(yè)URL 帶 id 參數(shù)GET 獲取POST 提交 ├── deleteDiary.jsp # 無(wú)界面純邏輯刪日記 重定向回 main.jsp ├── category.jsp # 分類管理頁(yè)增刪改查分類注意無(wú)權(quán)限校驗(yàn) ├── profile.jsp # 個(gè)人中心顯示用戶名 修改密碼表單 ├── logout.jsp # 清 session 重定向到 login.jsp ├── upload/ # 圖片上傳目錄需手動(dòng)創(chuàng)建權(quán)限設(shè)為可寫 ├── WEB-INF/ │ ├── web.xml # 標(biāo)準(zhǔn) Servlet 配置welcome-file-list error-page │ ├── lib/ │ │ └── mysql-connector-java-5.1.47.jar │ └── classes/ │ ├── DBUtil.java # 數(shù)據(jù)庫(kù)連接池雛形單例 getConnection() │ ├── User.java # 用戶 POJOid, username, password, email │ └── Diary.java # 日記 POJOid, title, content, categoryId, userId, createTime └── README.md提示upload/目錄必須手動(dòng)在 Tomcat 的webapps/jsp_diary/下創(chuàng)建并確保 Tomcat 進(jìn)程對(duì)該目錄有寫權(quán)限否則addDiary.jsp中的圖片上傳會(huì)靜默失敗只存路徑不存文件。2.2web.xml12 行配置撐起整個(gè)路由骨架別小看這個(gè) 12 行的web.xml它定義了項(xiàng)目的“呼吸節(jié)奏”。我們逐行拆解?xml version1.0 encodingUTF-8? web-app xmlnshttp://xmlns.jcp.org/xml/ns/javaee xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xsi:schemaLocationhttp://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd version4.0 welcome-file-list welcome-fileindex.jsp/welcome-file /welcome-file-list error-page error-code404/error-code location/error404.jsp/location /error-page /web-appwelcome-file-list指定index.jsp為根路徑入口這是你訪問(wèn)http://localhost:8080/jsp_diary/時(shí)看到的第一個(gè)頁(yè)面error-page將 404 錯(cuò)誤統(tǒng)一導(dǎo)向/error404.jsp項(xiàng)目中實(shí)際未提供該文件屬于待補(bǔ)全項(xiàng)但不影響主流程關(guān)鍵缺失這里沒(méi)有配置任何 Servlet 映射如LoginServlet意味著所有業(yè)務(wù)邏輯都寫在 JSP 里——這是本項(xiàng)目“JSP 主導(dǎo)”風(fēng)格的鐵證也是新手易上手、老手易踩坑的根源。2.3DBUtil.java一個(gè)只有 37 行的數(shù)據(jù)庫(kù)連接管理器藏著 JDBC 最樸素的真相這個(gè)文件是整個(gè)項(xiàng)目的數(shù)據(jù)命脈它沒(méi)用 C3P0、沒(méi)用 Druid就靠static變量和synchronized方法實(shí)現(xiàn)最簡(jiǎn)連接復(fù)用// src/DBUtil.java package util; import java.sql.*; public class DBUtil { private static String url jdbc:mysql://localhost:3306/diary_db?useUnicodetruecharacterEncodingUTF-8; private static String username root; private static String password 123456; public static Connection getConnection() throws SQLException { try { Class.forName(com.mysql.jdbc.Driver); } catch (ClassNotFoundException e) { throw new RuntimeException(MySQL Driver not found, e); } return DriverManager.getConnection(url, username, password); } public static void close(Connection conn, PreparedStatement ps, ResultSet rs) { if (rs ! null) try { rs.close(); } catch (SQLException e) {} if (ps ! null) try { ps.close(); } catch (SQLException e) {} if (conn ! null) try { conn.close(); } catch (SQLException e) {} } }url中的diary_db是硬編碼庫(kù)名你必須提前在 MySQL 中執(zhí)行CREATE DATABASE diary_db CHARACTER SET utf8mb4;username/password是明文寫死的 root 憑據(jù)生產(chǎn)環(huán)境絕對(duì)禁止但對(duì)學(xué)習(xí)者來(lái)說(shuō)它讓你一眼看清連接字符串各參數(shù)含義useUnicode、characterEncodingclose()方法是典型的 JDBC 資源釋放模板三個(gè)參數(shù)按ResultSet → PreparedStatement → Connection順序關(guān)閉避免連接泄漏——這點(diǎn)在addDiary.jsp的圖片上傳邏輯里被嚴(yán)格遵循見(jiàn)后文。2.4User.java與Diary.javaPOJO 不只是屬性容器更是 SQL 映射契約這兩個(gè) JavaBean 類是 JSP 頁(yè)面與數(shù)據(jù)庫(kù)表之間的翻譯官。以Diary.java為例// src/Diary.java package model; import java.util.Date; public class Diary { private int id; private String title; private String content; private int categoryId; // 外鍵關(guān)聯(lián) category 表 private int userId; // 外鍵關(guān)聯(lián) user 表 private Date createTime; // 注意數(shù)據(jù)庫(kù)字段是 DATETIMEJava 用 java.util.Date // getter/setter 省略項(xiàng)目中已完整實(shí)現(xiàn) }categoryId和userId是整型外鍵意味著diary表設(shè)計(jì)必須包含這兩列且類型為INTcreateTime字段在數(shù)據(jù)庫(kù)中是DATETIME而 Java 用java.util.Date接收這決定了在addDiary.jsp中插入時(shí)必須用new java.util.Date()構(gòu)造而非字符串拼接否則會(huì)報(bào)Data truncation所有 getter/setter 方法在源碼中均已實(shí)現(xiàn)但命名嚴(yán)格遵循 JavaBean 規(guī)范如getCreateTime()這是 JSP 中jsp:useBean標(biāo)簽?zāi)茏詣?dòng)綁定表單數(shù)據(jù)的前提。3. 核心功能模塊拆解從login.jsp的 SQL 拼接到main.jsp的分類聯(lián)動(dòng)一行行代碼講清數(shù)據(jù)流現(xiàn)在我們進(jìn)入實(shí)戰(zhàn)環(huán)節(jié)。不講理論只盯住三個(gè)最關(guān)鍵的 JSP 文件login.jsp身份核驗(yàn)、addDiary.jsp核心業(yè)務(wù)、main.jsp數(shù)據(jù)呈現(xiàn)。它們共同構(gòu)成“寫日記”閉環(huán)也是你二次開發(fā)時(shí)最常動(dòng)的三塊。3.1login.jsp一個(gè)存在 SQL 注入風(fēng)險(xiǎn)卻教科書般展示 Session 管理的登錄頁(yè)打開login.jsp你會(huì)看到前 15 行是標(biāo)準(zhǔn)的 HTML 表單后 50 行是嵌入的 Java 代碼塊。我們聚焦后半部分% page importjava.sql.* % % page importutil.DBUtil % % request.setCharacterEncoding(UTF-8); String username request.getParameter(username); String password request.getParameter(password); if (username ! null password ! null) { Connection conn null; PreparedStatement ps null; ResultSet rs null; try { conn DBUtil.getConnection(); // ?? 危險(xiǎn)此處為字符串拼接非預(yù)編譯 String sql SELECT * FROM user WHERE username username AND password password ; ps conn.prepareStatement(sql); rs ps.executeQuery(); if (rs.next()) { // 登錄成功存用戶信息到 session session.setAttribute(user, username); session.setAttribute(userId, rs.getInt(id)); response.sendRedirect(main.jsp); } else { request.setAttribute(error, 用戶名或密碼錯(cuò)誤); } } catch (Exception e) { e.printStackTrace(); request.setAttribute(error, 系統(tǒng)異常請(qǐng)稍后重試); } finally { DBUtil.close(conn, ps, rs); } } %SQL 注入點(diǎn)sql變量直接拼接username和password若輸入 OR 11將繞過(guò)密碼驗(yàn)證。這是教學(xué)項(xiàng)目故意為之的“反面教材”提醒你預(yù)編譯的必要性Session 寫入邏輯session.setAttribute(user, username)是整個(gè)會(huì)話控制的起點(diǎn)后續(xù)所有 JSP 頁(yè)面如main.jsp都靠session.getAttribute(user)判斷登錄態(tài)錯(cuò)誤處理request.setAttribute(error, ...)將錯(cuò)誤信息存入 request 作用域配合% request.getAttribute(error) %在頁(yè)面上輸出這是 JSP 中最基礎(chǔ)的 MVC 通信方式。3.2addDiary.jsp圖片上傳 分類下拉 時(shí)間自動(dòng)填充一個(gè)頁(yè)面搞定日記創(chuàng)建全流程這個(gè)文件是項(xiàng)目交互最復(fù)雜的 JSP它混合了 HTML 表單、JSP 腳本、JDBC 插入、文件上傳基于 Apache Commons FileUpload 的簡(jiǎn)化版。我們拆解其核心插入邏輯% page importjava.sql.* % % page importutil.DBUtil % % page importorg.apache.commons.fileupload.* % % page importorg.apache.commons.fileupload.disk.* % % page importorg.apache.commons.fileupload.servlet.* % % page importjava.util.* % % request.setCharacterEncoding(UTF-8); boolean isMultipart ServletFileUpload.isMultipartContent(request); if (isMultipart) { DiskFileItemFactory factory new DiskFileItemFactory(); ServletFileUpload upload new ServletFileUpload(factory); ListFileItem items upload.parseRequest(request); String title , content , categoryStr ; int categoryId 1; String imagePath ; for (FileItem item : items) { if (item.isFormField()) { String fieldName item.getFieldName(); String value item.getString(UTF-8); if (title.equals(fieldName)) title value; else if (content.equals(fieldName)) content value; else if (category.equals(fieldName)) { categoryStr value; categoryId Integer.parseInt(categoryStr); } } else if (!item.isFormField()) { String fileName item.getName(); if (!fileName.isEmpty()) { String uploadPath application.getRealPath(/upload/); File uploadDir new File(uploadPath); if (!uploadDir.exists()) uploadDir.mkdirs(); String filePath uploadPath System.currentTimeMillis() _ fileName; item.write(new File(filePath)); imagePath /upload/ new File(filePath).getName(); } } } // 插入日記記錄 Connection conn null; PreparedStatement ps null; try { conn DBUtil.getConnection(); String sql INSERT INTO diary (title, content, categoryId, userId, createTime, imagePath) VALUES (?, ?, ?, ?, NOW(), ?); ps conn.prepareStatement(sql); ps.setString(1, title); ps.setString(2, content); ps.setInt(3, categoryId); ps.setInt(4, (int) session.getAttribute(userId)); // 從 session 取當(dāng)前用戶 ID ps.setString(5, imagePath); ps.executeUpdate(); response.sendRedirect(main.jsp?msgsuccess); } catch (Exception e) { e.printStackTrace(); request.setAttribute(error, 保存失敗 e.getMessage()); } finally { DBUtil.close(conn, ps, null); } } %文件上傳路徑application.getRealPath(/upload/)獲取 Tomcat 中jsp_diary/upload/的絕對(duì)路徑System.currentTimeMillis() _ fileName防止重名這是生產(chǎn)可用的簡(jiǎn)易方案SQL 預(yù)編譯此處INSERT使用?占位符徹底規(guī)避注入風(fēng)險(xiǎn)與login.jsp形成鮮明對(duì)比時(shí)間字段NOW()是 MySQL 函數(shù)直接由數(shù)據(jù)庫(kù)生成時(shí)間戳比 Java 端new Date()更可靠避免時(shí)區(qū)問(wèn)題用戶 ID 來(lái)源session.getAttribute(userId)從登錄時(shí)存入的 session 中讀取保證日記歸屬正確。3.3main.jsp動(dòng)態(tài)分類下拉 日記列表渲染 刪除確認(rèn)前端交互全靠 JSP 腳本驅(qū)動(dòng)main.jsp是用戶停留時(shí)間最長(zhǎng)的頁(yè)面它用純 JSP 腳本完成數(shù)據(jù)查詢、分類篩選、列表渲染三大任務(wù)% page importjava.sql.* % % page importutil.DBUtil % % page importmodel.Diary % % page importjava.text.SimpleDateFormat % % request.setCharacterEncoding(UTF-8); String categoryId request.getParameter(categoryId); int catId categoryId null ? 0 : Integer.parseInt(categoryId); Connection conn null; PreparedStatement ps null; ResultSet rs null; ListDiary diaryList new ArrayList(); try { conn DBUtil.getConnection(); String sql SELECT d.*, c.name as categoryName FROM diary d LEFT JOIN category c ON d.categoryId c.id WHERE d.userId ? ; if (catId 0) sql AND d.categoryId ?; sql ORDER BY d.createTime DESC; ps conn.prepareStatement(sql); ps.setInt(1, (int) session.getAttribute(userId)); if (catId 0) ps.setInt(2, catId); rs ps.executeQuery(); while (rs.next()) { Diary d new Diary(); d.setId(rs.getInt(id)); d.setTitle(rs.getString(title)); d.setContent(rs.getString(content)); d.setCategoryId(rs.getInt(categoryId)); d.setCategoryName(rs.getString(categoryName)); // 從 JOIN 結(jié)果中取分類名 d.setCreateTime(rs.getTimestamp(createTime)); d.setImagePath(rs.getString(imagePath)); diaryList.add(d); } } catch (Exception e) { e.printStackTrace(); } finally { DBUtil.close(conn, ps, rs); } % !-- 分類篩選下拉框 -- select namecategoryId onchangelocation.hrefmain.jsp?categoryIdthis.value option value0全部分類/option % // 查詢所有分類 conn DBUtil.getConnection(); ps conn.prepareStatement(SELECT * FROM category); rs ps.executeQuery(); while (rs.next()) { % option value% rs.getInt(id) % % catId rs.getInt(id) ? selected : % % rs.getString(name) % /option % } DBUtil.close(conn, ps, rs); % /select !-- 日記列表 -- % for (Diary d : diaryList) { SimpleDateFormat sdf new SimpleDateFormat(yyyy-MM-dd HH:mm); % div classdiary-item h3% d.getTitle() %/h3 p% d.getContent().substring(0, Math.min(100, d.getContent().length())) %.../p small分類% d.getCategoryName() % | 時(shí)間% sdf.format(d.getCreateTime()) %/small a hrefeditDiary.jsp?id% d.getId() %編輯/a | a hrefdeleteDiary.jsp?id% d.getId() % onclickreturn confirm(確定刪除)刪除/a /div % } %雙重查詢先查日記列表帶分類名 JOIN再單獨(dú)查分類下拉SELECT * FROM category這是 JSP 時(shí)代典型的“分步加載”模式安全刪除onclickreturn confirm(確定刪除)是前端最后一道防線防止誤點(diǎn)截?cái)囡@示d.getContent().substring(0, Math.min(100, ...))防止長(zhǎng)文本撐爆頁(yè)面是真實(shí)項(xiàng)目中的血淚經(jīng)驗(yàn)。4. 部署與運(yùn)行避坑指南Tomcat 7/8 兼容性、MySQL 8 驅(qū)動(dòng)適配、中文亂碼三連擊這個(gè)項(xiàng)目看著簡(jiǎn)單但部署時(shí) 80% 的失敗都卡在這三個(gè)點(diǎn)上。我把實(shí)驗(yàn)室里學(xué)生翻車最多的 5 個(gè)問(wèn)題按“現(xiàn)象→原因→解決”列出來(lái)全是實(shí)測(cè)過(guò)的后悔藥。4.1 現(xiàn)象訪問(wèn)login.jsp報(bào) 500 錯(cuò)誤日志顯示java.lang.ClassNotFoundException: com.mysql.jdbc.Driver原因MySQL 5.7 默認(rèn)使用com.mysql.cj.jdbc.Driver而項(xiàng)目DBUtil.java中仍寫的是舊驅(qū)動(dòng)類名com.mysql.jdbc.Driver且mysql-connector-java-5.1.47.jar不兼容 MySQL 8.0解決下載mysql-connector-java-8.0.28.jar 官方下載頁(yè) 替換WEB-INF/lib/下的舊 jar修改DBUtil.java第 13 行Class.forName(com.mysql.cj.jdbc.Driver);同時(shí)更新urljdbc:mysql://localhost:3306/diary_db?useUnicodetruecharacterEncodingUTF-8serverTimezoneAsia/Shanghai必須加serverTimezone。4.2 現(xiàn)象登錄成功后跳轉(zhuǎn)main.jsp頁(yè)面空白查看源碼發(fā)現(xiàn)% session.getAttribute(user) %輸出null原因Tomcat 默認(rèn)禁用HttpOnly的 session cookie但某些瀏覽器如新版 Chrome對(duì)跨域或路徑不匹配的 session 識(shí)別更嚴(yán)格更常見(jiàn)的是web.xml中未聲明session-config導(dǎo)致 session 超時(shí)過(guò)短解決在web.xml的web-app根節(jié)點(diǎn)內(nèi)添加session-config session-timeout30/session-timeout cookie-config http-onlytrue/http-only /cookie-config /session-config4.3 現(xiàn)象addDiary.jsp提交后數(shù)據(jù)庫(kù)diary表中title和content字段顯示為??或亂碼如????????￥è?°原因四個(gè)環(huán)節(jié)任一缺失都會(huì)導(dǎo)致亂碼① MySQL 庫(kù)/表字符集非utf8mb4②DBUtil.java中url未加characterEncodingUTF-8③ JSP 頁(yè)面未聲明% page contentTypetext/html;charsetUTF-8 %④ Tomcat 的conf/server.xml中Connector未加URIEncodingUTF-8解決四步全做MySQL 執(zhí)行ALTER DATABASE diary_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;DBUtil.java的url字符串末尾加上characterEncodingUTF-8所有 JSP 文件第一行加上% page contentTypetext/html;charsetUTF-8 %conf/server.xml中找到Connector port8080 ... /改為Connector port8080 protocolHTTP/1.1 URIEncodingUTF-8 ... /。4.4 現(xiàn)象點(diǎn)擊“刪除”后頁(yè)面跳轉(zhuǎn)deleteDiary.jsp但日記未刪除返回main.jsp依然存在原因deleteDiary.jsp中的 SQL 語(yǔ)句寫成了DELETE FROM diary WHERE id ?但未設(shè)置PreparedStatement的參數(shù)也未執(zhí)行executeUpdate()解決檢查deleteDiary.jsp確保有如下邏輯% String idStr request.getParameter(id); if (idStr ! null) { int id Integer.parseInt(idStr); Connection conn null; PreparedStatement ps null; try { conn DBUtil.getConnection(); String sql DELETE FROM diary WHERE id ?; ps conn.prepareStatement(sql); ps.setInt(1, id); // 必須設(shè)置參數(shù) ps.executeUpdate(); // 必須執(zhí)行 } catch (Exception e) { e.printStackTrace(); } finally { DBUtil.close(conn, ps, null); } } response.sendRedirect(main.jsp); %4.5 現(xiàn)象category.jsp中添加新分類后main.jsp的下拉框不刷新仍顯示舊分類原因category.jsp的添加邏輯執(zhí)行完后未重定向response.sendRedirect而是直接forward或停留在當(dāng)前頁(yè)導(dǎo)致瀏覽器緩存了舊的下拉選項(xiàng)解決在category.jsp添加成功后強(qiáng)制重定向if (add.equals(action)) { // ... 插入邏輯 response.sendRedirect(category.jsp?msgadded); // 不要 forward }5. 二次開發(fā)實(shí)戰(zhàn)從“支持 Markdown 渲染”到“增加搜索框”三個(gè)可立即落地的改造技巧現(xiàn)在你已經(jīng)跑通了整個(gè)項(xiàng)目下一步就是讓它真正屬于你。我不會(huì)講“如何接入 Spring Security”而是給你三個(gè)真實(shí)項(xiàng)目中高頻出現(xiàn)、改起來(lái)不費(fèi)勁、效果立竿見(jiàn)影的改造點(diǎn)。每個(gè)都附可直接粘貼的代碼和驗(yàn)證方法。5.1 改造一讓日記內(nèi)容支持 Markdown 渲染不用引入 JS 庫(kù)純服務(wù)端解析需求很常見(jiàn)用戶想寫帶格式的日記但原項(xiàng)目只存純文本。我們用輕量級(jí)的commonmark-java實(shí)現(xiàn)服務(wù)端渲染避免前端 XSS 風(fēng)險(xiǎn)。步驟下載commonmark-java-0.20.0.jar和commonmark-ext-gfm-tables-0.20.0.jar支持表格放入WEB-INF/lib/修改main.jsp中日記內(nèi)容輸出處% // 在頂部導(dǎo)入 import org.commonmark.node.*; import org.commonmark.parser.*; import org.commonmark.renderer.html.*; % !-- 替換原來(lái)的 % d.getContent() % -- % Parser parser Parser.builder().build(); HtmlRenderer renderer HtmlRenderer.builder().build(); Node document parser.parse(d.getContent()); String html renderer.render(document); % div classdiary-content% html %/div驗(yàn)證在addDiary.jsp中輸入## 標(biāo)題\n\n- 列表項(xiàng)1\n- 列表項(xiàng)2保存后main.jsp應(yīng)顯示二級(jí)標(biāo)題和無(wú)序列表。從那以后我每次加富文本支持都強(qiáng)制走一遍“服務(wù)端解析 白名單過(guò)濾”流程絕不信前端 JS 渲染的 sanitize —— 瀏覽器兼容性和 XSS 漏洞太玄學(xué)。5.2 改造二在main.jsp頂部增加全文搜索框基于 MySQL FULLTEXT原項(xiàng)目只能按分類篩選搜索功能是剛需。我們利用 MySQL 的FULLTEXT索引不改 Java 代碼只加 SQL 和 JSP。步驟在 MySQL 中為diary表的title和content字段添加全文索引ALTER TABLE diary ADD FULLTEXT(title, content);修改main.jsp在分類下拉框上方加搜索框form methodget actionmain.jsp input typetext nameq value% request.getParameter(q) null ? : request.getParameter(q) % placeholder搜索日記標(biāo)題或內(nèi)容... / button typesubmit搜索/button /form修改日記查詢 SQL替換原sql變量String sql SELECT d.*, c.name as categoryName FROM diary d LEFT JOIN category c ON d.categoryId c.id WHERE d.userId ? ; if (catId 0) sql AND d.categoryId ? ; String q request.getParameter(q); if (q ! null !q.trim().isEmpty()) { sql AND MATCH(d.title, d.content) AGAINST(? IN NATURAL LANGUAGE MODE) ; } sql ORDER BY d.createTime DESC; ps conn.prepareStatement(sql); ps.setInt(1, (int) session.getAttribute(userId)); int paramIndex 2; if (catId 0) { ps.setInt(paramIndex, catId); } if (q ! null !q.trim().isEmpty()) { ps.setString(paramIndex, q.trim()); }5.3 改造三為profile.jsp增加頭像上傳復(fù)用addDiary.jsp的上傳邏輯個(gè)人中心缺頭像體驗(yàn)打折。我們復(fù)用現(xiàn)有上傳機(jī)制只改兩處在profile.jsp中添加表單form methodpost enctypemultipart/form-data input typefile nameavatar acceptimage/* / button typesubmit上傳頭像/button /form在profile.jsp底部添加處理邏輯緊貼/body% if (request.getMethod().equalsIgnoreCase(post)) { DiskFileItemFactory factory new DiskFileItemFactory(); ServletFileUpload upload new ServletFileUpload(factory); ListFileItem items upload.parseRequest(request); for (FileItem item : items) { if (!item.isFormField() !item.getName().isEmpty()) { String uploadPath application.getRealPath(/upload/); File uploadDir new File(uploadPath); if (!uploadDir.exists()) uploadDir.mkdirs(); String filePath uploadPath avatar_ (int)session.getAttribute(userId) .jpg; item.write(new File(filePath)); // 更新 user 表 avatar 字段需先在 user 表加 avatar VARCHAR(255) Connection conn DBUtil.getConnection(); PreparedStatement ps conn.prepareStatement(UPDATE user SET avatar ? WHERE id ?); ps.setString(1, /upload/avatar_ session.getAttribute(userId) .jpg); ps.setInt(2, (int) session.getAttribute(userId)); ps.executeUpdate(); DBUtil.close(conn, ps, null); } } } %希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取