01travel_注册功能

旅游网综合案例

1、前言

为了巩固web基础知识，提升综合运用能力，故而讲解此案例。要求，每位同学能够独立完成此案例。

2、项目导入

MavenProject：点击+，然后找到项目所在的位置，选择travel项目的pom.xml文件，点击ok，完成项目导入。需要等待一小会，项目初始化完成。

3、启动项目

1. 方式一：MavenProject -->Plugins -->tomcat7 -->tomcat7:run
2. 方式二：配置maven快捷启动
   1.
   2.

4、技术选型

1. web层
   • Servlet：前端控制器
   • HTML：视图，效果展示
   • Filter：过滤器：web组件之一
   • BeanUtils：封装JavaBean
   • Jackson：json序列化工具
2. Service层
   • Javamail：Java发送邮件的工具
   • Redis：nosql内存数据库
   • Jedis：java的redis客户端
3. Dao层
   • mysql：数据库 -->后期可以用Mybatis代替
   • Druid：数据库连接池
   • JDBCTemplate：jdbc的工具

5、创建数据库

5.1、创建数据库

create database travel;

5.2、创建表

6、注册功能实现

register.html

1. 使用js完成表单校验
2. 使用ajax完成表单提交
3. 注册成功，跳转到成功页面

RegisterUserServlet

1. 设置编码(filter)
2. 封装User对象
3. 调用service完成注册
4. 根据service的返回，提示信息
   1. 将提示的信息转为json，并返回客户端
   2. 设置响应的头信息 contentType

UserService

registerUser(User user)：service中，注册方法

 		1. 调用dao，根据用户名查询用户
      * 用户存在，直接返回false，不让注册
      * 不存在，调用dao保存用户信息，完成注册

UserDao

findUserByUsername(String username)：根据用户名，查询用户信息，判断用户是否已经被注册过

registerUser(User user)：UserDao中的注册方法，上面的方法查询不到时再注册。

7、前台代码

7.1、表单校验

表单校验：在组件失去焦点时或者submit时校验，如果校验通过的话就可以提交，反之不能提交

1. 用户名：数字和单词组成，5–20位

   var reg_username = /^\w{5,20}$/;
   

2. 密码：数字和单词组成，8–20位

   var reg_password = /^\w{8,20}$/;
   

3. 邮箱：正常的邮箱格式

   var reg_email = /^\w+@\w+\.\w+$/;
   

4. 姓名：不能为空

5. 手机号码：不能为空

6. 出生日期：不能为空

7. 验证码：不能为空

   校验正则表达式

   //校验用户名：单词字符，5--20位
   function checkUsername() {
        
       //1获取用户名的值
       var username = $("#username").val();
       //2定义正则
       var reg_username = /^\w{5,20}$/;
       //3判断，给出提示信息
       var flag = reg_username.test(username);
       if (flag) {
        
           //用户名合法
           $("#username").css("border", "")
       } else {
        
           //用户名非法:加一个