【JSP】实现注册页面跳转以及注册用户功能实现

已于 2022-08-24 17:09:11 修改
阅读量1.8w 收藏 242
点赞数 32
分类专栏： # JSP 文章标签： jsp servlet
于 2021-01-23 23:59:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45797116/article/details/113063182
版权

文章目录

一、目标

在之前的一篇文章中我们做了登陆界面，并且实现了登陆时与数据库信息的交互，成功登陆了页面。今天，接下去，实现注册界面的设计以及功能实现。

二、注册页面的实现

Ⅰ.实现注册页面跳转

<%--
  Created by IntelliJ IDEA.
  User: 35192
  Date: 2021/1/21
  Time: 20:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
  </head>
  <body>
    <%-- 用户登录界面 --%>

    <div align="center" style="background-color: lawngreen">
      <%-- 当点击登陆的时候，以表单的形式提交信息，启动LoginServlet --%>
      <h1 align="center">用户登陆</h1>
      <form action="/LoginServlet" method="post"><%--   登录界面以表格的形式展现    --%>
          <table>
              <tr>
                  <td>用户名：</td>
                  <td><input type="text" name="username" placeholder="请输入用户名"></td>
              </tr>
              <tr>
                  <td>密码：</td>
                  <td><input type="text" name="pwd" placeholder="请输入用密码"></td>
              </tr>
              <tr>
                  <%-- 合并表格两列 --%>
                  <td colspan="2">
                      <input type="submit" value="登陆" style="margin-left: 50px;margin-top: 5px">
                      &nbsp;
                      <input type="button" value="注册" style="margin-left: 55px;margin-top: 5px" onclick="forRegister()">
                  </td>
              </tr>
         </table>
      </form>
    </div>
  <script type="text/javascript">
      /**
       * 实现注册页面的跳转
       */
      function forRegister() {
          window.location = "register.jsp";
      }
  </script>
  </body>
</html>
  • 首先对注册按钮添加onclick点击事件，执行javascript跳转方法forRegister()，跳转到注册页面。
    在这里插入图片描述

Ⅱ.制作注册页面

<%--
  Created by IntelliJ IDEA.
  User: 35192
  Date: 2021/1/23
  Time: 22:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div align="center">
    <h1>用户注册</h1>
    <%--  将表单信息提交到RegisterServlet中 --%>
    <form action="/RegisterServlet" method="post">
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="username" placeholder="请输入用户名" autocomplete="off" ></td>
                <%--  autocomplete="off"   防止浏览器自动填充内容    --%>
            </tr>
            <tr>
                <td valign="top">密&nbsp;&nbsp;&nbsp;码：</td>
                <td><input type="password" name="pwd" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td valign="top">手机号:</td>
                <%%>
                <td>
                    <input type="text" name="phone" placeholder="请输入手机号" maxlength="11" >
                </td>
                <%%>
            </tr>
            <tr>
                <td valign="top">性&nbsp;&nbsp;&nbsp;别：</td>
                <td>
                    <input type="radio" name="sex" value="男">男
                    <input type="radio" name="sex" value="女">女
                </td>
            </tr>
            <tr>
                <td valign="top">年&nbsp;&nbsp;&nbsp;龄</td>
                <td><input type="text" name="age" placeholder="请输入年龄" maxlength="2"></td>
            </tr>
            <tr>
                <td valign="top">爱&nbsp;&nbsp;&nbsp;好：</td>
                <td>
                    <input type="checkbox" name="hobby" value="电子竞技">电子竞技
                    <input type="checkbox" name="hobby" value="美食鉴赏">美食鉴赏
                    <br>
                    <input type="checkbox" name="hobby" value="思考人生">思考人生
                    <input type="checkbox" name="hobby" value="养精蓄锐">养精蓄锐
                </td>
            </tr>
            <tr align="center">
                <td colspan="2">
                    <input type="submit" value="注册"/>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" value="重填"/>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>

在这里插入图片描述

返回顶部

Ⅲ.完善dbHelper类

  • 检验用户是否可以创建
  • 通过sql查询语句，对已存在用户进行匹配查询
 /**
     * 判断用户是否可以创建
     * @param username
     * @return
     */
     public boolean isHasUser(String username){
        try {
            String sql = "select * from userinfo_copy1 where username=?";
            preparedStatement = connection.prepareStatement(sql);
            preparedStatement.setString(1,username);
            resultSet = preparedStatement.executeQuery();
            // 判断用户是否已经存在
            if (resultSet.next()){
                return false;
            } else {
                return true;
            }
        } catch (Exception e){
            e.printStackTrace();
            return false;
        }
     }
  • 实现用户注册功能
  • 数据库sql语句应当为insert添加数据
   /**
     * 实现用户注册
     * @param username
     * @param pwd
     * @param age
     * @param sex
     * @param hobby
     * @param phone
     * @return
     */
    public int register(String username,String pwd,int age,String sex,String hobby,String phone){
        try{
            // 1.连接数据库
            getConnection();
            // 2.判断用户是否可以创建
            if(isHasUser(username)){
                String sql = "insert into userinfo_copy1(username,pwd,age,sex,hobby,phone,image) values(?,?,?,?,?,?,?)";
                preparedStatement = connection.prepareStatement(sql);
                preparedStatement.setString(1,username);
                preparedStatement.setString(2,pwd);
                preparedStatement.setInt(3,age);
                preparedStatement.setString(4,sex);
                preparedStatement.setString(5,hobby);
                preparedStatement.setString(6,phone);
                preparedStatement.setString(7,"");  // 默认头像
                int num = preparedStatement.executeUpdate();
                if(num>0){
                    return 1;
                }else {
                    return 2;
                }
            }else{
                return 3;
            }
        }catch (Exception e){
            e.printStackTrace();
            return 0;
        }
    }

返回顶部

Ⅳ.创建RegisterServlet

  • 获取表单信息username、pwd、sex、age、hobby、phone
  • 这里要注意hobby值的形式，由于hobby是由复选框checkbox产生的，所以传输的时候servlet得到的是一组数据，应当以数组的形式接收；并且最终要以字符串的形式写入数据库。
import com.zte.dbHelper;

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

@WebServlet(name = "RegisterServlet",urlPatterns = "/RegisterServlet")
public class RegisterServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 对应结果的编码方式设置
        response.setContentType("text/html;charset=UTF-8");
        response.setCharacterEncoding("UTF-8");
        request.setCharacterEncoding("UTF-8");
        // 内容输出
        PrintWriter out = response.getWriter();
        // 1.获取表单信息
        String username = request.getParameter("username");
        String pwd = request.getParameter("pwd");
        String sex = request.getParameter("sex");
        int age = Integer.parseInt(request.getParameter("age"));
        // 2.以数组的形式接收复选框传输的hobby值
        String hobby[] = request.getParameterValues("hobby");
        //  创建变量转存hobby为字符串
        String newHobby = ""; 
        //  将爱好数组转为字符串
        for (int i = 0; i < hobby.length; i++) {
            if (i == hobby.length - 1) {
                newHobby += hobby[i];
            } else {
                newHobby += hobby[i] + ",";
            }
        }
        String phone = request.getParameter("phone");
        // 3.创建dbHelper对象
        dbHelper db = new dbHelper();
        // 4.进行用户注册
        switch (db.register(username, pwd, age, sex, newHobby, phone)) {
            case 0:
                out.println("<script>");
                out.println("alert('系统错误');");
                out.println("window.location='index.jsp';");
                out.println("</script>");
                break;
            case 1:
                out.println("<script>");
                out.println("alert('注册成功');");
                out.println("window.location='userinfo.jsp';");
                out.println("</script>");
                break;
            case 2:
                out.println("<script>");
                out.println("alert('注册失败');");
                out.println("window.location='register.jsp';");
                out.println("</script>");
                break;
            case 3:
                out.println("<script>");
                out.println("alert('注册失败，该用户已存在');");
                out.println("window.location='index.jsp';");
                out.println("</script>");
                break;
        }
        // 刷新、关闭
        out.flush();
        out.close();

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}

返回顶部

Ⅴ.效果展示

在这里插入图片描述
在这里插入图片描述

返回顶部

上一篇：登陆界面 ---- 数据库信息交互                              下一篇：【JSP】注册页面：用户注册时用户名限制

评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

骑着蜗牛ひ追导弹'

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值