天天看點
傳回

Java使用Servlet連接配接mysql實作登入注冊功能前言一、項目目錄二、配置三、資料庫的建立四、後端代碼四、前端代碼五、界面展示

Java使用Servlet連接配接mysql實作登入注冊功能前言一、項目目錄二、配置三、資料庫的建立四、後端代碼四、前端代碼五、界面展示

文章目錄

  • 前言
  • 一、項目目錄
  • 二、配置
    • 1.lib下 引入jar包
    • 2、配置tomcat 及 部署項目到伺服器
  • 三、資料庫的建立
  • 四、後端代碼
    • 1、實體類User
    • 2、資料庫工具類
    • 3、控制類UserDao
    • 4、servlet類
  • 四、前端代碼
    • 1、main首頁面
    • 2、登入界面
    • 3、注冊界面
  • 五、界面展示

前言

話不多說，大家都很忙，就不講廢話了。

如果想用來練手的話最好直接在idea上建項目，配置tomcat,然後按下面順序進行。我原本是在eclipse上搭的項目，搬遷之後配置又出了好多bug，配置麻煩的很。配置tomcat的方法放下面，需要的話可以參考。

IntelliJ idea中配置tomcat并部署應用

eclipse中tomcat的配置及web應用的部署

一、項目目錄

Java使用Servlet連接配接mysql實作登入注冊功能前言一、項目目錄二、配置三、資料庫的建立四、後端代碼四、前端代碼五、界面展示

二、配置

1.lib下 引入jar包

這裡需要連接配接資料庫所需的mysql-connector-java以及servlet-api，需要的可以在 CSDN直接搜尋，應該有大善人上傳了。

2、配置tomcat 及 部署項目到伺服器

可以參考上面那兩篇部落格，隻一步很重要的，事關能不能最終實作功能，需要細心，一遍配不好，就配兩遍，最後肯定能配好，然後你就會發現這玩意好惡心，根本記不住，隻好寫一篇blog留着等以後忘了用。

三、資料庫的建立

推薦使用Navicat直接建立資料庫，以及user表

如圖：

Java使用Servlet連接配接mysql實作登入注冊功能前言一、項目目錄二、配置三、資料庫的建立四、後端代碼四、前端代碼五、界面展示

一定要記清楚資料庫及表的名稱

四、後端代碼

1、實體類User 

public class User {

	private int id;
	private String userName;
	private String password;
	
	public User() {}
	public User(String userName,String password) {
		this.userName = userName;
		this.password = password;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	@Override
	public String toString() {
		return "User [userName=" + userName + "]";
	}
	
	
}

2、資料庫工具類

資料庫工具類可以批量的向我們提供資料庫連接配接，省卻了許多麻煩

public class JdbcUtils {

	public static Connection getConnection () throws SQLException {
		try {
			Class.forName("com.mysql.cj.jdbc.Driver");
			//一般隻需要改資料庫名和密碼就可以了
			String url = "jdbc:mysql://localhost:3306/kaikeba1?useUnicode=true&characterEncoding=UTF-8&useSSl=false&serverTimezone=Asia/Shanghai";
			String user = "root";
			String password = "hahaha";
			
			Connection connection = DriverManager.getConnection(url,user,password);
			return connection;
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		}
		return null;
	}
}

3、控制類UserDao 

public class UserDao {

	/**
	 * 登入方法
	 * @param userName
	 * @return
	 */
	public User findUserByName(String userName) {
		User user = null;//建立對象，後續如果能查詢到對應使用者，則user就是這個使用者資訊的載體
		//或者說它就是使用者
		try {
			//從JDBC工具類擷取連接配接
			Connection connection = JdbcUtils.getConnection();
			//定義sql查詢語句
			String sql = "select id,userName,password from user2 where userName=?";
			//預處理，傳入sql語句
			PreparedStatement preparedStatement = connection.prepareStatement(sql);
			//1即第一個？處的值為後續傳入的userName參數
			preparedStatement.setString(1, userName);
			//執行查詢操作得到結果集
			ResultSet resultset = preparedStatement.executeQuery();
			//對結果集中的資料進行周遊
			while (resultset.next()) {
				//如果可以從資料庫中查到人名，将其其它資訊指派給user
				user = new User();
				user.setId(resultset.getInt(1));
				user.setUserName(resultset.getString(2));
				user.setPassword(resultset.getString(3));
			}
			return user;//findUserByName方法的傳回值
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;//查不到就傳回null
	}
	/**
	 * 注冊方法
	 * @param userName
	 * @param password
	 * @return
	 */
	public int addUser(String userName,String password) {
		Connection connection = null;
		try {
			connection = JdbcUtils.getConnection();
			String sql = "insert into user2(userName,password) values(?,?)";
			PreparedStatement preparedStatement = connection.prepareStatement(sql);
			preparedStatement.setString(1, userName);
			preparedStatement.setString(2, password);
			int row = preparedStatement.executeUpdate();//row是資料庫受此次executeUpdate操作影響的行數，即更新了幾行
			//輸入了一個user資訊，肯定隻有1行
			return row;
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return 0;
	}
}

4、servlet類

LoginServlet

@WebServlet("/login.do")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public LoginServlet() {
        // TODO Auto-generated constructor stub
    }

	
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		
		//這兩者是從前端界面傳過來的使用者名和密碼
		String userName = request.getParameter("userName");
		String password = request.getParameter("password");
		//調用UserDao 中的方法findUserByName，傳入userName進行驗證
		User user = new UserDao().findUserByName(userName);
		//如果傳回了一個user且其userName,password與前端輸入的一緻，則登入成功，跳轉到首頁面main.html
		if(user != null && userName.equals(user.getUserName()) && password.equals(user.getPassword())) {
			response.sendRedirect("main.html");
		}else if (user == null) {
			//否則就不動
			response.sendRedirect("login.html");
			System.out.println("該使用者不存在");
		}else {
			//要不就是有一者輸錯了
			response.sendRedirect("login.html");
			System.out.println("使用者名或密碼錯誤");
		}
		
	}

}

注冊RegisterServlet

@WebServlet("/register.do")
public class RegisterServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
        request.setCharacterEncoding("UTF-8");
		
		String userName = request.getParameter("userName");
		String password = request.getParameter("password");
		
		int result = new UserDao().addUser(userName, password);
		//如果傳回的是 1 ，則說明注冊成功
		if (result == 1) {
			response.sendRedirect("login.html");
			System.out.println("注冊成功！登入");
		}else {
			response.sendRedirect("register.html");
			System.out.println("使用者名或密碼為空，請重新輸入");
		}
	}

}

四、前端代碼

1、main首頁面

首頁，比較簡陋，湊活看吧

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>系統首頁</h2>
<hr>
<h2>歡迎登入 ~\(^o^)/~ </h2>
</body>
</html>

2、登入界面 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登入</title>
<style type="text/css">
  *{
	margin:0px;
	padding:0px;
  }
  body{
   background-image: url("./img/52281162762922964531629890033675.jpg");
   background-size: 100%;
   background-size: cover;
  }
  #div1{
    width: 500px;
    height: 260px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -160px 0 0 -235px;
    background-color: rgba(240, 255, 255, 0.5);
    border-radius: 10px;
    text-align: center;
    opacity:0.8;
  }
  button{
    width:85px;
    height:40px;
    background-color: White; 
    font-size: 10px;
    border: none;
    color: Black;
    border-radius: 8px;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
  }
  button:hover{
    background-color: Black;
    color: Gold;
  }
  a{
    color:black;
    font-family: 江西拙楷;
    font-size:10px;
    text-decoration: none;
  }
  a:hover{
   color:Green;
  }
  input{
   width:200px;
   height:40px;
   border-radius:8px;
   background:transparent;
   border:1px solid #ffffff;
   
   border-color:black;
 }
</style>
</head>
<body>
<form action="login.do" method="post">
<div id="div1">
    <h1>登入</h1><br>
       <p>姓名  <input type="text" placeholder="username" name="userName"></p><br>
       <p>密碼  <input type="password" placeholder="password" name="password"></p><br>
    <p><button type="submit" id="btn1">登入</button> &nbsp;
    <button type="reset" id="btn2">重置</button></p>
    <a href="register.html">去注冊</a>
</div>
</form>
</body>
</html>

3、注冊界面 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注冊</title>
<style type="text/css">
 form{
    text-align: center;
  }
   a{
    text-decoration: underline;
   }
</style>
</head>
<body>
<form action="register.do" method="post">
<h1>注冊</h1>
<p>使用者名:<input type="text" name="userName" placeholder="請輸入心儀的使用者名"></p>
<p>密碼:<input type="text" name="password" placeholder="請輸入密碼"></p>
<p><input type="submit" value="注冊"> &nbsp;&nbsp;
<input type="reset" value="重置"></p>
</form>
</body>
</html>

五、界面展示

Java使用Servlet連接配接mysql實作登入注冊功能前言一、項目目錄二、配置三、資料庫的建立四、後端代碼四、前端代碼五、界面展示
小項目 eclipse servlet login
上一篇: JS筆記——資料類型
下一篇: 劍指Offer_程式設計題61：序列化二叉樹

繼續閱讀