Javaweb登录注册界面入门教程
前言：
博主是一个自学了点Java，只是连那本《Java从入门到精通》基础知识都没看完的人，由于实习的需要，需要用JavaEE（J2E）开发一个简单的登录注册界面，通过强大的搜索引擎和无数的推盘重来，博主终于实现了一个基本的登录注册界面，参考了大佬们的博客：JavaWeb入门登录注册系统，可以初步交差了，写这篇博客是为了给自己这段时间的工作内容做一个总结吧，也方便自己以后回顾起来方便，当然如果能帮助和我一样刚入门的新手也是一件乐事，如果碰巧和Java大佬们偶遇，还请多多海涵多多指教，毕竟我是一名java小菜鸟。
Javaweb登录注册界面开发
开发前提：
环境搭建：MySQL-8.0.16+MySQL-workbench-8.0+Eclipse JavaEE+Tomcat-7.0.94
一.数据库-数据表的创建
1.打开MySQL-workbench，建立新连接，如下图所示：
这样就建立好了一个新的连接。
双击之后，出现下面的界面：
2.创建一个新的schema。
出现下面的界面。
MySQL-workbench左侧会出现新建立的scheme 。
3.双击mydatabase!!!鼠标右键点击Tables
创建数据表的名字，这里定义users，并添加三个表项：idusers、username、password，idusers设置为自增模式。PK、NN等含义可参考mysql workbench中PK,NN,UQ,BIN,UN,ZF,AI字段类型标识说明
数据表就创建完了。
在MySQL-workbench左侧界面mydatabase里可以发现users。
4.鼠标右键点击users，选择第一个选项将数据表扩展到1000行，并预存储了四个用户，如下图所示：
5.接下来就可以在命令窗口输入cmd测试一下数据库是否创建完成 。
依次输入以下命令：
从上图可看出数据库已经可以正常使用了，说明数据库已经成功创建了。到这里就已经完成了一部分内容了。
二.建立Javaweb项目
数据库创建好后，接下来利用Eclipse for JavaEE 建立一个Javaweb项目，我发现了一个大佬写的特别详细的一个教程，JavaEE开发测试，我从头照着博客的流程走了一遍，基本熟悉了如何使用Eclipse for JavaEE和开发登录界面的流程。下面开始具体介绍我的操作步骤。
1.打开Eclipse for JavaEE软件，添加Tomcat。
可以看到Eclipse界面左侧出现Servers。
2.建立一个Dynamic Web Project。
项目主要采用三层MVC思想，即M（Model）、V（view）、C(Controller)，全称是模型视图控制器。
可以看到Eclipse界面左侧出现JavaEEDemo项目。
项目主要使用Java Resources里的src和WebContent文件夹，其中 src里存放用于登录注册的java、javabean和Servlet代码；而WebContent里存放一些前端界面代码，比如登录注册界面，常用.html、.jsp格式，另外这个文件夹下可以放登陆注册界面的背景图片，后面还会提到。
3.建立DbUtil.java文件，用于Java连接MySQL。
在src文件夹上点击鼠标右键，New--->Class
具体代码如下：
package model;
import java.sql.Connection;
import java.sql.DriverManager;
public class DbUtil {
/**
*
* @DbUtil类的作用 jdbc 的一些简单配置
* dbUrl
* dbusername
* dbpassword
* jdbcName
*/
private String dbUrl="jdbc:mysql://localhost:3306/mydatabase?serverTimezone=UTC";
private String dbUsername="root";
private String dbPassword="XXXX"; /**你自己数据库的密码**/
private String jdbcName="com.mysql.cj.jdbc.Driver"; /** 我用com.mysql.jdbc.Driver时出错，百度解决办法是：com.mysql.cj.jdbc.Driver **/
/**
* 获取数据库连接
* @return
* @throws Exception
*/
public Connection getCon() throws Exception{
Class.forName(jdbcName);
Connection con=DriverManager.getConnection(dbUrl,dbUsersname,dbPassword);
return con;
}
/**
* 关闭数据库连接
* @param con
* @throws Exception
*/
public void closeCon(Connection con) throws Exception{
if(con!=null){
con.close();
}
}
/**
* 建立一个main方法测试是否可以连接数据库成功！
*/
public static void main(String[] args) {
DbUtil dbUtil=new DbUtil();
try {
dbUtil.getCon();
System.out.println("数据库连接成功");
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
注意！！！在使用这个文件之前，一定要添加JDBC驱动，将.jar包导入项目，将准备好的.jar驱动包复制到 WebContent---->WEB-INF里。
在.jar文件上，鼠标右键点击，进行如下操作：
4.创建用户类user，用于从数据库中读出用户名和密码，同时也可以从前端界面中获得用户名和密码。
具体代码如下：
package model;
public class User {
private static String usersname;
private String password;
public User() {}
public User(String usersname, String password) {
this.usersname=usersname;
this.password=password;
}
public static String getUsersname() {
return usersname;
}
public void setUsersname(String usersname) {
this.usersname = usersname;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
5.建立DAO类，增加数据库增加查询用户的功能。
具体代码如下：
package model;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
public class DAO {
/**
* login(Connection con,User user) 登录验证
* (Connection con,User user)注册功能
*/
public User login(Connection con,User user) throws Exception{
User resultUser=null;
String sql="select * from users where usersname=? and password=?";
PreparedStatement pstmt=con.prepareStatement(sql);
pstmt.setString(1, user.getUsersname());
pstmt.setString(2, user.getPassword());
ResultSet rs=pstmt.executeQuery();
if(rs.next()){
resultUser=new User();
resultUser.setUsersname(rs.getString("usersname"));
resultUser.setPassword(rs.getString("password"));
}
return resultUser;
}
//注册功能
public boolean regist(Connection con,User user) throws Exception{
boolean flag=false;
PreparedStatement pstmt = null;
String sql="INSERT INTO user(usersame,password)VALUES(?,?)";
pstmt = con.prepareStatement(sql);
pstmt.setString(1, user.getUsersname());
pstmt.setString(2, user.getPassword());
if (pstmt.executeUpdate() > 0) {
flag = true;
}
return flag;
}
}-------------------------------------------------------------------我是过渡线--------------------------------------------------------------------------------------
编辑文档的时候，调整了一下内容的顺序，然后就空出来这么大的空白区，博主不知道如何删除，哈哈。
--------------------------------------------------------------------我是过渡线-------------------------------------------------------------------------------------
6.分别建立用于登录（Login）和注册（Regist）的Servlet文件。
鼠标右键点击src文件夹，然后进行如下操作：
出现如下程序：
具体LoginServlet代码如下：
package controller;
import java.io.IOException;
import java.sql.Connection;
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 model.DAO;
import model.DbUtil;
import model.User;
@WebServlet("/Login")
public class LoginServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
/**
* 接收前台传来的值 账号和密码
*/
String usersname=req.getParameter("usersname");
String password=req.getParameter("password");
DbUtil db= new DbUtil();
User user=new User(usersname,password);
DAO dao=new DAO();
try {
//数据库连接
Connection con=db.getCon();
if(dao.login(con, user)!=null) {
resp.sendRedirect("success.jsp");
}else {
resp.sendRedirect("register.jsp");
}
} catch (Exception e) {
e.printStackTrace();
}
}
}RegistServlet同理，具体代码如下：
package controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
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 model.DAO;
import model.DbUtil;
import model.User;
@WebServlet("/Regist")
public class RegistServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req,
HttpServletResponse resp) throws ServletException, IOException {
/**
* 接收前台传来的值 账号和密码
*/
//获取注册用户名
String usersname=req.getParameter("usersname");
//获取注册用户密码
String password=req.getParameter("password");
DbUtil db= new DbUtil();
User user=new User(usersname,password);
DAO dao=new DAO();
try {
//数据库链接
Connection con=db.getCon();
if(dao.regist(con,user)) {
resp.sendRedirect("login.jsp");
}else {
resp.sendRedirect("regist.jsp");
}
} catch (Exception e) {
e.printStackTrace();
}
}
}--------------------------------------------------------------------至此，后台代码弄好了。--------------------------------------------------------------------
接下来编写前台html代码，主要包括四部分：index.jsp(主页面)、login.jsp(登录界面)、regist(注册界面)、success.jsp(登录成功界面)。
7.编写前台界面：.jsp界面
在WebContent鼠标右击，进行如下操作：
具体代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
欢迎来到我的网站
其余几个.jsp文件具体代码分别如下所示：
login.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
登录界面
success.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
登录成功界面
欢迎来到我的小屋！
regist.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
注册界面
新用户注册！
修改WebContent-->WEB-INF-->lib文件夹下的web.xml。如下：
默认情况下是这样的：
修改之后是这样的：
如果你想给你的登录注册添加好看的背景图片，在WebContent文件夹下建立一个文件夹存放图片。
deng~deng~dengdeng~
至此，登录注册项目的所有工作都完成了。
但是还有一个会出错的地方，当你运行整个项目的时候，会出现下图的错误：
下面是解决办法：
1.在Server上鼠标右击，点击stop:
2.点击Add and Remove
3.点击clean
4.点击open
默认是下面这样的：
改成下面这样的：
Ctrl+S保存。
再次运行整个项目。这次就可以成功了！！！
主页面：
点击主页面上的用户登录：
点击登录：
注册界面：
三.总结
1.各种必要软件的下载安装、环境配置是前提；
2.数据库数据表的创建；
3.JavaWeb项目的开发：理解MVC思想，自信编写代码，即使用别人的代码也要注意路径，字母大小写是否一致，要注意修改不一样的地方，一旦忽略一个小地方，可能就会产生一个需要你找好长时间的bug；
4.项目没有运行成功，有bug（404错误、500错误）也不要灰心丧气，学会借助强大的搜索引擎，问百度，努力自己解决问题，主要还是要耐心，不要着急。