一.?團隊課程設計博客鏈接

https://www.cnblogs.com/lanxiang/p/10293812.html

二.個人負責模塊和任務說明

負責前后端數據傳輸

JSP界面的設計

根據后臺傳來的數據進行頁面動態更新

負責Servlet設計

三.自己的代碼提交記錄截圖

四.自己負責模塊或任務詳細說明

登入頁面設計和后臺的數據交互：

獲取數據庫信息，將信息顯示在排行榜上

通過后臺傳來的數據，動態更新界面，完成斗地主游戲

主要代碼：

1.前后端數據傳輸

JSP傳遞數據給Servlet:

(1)form表單的提交

前端：Login.jsp:

通過點擊帶有type="submit"的提交按鈕，表單數據便會傳輸到圖中action所指向Servlet , 提交的方式為“post” (本處的提交方式有兩種，分別為“get”和“post” 。 jsp中表單提交默認是以“get”方式提交，而將其改為“post”是因為“get”是以明文方式通過URL提交數據，數據直接在URL中顯示，安全性較差。而“post”是將提交信息封裝在html header中，安全性較高且支持提交的數據量比“get”方式更大 )

后端：LoginServlet.java:

后臺只要通過request.getParameter("前端接收的屬性名") 便可以將用戶信息接受進來。

(2)通過超鏈接href遞交數據

前端：Start.jsp

window.location.href是JavaScript中把瀏覽器重定向到新的頁面的一種方法。

傳輸形式如XXX?A=1&B=2; 其中XXX是所要跳轉的地方，而A是傳輸的數據名，其后跟上它的值。多個數據時是以&將其隔開。

后端接收也使用request.getParameter接收。

(3)通過Ajax提交數據(重點)

本次課設中是調用jQuery中的ajax()方法進行發送請求的，所以首先需引入jQuery。

前端DataTransmissiom.js:

type: 所要請求的方式(post或get)。

url: 發送請求的地址。

contentType：內容編碼類型，默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。但是要傳輸復雜的json對象時就須要使用application/json 。

traditional: 有true和false兩種值，默認的話，traditional為false，即jquery會深度序列化參數對象，servrlet api 無法處理， 而設為true便可阻止深度序列化。這樣就可以在Java后臺通過request.getParameterValues() 就可以簡單獲取數組了。(適用于簡單的字符串數組，復雜的對象還是使用默認值，在后臺再使用流進行讀取)

success: 載入成功后執行回調函數

還有個getJSON專門請求json數據，格式為$.getJSON(url,[data],[callback])

url：string類型， 發送請求地址

data ：可選參數， 待發送 Key/value 參數 ，同get，post類型的data

callback ：可選參數，載入成功時回調函數，同get，post類型的callback

后臺數據返回：

后臺可以定義一個map集合，然后將鍵值對一一對應，最后使用JSON.toJSONString()方法轉化為json字符串返回給前端。

Servlet傳遞數據給JSP:

RankingListServlet：

前一個框是將排行榜的數據庫信息加入request，然后使用request.getRequestDispatcher().forward(request,response)轉發到前端的jsp界面。此時前后頁共用一個request，就可以通過此來傳遞一些數據或者session信息。

(補充：還有個response.sendRedirect()方法，屬于重定向，也是客戶端跳轉，前后頁不共用一個request，所以不能讀取request.setAttribute()設置的屬性值。)

注意：“這里有一個坑，就是當使用Ajax對servlet發送請求后，servlet內部無論是使用response.sendRedirect 或者 ?request.getRequestDispather() 都是無效的?！?/p>

百度后其原因是：因為servlet拿到的是ajax發送過來的request，而不是瀏覽器發送的請求的，所以servlet對request進行請求轉發和重定向對瀏覽器都不能影響瀏覽器的跳轉，這就是請求轉發和重定向失效的原因。

2.前后端數據傳輸

界面上的元素創建

Ajax通過在后臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

因此，我通過Ajax獲取初始的牌組，而這里可以通過每個牌各自的名字來創建相應的img標簽，并給每個img標簽加上了點擊事件up()(后面可以通過這個方法來獲取用戶所選擇的出牌)

注意：要在界面中添加標簽，必須找到他的父級對象，在使用appendChild()方法，才能將標簽顯示在界面上。

用戶選牌并出牌過程

選牌：

在JavaScript中有一個getElementsByClassName()方法，他可以返回文檔中所有指定類名的元素集合。其中第一個為所要指定的類名，第二個為指定獲取哪個父級元素下的指定類名的元素集合。這樣我們就可以獲取用戶所出的牌了。

出牌：

在后臺判斷用戶可以出牌的情況下，將牌顯示在桌面上。

首先便是將桌面清空，其次將剛剛獲取的用戶出牌牌組顯示在桌面上。

3.JSP界面設計

頁面布局

如圖，我將五個大塊，分別為上下左右中，主要是用css中position屬性實現的如上布局，將整個板塊設為position: relative; 再將除中間塊的那四大塊設為position: absolute; 便可通過top,left等屬性，在

界面上放置在相應位置。

簡單的界面美化和運用bootstrap等框架的使用

界面美化可以考慮bootstrap等框架，在bootstrap中有許多以設計好的css樣式，如圖我便引用了他的按鈕樣式。

Bootstrap有個強大的功能，那便是可以簡單的實現響應式布局，即意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。滿足不同尺寸的終端設備非常完美的展現網頁內容。

五.課程設計感想

關于數據傳遞的想法

可以使用Session方法：在用戶進行第一次訪問服務器，服務器可以為每個用戶瀏覽器創建一個會話對象(session對象)。而我們可以將對應該用戶的固定信息寫入進去，就可以在servlet和jsp直接讀取。就不用再將這些信息在這之間傳來傳去了。

關于排行榜獲取數據庫數據的感想

在獲取排行榜信息時，我首先想到的是在頁面加載后通過Ajax進行數據的請求，但是可能會造成一點延時。而后在百度上了解到：要在jsp頁面顯示數據庫數據，一般是先到一個servlet進行取數據處理，把取到的數據設到request中去，然后請求轉發到jsp頁面。而不是加載頁面再去請求數據。

因此需要將訪問排行榜的鏈接，先行訪問到獲取數據的servlet，把得到的數據設置到request 之后進行forword跳轉。

總結

以上是生活随笔為你收集整理的斗地主Java课程设计_Java课程设计---web版斗地主的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。