JSP简单登录注册界面实现详细全过程 新手一步一步跟着做

我们会从环境准备讲起（Tomcat配置、MySQL建表，连工具下载链接都给你理清楚），再手把手写前端页面（登录页的表单设计、注册页的字段验证，用JSP标签实现动态内容），接着搞定后端逻辑（怎么接收表单数据、用JDBC连接数据库、验证用户名密码是否正确、把注册信息存入数据库），甚至会帮你避开“数据库驱动包忘导”“Session失效”这些新手常踩的坑。

不管你是刚学Java的学生，还是想补Web基础的转行选手，花半小时跟着做，就能亲手跑通一个能用的登录注册系统——把“理论”变成“可操作的代码”，这才是最有效的入门方式。

你有没有过学JSP时，看着“登录注册界面”的需求却不知道从哪下手？要么教程跳步骤，要么术语太多听不懂，最后卡半天连环境都没搭对？我去年帮学弟做这个的时候，他也是这样——下了Tomcat却不会配置，建了数据库却连不上，后来我把自己踩过的坑整理成一步一步的流程，他跟着做居然半天就跑通了。今天把这套流程分享给你，不用怕漏步骤，跟着做就能做出能用的登录注册功能。

先把环境搭对——新手最容易栽的第一步

我见过很多新手一开始就栽在环境配置上——JDK没装对版本，Tomcat启动报错，MySQL连不上，最后直接放弃。其实环境搭对了，后面的步骤会顺很多。首先是JDK，你得装1.8及以上版本，因为很多Tomcat版本比如9.0需要JDK8+。安装的时候记得选“添加到PATH”，不然cmd里输java -version会找不到命令。我之前帮学弟装JDK时，他没选这个选项，结果折腾了半小时才把环境变量配好。

然后是Tomcat，下最新的稳定版比如9.0.80，解压到C盘或D盘根目录（别放有空格的文件夹里，比如“Program Files”，容易出问题）。接下来配置环境变量：右键“此电脑”→“属性”→“高级系统设置”→“环境变量”，新建系统变量CATALINA_HOME，值是Tomcat的安装路径（比如C:apache-tomcat-9.0.80），然后编辑Path变量，加%CATALINA_HOME%bin。这样你在cmd里输startup.bat，Tomcat就能启动了——浏览器访问http://localhost:8080，能看到Tomcat的欢迎页就对了。我学弟之前启动Tomcat时，cmd里报“找不到CATALINA_HOME”，就是因为没配置这个变量。

再然后是MySQL，装5.7或8.0版本都行，安装时记得设置root密码（比如root123）。装完后用Navicat或MySQL Workbench连上去，建个数据库比如jspdemo，再建张用户表——这是登录注册的核心，字段得设计对。我之前帮学弟建表时，他把password字段设成VARCHAR(10)，结果用户输长密码存不进去，后来改成VARCHAR(32)（MD5加密后的长度）才好。具体建表语句和字段说明如下：

建表SQL语句：

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

最后是IDE配置——如果你用Eclipse，要安装Web开发插件（WTP），新建Dynamic Web Project时，Target runtime选你装的Tomcat版本；如果用IDEA，要装Tomcat插件，新建Java Enterprise项目，选Web Application。我学弟用Eclipse时，没选Target runtime，结果部署项目时找不到Tomcat，后来在项目属性里勾上Tomcat才解决。

从0写页面到连数据库——每一步都给你标清楚

环境搭好了，接下来开始写代码——我会把登录和注册的每一步都拆开来，你跟着写就行。

第一步：写前端页面（登录+注册）

前端页面负责展示表单，收集用户输入。先写登录页（login.jsp）：用HTML的form表单，action设为login（后续对应Servlet的url），method用post（比get安全，密码不会显示在URL里）。里面放两个必填输入框（username和password）和提交按钮：

 用户名：




 密码：


 登录
 <%-
登录失败提示 %>


用户名或密码错误！

这里的required是HTML5属性，能让浏览器自动提示必填项；request.getParameter("error")是用来显示登录失败提示的——后面登录失败时，会跳回这个页面并带error=1参数。

再写注册页（register.jsp）：比登录页多“确认密码”和“邮箱”字段，还要加前端验证（比如两次密码一致）——我之前没加这一步，用户老输错密码，后来加了JS判断，减少后端报错：

function checkForm() {

 const pwd = document.getElementById("password").value;

 const repwd = document.getElementById("repassword").value;

 if (pwd.length < 6) {

 alert("密码至少6位！");

 return false;

 }

 if (pwd !== repwd) {

 alert("两次密码不一致！");

 return false;

 }

 return true;

}



 用户名：




 密码：




 确认密码：




 邮箱：


 注册
 <%-
注册失败提示 %>


用户名已存在！

onsubmit="return checkForm()"会在提交前触发JS验证，避免无效请求；type="email"能让浏览器自动验证邮箱格式。

第二步：写后端逻辑（Servlet处理请求）

后端用Servlet处理业务逻辑（接收参数、连数据库、验证用户）——JSP里写太多Java代码会乱，Servlet负责“干活”，JSP负责“展示”，这样分层更清晰。

首先写登录Servlet（LoginServlet.java）：继承HttpServlet，重写doPost方法，步骤是“接收参数→连数据库→验证用户→跳转页面”。注意要加@WebServlet("/login")注解（对应登录页的action="login"）：

import javax.servlet.;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.;
import java.io.IOException;
import java.sql.;
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 // 
接收前端参数（解决中文乱码）
 request.setCharacterEncoding("UTF-8");
 String username = request.getParameter("username");
 String password = request.getParameter("password");
 // 
连数据库验证用户
 String url = "jdbc:mysql://localhost:3306/jspdemo?serverTimezone=UTC";
 String dbUser = "root";
 String dbPwd = "root123";
 Connection conn = null;
 PreparedStatement pstmt = null;
 ResultSet rs = null;
 try {
 // 加载MySQL驱动（8.0以上用com.mysql.cj.jdbc.Driver）
 Class.forName("com.mysql.cj.jdbc.Driver");
 conn = DriverManager.getConnection(url, dbUser, dbPwd);
 // 用PreparedStatement防止SQL注入（比Statement安全）
 String sql = "SELECT  FROM user WHERE username = ? AND password = ?";
 pstmt = conn.prepareStatement(sql);
 pstmt.setString(1, username);
 pstmt.setString(2, password);
 rs = pstmt.executeQuery();
 // 
处理结果：登录成功→存Session，跳首页；失败→跳回登录页
 if (rs.next()) {
 HttpSession session = request.getSession();
 session.setAttribute("loginUser", username); // 存用户信息到Session
 response.sendRedirect("index.jsp"); // 跳首页
 } else {
 response.sendRedirect("login.jsp?error=1"); // 登录失败，带错误参数
 }
 } catch (ClassNotFoundException e) {
 e.printStackTrace();
 response.sendRedirect("login.jsp?error=2"); // 驱动没找到
 } catch (SQLException e) {
 e.printStackTrace();
 response.sendRedirect("login.jsp?error=3"); // 数据库错误
 } finally {
 // 关闭资源（避免内存泄漏）
 try { if (rs != null) rs.close(); } catch (SQLException e) {}
 try { if (pstmt != null) pstmt.close(); } catch (SQLException e) {}
 try { if (conn != null) conn.close(); } catch (SQLException e) {}
 }
 }
}

这里要注意三点：

再写注册Servlet（RegisterServlet.java）：逻辑类似，先检查用户名是否重复，再插入新用户：

import javax.servlet.;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.;
import java.io.IOException;
import java.sql.;
@WebServlet("/register")
public class RegisterServlet extends HttpServlet {
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 request.setCharacterEncoding("UTF-8");
 String username = request.getParameter("username");
 String password = request.getParameter("password");
 String email = request.getParameter("email");
 String url = "jdbc:mysql://localhost:3306/jspdemo?serverTimezone=UTC";
 String dbUser = "root";
 String dbPwd = "root123";
 Connection conn = null;
 PreparedStatement pstmtCheck = null;
 PreparedStatement pstmtInsert = null;
 ResultSet rs = null;
 try {
 Class.forName("com.mysql.cj.jdbc.Driver");
 conn = DriverManager.getConnection(url, dbUser, dbPwd);
 // 
检查用户名是否已存在
 String checkSql = "SELECT  FROM user WHERE username = ?";
 pstmtCheck = conn.prepareStatement(checkSql);
 pstmtCheck.setString(1, username);
 rs = pstmtCheck.executeQuery();
 if (rs.next()) {
 // 用户名已存在→跳回注册页提示
 response.sendRedirect("register.jsp?error=1");
 } else {
 // 
插入新用户
 String insertSql = "INSERT INTO user (username, password, email) VALUES (?, ?, ?)";
 pstmtInsert = conn.prepareStatement(insertSql);
 pstmtInsert.setString(1, username);
 pstmtInsert.setString(2, password);
 pstmtInsert.setString(3, email);
 pstmtInsert.executeUpdate();
 // 注册成功→跳登录页
 response.sendRedirect("login.jsp?success=1");
 }
 } catch (ClassNotFoundException e) {
 e.printStackTrace();
 response.sendRedirect("register.jsp?error=2");
 } catch (SQLException e) {
 e.printStackTrace();
 response.sendRedirect("register.jsp?error=3");
 } finally {
 // 关闭资源
 try { if (rs != null) rs.close(); } catch (SQLException e) {}
 try { if (pstmtCheck != null) pstmtCheck.close(); } catch (SQLException e) {}
 try { if (pstmtInsert != null) pstmtInsert.close(); } catch (SQLException e) {}
 try { if (conn != null) conn.close(); } catch (SQLException e) {}
 }
 }
}

第三步：收尾——加首页和驱动包

最后写个首页（index.jsp），判断用户是否登录：

 <%
 // 从Session取用户信息
 String user = (String) session.getAttribute("loginUser");
 if (user != null) {
 out.println("欢迎你，" + user + "！退出登录");
 } else {
 out.println("你还没登录，去登录");
 }
 %>
还有关键的一步：放MySQL驱动包——把mysql-connector-java-8.0.33.jar（下对应MySQL版本的）放到WEB-INF/lib目录下，不然会报ClassNotFoundException！我去年写的时候忘了放，结果连数据库时卡了半小时，后来查文档才发现是少了这个jar包。
最后：运行测试
代码写完了，部署到Tomcat——在IDE里右键项目→Run As→Run on Server，选你配置的Tomcat，启动后： 
访问http://localhost:8080/项目名/login.jsp，试试输入用户名和密码（比如你注册的账号），看能不能跳首页； 
访问register.jsp，注册一个新用户，看数据库里有没有新增记录。 
如果成功了，说明你已经做出了能用的登录注册功能！我学弟当时运行成功时，兴奋得给我发消息：“居然真的能用！”——其实只要步骤对，没那么难。
要是你遇到问题，比如Tomcat启动报错、数据库连不上，可以留言告诉我，我帮你看看。对了，你可以试试给密码加MD5加密（比如password = DigestUtils.md5Hex(password)，需要导入commons-codec包），这样数据库里存的不是明文密码，更安全——这是进阶的小技巧，你可以慢慢试。
如果你按这些步骤做了，欢迎回来告诉我效果！

 
本文常见问题（FAQ）
 
Tomcat启动时cmd提示“找不到CATALINA_HOME”怎么办？
 
这是没配置Tomcat环境变量的原因。你右键“此电脑”→“属性”→“高级系统设置”→“环境变量”，新建系统变量CATALINA_HOME，值填Tomcat的安装路径（比如C:apache-tomcat-9.0.80，别放有空格的文件夹里）。然后编辑Path变量，添加%CATALINA_HOME%bin。配置完再启动Tomcat，应该就不会报错了——我学弟之前就是漏了这步，折腾半小时才搞好。
 
数据库驱动包忘导会出现什么错误？怎么解决？
 
会报ClassNotFoundException（比如找不到com.mysql.cj.jdbc.Driver）。解决办法是下载对应MySQL版本的驱动包（比如MySQL8.0用mysql-connector-java-8.0.33.jar），然后放到项目的WEB-INF/lib目录下——这个目录是项目运行时加载依赖的地方，忘放肯定连不上数据库。我去年写代码时就犯过这错，卡了半小时才发现问题。
 
登录时输入正确用户名密码，却提示“用户名或密码错误”怎么办？
 
先检查数据库用户表的password字段长度：如果设成VARCHAR(10)，长密码存不进去肯定验证失败，得改成VARCHAR(32)（MD5加密后的长度）。再看后端的SQL参数顺序对不对——比如sql是“SELECT  FROM user WHERE username = ? AND password = ?”，pstmt.setString(1, username)和pstmt.setString(2, password)有没有写反。还有前端form是不是用post方法，后端有没有加request.setCharacterEncoding("UTF-8")解决中文乱码——我学弟之前就是密码字段设短了，导致登录失败。
 
注册时提示“用户名已存在”，但数据库里没有这个用户怎么办？
 
先检查后端检查用户名的SQL语句：是不是“SELECT  FROM user WHERE username = ?”，有没有拼错表名或字段名。再看连接的数据库是不是jspdemo——要是连到默认的test库，肯定查不到数据。还有前端注册页的form action是不是“register”，有没有和Servlet的@WebServlet("/register")对应——我之前帮人排查时，发现他把action写成“reg”，结果后端收不到参数，一直误报用户名存在。
 
页面显示中文乱码（比如用户名是中文变成问号）怎么办？
 
先在Servlet里加request.setCharacterEncoding("UTF-8")，解决post请求的中文乱码。再检查JSP页面开头有没有加，以及HTML里有没有。要是还乱码，去Tomcat的conf/server.xml里，给Connector标签加URIEncoding="UTF-8"——比如，这能解决get请求的中文乱码问题。

YUANLEISVIP

收藏 链接