前言：

博主是一个自学了点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 blocke.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{@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected 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{@Overrideprotected void doGet(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected 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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="./css/index.css" /><title>欢迎来到我的网站</title><style type="text/css" media="screen">.center{position:absolute;width: 200px;height: 120px;left: 50%;top: 50%;margin: -60px 0px 0px -60px;}</style></head><center><body style="background:url(images/index.jpg);background-size:cover;"><div class="center"><h3 style="color:red">这是首页，欢迎光临！</h3><tr><a href="login.jsp"><li>用户登录</li></a><a href="regist.jsp" class="right40"><li>新用户注册</li></a></tr></div></body></center>
</html>

其余几个.jsp文件具体代码分别如下所示：

login.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录界面</title><style type="text/css" media="screen">.center{position:absolute;width: 250px;height: 120px;left: 50%;top: 50%;margin: -100px 0px 0px -100px;}</style>
</head>
<body style="background:url(images/back.png);background-size:cover;"><div class="center"><center>
<form action="/JavaEEDemo/Login" method="post">
<h3>欢迎登录!</h3>
账号：<input name="usersname" type="text" style="width:150px"><br>
密码：<input name="password" type="password" style="width:150px"><br>
<input type="submit" value="登录" >
<input type="reset" value="重置">
</form></center></body>
</html>

success.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录成功界面</title></head>
<body style="background:url(images/house.jpg);background-size:cover;">欢迎来到我的小屋！</body>
</html>

regist.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="../css/style.css" /><title>注册界面</title><style type="text/css" media="screen">.center{position:absolute;width: 250px;height: 120px;left: 50%;top: 50%;margin: -100px 0px 0px -100px;}</style>
</head>
<body style="background:url(images/background.png);background-size:cover;"><div class="center">
<center><h3 style="color:red">新用户注册！</h3><form action="/JavaEEDemo/Regist" method="post"><table ><tr><td class="alignRight">账号: </td><td><input type="text" name="usersname" style="width:150px;height:20px"/></td></tr><tr><td class="alignRight">密码: </td><td><input type="password" name="password" style="width:150px;height:20px"/></td></tr></table>
<input type="submit" value="提交" class="submit">
<input type="reset" value="重置" class="reset">
</form>
</center>
</div>
</body>
</html>

 修改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错误）也不要灰心丧气，学会借助强大的搜索引擎，问百度，努力自己解决问题，主要还是要耐心，不要着急。