1.注册页面register.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script type="text/javascript">
function sub(){
alert("注册成功!");
}
</script>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/timg.jpg") no-repeat center;
background-size: 100%;
} .rg_layout{
width: 900px;
height: 620px;
border: 5px solid #F3E2A9;
background-color: white;
/* 让div水平居中*/
margin: auto;
margin-top: 15px;
}
.rg_left{
float: left;
margin: 20px;
}
.rg_left > p:first-child{
color: #FFBF00;
font-size: 20px;
}
.rg_left>p:last-child{
color: #A4A4A4;
font-size: 20px;
}
.rg_center{
float: left;
width: 500px;
}
.rg_right{
float: right;
margin:20px;
}
.rg_right p{
font-size:13px;
}
.rg_right p a{
color: #FFBF00;
} .td_left{
width: 100px;
text-align: right;
height: 30px;
}
.td_right{
padding: 20px;
} #username,#password,#Email,#name,#tel,#checked{
width: 250px;
height: 30px;
border:1px solid #A4A4A4 ;
border-radius:5px;
padding-left:8px;
}
/*#checked{*/
/* width: 120px;*/
/*}*/
/*#img_check{*/
/* height:30px;*/
/* vertical-align: middle;*/
/*}*/
#btn_sub{
width: 100px;
height: 30px;
background-color: #0080FF;
border: 1px solid #0080FF;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<form action="/register" method="post">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
</tr> <tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
</tr> <tr>
<td class="td_left"><label for="Email">邮箱</label></td>
<td class="td_right"><input type="email" name="Email" id="Email" placeholder="请输入邮箱"></td>
</tr> <tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入真实姓名"></td>
</tr> <tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="number" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" id="btn_sub" value="注册" onclick="sub()">
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账户?<a href="login.html">立即登录</a></p>
</div>
</div>
</body>

2.登录页面 login.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
}
body{
background-image: url("img/login.png");
background-size: 100%;
}
.box{
width: 400px;
height: 300px;
margin:200px auto;
display:block;
position: relative;
} .btn_style{
width: 100px;
height: 30px;
display: block;
position:absolute; text-decoration:none;
text-align:center;
line-height:30px; color: #fff;
background-color: #058;
}
#btn_reset:HOVER {
background-color: #047;
}
#btn_login:hover{
background-color: #047;
}
#btn_reset{
right:50px;
}
#btn_login{
margin-left: 50px;
}
</style> <script type="text/javascript">
function register() {
window.location.href="register.html";
}
</script> </head>
<body>
<div align="center" class="box">
<form id="form"method="post" action="/login">
userName:<input type="text" name="username" id="username" placeholder="请输入用户名"/><br>
password&nbsp;:<input type="password" name="password" id="password" placeholder="请输入密码"/><br/>
<tr>
<td><input class="btn_style" id="btn_login" type="submit" value="登录"></td>
<td><input type="button" id="btn_reset" class="btn_style" value="注册" onclick="register()"></td>
</tr>
</form> </div>
</body>
</html>

3.实体类

package cn.frame.domin;

public class User {
private String username;
private String password;
private String Email;
private String name;
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) {
Email = email;
} public String getName() {
return name;
} public void setName(String name) {
this.name = name;
} public String getTel() {
return tel;
} public void setTel(String tel) {
this.tel = tel;
} }

4.Dao层UserDao类

package cn.frame.dao;

import cn.frame.domin.User;

import java.sql.*;

public class UserDao {

    private static final String driver="com.mysql.cj.jdbc.Driver";
private static final String url="jdbc:mysql://localhost:3306/rg_log?serverTimezone=UTC&characterEncoding=utf-8&useSSL=false";
private static String username="root";
private static String password="hao20001010"; public static void insert(User user) throws SQLException {
String sql="insert into rgister values(?,?,?,?,?)";
Connection connection = null;
PreparedStatement statement = null;
try {
//加载驱动
Class.forName(driver);
connection = DriverManager.getConnection(url, username, password);
//创建预编译的Statement
statement = connection.prepareStatement(sql);
//设置参数
statement.setString(1,user.getUsername());
statement.setString(2,user.getPassword());
statement.setString(3,user.getEmail());
statement.setString(4,user.getName());
statement.setString(5,user.getTel());
statement.executeUpdate(); } catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}finally {
statement.close();
connection.close();
} }
public boolean select(String username2,String password2) throws SQLException {
Connection connection=null;
Statement statement=null; String username1;
String password1;
String sql="select username,password from rgister";
try {
ResultSet rs = null;
Class.forName(driver);
connection = DriverManager.getConnection(url, username, password);
statement= connection.createStatement();
rs=statement.executeQuery(sql);
while (rs.next()) {
username1 = rs.getString("username");
password1 = rs.getString("password");
if (username1.equals(username2) && password1.equals(password2)) {
return true;
}
}
} catch (SQLException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
} finally {
statement.close();
connection.close();
}
return false;
}
}

5.Servlet控制层(RegistServlet类,LoginServlet类,FailServlet类,SuccessServlet类)

package cn.frame.web.servlet;

import cn.frame.dao.UserDao;
import cn.frame.domin.User; 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 java.io.IOException;
import java.sql.SQLException; @WebServlet("/register")
public class RegistServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
String Email = request.getParameter("Email");
String name = request.getParameter("name");
String tel = request.getParameter("tel"); //SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd");
//Date date=format.parse(date);
User user = new User();
user.setUsername(username);
user.setPassword(password);
user.setEmail(Email);
user.setName(name);
user.setTel(tel); try {
UserDao.insert(user);
} catch (SQLException e) {
e.printStackTrace();
}
} protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
package cn.frame.web.servlet;

import cn.frame.dao.UserDao;

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 java.io.IOException;
import java.sql.SQLException; @WebServlet("/login")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
UserDao userDao=new UserDao();
try {
if (userDao.select(username,password)){
request.getRequestDispatcher("/success").forward(request,response);
}else {
request.getRequestDispatcher("/fail").forward(request,response);
}
} catch (SQLException e) {
e.printStackTrace();
} }
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
package cn.frame.web.servlet;

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 java.io.IOException; @WebServlet("/fail")
public class FailServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("登录失败,用户名或密码错误");
} protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
package cn.frame.web.servlet;

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 java.io.IOException; @WebServlet("/success")
public class SuccessServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
response.getWriter().write("恭喜你登录成功!");
} protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}

6、总结

第一步:编写前端页面代码(register.html,login.html)
第二步:编写代码实现与数据库的交互(UserDao类)
第三步:使用Servlet接收表单数据(RegistServlet类,LoginServlet类)
第五步:将图片中的分隔线去掉,对于注册,可以将Servlet接收的数据封装到实体类User中,然后调用Dao层类中编写的insert()方法集合即可;对于登录可以通过调用Dao层类中编写的select()方法与接收的表单数据进行比对即可
重点在于第五步的使用

所用的技术:
Servlet、JDBC

最新文章

  1. [No00009E]几种常见的命名规则
  2. centos 安装beanstalkd
  3. JDK 对应的设计模式
  4. 深入分析js中的constructor 和prototype
  5. 水火难容:同步方法调用async方法引发的ASP.NET应用程序崩溃
  6. mybatis 相关总结
  7. POST中文乱码解决方案
  8. 最新的goldengate monitor 12.1.3已经发布
  9. pyqt5 笔记(三)py2exe 实现代码打包exe
  10. POJ2142——The Balance
  11. 问题-Tbutton(sender) 与 (sender as Tbutton) 等价吗?
  12. java bootstrap分页
  13. Ruby新手教程和技巧
  14. linux 常用端口
  15. 数据结构与算法(C/C++版)【串】
  16. mysql 增删改查基础操作的语法
  17. Asp.Net Core 程序部署到Linux(centos)生产环境(一):普通部署
  18. 使用struts2框架后的拦截器
  19. windows server 2012 安装 VC14(VC2015) 安装失败解决方案
  20. AUTOML --- Machine Learning for Automated Algorithm Design.

热门文章

  1. map, reduce和filter(函数式编程)
  2. 面试官:Redis集群有哪些方式,Leader选举又是什么原理呢?
  3. python算法 前缀和
  4. bash shell 快捷键
  5. ArcGIS Server 禁用/rest/services路径(禁用服务目录)
  6. nginx+keepalived 高可用方案
  7. DC-1
  8. mycat分库分表 看这一篇就够了
  9. 你应该知道的Redis事务
  10. 『现学现忘』Docker基础 — 34、DockerFile文件详解