第五章  系统实现与说明

 系统概况

系统采用Eclipse创建，Eclipse版本为eclipse-jee-mars，项目类型为Maven的webApp项目。

图 5-1 创建的项目类型

Maven项目的核心文件是pom。xml，该文件存放在项目的根路径中，pom。xml中记录了项目的依赖包配置，项目使用了Spring+Hibernate框架，需要引入Spring的核心依赖以及Hibernate的核心依赖，同时项目中使用了一些其他第三方jar包，如Httpclient以及gson等，均在pom。xml中进行配置。传统的jar包引入是从网络下载jar包然后导入到lib下，但maven的项目只需在文件中配置，项目依赖的配置格式如下：

该配置表示引入spring-context-support包，该包版本是4。1。1。RELEASE。其他的依赖包采用类似方法，配置参数需参考不同的jar包提供的官网提供的maven配置说明。

该项目包含的界面有登录界面，聊天界面，注册界面和记录查询界面。

图 5-2 项目界面结构

login。jsp：登录界面，完成用户登录。

record。jsp：查询记录界面，可查看已登录用户的查询记录。

register。jsp：注册界面，完成用户注册。

robot。jsp：聊天界面，用户可与机器人聊天。

 登录模块实现

实现概述

登录界中用户会根据提示输入用户名和密码，Login按钮来完成登录请求，免登录按钮可以直接跳转到聊天界面，但是用户无法查询自己的聊天记录，注册链接可以导航到注册页，输入的用户名或密码为空、用户名和密码组合错误系统均有错误提示。为了减轻后台的压力，用户名和密码是否为空的验证首先在本地运行，其次再由后台决定，本地验证的实现是使用JavaScript进行是否为空验证。

图 5-3 登录界面

技术关键点

Ajax的使用：

机器人的聊天界面采用Ajax局部刷新技术，如果采用实时刷新那么无论从用户的体验上还是流量上来说都是不明智的选择，界面将会嵌入在App端，节省流量将会是一个重要的问题。

Jquery对移动端的支持不是很好，因此采用javascript的原生Ajax方法。文献综述

系统在javascript脚本中封装出了入口，这样无论是在网页端还是给App定制的网页端都能通过该入口与网页交互，在ajax中调用了系统提供的一个web服务接口，该接口完成查询记录的上传和各种服务的调用，并将结果返回给调用该服务接口的方法。返回的内容是html格式的，前台可以将该文本添加在网页中，完成局部刷新，提供良好的用户体验。

该javascript方法在robot。jsp界面中。

 注册模块实现

实现概述

注册界面用户需要输入用户名和密码，邮箱选项为可选，Register按钮来完成提交，重置按钮帮助清空输入框，已有账号按钮可以跳转到登录界面。注册界面中用户名密码和邮箱均有属性验证，若用户名或密码太长或太短、用户名已经被使用或者邮箱的格式错误等，系统均会给出错误提示。属性的验证使用Hibernate的验证机制，用户名是否被使用需要查询数据库，进而决定用户名的可用性。注册界面提交时，需要验证用户名和密码是否为空，方法也是使用了JavaScript进行是否为空的验证。

图 5-4 注册界面

技术关键点

Hibernate表单验证：

用户注册时，需要填写的表单和数据库中的用户表是对应的，使用Hibernate的表单验证机制时首先需要在与表单对应的类上做表单验证标注。

 聊天模块实现来.自^优;尔|论,文:网www.youerw.com +QQ752018766-

未登录聊天实现

此界面直接在浏览器中打开，因此自带输入框与发送按钮，界面上有登录按钮，如果用户需要登录可以导航到登录界面。用户输入聊天内容后，网页通过JavaScript完成局部刷新，将用户输入的内容附加在界面上，同时向后台发送聊天内容，从而获取回复，并显示在界面上。