JavaWeb-用戶註冊與登錄功能

JavaWeb-用戶註冊與登錄功能

1.在數據庫中創建對應的數據表

2.在src下創建domain包，並建關係映射類（JavaBean） 

package com.helong.domian;

public class User {
	private String uid;
	private String username;
	private String password;
	private String phone;
	
	
	public String getUid() {
		return uid;
	}


	public void setUid(String uid) {
		this.uid = uid;
	}


	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;
	}


	public String getPhone() {
		return phone;
	}


	public void setPhone(String phone) {
		this.phone = phone;
	}


	@Override
	public String toString() {
		return "User [uid=" + uid + ", username=" + username + ", password=" + password + ", phone=" + phone + "]";
	}
	
	
}

3. 在src下引入db.properties數據庫信息文件、在lib中引入相關jar包

db.properties:

driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/mystore?rewriteBatchedStatements=true
username=root
password=123456
maxActive=8

引入相關jar包：

 

 

4.創建util工具包，並引入JdbcUtil.java文件（方便連接數據庫）

package com.helong.util;

import java.io.FileInputStream;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;

import javax.sql.DataSource;

import com.alibaba.druid.pool.DruidDataSourceFactory;

public class JdbcUtil {

	public static DataSource ds = null;
	static {
		try {
			//1.加載配置文件
			Properties p = new Properties();
			//獲取字節碼目錄
			String path = JdbcUtil.class.getClassLoader().getResource("db.properties").getPath();
			FileInputStream in = new FileInputStream(path);
			p.load(in);
			//ds = BasicDataSourceFactory.createDataSource(p);
			ds = DruidDataSourceFactory.createDataSource(p);
		}catch(Exception e) {
			e.printStackTrace();
		}
	}
	//獲取數據源
	public static DataSource  getDataSource() {
		return ds;
	}
	public static Connection getConn() {
		try {
			// 2.連接數據
			return ds.getConnection();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
	/**
	 * 關閉資源 
	 */
	public static void close(Connection conn,Statement st,ResultSet rs) {
		if (rs != null) {
			try {
				rs.close();
			} catch (SQLException e) {

				e.printStackTrace();
			}
		}
		if (st != null) {
			try {
				st.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}

		if (conn != null) {
			try {
				conn.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
	}
	
}

5.前端界面

用戶註冊界面：

<!-- 註冊 -->
            <form action="/28-Mystore/RegistServlet" id="reg_form" method="post">
                <div>
                    <label>用戶名</label>
                    <input id="username"  type="text" placeholder="請輸入用戶名..." name="username">
                </div>
                <div>
                    <label>密碼</label>
                    <input id="pwd" type="text" placeholder="請輸入密碼.." name="password">
                </div>
                <div>
                    <label>確認密碼</label>
                    <input id="pwd2" type="text" placeholder="請再次輸入密碼...">
                </div>
                <div>
                    <label>電話</label>
                    <input type="text" placeholder="請輸入電話..." name="phone">
                </div>
                <div class="check_box">
                    <label>驗證碼</label>
                    <input type="text" placeholder="請輸入驗證碼..." name="code">
                    <img src="/28-Mystore/CheckCodeServlet" onclick="change(this)">
                </div>
                <div class="submit_button">
                    <input type="button" value="立即註冊" onclick="checkData()">
                </div>
            </form>
        <!-- /註冊 -->

<script type="text/javascript">
	function change(obj) {
		/* 這樣發送參數的原因是防止服務器讀取緩存而沒有加載 */
		obj.src = "/28-Mystore/CheckCodeServlet?time=" + new Date().getTime();
	}
	
	function checkData() {
		
		//1.獲取用戶名， 密碼   確認密碼
	    var username =  document.getElementById("username");
	    var pwd =  document.getElementById("pwd");
	    var pwd2 =  document.getElementById("pwd2");
	    
	    //2.判斷輸入的內容不能爲空
	    if(username.value==""){
	    	alert("請輸入用戶名");
	    	return;
	    }
	    if(pwd.value==""){
	    	alert("請輸入密碼");
	    	return;
	    }
	    if(pwd2.value==""){
	    	alert("請再次輸入密碼");
	    	return;
	    }
	    
	    //3.兩次密碼是否一樣
	    if(pwd.value == pwd2.value){
	    	//發送請求  form  獲取form
	    	var form =  document.getElementById("reg_form");
	    	form.submit();//通過js提交表單 執行action
	    }else{
	    	alert("兩次輸入的密碼不一樣");
	    }
	    
	}	
	
</script>

用戶登錄界面：

<!-- 登錄信息 -->
            <form action="/28-Mystore/LoginServlet"  id="login" method="post">
                <!--用戶名-->
               <div class="username">
               		<span></span>
               		<input type="text" placeholder="請輸入用戶名..." name="username">
               </div>
                <!--/用戶名-->
                <!--密碼-->
                <div class="password">
                	<span></span>
                	<input type="text" name="password" placeholder="請輸入密碼..." name="password">
                </div>
                 <!--/密碼-->
                 <!-- 登錄按鈕 -->
                <div class="login_btn">
                	<input type="submit" class="login_btn" value="登錄">
                </div>
                <!-- /登錄按鈕 -->
            </form>
<!-- /登錄信息 -->

 

6.後臺Servlet

提供成語Servlet：

package com.helong.servlet;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


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

	// 集合中保存所有成語
	private List<String> words = new ArrayList<String>();

	@Override
	public void init() throws ServletException {
		// 初始化階段，讀取new_words.txt
		// web工程中讀取 文件,必須使用絕對磁盤路徑
		String path = getServletContext().getRealPath("/WEB-INF/words.txt");
		try {
			BufferedReader reader = new BufferedReader(new FileReader(path));
			String line;
			//把讀的成語全部添加到一個集合當中
			while ((line = reader.readLine()) != null) {
				words.add(line);
			}
			reader.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 禁止緩存
		response.setHeader("Cache-Control", "no-cache");
		//設置過期時間爲立即過期
		response.setDateHeader("Expires", 0);
		
		int width = 120;
		int height = 30;
		// 步驟一 繪製一張內存中圖片
		BufferedImage bufferedImage = new BufferedImage(width, height,
				BufferedImage.TYPE_INT_RGB);
		// 步驟二 圖片繪製背景顏色 ---通過繪圖對象
		Graphics graphics = bufferedImage.getGraphics();// 得到畫圖對象 --- 畫筆
		// 繪製任何圖形之前 都必須指定一個顏色
		graphics.setColor(getRandColor(200, 250));
		graphics.fillRect(0, 0, width, height);
		// 步驟三 繪製邊框
		graphics.setColor(Color.WHITE);
		graphics.drawRect(0, 0, width - 1, height - 1);
		// 步驟四 四個隨機數字
		Graphics2D graphics2d = (Graphics2D) graphics;
		// 設置輸出字體
		graphics2d.setFont(new Font("宋體", Font.BOLD, 18));
		Random random = new Random();// 生成隨機數
		int index = random.nextInt(words.size());
		String word = words.get(index);// 獲得成語
		System.out.println(word);
		// 定義x座標
		int x = 10;
		for (int i = 0; i < word.length(); i++) {
			// 隨機顏色
			graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random
					.nextInt(110), 20 + random.nextInt(110)));
			// 旋轉 -30 --- 30度
			int jiaodu = random.nextInt(60) - 30;
			// 換算弧度
			double theta = jiaodu * Math.PI / 180;

			// 獲得字母數字
			char c = word.charAt(i);

			// 將c 輸出到圖片
			graphics2d.rotate(theta, x, 20);
			graphics2d.drawString(String.valueOf(c), x, 20);
			graphics2d.rotate(-theta, x, 20);
			x += 30;
		}

		// 將驗證碼內容保存session
		//request.getSession().setAttribute("checkcode_session", word);
		//把生成的驗證碼存放到全局域對象當中
		this.getServletContext().setAttribute("checkCode", word);
		// 步驟五 繪製干擾線
		graphics.setColor(getRandColor(160, 200));
		int x1;
		int x2;
		int y1;
		int y2;
		for (int i = 0; i < 30; i++) {
			x1 = random.nextInt(width);
			x2 = random.nextInt(12);
			y1 = random.nextInt(height);
			y2 = random.nextInt(12);
			graphics.drawLine(x1, y1, x1 + x2, x2 + y2);
		}
		// 將上面圖片輸出到瀏覽器 ImageIO
		graphics.dispose();// 釋放資源
		//將圖片寫到response.getOutputStream()中
		ImageIO.write(bufferedImage, "jpg", response.getOutputStream());
	}

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

	/**
	 * 取其某一範圍的color
	 * 
	 * @param fc
	 *            int 範圍參數1
	 * @param bc
	 *            int 範圍參數2
	 * @return Color
	 */
	private Color getRandColor(int fc, int bc) {
		// 取其隨機顏色
		Random random = new Random();
		if (fc > 255) {
			fc = 255;
		}
		if (bc > 255) {
			bc = 255;
		}
		int r = fc + random.nextInt(bc - fc);
		int g = fc + random.nextInt(bc - fc);
		int b = fc + random.nextInt(bc - fc);
		return new Color(r, g, b);
	}

}

註冊界面Servlet:

package com.helong.servlet;

import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.sql.SQLException;
import java.util.Map;
import java.util.UUID;

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 org.apache.commons.beanutils.BeanUtils;
import org.apache.commons.dbutils.QueryRunner;

import com.myxq.domian.User;
import com.myxq.util.JdbcUtil;


/**
 * Servlet implementation class RegistServlet
 */
@WebServlet("/RegistServlet")
public class RegistServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {		
		//設置請求編碼 與響應的編碼（只有POST請求可以這樣來設置接收參數的編碼方式）
		request.setCharacterEncoding("utf-8");
		/*設置響應給定瀏覽器編碼方式*/
		response.setContentType("text/html;charset=utf-8");
		
		//獲取參數  驗證碼(用戶輸入的驗證碼)
		String code = request.getParameter("code");
		System.out.println("code="+code);
		//獲取服務器生成的驗證碼  
		String word = (String) this.getServletContext().getAttribute("checkCode");
		//判斷輸入的驗證
		if(code.equals(word)) {
			//如果正確 
			//1.接收所有參數
			Map<String, String[]> parameterMap = request.getParameterMap();
			User u = new User();			
			try {
				//2.把接收的參數封裝成User對象
				BeanUtils.populate(u, parameterMap);
			} catch (IllegalAccessException | InvocationTargetException e) {
				e.printStackTrace();
			}
			//3.設置uid(爲用戶註冊的用戶提供唯一的ID)
			u.setUid(UUID.randomUUID().toString());
			//4.寫入到數據庫
			QueryRunner qr = new QueryRunner(JdbcUtil.getDataSource());
			String sql ="insert into user value(?,?,?,?)";
			try {
				qr.update(sql,u.getUid(),u.getUsername(),u.getPassword(),u.getPhone());
			} catch (SQLException e) {
				e.printStackTrace();
			}
			response.getWriter().write("註冊成功");
			//跳轉到登錄
			response.setHeader("refresh", "3;url=/28-Mystore/login.html");
		}else {
			//不正確 ，告訴用戶驗證碼錯誤，跳轉回註冊頁
			response.getWriter().write("驗證碼錯誤");
			response.setHeader("refresh", "3;url=/28-Mystore/regist.html");
		}
	}
}

登錄界面Servlet:

package com.helong.servlet;

import java.io.IOException;
import java.sql.SQLException;

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 org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;

import com.myxq.domian.User;
import com.myxq.util.JdbcUtil;

/**
 * Servlet implementation class LoginServlet
 */
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//獲取用戶名， 密碼
		String name = request.getParameter("username");
		String pwd = request.getParameter("password");
		System.out.println(name+":"+pwd);
		//到數據庫當中查詢有沒有該用戶
		QueryRunner qr = new QueryRunner(JdbcUtil.getDataSource());
		
		String sql = "select * from user where username=? and password=?";
		User u = null;
		try {
			/*BeanHandler是將從數據庫中查詢到的數據封裝成一個User對象 返回的對象也爲User對象*/
			u = qr.query(sql, new BeanHandler<User>(User.class),name,pwd);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		response.setContentType("text/html;charset=utf-8");
		//1.有值
		if(u != null) {
			response.getWriter().write("登錄成功");
			//跳轉到主界面
			response.setHeader("refresh", "3;url=/28-Mystore/index.html");
		}else {
			response.getWriter().write("登錄失敗");
			//跳轉到登錄
			response.setHeader("refresh", "3;url=/28-Mystore/login.html");
		}
		
	}

}