一. 團隊課程設計博客鏈接
二.個人負責模塊和任務說明
- 負責前后端數據傳輸
- 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跳轉。