学习小结
连接数据库的注册登录界面
注册界面代码:
<%@ 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body{
margin:0px;
padding:0px;
background-image:url(xyy3.jpg);
background-repeat:no-repeat;
background-size:100%;
}
#left{
border: 1px ;
height:100%;
width:100px;
position:absolute;
top:0px;
left:0px;
opacity:0.8;
}
#center{
border: 1px ;
height:100%;
margin-left:100px;
margin-right:100px;
text-align:center;
}
#right{
border: 1px ;
height:100%;
width:100px;
position:absolute;
top:0px;
right:0px;
opacity:0.8;
}
#username, #password,#repassword, #email, #name, #tel, #birthday, #checkcode
{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 10px;
}
#checkcode {
width: 110px;
}
#img_check {
height: 32px;
vertical-align: middle;}
.error {
color:red;
}
</style>
<script>
window.onload = function(){
document.getElementById("form").onsubmit = function(){
return checkUsername() && checkPassword();
};
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
document.getElementById("repassword").onblur = checkrePassword;
document.getElementById("email").onblur = checkemail;
document.getElementById("tel").onblur = checktel;
};
function checkUsername(){
var username = document.getElementById("username").value;
var reg_username = /^\w{2,18}$/;
var flag = reg_username.test(username);
var s_username = document.getElementById("s_username");
if(flag){
s_username.innerHTML = "<img width='35' height='25' src='gou.jpg'/>";
}else{
s_username.innerHTML = "用户名格式有误";
}
return flag;
}
function checkPassword(){
var password = document.getElementById("password").value;
var reg_password = /^\w{6,12}$/;
var flag = reg_password.test(password);
var s_password = document.getElementById("s_password");
if(flag){
s_password.innerHTML = "<img width='35' height='25' src='gou.jpg'/>";
}else{
s_password.innerHTML = "密码格式有误";
}
return flag;
}
function checkrePassword(){
var repassword = document.getElementById("repassword").value;
var reg_repassword = /^\w{6,12}$/;
var flag = reg_repassword.test(repassword);
var re_password = document.getElementById("re_password");
if(!flag){
re_password.innerHTML = "密码格式有误";
}if(flag &&document.getElementById("password").value!=document.getElementById("repassword").value){
re_password.innerHTML = "两次密码输入不一致";
}if(flag &&document.getElementById("password").value==document.getElementById("repassword").value){
re_password.innerHTML = "<img width='35' height='25' src='gou.jpg'/>";
}
return flag;
}
function checkemail(){
var email = document.getElementById("email").value;
var reg_email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
var flag = reg_email.test(email);
var s_email = document.getElementById("s_email");
if(flag){
s_email.innerHTML = "<img width='35' height='25' src='gou.jpg'/>";
}else{
s_email.innerHTML = "电子邮箱格式有误";
}
return flag;
}
function checktel(){
var tel = document.getElementById("tel").value;
var reg_tel = /^\w{6,12}$/
var flag = reg_tel.test(tel);
var s_tel = document.getElementById("s_tel");
if(flag){
s_tel.innerHTML = "<img width='35' height='25' src='gou.jpg'/>";
}else{
s_tel.innerHTML = "手机号格式有误";
}
return flag;
}
</script>
</head>
<body>
<div id="left">
</div>
<div id="center">
<br><h1 align="center"><font size="6">注册</font><br><br>
<font size="4">
<form action="Servlet?method=add" id="form" method="post" onsubmit="return check()"> <% //传送到Servlet界面%>
<table align="center">
<tr>
<td align="right">
<label for="username">用户名:</label></td><td align="left">
<input type="text" value="" placeholder="请输入用户名" name="username" id="username"/>
<span id="s_username" class="error"></span></td>
</tr>
<tr>
<td align="right">
<label for="password">密码:</label></td><td align="left">
<input type="password" value="" placeholder="请输入密码" name="password" id="password"/>
<span id="s_password" class="error"></span></td>
</tr>
<tr>
<td align="right">
<label for="repassword">确认密码:</label></td><td align="left">
<input type="password" value="" placeholder="请确认密码" name="repassword" id="repassword"/>
<span id="re_password" class="error"></span></td>
</tr>
<tr>
<td align="right">
<label for="tel">手机号码:</label></td><td align="left">
<input type="text" value="" name="tel" id="tel" placeholder="请输入手机号码"/>
<span id="s_tel" class="error"></span>
</td>
</tr>
<tr>
<td align="right">
<label for="email">邮箱:</label></td><td align="left">
<input type="email" value="" name="email" id="email" placeholder="请输入邮箱地址"/>
<span id="s_email" class="error"></span></td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="checkbox" value="我已详细阅读并同意"/>
我已详细阅读并同意<a href="https://www.glut.edu.cn/">用户注册协议</a></td>
</tr>
<td align="center" colspan="2">
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<input type="button" value="返回" onclick="window.close()"></td>
</tr>
</font>
</table>
</form>
</div>
<div id="right">
</div>
</body>
DBUtil代码:
package com.imooc.jdbc;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class DBUtil {
public static String db_url = "jdbc:mysql://localhost:3306/mysql?";
public static String db_user = "root";
public static String db_pass = "123";
public static Connection getConn () {
Connection conn = null;
try {
Class.forName("com.mysql.jdbc.Driver");//加载驱动
conn = DriverManager.getConnection(db_url, db_user, db_pass);//连接数据库
} catch (Exception e) {
e.printStackTrace();
}
return conn;
}
/**
* 关闭与数据库的连接
*/
public static void close (Statement state, Connection conn) { //关闭数据流
if (state != null) {
try {
state.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
public static void close (ResultSet rs, Statement state, Connection conn) {
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (state != null) {
try {
state.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
public static void main(String[] args) throws SQLException {
Connection conn = getConn();
PreparedStatement pstmt = null;
ResultSet rs = null;
String sql ="select * from tbl_user_info";
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
if(rs.next()){
System.out.println("空");
}else{
System.out.println("不空");
}
}
}
UserDao代码:
package com.imooc.jdbc;
import java.util.*;
import com.imooc.jdbc.*;
import java.sql.*;
public class UserDao {
public boolean add(UserVO user) {
//将数据插入数据库的SQL语句
String sql = "insert into tbl_user_info(username,password,email,tel) values('"+ user.getUsername() + "','"+ user.getPassword() +"','"+user.getEmail()+"','"+ user.getTel() +"')";
// 创建数据库链接
Connection conn = DBUtil.getConn();
Statement state = null;
boolean f = false;
int a = 0;
try {
state = conn.createStatement(); //连接
a=state.executeUpdate(sql); //将sql语句上传,执行成功则赋值给a
} catch (SQLException e) {
e.printStackTrace();
} finally {
// 关闭 连接
DBUtil.close(state, conn);
}
if (a > 0) { //sql语句执行成功则将true赋值给f
f = true;
}
return f;
}
public Object getUserName() {
// TODO Auto-generated method stub
return null;
}
public Object getpassword() {
// TODO Auto-generated method stub
return null;
}
}
UserVO代码:
package com.imooc.jdbc;
import java.util.Date;
public class UserVO {
private String username;
private String password;
private String email;
private String tel;
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 getEmail(){
return email;
}
public void setEmail(String email){
this.email=email;
}
public String getTel(){
return tel;
}
public void setTel(String Tel){
this.tel=tel;
}
public UserVO() {}
public UserVO(String username,String password,String email,String tel) {
this.username=username;
this.password=password;
this.email=email;
this.tel=tel;
}
}
登录界面:
<%@ page language="java" import=" java.util.*" 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
</head>
<style>
body{
margin:0px;
padding:0px;
background-image:url(xyy3.jpg);
background-repeat:no-repeat;
background-size:100% auto;
}
#left{
border: 1px ;
height:100%;
width:100px;
position:absolute;
top:0px;
left:0px;
opacity:0.8;
}
#center{
border: 1px ;
height:100%;
margin-left:100px;
margin-right:100px;
}
#right{
border: 1px ;
height:100%;
width:100px;
position:absolute;
top:0px;
right:0px;
opacity:0.8;
}
</style>
</head>
<body>
<div id="left">
</div>
<div id="center">
<form action="logincheck.jsp" method="post">
<fieldset>
<br><br><br><br><br><br>
<p align="center"><font size="6">登录</font><br>
</p>
<p align="center">
<br>
姓名:<input type="text" value="" name="username" placeholder="用户名"/>
<br><br>
密码:<input type="password" value="" name="password" placeholder="密码"/>
<br>
<input type="checkbox" value="自动登录"/> 自动登录
<br>
<input type="submit" value="登录"/>
<input type="reset" value="重置"/>
<input type="button" value="关闭" onclick="window.close()"/>
<br>
<a href="zhuce.jsp">注册</a>
</p></fieldset>
</form>
</div>
<div id="right">
</div>
</body>
Servlet代码:
package Servlet;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
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 com.imooc.jdbc.*;
@WebServlet(name="Servlet",urlPatterns={"/Servlet"})
public class Servlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public Servlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String method = request.getParameter("method");
if ("add".equals(method)) {
add(request, response);
}
}
public void add(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException{
request.setCharacterEncoding("UTF-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
String email = request.getParameter("email");
String tel = request.getParameter("tel");
//调用用户属性类
UserVO user = new UserVO(username,password,email,tel);
//接受判断函数返回值
UserDao dao =new UserDao();
boolean f=dao.add(user); //调用UserDao中的add函数
//提示信息
if(f) { //f值为true则执行,否则执行else语句
request.setAttribute("message", "注册成功!");
request.getRequestDispatcher("denglu.jsp").forward(request,response);
}
else {
request.setAttribute("message", "已有账号,重复注册!");
request.getRequestDispatcher("loginFail.jsp").forward(request,response);
}
}
}
登录成功代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.sql.*"%>
<!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">
<title>LOGINsUCCESS.JSP</title>
</head>
<body>
<%
String username = request.getParameter("username");
%>
欢迎您登录,<font color="blue"> <%out.print(username);%> </font>
</form>
</body>
</body>
</html>
运行截图: