登录和注册实现
- 1、基本需要
- 1.1、工程依赖
- 1.2、注册、登录、首页界面（jsp）
- 1.3、创建数据库
- 1.4、部署Tomcat
- 1.5、项目层次结构
- 2、实现注册和登录
- 2.1、所需工具类
- 2.2、dao层
- 2.3、Service层
- 2.4、controller层
- 2.4.1、注册控制类（RegUserServletController）：
- 2.4.2、登录控制类（RegUserServletController）：
- 3、注意事项
1、基本需要
1.1、工程依赖
<!-- Servlet依赖-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<!-- JSP依赖-->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.3</version>
<scope>provided</scope>
</dependency>
<!--EL SPec依赖-->
<dependency>
<groupId>javax.el</groupId>
<artifactId>javax.el-api</artifactId>
<version>3.0.0</version>
</dependency>
<!-- JSTL依赖-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.0.20</version>
</dependency>
<!-- 添加MySQL驱动依赖 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.49</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.75</version>
</dependency>1.2、注册、登录、首页界面（jsp）
注册界面：
<%@ page contentType="text/html; charset=utf-8" language="java" pageEncoding="UTF-8" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册 - </title>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/css/zui.css" media="all">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/css/login.css" media="all">
<link href="${pageContext.servletContext.contextPath}/css/animate.min.css" rel="stylesheet">
<link href="${pageContext.servletContext.contextPath}/css/font-awesome.min.css" rel="stylesheet">
<style> body { background-image: url(${pageContext.servletContext.contextPath}/images/4.jpg);}</style>
</head>
<!--/************************************************************
* *
* *
* *
* 努力创建完善、持续更新插件以及模板 *
* *
**************************************************************-->
<body>
<div id="main-box"></div>
<div id="main-content">
<div class="login-body animated fadeInLeft">
<div class="login-main pr">
<form action="${pageContext.servletContext.contextPath}/reg.do" method="post" class="login-form">
<p style="color: red">${message}</p>
<h3> 注册中心 </h3>
<h5 style="padding-bottom: 10px"> System Management Center </h5>
<!-- 注册 -->
<div id="MobileBox" class="item-box" >
<div class="input-group user-name"> <span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" name="username" class="form-control" placeholder="用户名">
</div>
<div class="input-group user-name"> <span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" name="uname" class="form-control" placeholder="姓名">
</div>
<div class="input-group password"> <span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" name="password" class="form-control" placeholder="密码">
</div>
<div class="input-group password"> <span class="input-group-addon"><i class="icon-edit"></i></span>
<input type="text" name="email" class="form-control" placeholder="邮箱">
</div>
<div class="input-group password"> <span class="input-group-addon"><i class="icon-phone"></i></span>
<input type="text" name="phone" class="form-control" placeholder="手机号">
</div>
<div class="input-group password">
<span class="input-group-addon">
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</div>
<div class="login_btn_panel">
<button class=" btn btn-primary btn-block btn-lg" data-ajax="post" type="submit" data-callback="success">注册</button>
<div class="check-tips"></div>
</div>
</form>
</div>
</div>
</div>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights" id="links20210126">
Collect from <a href="http://www.cssmoban.com/" title="网站模板">模板之家</a>
<a href="https://www.chazidian.com/" title="查字典">查字典</a>
</div>
</body>
</html>登录界面：
<%@ page contentType="text/html; charset=utf-8" language="java" pageEncoding="UTF-8" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录 - </title>
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/css/zui.css" media="all">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/css/login.css" media="all">
<link href="${pageContext.servletContext.contextPath}/css/animate.min.css" rel="stylesheet">
<link href="${pageContext.servletContext.contextPath}/css/font-awesome.min.css" rel="stylesheet">
<style> body { background-image: url(${pageContext.servletContext.contextPath}/images/4.jpg);}</style>
</head>
<!--/************************************************************
* *
* *
* *
* 努力创建完善、持续更新插件以及模板 *
* *
**************************************************************-->
<body>
<div id="main-box"></div>
<div id="main-content">
<div class="login-body animated fadeInLeft">
<div class="login-main pr">
<form action="${pageContext.servletContext.contextPath}/login.do" method="post" class="login-form">
<p style="color: red">${message}</p>
<h3> 登 录 </h3>
<h5 style="padding-bottom: 10px"> Login </h5>
<!-- 账号登陆 -->
<div id="MobileBox" class="item-box" >
<div class="input-group user-name"> <span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" name="username" class="form-control" placeholder="用户名/手机号">
</div>
<div class="input-group password"> <span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" name="password" class="form-control" placeholder="密码">
</div>
<div class="use-qrcode-a"><a class="use-ding" href="javascript:void(0)">
<img src="${pageContext.servletContext.contextPath}/images/ding.png" width="17" height="17" style="margin-top:-2px"> 钉钉账号登陆</a> </div>
<div class="login_btn_panel">
<button class=" btn btn-primary btn-block btn-lg" data-ajax="post" type="submit" data-callback="success">登录</button>
<div class="check-tips"></div>
</div>
</form>
</div>
</div>
</div>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights" id="links20210126">
Collect from <a href="http://www.cssmoban.com/" title="网站模板">模板之家</a>
<a href="https://www.chazidian.com/" title="查字典">查字典</a>
</div>
</body>
</html>首页界面：
<%@ page contentType="text/html; charset=utf-8" language="java" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>进销存管理系统</title>
<link href="${pageContext.servletContext.contextPath}/view/css/Site.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.servletContext.contextPath}/view/css/zy.layout.css" rel="stylesheet" />
<link href="${pageContext.servletContext.contextPath}/view/css/zy.form.css" rel="stylesheet" />
<link href="${pageContext.servletContext.contextPath}/view/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
.headerlitooleulsubitem_gray {
background-Color: White;
position: absolute;
border-left: 1px solid #BCD4E5;
border-right: 1px solid #BCD4E5;
border-bottom: 1px solid #BCD4E5;
box-shadow: 0px 0px 5px #BCD4E5;
width: 230px;
margin-left: -170px;
color: Black;
display: none;
}
.headerlitooleulsubitem_red {
background-Color: White;
position: absolute;
border-left: 1px solid #E5BCD4;
border-right: 1px solid #E5BCD4;
border-bottom: 1px solid #E5BCD4;
box-shadow: 0px 0px 5px #E5BCD4;
width: 230px;
margin-left: -170px;
color: Black;
display: none;
}
.headerlitooleulsubitem_gray>li,
.headerlitooleulsubitem_red>li {
height: 45px;
background-color: White;
padding: 0px 10px;
border-bottom: 1px solid #E4ECF3;
font-size: 14px;
line-height: 26px;
}
.headerlitoolelisubitemtitle_gray {
height: 35px !important;
line-height: 35px !important;
background-color: #ECF2F7 !important;
margin: 0px !important;
color: #8090A0 !important;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid #BCD4E5 !important;
}
.headerlitoolelisubitemtitle_red {
height: 35px !important;
line-height: 35px !important;
background-color: #F7ECF2 !important;
margin: 0px !important;
color: #B471A0 !important;
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid #E5BCD4 !important;
}
.headerlitooleulsubitem_gray>li:hover {
background-Color: #F4F9FC;
}
.headerlitooleulsubitem_red>li:hover {
background-color: #FCF4F9;
}
.ulsubitemitems>li {
float: left;
height: 20px;
font-size: 13px;
font-weight: normal !important;
color: #555 !important;
}
.ulsubitemitems>li:last-child {
clear: both;
width: 100%;
height: 10px;
margin-top: 8px;
background-color: #DADADA;
}
.headerlitools_info {
background-color: #0a318d;
height: 45px;
padding: 0px 10px;
width: 135px;
}
.headeruserface {
background-image: url('/content/resources/images/logo.png');
width: 40px;
height: 40px;
background-color: white;
margin: 2px 10px 2px 2px;
border-radius: 20px;
float: left;
}
.headerlitools_ulinfo {
background-Color: white;
border-left: 1px solid #D1D1D1;
border-right: 1px solid #D1D1D1;
border-bottom: 1px solid #D1D1D1;
box-shadow: 0px 0px 5px #D1D1D1;
width: 160px;
margin-left: -20px;
color: Black;
display: none;
}
.headerlitools_ulinfo>li {
height: 35px;
background-color: White;
padding: 0px 10px;
font-size: 14px;
line-height: 36px;
}
.headerlitools_ulinfo>li:hover {
background-Color: #FEE188;
}
.dvcontent {
padding: 0px 20px;
margin: 45px auto 0px auto;
overflow: auto;
}
.dvpagerecord {
padding: 6px 12px;
background-color: #EAEFF2;
color: #2283C5;
float: left;
border: 1px solid #D9D9D9;
text-decoration: underline;
font-size: 14px;
cursor: pointer;
}
.dvpagerecord:hover {
cursor: pointer;
}
.dvpagerecord:hover i {
text-decoration: underline;
}
.ulpageRecord {
max-width: 165px;
float: left;
white-space: nowrap;
overflow: hidden;
margin: 0px;
padding: 0px;
}
.ulpageRecord li {
margin: 0px;
padding: 6px 12px;
background-color: #EAEFF2;
color: #2283C5;
display: inline-block;
font-size: 14px;
border: 1px solid #D9D9D9;
}
.ulpageRecord li:hover {
text-decoration: underline;
cursor: pointer;
}
.currentPage {
background-color: #2468a9 !important;
color: white !important;
}
#warn {
width: 300px;
}
#warn tr {
width: 300px;
height: 20px;
}
#warn tr td {
width: 90px;
height: 20px;
text-align: center;
}
iframe {
border: none;
}
</style>
<link href="${pageContext.servletContext.contextPath}/view/css/zy.menu.css" rel="stylesheet" />
</head>
<body>
<div class="dvheader">
<div class="dvheadertools">
<span class="headerspantitle">进销存管理系统</span>
<ul class="headerultools">
<li class="headerlitools_info headerlitools" style="background-color: #075597">
<div class="headeruserface" style="text-align: center;"><i class="icon-user" style="color: black;font-size: 19px;"></i></div>
管理员<i style="margin-left: 8px;" class="icon-caret-down"></i>
<ul class="headerlitools_ulinfo">
<li style="border-top: 1px solid #E4ECF3;">
<i class="icon-off" style="margin-right: 10px;"></i>
<a style="color: black; text-decoration: none;">退出</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="dvcontent">
<ul class="ulleftmenu" style="border-right: 1px solid #ddd;">
<li class="limenuitem">
<i class="icon-cog menuicon"></i>系统菜单<b class="arrow icon-angle-down arrow-down"></b>
<ul class="ulleftsubitems">
<a href="${pageContext.servletContext.contextPath}/view/type.jsp" target="right">
<li>分类管理</li>
</a>
<a href="${pageContext.servletContext.contextPath}/view/inventory.jsp" target="right">
<li>库存管理</li>
</a>
<a href="${pageContext.servletContext.contextPath}/view/inbound.jsp" target="right">
<li>入库管理</li>
</a>
<a href="${pageContext.servletContext.contextPath}/view/warning.jsp" target="right">
<li>预警信息设置</li>
</a>
<a href="${pageContext.servletContext.contextPath}/view/outBoud.jsp" target="right">
<li>出库管理</li>
</a>
<a href="${pageContext.servletContext.contextPath}/view/user.jsp" target="right">
<li>用户管理</li>
</a>
<a href="view/updatePwd.jsp" target="right"><li >修改密码</li></a>
</ul>
</li>
</ul>
<div style="position: absolute; left: 191px; right: 20px; ">
<iframe src="view/type.jsp" scrolling="no" width="100%" height="1200" name="right" border="none"></iframe>
</div>
</div>
<script src="${pageContext.servletContext.contextPath}/view/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="${pageContext.servletContext.contextPath}/view/js/plugs/Jqueryplugs.js" type="text/javascript"></script>
<script src="${pageContext.servletContext.contextPath}/view/js/_layout.js"></script>
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights" id="links20210126">
Collect from <a href="http://www.cssmoban.com/" title="网站模板">模板之家</a>
<a href="https://www.chazidian.com/" title="查字典">查字典</a>
</div>
</body>
</html>1.3、创建数据库
创建表：
create table user(
id int primary key auto_increment comment '用户id',
username varchar(50) unique not null comment '用户名',
uname varchar(20) not null comment '姓名',
password varchar(60) not null default '123456' comment '用户密码',
email varchar(30) unique not null comment '邮箱',
phone varchar(11) unique not null comment '手机号',
sex varchar(8) not null comment '性别',
is_delete int not null default '1' comment '用户状态：0：删除，1：正常',
create_user_time varchar(100) not null comment '用户注册时间',
modify_pwd_time varchar(100) comment '用户修改密码时间'
);
1.4、部署Tomcat
1.5、项目层次结构
2、实现注册和登录
2.1、所需工具类
在utils包下创建DruidUtils类：
package com.cn.zpark.utils;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;
public class DruidUtils {
private static DataSource dataSource;
//初始化数据源
static {
Properties p = new Properties();
InputStream ins = DruidUtils.class.getClassLoader().getResourceAsStream("druid.properties");
try {
p.load(ins);
//初始化配置数据源
dataSource = DruidDataSourceFactory.createDataSource(p);
} catch (Exception e) {
e.printStackTrace();
System.out.println("初始化数据源失败");
} finally {
try {
if (ins != null) {
ins.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
public static Connection getConn() throws SQLException {
return dataSource.getConnection();
}
public static void close(Connection conn, ResultSet res, Statement... stat) {
try {
if (res != null) {
res.close();
}
//迭代器 循环关闭
for (Statement statement : stat) {
if (statement != null) {
statement.close();
}
}
assert conn != null;
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}2.2、dao层
dao层接口以及实现类：
package com.cn.zpark.dao;
// 用户持久层接口
import com.cn.zpark.pojo.User;
public interface IUserDao {
Integer insertUser(User user);
//登录接口
User userLogin(String name);
}
// dao层实现类
package com.cn.zpark.dao.impl;
import com.cn.zpark.dao.IUserDao;
import com.cn.zpark.pojo.User;
import com.cn.zpark.utils.DruidUtils;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class UserDaoImpl implements IUserDao {
// 定义数据库的连接信息
private Connection conn = null;
private PreparedStatement stat=null;
private ResultSet res=null;
User user = new User();
//注册方法
@Override
public Integer insertUser(User user) {
// 定义受影响的行
Integer row = 0;
try {
//获取数据库连接对象
conn = DruidUtils.getConn();
//开启事务 增删改查
conn.setAutoCommit(false);
//创建sql语句
String sql = "insert into user(username,uname,password,email,phone,sex,is_delete,create_user_time,modify_pwd_time )" +
"values(?,?,?,?,?,?,?,?,?)";
//创建预编译sql对象
stat = conn.prepareStatement(sql);
// 替换占位符
stat.setString(1,user.getUsername());
stat.setString(2,user.getUname());
stat.setString(3,user.getPassword());
stat.setString(4,user.getEmail());
stat.setString(5,user.getPhone());
stat.setString(6,user.getSex());
stat.setInt(7,user.getIsDelete());
stat.setString(8,user.getCreateUserTime());
stat.setString(9,user.getModifyPwdTime());
// 执行sql，并且获取结果，修改row
row = stat.executeUpdate();
conn.commit();
}catch (Exception e){
// 回滚事务
try {
conn.rollback();
} catch (SQLException ex) {
ex.printStackTrace();
}
e.printStackTrace();
}finally {
DruidUtils.close(conn,null,stat);
}
return row;
}
// 登录方法
@Override
public User userLogin(String name) {
//获取连接信息
try {
conn = DruidUtils.getConn();
//创建sql语句
String sql = "select username, password from user where username = ?";
//创建预编译对象
stat = conn.prepareStatement(sql);
//替换占位符
stat.setString(1,name);
//执行sql
res = stat.executeQuery();
while (res.next()) {
//查询数据封装到User中
String username = res.getString("username");
String password = res.getString("password");
user.setUsername(username);
user.setPassword(password);
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
DruidUtils.close(conn,res,stat);
}
return user;
}
}
}2.3、Service层
Service层以及实现类:
package com.cn.zpark.service;
import com.cn.zpark.pojo.User;
public interface IUserService {
//用户注册接口
boolean addUser(User user);
//用户登录接口
boolean loginUser(String username, String password);
}
//Service层实现类
package com.cn.zpark.service.impl;
import com.cn.zpark.dao.IUserDao;
import com.cn.zpark.dao.impl.UserDaoImpl;
import com.cn.zpark.pojo.User;
import com.cn.zpark.service.IUserService;
import java.text.SimpleDateFormat;
import java.util.Date;
public class UserServiceImpl implements IUserService {
// 声明dao层接口对象
private final IUserDao userDao = new UserDaoImpl();
//业务层注册实现
@Override
public boolean addUser(User user) {
//定义标记，默认用户注册失败
boolean flag = false;
//判断user是否为Null
if (user == null){
return flag;
}
// 补齐user信息
user.setIsDelete(1); //设置用户为正常状态
Date date = new Date();
String time = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(date);
user.setCreateUserTime(time); //设置用户注册时间
//调用dao执行插入操作数据
Integer integer = userDao.insertUser(user);
//判断添加数据结果
if(integer > 0 ){
flag = true;
}
return flag;
}
//业务层登录实现
@Override
public boolean loginUser(String name, String password) {
boolean flag = false;
//判断User是否为空
User user = userDao.userLogin(name);
if (user==null) {
return flag;
}else{
if(user.getUsername().equals(name) && user.getPassword().equals(password)){
flag = true;
}
}
return flag;
}
}2.4、controller层
2.4.1、注册控制类（RegUserServletController）：
package com.cn.zpark.controller;
import com.cn.zpark.pojo.User;
import com.cn.zpark.service.IUserService;
import com.cn.zpark.service.impl.UserServiceImpl;
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.text.SimpleDateFormat;
import java.util.Date;
@WebServlet("/reg.do")
public class RegUserServletController extends HttpServlet {
// 声明service接口对象
private final IUserService userService = new UserServiceImpl();
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取注册参数
String username = request.getParameter("username");
String uname = request.getParameter("uname");
String password = request.getParameter("password");
String email = request.getParameter("email");
String phone = request.getParameter("phone");
String sex = request.getParameter("sex");
// 将注册参数分装到到User对象
User user = new User();
user.setUsername(username);
user.setUname(uname);
user.setPassword(password);
user.setEmail(email);
user.setPhone(phone);
user.setSex(sex);
user.setCreateUserTime(new SimpleDateFormat("yyyy--MM--dd HH:mm:ss").format(new Date()));
// 调用service执行注册功能
boolean flag = userService.addUser(user);
// 判断service执行结果，true标识注册成功，重定向到登录页面，否则注册失败，提示用户
if (flag){
// 注册成功
response.sendRedirect("login.jsp");
}else{
// 否则注册失败
request.setAttribute("message","注册失败,请确认用户名是否被注册");
//转发给reg.jsp
request.getRequestDispatcher("reg.jsp").forward(request,response);
}
}
}
2.4.2、登录控制类（RegUserServletController）：
package com.cn.zpark.controller;
import com.cn.zpark.service.IUserService;
import com.cn.zpark.service.impl.UserServiceImpl;
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("/login.do")
public class LoginUserServletController extends HttpServlet {
//调用业务层接口对象
private final IUserService userService = new UserServiceImpl();
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取表单参数
String name = request.getParameter("username");
String password = request.getParameter("password");
//判断处理结果
boolean flag = userService.loginUser(name,password);
if(flag){
//登录成功
response.sendRedirect("index.jsp");
}else{
// 登录失败
request.setAttribute("message","登录失败,请确认用户名或密码是否错误");
//转发给reg.jsp
request.getRequestDispatcher("login.jsp").forward(request,response);
}
}
}
登录流程：
3、注意事项
可自行创建数据库以及前端页面，主要看实现方法代码。若要实现上述过程，私信发源码。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
