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

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

• 負責前後端數據傳輸
• 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() 都是無效的。”

百度後其原因是：因為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課程設計---web版鬥地主