登录和注册实现
- 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、工程依赖
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.3</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.el</groupId>
<artifactId>javax.el-api</artifactId>
<version>3.0.0</version>
</dependency>
<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>
<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);
}
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);
String sql = "insert into user(username,uname,password,email,phone,sex,is_delete,create_user_time,modify_pwd_time )" +
"values(?,?,?,?,?,?,?,?,?)";
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());
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();
String sql = "select username, password from user where username = ?";
stat = conn.prepareStatement(sql);
stat.setString(1,name);
res = stat.executeQuery();
while (res.next()) {
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);
}
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 {
private final IUserDao userDao = new UserDaoImpl();
@Override
public boolean addUser(User user) {
boolean flag = false;
if (user == null){
return flag;
}
user.setIsDelete(1);
Date date = new Date();
String time = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(date);
user.setCreateUserTime(time);
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 = 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 {
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 = 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()));
boolean flag = userService.addUser(user);
if (flag){
response.sendRedirect("login.jsp");
}else{
request.setAttribute("message","注册失败,请确认用户名是否被注册");
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","登录失败,请确认用户名或密码是否错误");
request.getRequestDispatcher("login.jsp").forward(request,response);
}
}
}
登录流程:
3、注意事项
可自行创建数据库以及前端页面,主要看实现方法代码。若要实现上述过程,私信发源码。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)