開發用戶註冊模塊
1、模塊描述
在用戶註冊模塊首頁中，將實時顯示最新註冊的用戶、註冊用戶總數和最新註冊的20個用戶。單擊“註冊”超鏈接，將顯示用戶註冊頁面，在用戶註冊頁面輸入用戶名後，將光標移出該文本框，系統將自動檢測輸入的用戶名是否合法（包括用戶名長度及是否註冊），如果不合法，將給出錯誤提示。同樣，當輸入其他信息是，系統也將實時檢測輸入的信息是否合法。當信息輸入完成後，單擊“提交”按鈕，該用戶信息將被保存到數據庫中
2、系統流程
用戶註冊模塊由兩部分組成，一部分是實時獲取最新的用戶信息，另一部分是實現用戶註冊。用戶註冊模塊的系統流程如下圖：
3、關鍵技術
①Ajax重構
Ajax重構主要用於實現異步發送和獲取數據，在實時獲取用戶信息、異步檢測用戶名是否註冊、級聯獲取省市信息和異步保存用戶註冊信息時應用。
②Dom4j解析XML
利用Dom4j解析XML的目的是將獲取的最新用戶信息輸出到XML文檔中。本模塊主要用到了創建利用XML文檔、創建根節點、創建子節點、設置節點內容、設置編碼、設置輸出格式和輸出XML文檔到瀏覽器等技術
③通過JavaScript操作DOM
通過JavaScript操作DOM主要應用在將異步獲取的數據顯示給用戶時。本模塊主要用到了通過元素的ID和name屬性獲取元素和應用innerHTML屬性聲明元素包含的HTML文本等技術。
4、數據庫設計
本模塊采用的是MySQL數據庫，系統數據庫名為db_user_login，其中用於保存用戶註冊信息的數據表為tb_user，該數據表的表結構如圖：
|
Column Name |
Datatype | Primary Key | Comment |
|
id |
INTEGER | √ | ID號 |
|
name |
VARCHAR(20) | 用戶名 | |
|
password |
VARCHAR(30) | 密碼 | |
|
|
VARCHAR(100) | E-mail地址 | |
|
question |
VARCHAR(30) | 密碼提示問題 | |
|
answer |
VARCHAR(50) | 提示問題答案 | |
|
createTime |
TIMESTAMP | 註冊時間 | |
|
city |
VARCHAR(10) | 居住地 |
5、實現過程
①創建Maven項目，並引入相關的依賴
②實現Ajax重構
實現代碼重構時，創建一個單獨的JS文件，名稱為AjaxRequest.js，在該文件中編寫重構Ajax所需的代碼。
然後在index.jsp頁面中引入AjaxRequest.js文件
③、設計模塊首頁
④、設計用戶註冊頁面
⑤驗證輸入信息的有效性
⑥保存用戶註冊信息
⑦實時顯示用戶信息
開發用戶註冊模塊