个人网站首页登录/注册制作-使用数据库和DAO设计

2022-09-15 16:53:58

学了一段时间MYSQL，HTML，CSS，JDBC以及一点点JAVASCRIPT，于是可以联合起来运用他们编写一个网站首页的注册/登录和登录的欢迎界面，先上效果图：

登录页面的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/personalFirstPage/loginPageStyle.css">
</head>
<body>
<h1>welcome to my homepage</h1>
<div id="loginbox" class="centerbox" ><strong>LOGIN/REGISTER</strong>
    <form action="/personalFirstPage/login.jsp"  name="loginform" onsubmit=" return check()">
    <div class="logintext">
        <input type="text" name="username" placeholder="请输入用户名/昵称"><strong></strong>
    </div>
    <div class="logintext">
        <input type="text" name="password" placeholder="请输入密码">
    </div>
        <button type="submit" name="提交">登录</button>
        <button type="button" name="register" onclick="jumpreg()">注册</button>
        <button type="button" name="findbackPwd" onclick="jumpfind()">找回密码</button>
    </form>
</div>
</body>
<script>
    function check() {
        var username = document.forms["loginform"]["username"].value;
        var password = document.forms["loginform"]["password"].value;
        if (username==null || username==""){alert("用户名未填！");return false;}
        if (password==null||password==""){alert("密码未填！");return false;}
    }
function jumpreg() {
    window.location.href="/personalFirstPage/register.html";
}
function jumpfind() {
window.location.href="/personalFirstPage/findbackPassword.html";
}
</script>
</html>

注册页面的html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册我的家园的个人主页</title>
    <link rel="stylesheet" href="/personalFirstPage/registerPageStyle.css">
</head>
<body>
<h1>own your spiritual home</h1>
<div id="registerbox" class="centerbox"><strong>Register</strong>
    <form action="/personalFirstPage/register.jsp" name="regform">
        <div class="regtext">
           <input type="text" name="username" placeholder="用户名3-8个英文字母及数字组成">
        </div>
        <div class="regtext">
           <input type="password" name="pwd" placeholder="密码3-8个英文字母及数字组成">
        </div>
        <div class="regtext">
           <input type="password" name="confirmpwd" placeholder="请再次输入密码">
        </div>
        <button type="submit" name="提交" onclick=" return check()">提交注册</button>
    </form>
</div>
</body>
<script>
    function check() {
        var regex=/^[a-zA-Z0-9]{3,8}$/;
        var username = document.forms["regform"]["username"].value;
        var pwd = document.forms["regform"]["pwd"].value;
        var confirmpwd = document.forms["regform"]["confirmpwd"].value;
        if (username==null || username==""){alert("用户名未填！");return false;}
        else if (!regex.test(username)){alert("用户名非法！请用3-8个大小写英文字母或数字组成");return false;}
        else if(pwd==null || pwd==""){alert("密码未填！");return false;}
        else if(!regex.test(pwd)){alert("密码非法！请用3-8个大小写英文字母或数字组成");return false;}
        else if(pwd!=confirmpwd){alert("两次密码不一致！");return false;}
    }
</script>
</html>

欢迎页面和找回密码（没有）页面就很简单，就不上代码了。

然后是登录页面的jsp

String username = request.getParameter("username");
    String pwd = request.getParameter("password");
    LoginService service=new LoginServiceImpl();
    User user=service.login(username,pwd);
    if (user==null){out.print("<script>alert('该用户不存在，请注册'); " +
            "window.location='/personalFirstPage/register.html' </script>");}
                else {
                    out.print("<script>alert('登录成功'); " +
                            "window.location='/personalFirstPage/welcome.html' </script>");
                }

注册页面的jsp

 String username = request.getParameter("username");
    String pwd = request.getParameter("pwd");
    String confirmpwd = request.getParameter("confirmpwd");
    RegisterService rs=new RegisterServiceImpl();
    int register = rs.register(username, pwd, confirmpwd);
    if (register>0){
        LoginService service=new LoginServiceImpl();
        out.print("<script>alert('注册成功您已登录'); " +
                "window.location='/personalFirstPage/welcome.html' </script>");
    }else {
    out.print("<script>alert('该用户已存在，无需注册，请登录'); " +
            "window.location='/personalFirstPage/login.html' </script>");}

这里使用了一点点分层设计，将数据库操作层和服务层分开了。

DAO称为DATA ACCESS OBJECT数据存取对象，将所有增删改查抽取成接口。

操作层，服务层接口规定了方法名，参数和返回值类型：登录操作层的接口规定方法名统称为通过用户名和密码来查询用户对象，返回值类型是User的对象，参数是用户名和密码。登录服务层规定了方法名是login，参数是用户名和密码，返回值类型是User对象。

登录层操作的实现类继承增删改查的数据库操作类调用父类里的方法来实现接口的方法。

服务层的实现类进行业务逻辑的合法性判断，调用登录层的实现类的方法。

从外至内的顺序是：

服务层接口->服务层实现类->操作层接口->操作层实现类->数据库操作类->mysql提供的jdbc实现类

以login为例：

loginservice的接口

public interface LoginService {
    User login(String name, String password);
}

 public User login(String name, String password) {
        if (StringUtils.isNullOrEmpty(name)||StringUtils.isNullOrEmpty(password))
        { return null;}//判空
        String regex="^[a-zA-Z0-9]{3,8}$";//正则
        Pattern compile = Pattern.compile(regex);
       if (!compile.matcher(name).matches()||!compile.matcher(password).matches()) return null;//正则合法性判断
        LoginDao ld=new LoginDaoImpl();
       User u=null;
        try {
            u = ld.queryUserByNameAndPassword(name, password);
        } catch (Exception e) {
            e.printStackTrace();
        }
return u;
    }

loginDao的接口

public interface LoginDao {
    User queryUserByNameAndPassword(String name,String password) throws Exception;
    String queryPasswordByName(String name);
}

loginDao的实现类

public class LoginDaoImpl extends PersonDao implements LoginDao {

    @Override
    public User queryUserByNameAndPassword(String name, String password) throws Exception {
        User u=null;
        ResultSet rs=null;
try {
    getconn();
    String sql="select * from tbuser where username=? and password=?";
     rs = query(sql, name, password);
    if (rs.next()){//结果集对象调用getObject方法前一定要先next()否则会报错
        u=new User();
        Class<? extends User> uClass = u.getClass();
        Field[] fields = uClass.getDeclaredFields();
        for (int i = 0; i < fields.length; i++) {
            fields[i].setAccessible(true);
            fields[i].set(u,rs.getObject(fields[i].getName()));
        }
    }
}finally {
    rs.close();
    close();
}
        return u;
    }

    @Override
    public String queryPasswordByName(String name) {
        return null;
    }
}

数据库操作类

public class PersonDao {
    private Connection conn;
    private final String DRIVER= Prop.getProperty("DRIVER");
    private final String URL=Prop.getProperty("URL");
    private final String USER=Prop.getProperty("USERNAME");
    private final String PASSWORD=Prop.getProperty("PASSWORD");
    private PreparedStatement pst;
    public void getconn(){
        try {
            Class.forName(DRIVER);//注册驱动
            conn= DriverManager.getConnection(URL,USER,PASSWORD);//获取连接
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }
public int execute(String sql,Object...params){
        int flag=0;
    try {
        pst=conn.prepareStatement(sql);//获取执行sql的对象pst
        if (params!=null){
            for (int i = 0; i < params.length; i++) {
                pst.setObject(i+1,params[i]);
            }
            pst.execute();//执行sql，这个方法是创建数据库
            flag=1;
        }
    }catch (SQLException e) {
        e.printStackTrace();
    }
    return flag;
}
public int executeUpdate(String sql,Object...params){
        int flag=0;
    try {
        pst=conn.prepareStatement(sql);
        if (params!=null){
            for (int i = 0; i < params.length; i++) {
                pst.setObject(i+1,params[i]);
            }
            pst.executeUpdate();//插入数据
            flag=1;
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }
    return flag;
}
public ResultSet query(String sql,Object...params){
    ResultSet resultSet=null;
    try {
        pst=conn.prepareStatement(sql);
        if (params!=null){
            for (int i = 0; i < params.length; i++) {
                pst.setObject(i+1,params[i]);
            }
            resultSet = pst.executeQuery();//数据查询
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }
    return resultSet;
}
public void close(){
    try {  if(pst!=null) pst.close();//关闭资源
        if (conn!=null)conn.close();//连接可以不在这里关闭
    }catch (SQLException e) {
        e.printStackTrace();
    }
}
}

码农公寓

相关文章