簡(jiǎn)介這套基于JavaHTML5的綠色環(huán)保網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)項(xiàng)目面向高校畢業(yè)設(shè)計(jì)或課程設(shè)計(jì)場(chǎng)景采用管理員與普通用戶雙角色設(shè)計(jì)。系統(tǒng)覆蓋首頁、環(huán)保資訊、環(huán)保課堂、環(huán)?；顒?dòng)、環(huán)?？破铡h(huán)保培訓(xùn)及信息交流等模塊支持登錄注冊(cè)、資訊維護(hù)、用戶管理、知識(shí)評(píng)論等典型Web功能適合用作Java Web開發(fā)練習(xí)或論文配套項(xiàng)目。資源包為zip格式共2000個(gè)文件壓縮包大小約37.32MB文件類型以png、js、css、java、jsp、xml、jpg為主png等圖片構(gòu)成頁面視覺素材js/css負(fù)責(zé)前端交互與樣式j(luò)ava/jsp完成后臺(tái)業(yè)務(wù)邏輯xml/properties用于配置文件sql腳本可初始化數(shù)據(jù)庫此外還包含PSD設(shè)計(jì)稿等項(xiàng)目輔助文件。目前已有147人學(xué)習(xí)下載可參考其頁面布局、功能分層與交互邏輯快速搭建一套具備完整業(yè)務(wù)鏈的環(huán)保主題網(wǎng)站也可在此基礎(chǔ)上擴(kuò)展低碳出行、綠色校園等專題模塊提升畢業(yè)設(shè)計(jì)的完整度和演示效果。1. 拿到一套 javaHTML5 綠色環(huán)保網(wǎng)站別急著寫代碼先看它值不值得當(dāng)課設(shè)每年到這個(gè)時(shí)間點(diǎn)總有人被畢業(yè)設(shè)計(jì)或課程設(shè)計(jì)卡在選題上——要 java、要網(wǎng)頁、還得有點(diǎn)現(xiàn)實(shí)意義。綠色環(huán)保網(wǎng)站就是那種看著不起眼、實(shí)際上把「前端展示 后端管理 數(shù)據(jù)庫存取」全串起來的典型項(xiàng)目。我拆過不少同類資源這套基于 java HTML5 的綠色環(huán)保網(wǎng)站設(shè)計(jì)實(shí)現(xiàn)核心功能是前臺(tái)環(huán)保資訊展示、用戶注冊(cè)登錄、留言互動(dòng)外加后臺(tái)對(duì)內(nèi)容和用戶的管理技術(shù)上覆蓋 Servlet、JSP、MySQL前端用 HTML5 語義化標(biāo)簽和表單校驗(yàn)。它的定位是「能跑通、能演示、能答辯」的完整課設(shè)項(xiàng)目適合 java 基礎(chǔ)尚可但缺一個(gè)全流程實(shí)戰(zhàn)的學(xué)生也適合想快速搭一個(gè)信息展示類網(wǎng)站的非科班開發(fā)者。資源里帶演示意味著你可以先看效果再?zèng)Q定要不要?jiǎng)邮指摹@比從空項(xiàng)目開始攢要省事得多。2. 項(xiàng)目拆開看架構(gòu)MVC 分層與 JSP/Servlet 的選型邏輯2.1 先摸目錄結(jié)構(gòu)別一上來就雙擊 index.html很多新手拿到項(xiàng)目壓縮包第一反應(yīng)是找 index 頁面然后雙擊打開結(jié)果看到滿屏標(biāo)簽樣式全亂。這是不對(duì)的。java HTML5 的綠色環(huán)保網(wǎng)站本質(zhì)是動(dòng)態(tài)站點(diǎn)頁面上的環(huán)保新聞、用戶留言都是從數(shù)據(jù)庫實(shí)時(shí)讀取的純靜態(tài)打開只有空殼。正確姿勢(shì)是先看目錄結(jié)構(gòu)確認(rèn)它是不是標(biāo)準(zhǔn) JavaWeb 工程。常見做法是 eclipse 或 IDEA 的 Web 項(xiàng)目結(jié)構(gòu)WebContent 下放 JSP、CSS、JSsrc 下放 java 包分為 servlet、dao、entity、util 幾層。先記住一個(gè)判斷標(biāo)準(zhǔn)如果 resources 或 src 目錄里有大量 .java 文件那這就是需要部署到 Tomcat 才能跑的項(xiàng)目不是純靜態(tài)網(wǎng)頁?？匆幌碌湫湍夸洸季謳缀跛械恼n設(shè)項(xiàng)目都是這么拆的GreenWebsite/ ├── src/ │ ├── com.ep.controller/ # Servlet 控制器層 │ │ ├── LoginServlet.java │ │ ├── RegisterServlet.java │ │ └── NewsServlet.java │ ├── com.ep.dao/ # 數(shù)據(jù)庫操作層 │ │ └── NewsDao.java │ ├── com.ep.entity/ # 實(shí)體類 │ │ ├── User.java │ │ └── News.java │ └── com.ep.util/ # 工具類數(shù)據(jù)庫連接、字符串處理 │ └── DBUtil.java ├── WebContent/ │ ├── index.jsp # 前臺(tái)首頁 │ ├── newsList.jsp # 環(huán)保資訊列表 │ ├── newsDetail.jsp # 資訊詳情 │ ├── register.jsp # 用戶注冊(cè)頁 │ ├── login.jsp # 登錄頁 │ ├── admin/ # 后臺(tái)管理頁面 │ │ ├── adminIndex.jsp │ │ └── newsManage.jsp │ ├── css/style.css │ ├── js/main.js │ └── WEB-INF/web.xml # 核心配置把 Controller、Dao、Entity、Util 分開放好處是出了問題能快速定位。比如登錄報(bào)錯(cuò)先去 LoginServlet 看請(qǐng)求參數(shù)接收再去 UserDao 看 SQL 條件不用把整個(gè)項(xiàng)目翻一遍。這個(gè)分層看起來笨但課設(shè)答辯時(shí)老師喜歡問「你分層了嗎」有這一層結(jié)構(gòu)能少費(fèi)很多口舌。資源里如果還提供 sql 文件通常放在項(xiàng)目根目錄或 db 文件夾導(dǎo)入 MySQL 時(shí)注意字符集選 utf8不然中文容易變問號(hào)。2.2 為什么課設(shè)項(xiàng)目還在用 JSP/Servlet而不是 Spring Boot打開這個(gè)項(xiàng)目你會(huì)發(fā)現(xiàn)它沒有 pom.xml也沒有 application.yml就是純 JSP Servlet JDBC。第一次看到的人容易疑惑現(xiàn)在企業(yè)里不都 Spring Boot 了嗎為什么課設(shè)還在用這套答案很簡(jiǎn)單這跟「用對(duì)工具」無關(guān)跟「課程要求」有關(guān)。大部分學(xué)校的 java Web 課程設(shè)計(jì)大綱里明確要求體現(xiàn) Servlet 和 JSP 的使用目的是考察你對(duì) HTTP 請(qǐng)求處理、會(huì)話跟蹤、JDBC 連接這些基礎(chǔ)原理的理解Spring Boot 封裝掉的東西反而沒法在答辯時(shí)講清楚。從個(gè)人角度我建議你按原有技術(shù)棧做完再私下補(bǔ)一個(gè) Spring Boot 版本面試時(shí)能證明你不是只會(huì)課設(shè)那套。技術(shù)選型這件事別追求「新」追求「老師看得懂、你能講明白」。Servlet 的生命周期、doGet 和 doPost 的區(qū)別、request 和 response 的作用范圍這些是答辯必問的而 Spring Boot 里一個(gè) RestController 注解就把所有細(xì)節(jié)蓋住了。如果資源本身是 SSM 或 Spring Boot 寫的另當(dāng)別論可這套項(xiàng)目定位就是課設(shè)那遵循課設(shè)邏輯就是最優(yōu)解。數(shù)據(jù)庫連接用 JDBC 直連配置在 DBUtil.java 里換數(shù)據(jù)庫或換密碼改這一個(gè)文件就行。這種「把變化收斂到一個(gè)點(diǎn)」的設(shè)計(jì)恰恰是答辯時(shí)能講出彩的地方。2.3 數(shù)據(jù)庫連接與 web.xml先把基礎(chǔ)設(shè)施配好再談頁面凡是 JavaWeb 項(xiàng)目第一步永遠(yuǎn)是確認(rèn)數(shù)據(jù)庫連接是對(duì)的。綠色環(huán)保網(wǎng)站這種項(xiàng)目數(shù)據(jù)庫無非三張表撐全場(chǎng)用戶表、環(huán)保資訊表、留言表偶爾加個(gè)管理員表。你先看資源里的 SQL 腳本把表結(jié)構(gòu)導(dǎo)到 MySQL 里。然后打開 DBUtil.java改數(shù)據(jù)庫地址、用戶名、密碼。這一步如果漏了后面所有頁面訪問都會(huì)報(bào) 500 或連接超時(shí)。最常見的坑是 MySQL 版本差異導(dǎo)致驅(qū)動(dòng)類名不一致5.x 用 com.mysql.jdbc.Driver8.0 以上要換成 com.mysql.cj.jdbc.DriverURL 還要帶 serverTimezoneAsia/Shanghai否則驅(qū)動(dòng)直接拋時(shí)區(qū)異常。web.xml 是這個(gè)項(xiàng)目的命脈文件Servlet 映射、歡迎頁面、字符集過濾器全在這配。不少資源會(huì)漏掉編碼過濾器導(dǎo)致表單提交中文變亂碼。我一般拿到項(xiàng)目第一件事是檢查 web.xml 里有沒有這行配置filter filter-nameencodingFilter/filter-name filter-classorg.apache.catalina.filters.SetCharacterEncodingFilter/filter-class init-param param-nameencoding/param-name param-valueUTF-8/param-value /init-param /filter filter-mapping filter-nameencodingFilter/filter-name url-pattern/*/url-pattern /filter-mapping這段配置的作用是讓 Tomcat 對(duì)所有經(jīng)過的請(qǐng)求和響應(yīng)統(tǒng)一按 UTF-8 處理。有人問我頁面里寫了meta charsetutf-8還不夠嗎真不夠。頁面 meta 只決定瀏覽器怎么解析響應(yīng)體而 POST 請(qǐng)求提交的參數(shù)在到達(dá) Servlet 之前由 Tomcat 用默認(rèn)的 ISO-8859-1 解碼不裝過濾器中文必亂。URL 里帶 serverTimezoneAsia/Shanghai 是另一個(gè)常見補(bǔ)丁MySQL 8.x 默認(rèn)時(shí)區(qū)是美國(guó)不指定會(huì)報(bào)The server time zone value ?D1ú±ê×?ê±?? is unrecognized這行配置就是后半句的后悔藥。配完這兩處項(xiàng)目才能算「能跑」再往下才是頁面邏輯。3. 前端 HTML5 部分實(shí)戰(zhàn)從靜態(tài)頁面到動(dòng)態(tài)渲染的完整鏈路3.1 首頁布局與 HTML5 語義化標(biāo)簽的使用綠色環(huán)保網(wǎng)站的首頁一般是這個(gè)套路頂部導(dǎo)航欄帶 logo 和菜單中間是環(huán)保資訊輪播圖往下是新聞列表和環(huán)保小貼士底部是版權(quán)信息。HTML5 帶來的變化是布局標(biāo)簽從滿屏 div 變成 header、nav、main、article、section、footer 這些語義化標(biāo)簽。這套資源的首頁如果寫得規(guī)范你應(yīng)該能看到成體系的語義化結(jié)構(gòu)。語義化標(biāo)簽的價(jià)值不在視覺效果而在三點(diǎn)第一對(duì)搜索引擎友好爬蟲能分清哪塊是導(dǎo)航哪塊是正文第二對(duì)屏幕閱讀器友好殘障用戶能跳過導(dǎo)航直接讀內(nèi)容第三代碼可讀性強(qiáng)你半年后回頭改自己寫的頁面一眼能找到功能區(qū)。下面是從這類首頁中抽出來的典型結(jié)構(gòu)去掉具體樣式后的骨架header classsite-header h1 classlogo綠色環(huán)保在線/h1 nav classmain-nav ul lia hrefindex.jsp首頁/a/li lia hrefnewsList.jsp環(huán)保資訊/a/li lia hrefknowledge.jsp環(huán)保知識(shí)/a/li lia hrefmessage.jsp留言板/a/li lia hrefadmin/adminIndex.jsp后臺(tái)/a/li /ul /nav /header main section classbanner div classbanner-item active保護(hù)地球從我做起/div div classbanner-item垃圾分類資源循環(huán)/div /section article classnews-list h2最新環(huán)保動(dòng)態(tài)/h2 !-- 此處由 Java 代碼循環(huán)輸出新聞項(xiàng) -- /article /main footer classsite-footer p? 2024 綠色環(huán)保網(wǎng)站設(shè)計(jì)項(xiàng)目/p /footer這段結(jié)構(gòu)里輪播圖區(qū)域banner-item默認(rèn)隱藏只有帶 active 類的顯示通過 js/main.js 里定時(shí)器切換 active 類來實(shí)現(xiàn)輪播。想換文案或圖片直接在 HTML 里改文本和背景圖路徑即可。news-list這個(gè) article 在純靜態(tài)階段是空殼實(shí)際運(yùn)行時(shí)由 JSP 的c:forEach標(biāo)簽或% %表達(dá)式循環(huán)輸出數(shù)據(jù)庫里的環(huán)保新聞標(biāo)題和摘要。這也是資源演示里最亮眼的部分前臺(tái)不是死的用戶每發(fā)一條環(huán)保知識(shí)評(píng)論頁面刷新后就能看到新內(nèi)容。3.2 HTML5 表單校驗(yàn)注冊(cè)登錄頁的前端防線注冊(cè)頁和登錄頁是 HTML5 特性用得最集中、也最容易翻車的地方。HTML5 原生表單校驗(yàn)用起來完全不需要 JavaScript直接在 input 標(biāo)簽上寫 required、type、pattern、minlength 這些屬性瀏覽器就會(huì)在提交時(shí)自動(dòng)攔截空值、格式錯(cuò)誤、長(zhǎng)度不足。這套資源里注冊(cè)頁如果用了這些屬性是有東西可以講的。比如郵箱輸入框?qū)懗蓆ypeemail瀏覽器會(huì)自動(dòng)校驗(yàn)是否包含 符號(hào)手機(jī)號(hào)輸入框用pattern1[3-9]\d{9}限制 11 位且首位為 1密碼框加minlength6要求最短長(zhǎng)度。這些屬性全部是聲明式的不需要額外引入任何庫?？匆粋€(gè)典型的注冊(cè)表單實(shí)現(xiàn)form actionregister methodpost idregForm label forusername用戶名/label input typetext idusername nameusername required placeholder4-16位字母或數(shù)字 pattern[a-zA-Z0-9]{4,16} label foremail郵箱/label input typeemail idemail nameemail required label forpassword密碼/label input typepassword idpassword namepassword required minlength6 maxlength20 label forconfirmPwd確認(rèn)密碼/label input typepassword idconfirmPwd nameconfirmPwd required button typesubmit注冊(cè)/button /formusername 輸入框的 pattern 是正則校驗(yàn)[a-zA-Z0-9]{4,16}表示只允許大小寫字母和數(shù)字長(zhǎng)度 4 到 16 位不滿足時(shí)瀏覽器彈出提示且不發(fā)請(qǐng)求。密碼和確認(rèn)密碼的一致性檢查純 HTML5 屬性做不了這個(gè)要交給 js/main.js 里的 submit 事件。監(jiān)聽表單提交比對(duì)兩個(gè) password 框的值不一致則event.preventDefault()阻止提交并彈出警告。前端校驗(yàn)只是提升用戶體驗(yàn)后端 Servlet 里必須再做一次同樣的判斷因?yàn)橛脩艨梢岳@過瀏覽器直接 POST 數(shù)據(jù)。這是課設(shè)答辯時(shí)一個(gè)非常好的加分提問點(diǎn)前端校驗(yàn)與后端校驗(yàn)各自解決什么問題。3.3 CSS3 動(dòng)效與響應(yīng)式讓頁面看起來不是「原生課設(shè)臉」很多 java 課設(shè)網(wǎng)站一眼就能被認(rèn)出來因?yàn)轫撁媸?2008 年的風(fēng)格表格布局、彩色字體、沒有圓角按鈕點(diǎn)下去毫無反饋。這套資源里如果帶了 style.css通常會(huì)用 CSS3 的圓角、陰影、漸變、過渡動(dòng)畫來緩解這個(gè)問題。常見做法是給導(dǎo)航菜單加 hover 變色過渡——鼠標(biāo)移上去背景色在 0.3 秒內(nèi)平滑變化而項(xiàng)目答辯時(shí)老師路過看一眼會(huì)覺得這頁面「下過功夫」。CSS3 動(dòng)效的實(shí)現(xiàn)方式非常簡(jiǎn)單復(fù)雜度控制在「看代碼能懂、改參數(shù)就能調(diào)」這個(gè)級(jí)別不需要引入第三方框架。響應(yīng)式是另一個(gè)能打動(dòng)人心的點(diǎn)。用媒體查詢?cè)谄聊粚挾刃∮?768px 時(shí)把導(dǎo)航菜單改為上下堆疊、把多列布局改單列就能當(dāng)「適配移動(dòng)端」的賣點(diǎn)寫進(jìn)報(bào)告。代碼如下media (max-width: 768px) { .main-nav ul { flex-direction: column; } .news-grid { grid-template-columns: 1fr; } .site-header { text-align: center; } }媒體查詢的原理是瀏覽器根據(jù)當(dāng)前視口寬度選擇匹配的樣式塊。max-width: 768px意味著視口小于等于 768px 時(shí)生效常見手機(jī)豎屏都在這個(gè)范圍內(nèi)。flex-direction: column把原來橫向排列的導(dǎo)航項(xiàng)改為縱向堆疊避免手機(jī)上字?jǐn)D成一團(tuán)。grid-template-columns: 1fr把資訊列表從三列改為一列保證每張卡片在窄屏上不被壓縮到看不清。這些改動(dòng)不影響原來 PC 端的樣式因?yàn)榇笥?768px 的屏幕走的是默認(rèn)規(guī)則。做這套東西的微信小程序版或手機(jī)版要留出這個(gè)發(fā)展規(guī)劃后端接口按 JSON 輸出前端另做適配即可。4. 后端 Java 核心代碼解讀登錄鑒權(quán)、環(huán)保資訊管理與留言交互4.1 LoginServlet從請(qǐng)求參數(shù)接收到 Session 會(huì)話保持后端部分首先要盯的是登錄邏輯。用戶在 login.jsp 輸入賬號(hào)密碼提交表單 action 指向 LoginServletTomcat 根據(jù) web.xml 里的映射找到對(duì)應(yīng)類并調(diào)用 doPost 方法。整個(gè)處理鏈路是固定的四步接收參數(shù)、校驗(yàn)參數(shù)、查詢數(shù)據(jù)庫、返回結(jié)果。拿這個(gè) Servlet 講清楚一個(gè) HTTP 請(qǐng)求在后端的生命周期是答辯時(shí)最出彩的橋段?？匆欢蔚湫偷牡卿泴?shí)現(xiàn)代碼protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding(UTF-8); String username request.getParameter(username); String password request.getParameter(password); if (username null || password null || username.isEmpty() || password.isEmpty()) { response.sendRedirect(login.jsp?errorempty); return; } UserDao dao new UserDao(); User user dao.findByUsernameAndPassword(username, password); if (user ! null) { HttpSession session request.getSession(); session.setAttribute(loginUser, user); response.sendRedirect(index.jsp); } else { response.sendRedirect(login.jsp?errorfailed); } }這段代碼干了四件事也是后續(xù)所有功能的模板。第一行 setCharacterEncoding 是解決中文亂碼的保底手段雖然前面 web.xml 里配了過濾器但 Servlet 里再寫一遍不虧。getParameter從請(qǐng)求體里取出 userName 文本框的值如果沒傳或傳了空串就跳回登錄頁并帶 errorempty 參數(shù)。查詢走 UserDaoSQL 是select * from user where username? and password?用的是 PreparedStatement 參數(shù)占位而不是字符串拼接這是防 SQL 注入的基礎(chǔ)寫法。查到了用戶就創(chuàng)建 Session 對(duì)象把 User 塞進(jìn)去后續(xù)頁面用session.getAttribute(loginUser)判斷是否已登錄。沒查到就帶著 errorfailed 回登錄頁頁面頂部用 JSP 判斷 error 參數(shù)并顯示不同提示。誰能說出「為什么密碼不能直接明文存數(shù)據(jù)庫應(yīng)該存 MD5 或 BCrypt 哈希值」誰就能在答辯時(shí)把老師帶進(jìn)自己的節(jié)奏。4.2 環(huán)保資訊列表的 DAO 查詢JDBC 手動(dòng)寫也不難資訊列表頁是前臺(tái)內(nèi)容最密集的地方新聞標(biāo)題、發(fā)布時(shí)間、摘要被渲染成卡片列表。這背后是 NewsDao 的一個(gè)查詢方法從 news 表查出狀態(tài)為已發(fā)布的記錄按發(fā)布時(shí)間倒序排列返回一個(gè) ArrayListJSP 頁面拿到這個(gè)集合用 JSTL 標(biāo)簽循環(huán)輸出。這套邏輯在 Spring Boot 里被 ORM 框架封裝了但在課設(shè)項(xiàng)目里每一步都是顯式代碼每一個(gè)結(jié)果集轉(zhuǎn)換都看得見。遇到網(wǎng)絡(luò)慢或數(shù)據(jù)庫沒數(shù)據(jù)時(shí)頁面顯示空列表而不是報(bào)錯(cuò)靠的就是對(duì)這個(gè) DAO 方法返回空集合的理解。看一下典型查詢方法public ListNews findAllPublishedNews() { ListNews newsList new ArrayList(); String sql SELECT id, title, summary, publish_time, cover_url FROM news WHERE status 1 ORDER BY publish_time DESC; try (Connection conn DBUtil.getConnection(); PreparedStatement ps conn.prepareStatement(sql); ResultSet rs ps.executeQuery()) { while (rs.next()) { News news new News(); news.setId(rs.getInt(id)); news.setTitle(rs.getString(title)); news.setSummary(rs.getString(summary)); news.setPublishTime(rs.getTimestamp(publish_time)); news.setCoverUrl(rs.getString(cover_url)); newsList.add(news); } } catch (SQLException e) { e.printStackTrace(); } return newsList; }注意 JDK 7 以來的 try-with-resources 寫法Connection、PreparedStatement、ResultSet 三個(gè)資源在后半個(gè)括號(hào)里依次聲明方法結(jié)束自動(dòng)關(guān)閉不用手動(dòng)寫 finally 去 close。這套簡(jiǎn)寫能幫你少寫五六行樣板代碼也讓代碼更像生產(chǎn)級(jí)寫法。如果這個(gè)資源里的 DAO 還在手動(dòng) close你可以當(dāng)個(gè)改進(jìn)點(diǎn)提出來寫進(jìn)課設(shè)報(bào)告的「項(xiàng)目改進(jìn)說明」里。分頁是另一個(gè)值得深挖的腦洞把 LIMIT 換成LIMIT ?, ?方法簽名里加 pageNum 和 pageSize 參數(shù)就能實(shí)現(xiàn)不用改數(shù)據(jù)庫表結(jié)構(gòu)。答辯時(shí)老師說「你這個(gè)新聞越攢越多頁面會(huì)很慢」你答一句「加一個(gè)分頁查詢即可把 LIMIT 和當(dāng)前頁參數(shù)綁定」比夸頁面好看有用得多。4.3 留言板與用戶注冊(cè)POST 請(qǐng)求的寫入鏈路留言板是綠色環(huán)保網(wǎng)站這類項(xiàng)目里互動(dòng)功能的擔(dān)當(dāng)用戶在頁面底部輸入留言內(nèi)容和聯(lián)系方式提交后由 MessageServlet 接收、校驗(yàn)、寫入數(shù)據(jù)庫再重定向回留言頁面。這個(gè)過程和登錄、注冊(cè)的鏈路一樣但有一個(gè)關(guān)鍵差異登錄和查詢是讀操作留言是寫操作。寫操作必須做兩件事內(nèi)容非空校驗(yàn)和預(yù)防 XSS。非空校驗(yàn)和登錄時(shí)一樣用 isEmpty 判斷XSS 防護(hù)則是把script這類標(biāo)簽轉(zhuǎn)義成lt;scriptgt;否則用戶留言里塞一段 JS 就能在別人瀏覽器里執(zhí)行。寫操作后的跳轉(zhuǎn)用重定向而不用轉(zhuǎn)發(fā)也是細(xì)節(jié)——防止用戶刷新頁面時(shí)表單重復(fù)提交。注冊(cè)功能的寫入鏈路更長(zhǎng)先查用戶名是否已存在不存在才插入新記錄存在就跳回注冊(cè)頁提示換一個(gè)用戶名。這個(gè)「先查再插」的邏輯有并發(fā)問題兩個(gè)請(qǐng)求同時(shí)查到用戶名不存在同時(shí)執(zhí)行 insert數(shù)據(jù)庫里就會(huì)出現(xiàn)兩條同名記錄。解決辦法有兩個(gè)方向一是給 user 表的 username 字段加唯一索引插入時(shí)拋 DuplicateKeyException 再提示用戶換名字二是把查詢和插入合并成一條INSERT INTO user (username, password) SELECT ?, ? FROM dual WHERE NOT EXISTS (SELECT id FROM user WHERE username ?)。第二個(gè)方案里的FROM dual是 MySQL 的一個(gè)特殊單行表主要用來構(gòu)造沒有實(shí)際表的查詢結(jié)構(gòu)。這個(gè)并發(fā)場(chǎng)景在課設(shè)里不會(huì)真的發(fā)生但把這個(gè)思考寫進(jìn)報(bào)告的「設(shè)計(jì)亮點(diǎn)」里能讓方案設(shè)計(jì)的深度往上提半檔。4.4 后臺(tái)管理的迷你權(quán)限系統(tǒng)為什么 admin 目錄要單獨(dú)放后臺(tái)管理是綠色環(huán)保網(wǎng)站的隱藏板塊普通用戶在前臺(tái)看不到入口只有登錄賬號(hào)是 admin 或用戶表里 role 字段等于 1 的人才允許訪問。這個(gè)權(quán)限控制在課設(shè)版本里不會(huì)做得太重最常見的是兩層判斷頁面頂部加代碼塊里判斷 Session 里的用戶對(duì)象是否為空且 role 是否為管理員后端的 AdminServlet 在 doGet 和 doPost 里重復(fù)一遍同樣的判斷不信頁面那層——因?yàn)橛脩艨梢岳@過前臺(tái)頁面直接用 URL 訪問 Servlet。如果資源里只有第一層判斷那你改起來也不難在每個(gè)后臺(tái) Servlet 的方法第一行加個(gè)判斷不滿足就response.sendError(403)等于給后臺(tái)加了第二道門。這個(gè)改進(jìn)的價(jià)值在于講管理后臺(tái)時(shí)可以用「雙重認(rèn)證」這個(gè)詞。5. 從下載到上線的坑部署避坑指南與四項(xiàng)典型翻車記錄5.1 坑一Tomcat 啟動(dòng)報(bào)了 Port 8080 被占用頁面永遠(yuǎn)打不開現(xiàn)象雙擊 startup.bat 后控制臺(tái)還沒刷出日志就停了或者瀏覽器訪問 localhost:8080 直接拒絕連接。翻日志看到Port 8080 required by Tomcat v9.0 Server at localhost is already in use。原因電腦上某個(gè)進(jìn)程已經(jīng)占用了 8080 端口通常是之前殘留的 Tomcat 實(shí)例、Oracle 的 HTTP 服務(wù)或者某個(gè)開發(fā)工具的調(diào)試端口。解決打開命令行執(zhí)行netstat -ano找端口 8080 對(duì)應(yīng)的 PID然后taskkill /PID pid /F。如果該端口上有其他想保留的程序就改 Tomcat 的端口配置在 server.xml 里找到Connector port8080那一行改成 8081 或 9090然后訪問時(shí)用新端口。改端口后注意如果項(xiàng)目里有代碼寫死了重定向地址那也得跟著改JSP 頁面里response.sendRedirect(http://localhost:8080/...)的絕對(duì)路徑是最容易漏網(wǎng)的地方建議所有重定向都用相對(duì)路徑或request.getContextPath()拼出來的動(dòng)態(tài)路徑。5.2 坑二MySQL 連接失敗報(bào)錯(cuò)指向ClassNotFoundException或Communications link failure現(xiàn)象項(xiàng)目跑起來訪問任何需要查數(shù)據(jù)庫的頁面都報(bào) 500Tomcat 控制臺(tái)打出一長(zhǎng)串異常要么是ClassNotFoundException: com.mysql.jdbc.Driver要么是Communications link failure。原因前者是驅(qū)動(dòng) JAR 沒用對(duì)——MySQL 5.x 的驅(qū)動(dòng)類名是 com.mysql.jdbc.DriverMySQL 8.x 換成了 com.mysql.cj.jdbc.Driver如果項(xiàng)目的 Java 工程里引入的是老驅(qū)動(dòng)包連新數(shù)據(jù)庫必然掉鏈子后者是數(shù)據(jù)庫地址或端口寫錯(cuò)比如本機(jī) MySQL 改了端口到 3307而 DBUtil 里還寫著 3306。解決驅(qū)動(dòng)類名改掉后還需要把 mysql-connector-java 的 JAR 包放進(jìn)項(xiàng)目的 WEB-INF/lib 目錄或者如果用的 IDEA在 Project Structure 里把 JAR 添加到 Libraries。連接 URL 的規(guī)范形如jdbc:mysql://localhost:3306/green_db?useSSLfalseserverTimezoneAsia/ShanghaiuseSSLfalse是關(guān)掉加密連接避免 MySQL 8 默認(rèn)開啟 SSL 帶來的告警serverTimezone是指定時(shí)區(qū)少一個(gè)都不行。5.3 坑三注冊(cè)和登錄功能正常但留言內(nèi)容一提交就變問號(hào)現(xiàn)象前臺(tái)所有頁面都是正常中文注冊(cè)用戶名也能正常入庫唯獨(dú)在留言板輸入的中文提交后數(shù)據(jù)庫里存的是????刷新頁面顯示的內(nèi)容全是問號(hào)。原因數(shù)據(jù)庫連接 URL 里沒帶characterEncodingutf8JDBC 驅(qū)動(dòng)用了默認(rèn)的 latin1 字符集去編碼中文字符存進(jìn)數(shù)據(jù)庫就已經(jīng)損壞了不是顯示層的問題。解決分兩步——第一步在 DBUtil.java 的連接 URL 末尾加characterEncodingutf8第二步確認(rèn)數(shù)據(jù)庫表本身的字符集是 utf8mb4登錄 MySQL 執(zhí)行ALTER TABLE message CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;。這兩步分別管的是「?jìng)鬏敃r(shí)的編碼」和「存儲(chǔ)時(shí)的編碼」缺一個(gè)都不行。這里有一個(gè)人容易忽略的細(xì)節(jié)MySQL 的 utf8 最多支持 3 字節(jié)字符而 emoji 表情需要 4 字節(jié)得用 utf8mb4 才存得下如果表里只想存純中文utf8 也夠用但統(tǒng)一用 utf8mb4 可以減少很多后顧之憂。5.4 坑四本地好好的一部署到別的電腦上就 404 或圖片全裂現(xiàn)象在自己電腦上跑項(xiàng)目沒任何毛病拷到舍友電腦或答辯老師電腦上首頁能打開但 CSS、JS、圖片完全不加載F12 看網(wǎng)絡(luò)請(qǐng)求全是 404。原因JSP 頁面里引用了本機(jī)項(xiàng)目部署后的絕對(duì)路徑比如link relstylesheet href/GreenWebsite/css/style.css換電腦部署時(shí)項(xiàng)目名變了路徑自然就廢了。解決所有靜態(tài)資源引用都改成由 JSP 動(dòng)態(tài)生成項(xiàng)目上下文路徑標(biāo)準(zhǔn)寫法是%request.getContextPath()%/css/style.css或者用 JSTL 的c:url標(biāo)簽生成。普通做法是每次部署換機(jī)器都用 IDEA 重新配置一個(gè) Tomcat這個(gè)操作本身不復(fù)雜但你要留神別在 web.xml 里寫死了context-root否則路徑永遠(yuǎn)對(duì)不上。直接改 JSP 里的路徑引用是最省事的方式項(xiàng)目換名字也不怕因?yàn)?request.getContextPath() 拿到的就是當(dāng)前部署真實(shí)名稱。6. 把演示做到能直接答辯的程度打包部署與驗(yàn)收自查清單項(xiàng)目跑通只是第一步想讓它在答辯現(xiàn)場(chǎng)不出丑還得提前演練。建議把打包部署到 Tomcat 的路徑完整走一遍。用 IDEA 的情況在菜單里點(diǎn) Build → Build Artifacts → 選擇綠色環(huán)保網(wǎng)站的 war 包編譯后輸出到 target 目錄用 eclipse 則是右鍵項(xiàng)目 → Export → WAR file勾選導(dǎo)出源文件和部署描述符輸出到一個(gè)干凈目錄。然后把 war 包復(fù)制到 Tomcat 的 webapps 目錄啟動(dòng) Tomcat 后它會(huì)自動(dòng)解壓部署訪問路徑是http://localhost:8080/GreenWebsite/。這里有個(gè)技巧解壓出來的目錄名就是項(xiàng)目上下文路徑如果你想讓訪問路徑短一點(diǎn)直接把目錄改成 ROOT訪問http://localhost:8080/就能直接進(jìn)首頁。部署到云服務(wù)器是進(jìn)階而且必問的問題。最少操作路徑是一臺(tái)系統(tǒng)為 CentOS 或 Ubuntu 的云主機(jī)遠(yuǎn)程安裝 JDK 8課設(shè)項(xiàng)目一般用 1.8 版本兼容性最好下載 Tomcat 9 的 tar.gz 包并解壓到 /opt/tomcat把 war 包用 scp 傳上去放進(jìn) webapps然后改防火墻規(guī)則確認(rèn) 8080 端口開放。數(shù)據(jù)庫部分要把本地的 sql 文件導(dǎo)入云服務(wù)器上的 MySQL記得把 DBUtil.java 里的 localhost 改成云數(shù)據(jù)庫的內(nèi)網(wǎng)或公網(wǎng)地址。如果公網(wǎng) IP 被防火墻禁了 3306別為省事開全端口改成用 SSH 隧道連數(shù)據(jù)庫。答辯現(xiàn)場(chǎng)最實(shí)用的附件是「驗(yàn)收清單」。出發(fā)前在本地電腦把項(xiàng)目從頭到尾跑一遍照著這個(gè)清單打勾訪客能不能打開首頁并瀏覽環(huán)保資訊點(diǎn)擊資訊詳情能不能看到完整內(nèi)容訪客能不能注冊(cè)新賬號(hào)注冊(cè)后能不能正常登錄并看到自己的登錄狀態(tài)未登錄時(shí)訪問后臺(tái)地址會(huì)不會(huì)被攔回來管理員賬號(hào)能不能登錄后臺(tái)后臺(tái)能不能新增一條環(huán)保資訊并且前臺(tái)刷新后能看到這條新內(nèi)容留言板提交留言后管理員在后臺(tái)能看到退出登錄后再次訪問需要登錄的頁面會(huì)不會(huì)被重定向到登錄頁。這九條全部打勾項(xiàng)目才具備「演示」的基本資格否則答辯現(xiàn)場(chǎng)現(xiàn)場(chǎng)翻車就難看了。我自己的習(xí)慣是每次拿到一個(gè)新的課設(shè)項(xiàng)目落地之后不急著改功能先用「登錄 → 增刪改查 → 權(quán)限攔截 → 編碼轉(zhuǎn)換」的順序把全鏈路跑一遍每跑通一環(huán)記一個(gè)截圖。這些截圖后面排版成演示文稿時(shí)一張圖配一句講解比現(xiàn)場(chǎng)臨場(chǎng)演示穩(wěn)定得多。尤其是「未登錄用戶訪問后臺(tái)被攔截」這種截圖在答辯時(shí)能講三分鐘是一個(gè)白送的加分項(xiàng)。希望這套基于 javaHTML5 的綠色環(huán)保網(wǎng)站能幫到你少走幾個(gè)彎路特別是部署環(huán)節(jié)把上面的巡查落實(shí)了再談改代碼能省下大把時(shí)間。本文還有配套的精品資源點(diǎn)擊獲取