【編程新技術實務】實驗二 HTML以及J2EE簡單編程(Java Web工程 JSP+Servlet+Mysql)

實驗目的

安裝配置好Tomcat應用服務器,使用Java進行JSP、Servlet的編寫web應用並將其部署到Tomcat上

實驗對應知識點

結合HTML進行JavaEE框架中的JSP、Servlet編程

實驗前任務

學習Java的基本語法以及Java數據庫編程

實驗要求及步驟

一、Tomcat應用服務器安裝配置

官網:https://tomcat.apache.org
我下載的版本是8.5.47。
啓動startup.bat效果如圖:
在這裏插入圖片描述
若出現亂碼問題,將conf\logging.properties中java.util.logging.ConsoleHandler.encoding的值改爲GBK即可。
在localhost:8080頁面可看到如下界面:
在這裏插入圖片描述
在Idea中配置好Tomcat環境,略。

二、編寫web頁面,完成對實驗一數據庫的操作

1、編寫頁面如圖2.6所示

圖2.6 數據庫操作頁面圖
2、分別對應於2個表單編寫後臺處理邏輯(可以用JSP或Servlet進行處理),然後返回一個頁面處理結果的頁面,告知用戶成功完成什麼操作(如是進行了刪除操作則信息相應改變),頁面內有鏈接進行數據庫數據的查詢,如圖2.7所示。
圖2.7 數據庫操作頁面圖
3、點擊”查看數據庫數據”則跳轉到如圖2.8所示頁面,將數據庫數據在頁面中呈現出來,頁面內有返回數據庫操作頁面的鏈接,點擊即可跳轉到數據庫操作頁面。
圖2.8 數據庫數據查詢頁面圖

具體實現

項目主體結構

在這裏插入圖片描述
具體地:
在這裏插入圖片描述
1、bean層實現數據的封裝,是數據庫中數據的映射
2、dao層實現數據的持久化操作,如增刪改查
3、service層是業務邏輯的實現
4、util層是工具,這裏只用了讀取配置文件的和連接數據庫的
5、web層實現前後臺的控制
6、classes文件夾存的是編譯後的class文件
7、css
8、要用到的圖片
9、js
10、lib文件夾存的是第三方包,這裏的5個包中,第1、2個是和beanUtils有關的包,第3、4個是jstl標籤庫相關的包,第5個是jdbc驅動包。
11、jsp,建個jsp文件夾貌似更好看
(css和js可以在bootstrap上找https://v3.bootcss.com/

主要實現思想

三層架構(3-tier architecture) 通常意義上的三層架構就是將整個業務應用劃分爲:界面層(User Interface layer)、業務邏輯層(Business Logic Layer)、數據訪問層(Data access layer)。區分層次的目的即爲了“高內聚低耦合”的思想。在軟件體系架構設計中,分層式結構是最常見,也是最重要的一種結構。微軟推薦的分層式結構一般分爲三層,從下至上分別爲:數據訪問層、業務邏輯層(又或稱爲領域層)、表示層。

以上引用來自百度百科——三層架構
具體細節在此不贅述,仔細看看代碼就會有更深的理解。

效果展示

1、
在這裏插入圖片描述
在這裏插入圖片描述
在數據提交至後臺前,會對數據的合法行進行一個初步的檢查。還提供了重置操作。返回操作可以忽略。

2、
在這裏插入圖片描述
提示操作的合法性

3、
在這裏插入圖片描述
(要不是避免數據看不清,纔不用這個背景圖)
(有些數據是完成整個項目之前插入的,所以可能會有若干(一個,Person表中的一個電話號碼)數據不符合要求)

實現代碼

代碼有點多,上傳到了github。這裏給出我做的該系列實驗的github地址:編程新技術實務。相關細節以後可能會更新。

實驗感言

這個實驗前前後後花了三天時間了,可以說配環境、調bug就佔了一半的時間,但是調bug是個很好的學習過程。
感觸有幾點:
1、重視編碼方式,jsp發送表單數據到servlet時編碼方式不一樣都有可能造成無法接收數據的情況。
2、重視路徑,很多問題的產生來源於路徑設置不對,比如配環境的過程中。這裏必須指出,WEB-INF/lib下的包最好也複製到Tomcat的lib目錄下。
3、寫js這種前端類語言,有錯誤運行後又不提醒哪兒錯,寫的時候一定要細心。
做了這個簡單的Java Web工程,對前後端有了進一步的瞭解,挺有意思的,比起算法競賽不費腦一點(這就是我連續三天一直做這個實驗的原因了吧)。

就不該找yg老師驗,頁面都沒看就說行了,打了個A…

知識淺薄,若有錯誤、不足之處歡迎私信或留言。

主要參考資料

[1]CSDN——Javaweb實現增刪改查操作操作
[2]CSDN——Java Web idea中各個包所放類的作用說明
[3]bilibili——JSP_增刪改查分頁小案例

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章