實驗目的：
了解web應用程序開發的流程
了解MVC設計思想
進一步提高Java面向對象編程的能力
掌握MySQL數據庫的基本操作
掌握Java訪問/操作MySQL數據庫的基本操作
實驗步驟：
一、需求分析
二、設計
1、數據庫設計
（1）角色表role
| 字段名 |
字段類型 |
備注 |
| roleId |
int |
角色編號（主鍵，自動編號） |
| roleName |
varchar(20) |
角色名（本系統兩種角色，分別是普通用戶和管理員） |
輸入兩條記錄
| roleId |
roleName |
| 2 |
普通用戶 |
| 1 |
管理員 |
（2）用戶表member
| 字段名 |
字段類型 |
備注 |
| userId |
int |
用戶編號（自動編號，主鍵） |
| userName |
varchar(50) |
用戶名（唯一） |
| password |
varchar(255) |
密碼 |
| roleId |
int |
角色編號（外鍵） |
| realName |
varchar(50) |
姓名 |
輸入2條記錄進行測試：
| userId |
userName |
password |
roleId |
realName |
| 1 |
mike |
123456 |
0 |
劉玄德 |
| 2 |
admin |
123456 |
1 |
任我行 |
（3）分類表 category
| 字段名 |
字段類型 |
備注 |
| categoryId |
int |
分類編號（主鍵，自動編號） |
| categoryName |
varchar(50) |
分類名稱 |
（4）新聞表 news
| 字段名 |
字段類型 |
備注 |
| newsId |
int |
新聞編號（主鍵，自動編號） |
| title |
varchar(255) |
新聞標題 |
| content |
varchar(5000) |
新聞內容 |
| userId |
int |
作者（即用戶編號，外鍵） |
| postTime |
datetime |
發表時間（默認值為當前時間（Current_timestamp()） |
| hits |
int |
點擊次數（默認值為0） |
| categoryId |
int |
分類編號（外鍵） |
2、項目設計
（1）新建web項目news
（２）web ＵＩ（用戶界面）設計
bootstrap
a.設計統一的導航欄
b.設計登錄界面（模態框）
c.設計注冊界面（模態框）
三、開發
１、實現登錄功能。
mysql加密函數：
password()：早期的加密函數，8.x已移除了。
md5()：5.x or 8.x
sha()：5.x or 8.x
（１）登錄驗證
（２）cookie記住用戶名和密碼
（３）session存儲登錄用戶的信息
2、實現注冊功能
（１）將填寫的用戶信息寫入數據庫
（２）在寫入之前進行數據驗證
客戶端驗證（js驗證）：
html+css+js
js：行為，表單驗證和增強網頁動態效果。
js代碼可以在網頁的任何位置嵌入，以<script>來標記。
獲取DOM對象的方法：
如果是表單元素，可以直接通過name得到。
比如：form2.userName.value
正則表達式
正則表達式對象：
（1）/<正則表達式>/[參數]
（2）new Regex(<正則表達式>)
調用正則表達式的方法：
格式：<正則表達式對象>.test(<字符串>)
功能：判斷指定的字符串是否匹配正則表達式，返回值是bool型。
正則表達式的模式：
^：字符開始，例如：^[0-9]
$：字符結束，例如：[a-f]$
漢字的Unicode編碼范圍：u4E00-u9FA5
客戶端數據驗證
服務器端數據驗證
檢測用戶名是否存在
onblur：是一個失去焦點事件