JavaWeb-书城项目

No.1 验证表单
- 需求分析
- 步骤分析
No.2 用户注册和登录

此项目是笔者跟随尚硅谷JavaWeb课程学习所作，在此基础上增加了一些自己的理解。

No.1 验证表单

需求分析

用户名的验证：由5-12位字母、数字或者下划线组成
密码的验证：由5-12位字母、数字或者下划线组成
密码确认：和上次输入密码保持一致
邮箱的验证：xxxxx@xxx.com

步骤分析

采用IDEA新建模块book_1
将书城的静态资源copy至book_1工程下
验证实现于如下代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
		<script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function () {
				$("#sub_btn").click(function () {
					var usernameText = $("#username").val();					
					var usernamePatt = /^\w{5,12}$/;					
					if (!usernamePatt.test(usernameText)) {
						$("span.errorMsg").text("用户名不合法！");

						return false;
					}

					
					var passwordText = $("#password").val();
				
					var passwordPatt = /^\w{5,12}$/;
					
					if (!passwordPatt.test(passwordText)) {
						
						$("span.errorMsg").text("密码不合法！");

						return false;
					}

					
					var repwdText = $("#repwd").val();
					
					if (repwdText != passwordText) {
						
						$("span.errorMsg").text("确认密码和密码不一致！");

						return false;
					}

					
					var emailText = $("#email").val();
				
					var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
					
					if (!emailPatt.test(emailText)) {
					
						$("span.errorMsg").text("邮箱格式不合法！");

						return false;
					}

				
					var codeText = $("#code").val();

					
					codeText = $.trim(codeText);
			

					if (codeText == null || codeText == "") {
					
						$("span.errorMsg").text("验证码不能为空！");

						return false;
					}

			
					$("span.errorMsg").text("");

				});

			});

		</script>
	<style type="text/css">
		.login_form{
			height:420px;
			margin-top: 25px;
		}

	</style>
	</head>
	<body>
		<div id="login_header">
			<img class="logo_img" alt="" src="../../static/img/logo.gif" >
		</div>

			<div class="login_banner">

				<div id="l_content">
					<span class="login_word">欢迎注册</span>
				</div>

				<div id="content">
					<div class="login_form">
						<div class="login_box">
							<div class="tit">
								<h1>注册会员</h1>
								<span class="errorMsg"></span>
							</div>
							<div class="form">
								<form action="http://localhost:8080">
									<label>用户名称：</label>
									<input class="itxt" type="text" placeholder="请输入用户名"
										   autocomplete="off" tabindex="1" name="username" id="username" />
									<br />
									<br />
									<label>用户密码：</label>
									<input class="itxt" type="password" placeholder="请输入密码"
										   autocomplete="off" tabindex="1" name="password" id="password" />
									<br />
									<br />
									<label>确认密码：</label>
									<input class="itxt" type="password" placeholder="确认密码"
										   autocomplete="off" tabindex="1" name="repwd" id="repwd" />
									<br />
									<br />
									<label>电子邮件：</label>
									<input class="itxt" type="text" placeholder="请输入邮箱地址"
										   autocomplete="off" tabindex="1" name="email" id="email" />
									<br />
									<br />
									<label>验证码：</label>
									<input class="itxt" type="text" style="width: 150px;" id="code"/>
									<img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px">
									<br />
									<br />
									<input type="submit" value="注册" id="sub_btn" />
								</form>
							</div>

						</div>
					</div>
				</div>
			</div>
		<div id="bottom">
			<span>
				书城.
			</span>
		</div>
	</body>
</html>

No.2 用户注册和登录

需求分析

用户注册

1）访问注册页面
2）填写注册信息，提交给服务器
3）服务器应该保存用户
4）当用户已经存在----提示用户注册失败，用户名已存在
5）当用户不存在-----注册成功

用户登录

1）访问登录页面
2）填写用户名密码后提交
3）服务器判断用户是否存在
4）如果登录失败 —>>>> 返回用户名或者密码错误信息
5）如果登录成功 —>>>> 返回登录成功信息

思路分析

在书城第一阶段的基础上，实现用户注册和登录功能

首先明确完成用户注册和登录功能需要从JavaEE的三层架构入手，分别是Web层、Service层和Dao层。
Web层是视图表现层，主要功能有获取客户端的请求参数，并将其封装成为Bean对象；调用Service层，进行业务的处理；将数据返回给客户端解析展示在客户端页面上。
Service层是业务处理层，它的作用是进行业务的处理以及调用持久层实现对数据到数据库的交互。
Dao层是持久层，作用是实现与数据库的交互，进行对数据的增删改查。

步骤分析

建造书城需要的数据库和表

CREATE DATABASE book;

USE book;

CREATE TABLE t_user(
   id INT PRIMARY KEY AUTO_INCREMENT,
   `username` VARCHAR(20) NOT NULL UNIQUE,
   `password` VARCHAR(32) NOT NULL,
   `email` VARCHAR(200) 
);

INSERT INTO t_user(`username`,`password`,`email`) VALUES('admin','admin','admin@guigu.com');

SELECT * FROM t_user;

编写数据库表对应的 JavaBean 对象


public class User {
    private Integer id;
    private String username;
    private String password;
    private String email;
}

编写工具类 JdbcUtils

(1)编写jdbc.properties 属性配置文件

username=root 
password=root 
url=jdbc:mysql://localhost:3306/book driverClassName=com.mysql.jdbc.Driver 
initialSize=5 
maxActive=10

(2)编写 JdbcUtils 工具类

package com.atguigu.utils;

import com.alibaba.druid.pool.DruidDataSource;
import com.alibaba.druid.pool.DruidDataSourceFactory;

import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;

public class JdbcUtils {

    private static DruidDataSource dataSource;

    static {
        try {
            Properties properties = new Properties();
            // 读取 jdbc.properties属性配置文件
            InputStream inputStream = JdbcUtils.class.getClassLoader().getResourceAsStream("jdbc.properties");
            // 从流中加载数据
            properties.load(inputStream);
            // 创建 数据库连接 池
            dataSource = (DruidDataSource) DruidDataSourceFactory.createDataSource(properties);
        } catch (Exception e) {
            e.printStackTrace();
        }

    }



    /**
     * 获取数据库连接池中的连接
     * @return 如果返回null,说明获取连接失败<br/>有值就是获取连接成功
     */
    public static Connection getConnection(){

        Connection conn = null;

        try {
            conn = dataSource.getConnection();
        } catch (Exception e) {
            e.printStackTrace();
        }

        return conn;
    }

    /**
     * 关闭连接，放回数据库连接池
     * @param conn
     */
    public static void close(Connection conn){
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }

}

(3)JdbcUtils 测试

package com.atguigu.test;

import com.atguigu.utils.JdbcUtils;
import org.junit.Test;

import java.sql.Connection;

public class JdbcUtilsTest {

    @Test
    public void testJdbcUtils(){
        for (int i = 0; i < 100; i++){
            Connection connection = JdbcUtils.getConnection();
            System.out.println(connection);
            JdbcUtils.close(connection);
        }
    }

}

编写 BaseDao

(1)编写 BaseDao

package com.atguigu.dao.impl;

import com.atguigu.utils.JdbcUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import java.sql.Connection;
import java.sql.SQLException;
import java.util.List;

public abstract class BaseDao {

    //使用DbUtils操作数据库
    private QueryRunner queryRunner = new QueryRunner();

    /**
     * update() 方法用来执行：Insert\Update\Delete语句
     *
     * @return 如果返回-1,说明执行失败<br/>返回其他表示影响的行数
     */
    public int update(String sql, Object... args) {
        Connection connection = JdbcUtils.getConnection();
        try {
            return queryRunner.update(connection, sql, args);
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            JdbcUtils.close(connection);
        }
        return -1;
    }

    /**
     * 查询返回一个javaBean的sql语句
     *
     * @param type 返回的对象类型
     * @param sql  执行的sql语句
     * @param args sql对应的参数值
     * @param <T>  返回的类型的泛型
     * @return
     */
    public <T> T queryForOne(Class<T> type, String sql, Object... args) {
        Connection con = JdbcUtils.getConnection();
        try {
            return queryRunner.query(con, sql, new BeanHandler<T>(type), args);
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            JdbcUtils.close(con);
        }
        return null;
    }

    /**
     * 查询返回多个javaBean的sql语句
     *
     * @param type 返回的对象类型
     * @param sql  执行的sql语句
     * @param args sql对应的参数值
     * @param <T>  返回的类型的泛型
     * @return
     */
    public <T> List<T> queryForList(Class<T> type, String sql, Object... args) {
        Connection con = JdbcUtils.getConnection();
        try {
            return queryRunner.query(con, sql, new BeanListHandler<T>(type), args);
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            JdbcUtils.close(con);
        }
        return null;
    }

    /**
     * 执行返回一行一列的sql语句
     * @param sql   执行的sql语句
     * @param args  sql对应的参数值
     * @return
     */
    public Object queryForSingleValue(String sql, Object... args){

        Connection conn = JdbcUtils.getConnection();

        try {
            return queryRunner.query(conn, sql, new ScalarHandler(), args);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            JdbcUtils.close(conn);
        }
        return null;

    }

}

编写 UserDao和测试

(1)UserDao接口

package com.atguigu.dao;

import com.atguigu.pojo.User;

public interface UserDao {



    /**
     * 根据用户名查询用户信息
     * @param username 用户名
     * @return 如果返回null,说明没有这个用户。反之亦然
     */
    public User queryUserByUsername(String username);

    /**
     * 根据 用户名和密码查询用户信息
     * @param username
     * @param password
     * @return 如果返回null,说明用户名或密码错误,反之亦然
     */
    public User queryUserByUsernameAndPassword(String username,String password);

    /**
     * 保存用户信息
     * @param user
     * @return 返回-1表示操作失败，其他是sql语句影响的行数
     */
    public int saveUser(User user);

}

(2)UserDaoImpl 实现类：

package com.atguigu.dao.impl;

import com.atguigu.dao.UserDao;
import com.atguigu.pojo.User;

public class UserDaoImpl extends BaseDao implements UserDao {
    @Override
    public User queryUserByUsername(String username) {
        String sql = "select `id`,`username`,`password`,`email` from t_user where username = ?";
        return queryForOne(User.class, sql, username);
    }

    @Override
    public User queryUserByUsernameAndPassword(String username, String password) {
        String sql = "select `id`,`username`,`password`,`email` from t_user where username = ? and password = ?";
        return queryForOne(User.class, sql, username,password);
    }

    @Override
    public int saveUser(User user) {
        String sql = "insert into t_user(`username`,`password`,`email`) values(?,?,?)";
        return update(sql, user.getUsername(),user.getPassword(),user.getEmail());
    }
}

(3)UserDao 测试：

package com.atguigu.test;

import com.atguigu.dao.UserDao;
import com.atguigu.dao.impl.UserDaoImpl;
import com.atguigu.pojo.User;
import org.junit.Test;

import static org.junit.Assert.*;

public class UserDaoTest {

    UserDao userDao = new UserDaoImpl();

    @Test
    public void queryUserByUsername() {

        if (userDao.queryUserByUsername("admin1234") == null ){
            System.out.println("用户名可用！");
        } else {
            System.out.println("用户名已存在！");
        }
    }

    @Test
    public void queryUserByUsernameAndPassword() {
        if ( userDao.queryUserByUsernameAndPassword("admin","admin1234") == null) {
            System.out.println("用户名或密码错误，登录失败");
        } else {
            System.out.println("查询成功");
        }
    }

    @Test
    public void saveUser() {
        System.out.println( userDao.saveUser(new User(null,"wzg168", "123456", "wzg168@qq.com")) );
    }
}

编写 UserService 和测试

UserService 接口：

package com.atguigu.service;

import com.atguigu.pojo.User;

public interface UserService {
    /**
     * 注册用户
     * @param user
     */
    public void registUser(User user);

    /**
     * 登录
     * @param user
     * @return 如果返回null，说明登录失败，返回有值，是登录成功
     */
    public User login(User user);

    /**
     * 检查 用户名是否可用
     * @param username
     * @return 返回true表示用户名已存在，返回false表示用户名可用
     */
    public boolean existsUsername(String username);
}

UserServiceImpl 实现类：

package com.atguigu.service.impl;

import com.atguigu.dao.UserDao;
import com.atguigu.dao.impl.UserDaoImpl;
import com.atguigu.pojo.User;
import com.atguigu.service.UserService;

public class UserServiceImpl implements UserService {

    private UserDao userDao = new UserDaoImpl();

    @Override
    public void registUser(User user) {
        userDao.saveUser(user);
    }

    @Override
    public User login(User user) {
        return userDao.queryUserByUsernameAndPassword(user.getUsername(), user.getPassword());
    }

    @Override
    public boolean existsUsername(String username) {

        if (userDao.queryUserByUsername(username) == null) {
           // 等于null,说明没查到，没查到表示可用
           return false;
        }

        return true;

    }
}

UserService 测试：

package com.atguigu.test;

import com.atguigu.pojo.User;
import com.atguigu.service.UserService;
import com.atguigu.service.impl.UserServiceImpl;
import org.junit.Test;

import static org.junit.Assert.*;

public class UserServiceTest {

    UserService userService = new UserServiceImpl();

    @Test
    public void registUser() {
        userService.registUser(new User(null, "bbj168", "666666", "bbj168@qq.com"));
        userService.registUser(new User(null, "abc168", "666666", "abc168@qq.com"));
    }

    @Test
    public void login() {
        System.out.println( userService.login(new User(null, "wzg168", "123456", null)) );
    }

    @Test
    public void existsUsername() {
        if (userService.existsUsername("wzg16888")) {
            System.out.println("用户名已存在！");
        } else {
            System.out.println("用户名可用！");
        }
    }
}

编写 web 层

实现用户注册的功能

修改 regist.html 和 regist_success.html 页面

1、添加 base 标签
2、修改 base 标签对页面中所有相对路径的影响
3、修改注册表单的提交地址和请求方式

编写 RegistServlet 程序

package com.atguigu.web;

import com.atguigu.pojo.User;
import com.atguigu.service.UserService;
import com.atguigu.service.impl.UserServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class RegistServlet extends HttpServlet {

   private UserService userService = new UserServiceImpl();

   @Override
   protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       //  1、获取请求的参数
       String username = req.getParameter("username");
       String password = req.getParameter("password");
       String email = req.getParameter("email");
       String code = req.getParameter("code");

//        2、检查 验证码是否正确  === 写死,要求验证码为:abcde
       if ("abcde".equalsIgnoreCase(code)) {
//        3、检查 用户名是否可用
           if (userService.existsUsername(username)) {
               System.out.println("用户名[" + username + "]已存在!");
//        跳回注册页面
               req.getRequestDispatcher("/pages/user/regist.html").forward(req, resp);
           } else {
               //      可用
//                调用Sservice保存到数据库
               userService.registUser(new User(null, username, password, email));
//
//        跳到注册成功页面 regist_success.html
               req.getRequestDispatcher("/pages/user/regist_success.html").forward(req, resp);
           }
       } else {
           System.out.println("验证码[" + code + "]错误");
           req.getRequestDispatcher("/pages/user/regist.html").forward(req, resp);
       }
   }
}

用户登录功能的实现

修改 login.html 页面和 login_success.html 页面

1、添加 base 标签
2、修改 base 标签对页面中所有相对路径的影响
3、修改 login.html 表单的提交地址和请求方式

LoginServlet 程序

package com.atguigu.web;

import com.atguigu.pojo.User;
import com.atguigu.service.UserService;
import com.atguigu.service.impl.UserServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class LoginServlet extends HttpServlet {

    private UserService userService = new UserServiceImpl();

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //  1、获取请求的参数
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        // 调用 userService.login()登录处理业务
        User loginUser = userService.login(new User(null, username, password, null));
        // 如果等于null,说明登录 失败!
        if (loginUser == null) {
            //   跳回登录页面
            req.getRequestDispatcher("/pages/user/login.html").forward(req, resp);
        } else {
            // 登录 成功
            //跳到成功页面login_success.html
            req.getRequestDispatcher("/pages/user/login_success.html").forward(req, resp);
        }
    }
}