目录
- 项目介绍
- 准备工作
- 前端实现
- 后端实现
项目介绍
实现效果：
首先进行注册，注册成功后自动跳转到登录界面，用先前注册的账号进行登录
注册成功和登录成功的信息会在后端控制台打印
用户注册的信息记录在后台数据库中
ps:前端界面参考了QQ注册界面，只实现了皮毛
需求分析：
1.读入用户从前端页面传入的数据
2.与数据库信息进行比对
3.实现注册和登录
实现功能：
前端页面设计
后端servlet程序逻辑实现
连接jdbc
准备工作
准备工作：
由于要用到数据库技术，我们这次选用C3P0连接池和dbutils工具类实现数据库连接。在开始写代码之前要导入C3P0连接池和dbutils的jar包以及连接数据库的jar包，这些包我们都放在了web根目录下的lib文件夹里。当然我们在实现C3P0数据库连接池的时候还需要一个config配置文件(.xml)，里面配置了有关数据库url，username等的一些信息,这个配置文件我们放在src根目录下
前端实现
前端页面主要是设计了用户登录界面和用户注册界面，以及用户登录成功后跳转的欢迎进入界面 如下
（
值得注意的是在提交表单的时候表单的action属性的url要和配置文件的url-pattern一致，代表用户提交表单之后，由LoginServlet程序进行数据处理。
或者通过注解给服务器配置要访问的Servlet程序例如：
@WebServlet(name = “RegisterServlet”,urlPatterns="/register")
如下）
<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>servlet.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/LoginServlet</url-pattern>
</servlet-mapping>
1.登录界面
<!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>登录注册界面</title>
</head>
<style type="text/css">
.button{
width:80px;
background-color:dodgerblue;
color: white;
font-size: 10px;
cursor: pointer;
}
body{
text-align:center;
}
.onmouseover{
border:inset 4px;
}
</style>
<script type="text/javascript">
var buttonDom=document.getElementsByName("button")//返回的是一个数组
//给按钮们添加交互事件
for (var i = 0; i <buttonDom.length ; i++) {
buttonDom[i].onmouseover=function(){
buttonDom[i].className="onmouseover";
}// end of onmouseover
buttonDom[i].onmouseout=function(){
buttonDom[i].className="";
}//end of onmouseout
}
</script>
<body>
<h1>欢迎登录微读</h1>
<h2>每一天，乐在阅读</h2>
<!--把表单内容提交到工程下的/LoginServlet类进行数据处理-->
<form action="/LoginServlet" method="post">
<table align="center">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="text" name="password" />
</td>
</tr>
<tr>
<td></td>
<td>
<br/>
<input type="submit" value="登录" class="button"/>
<input type="button" value="注册" class="button" onclick="window.location.href='register.html'"/>
</td>
</tr>
</table>
</form>
</body>
</html>2.注册界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
</head>
<style type="text/css">
#注册{
width:180px;
background-color:dodgerblue;
color: white;
font-size: 10px;
cursor: pointer;
border:outset;
}
body{
text-align:center;
}
table{
font-size:15px;
}
.onmouseover{
border:inset ;
}
</style>
<script type="text/javascript">
window.onload=function(){
var buttonDom=document.getElementById("注册");
buttonDom.onmouseover=function(){
this.className="onmouseover";
}//end of onmouseover
buttonDom.onmouseout=function(){
this.className="";
};//end of onmouseout
};//end of window.onload
</script>
<body>
<h1>欢迎注册微读</h1>
<h2>每一天，乐在阅读</h2><br/>
<!--把表单内容提交到工程下的/servlet/RegisterServlet进行数据处理-->
<form action="/register" method="post">
<table align="center">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="password"/>
</td>
</tr>
<tr>
<td>年龄:</td>
<td>
<input type="text" name="age"/>
</td>
</tr>
<tr>
<td></td>
<td>
<br/>
<input type="submit" value="注册" id="注册" />
</td>
</tr>
</table>
</form>
</body>
</html>3.欢迎进入界面
<%--
Created by IntelliJ IDEA.
User: ASUS
Date: 2021/11/8
Time: 15:30
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
欢迎进入游戏
</body>
</html>后端实现
接下来我们就可以敲代码了
在src下创建三个目录，用于分类，entity存放实体类，servlet存放servlet程序，utils存放工具类
1.实体类就是与数据库表对应的实体，例如用户由用户名和密码和年龄这三个属性组成，则在后端也要创建一个包含用户名，密码，年龄这三个属性的实体类，如下
package entity;
/**
* @ProjectName servlet
* @ClassName User
* @Description //
* @Email 2992794262@qq.com
* @Author ASUS
* @Date 2021/11/10
**/
public class User {
private String username;
private String password;
private Integer age;
public User(String username, String password, Integer age) {
this.username = username;
this.password = password;
this.age = age;
}
public User() {
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
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 + '\'' +
", password='" + password + '\'' +
", age=" + age +
'}';
}
}2.servler程序包含进行登录数据处理的LoginServlet和进行注册数据处理的RegisterServlet类
其中
QueryRunner runner=new QueryRunner(C3P0utils.getDataSource()); 通过c3P0连接池获得了一个连接
User user= (User)runner.query(sql,new BeanHandler(User.class),username,password);通过dbutils简化了查询
登陆的Servlet:
package servlet;
import entity.User;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import utils.C3P0utils;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
//从前端获取数据
String username=request.getParameter("username");
String password=request.getParameter("password");
//登录
try {
//获得一个连接
QueryRunner runner=new QueryRunner(C3P0utils.getDataSource());
String sql="select * from user where username=? and password=?";
//c3p0，dbutil查询
User user= (User)runner.query(sql,new BeanHandler(User.class),username,password);
//登录成功，跳转到游戏界面
if(user!=null)
{
System.out.println("登录成功");
response.sendRedirect("/welcome.jsp");
}
//登录失败，停留在登录页面
else{
System.out.println("登录失败");
response.sendRedirect("/login.jsp");
}
}
catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}注册的Servlet:
package servlet;
import entity.User;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import utils.C3P0utils;
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.io.PrintWriter;
import java.sql.SQLException;
@WebServlet(name = "RegisterServlet",urlPatterns="/register")
public class RegisterServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置请求体的字符集为UTF-8,从而解决post请求的中文乱码问题
// 这个函数也要在请求参数之前调用才有用
request.setCharacterEncoding("UTF-8");
//从前端获取数据
String username= request.getParameter("username");
String password=request.getParameter("password");
String age=request.getParameter("age");
//获得连接
QueryRunner runner=new QueryRunner(C3P0utils.getDataSource());
try {
//注册
String sql1 = "select username from user where username=?";
String sql2 = "insert into user(username,password,age) values(?,?,?)";
//查看要注册的用户名是否已经被占用
User user = (User) runner.query(sql1, new BeanHandler(User.class), username);
//没有被占用，可以注册
if (user == null) {
int num = runner.update(sql2,username,password,age);
//注册成功，跳转到登录界面
if (num > 0) {
System.out.println("注册成功");
response.sendRedirect("/login.jsp");
}
else{
System.out.println("注册失败");
response.sendRedirect("/register.html");
}
}
//用户名被占用
else{
System.out.println("用户名被占用");
response.sendRedirect("/register.html");
}
}
catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}3.工具类C3P0utils用于获取一个数据源
package utils;
import com.mchange.v2.c3p0.ComboPooledDataSource;
import javax.sql.DataSource;
/**
* @ProjectName servlet
* @ClassName C3P0utils
* @Description // 获取一个数据源DataSource
* @Email 2992794262@qq.com
* @Author ASUS
* @Date 2021/11/10
**/
public class C3P0utils {
private static DataSource ds=null;
static{
ComboPooledDataSource source= new ComboPooledDataSource();
ds=source;
}
public static DataSource getDataSource(){
return ds;
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
