开发用户注册模块

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)		密码
email	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文件

　　③、设计模块首页

　　④、设计用户注册页面

　　⑤验证输入信息的有效性

　　⑥保存用户注册信息

　　⑦实时显示用户信息