前面已經進行了總體的設計，本章將詳細介紹各功能模塊的具體實現過程，通過對這些功能描述，提高了用戶對本系統的了解。

1.1 各模塊的實現

基于WEB的在線客服系統主要包括聊天管理模塊、用戶管理模塊兩大模塊，具體的實現如下。

1.1.1 聊天管理模塊的實現

1.用戶登錄界面

圖1.1 基于WEB的在線客服系統登錄界面

該頁面是登錄頁面，如上圖所示，用戶輸入帳號、密碼后，可以進入對應的功能頁面。

2.游客界面

圖1.2 基于WEB的在線客服系統游客界面

該頁面是游客登錄頁面，如上圖所示，在游客點擊游客入口進入到本頁面。

系統實現：在游客登錄此頁面后，系統通過調用mainMain.jsp頁面中的application.getAttribute方法進行在線客服人員信息提取，以此顯示當前在線的客服工作人員，當游客點擊在線客服人員時，系統調用chatmain.jsp頁面方法進行在線交流。  

3.客服界面

圖1.3 基于WEB的在線客服系統客服界面

該頁面是客服登錄界面，如上圖所示，在客服人員在輸入賬號密碼后點擊客服登錄進入到本頁面。

系統實現：在客服人員登錄此頁面后，系統通過調用mainMain.jsp頁面中的application.getAttribute方法進行在線游客信息提取，以此顯示當前在線的游客，當客服人員點擊在線游客時，系統調用chatmain.jsp頁面方法進行在線交流。  系統管理模塊的實現

1.客服人員管理界面

圖1.4 基于WEB的在線客服系統客服人員管理界面

客服管理通過調用kfMessage,jsp調用此功能，通過在user表中查詢相應信息，返回當前客服人員管理信息對人員進行查看和刪除。

2.游客管理界面

圖1.5 基于WEB的在線客服系統游客管理界面

客服管理通過調用ykMessage,jsp調用此功能，通過在user表中查詢相應信息，返回當前人員管理信息對游客進行查看和刪除。

3.用戶添加界面

圖1.6 基于WEB的在線客服系統用戶添加界面

此頁面是用戶添加界面。

系統實現：在此頁面中輸入用戶名和密碼選擇用戶角色點擊添加按鈕，跳轉到doAddEmployee.jsp頁調用UserDao.addUser方法進行用戶添加。

1.2 人機交互界面設計

1.2.1 界面整體風格設計

圖1.1 基于WEB的在線客服系統整體界面1

圖1.2 基于WEB的在線客服系統整體界面2

該頁面是本系統的總體設計界面，主要包括兩大功能，用戶和管理員兩大模塊，分別有不同的功能，屬于三級聯動的形式，上端和左側屬于導航，點擊對應相應的功能。

1.2.2 界面顏色搭配

本系統主要以素色為主，界面簡單樸素、大方，主色調以白色為主，使使用者在視覺上產生舒適的效果，緩解了繁重、大篇幅的商品帶來的視覺疲勞。