700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 实现登录注册页面详细(Servlet+jsp+java)

实现登录注册页面详细(Servlet+jsp+java)

时间:2024-03-19 07:04:19

相关推荐

实现登录注册页面详细(Servlet+jsp+java)

登录和注册实现

1、基本需要1.1、工程依赖1.2、注册、登录、首页界面(jsp)1.3、创建数据库1.4、部署Tomcat1.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="links0126">Collect from <a href="/" title="网站模板">模板之家</a><a href="/" 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> 登&emsp;&emsp;&emsp;录 </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="links0126">Collect from <a href="/" title="网站模板">模板之家</a><a href="/" 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="links0126">Collect from <a href="/" title="网站模板">模板之家</a><a href="/" 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 .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 .zpark.dao;// 用户持久层接口import .zpark.pojo.User;public interface IUserDao {Integer insertUser(User user);//登录接口User userLogin(String name);}// dao层实现类package .zpark.dao.impl;import .zpark.dao.IUserDao;import .zpark.pojo.User;import .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();//注册方法@Overridepublic 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,并且获取结果,修改rowrow = stat.executeUpdate();mit();}catch (Exception e){// 回滚事务try {conn.rollback();} catch (SQLException ex) {ex.printStackTrace();}e.printStackTrace();}finally {DruidUtils.close(conn,null,stat);}return row;}// 登录方法@Overridepublic 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);//执行sqlres = 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 .zpark.service;import .zpark.pojo.User;public interface IUserService {//用户注册接口boolean addUser(User user);//用户登录接口boolean loginUser(String username, String password);}//Service层实现类package .zpark.service.impl;import .zpark.dao.IUserDao;import .zpark.dao.impl.UserDaoImpl;import .zpark.pojo.User;import .zpark.service.IUserService;import java.text.SimpleDateFormat;import java.util.Date;public class UserServiceImpl implements IUserService {// 声明dao层接口对象private final IUserDao userDao = new UserDaoImpl();//业务层注册实现@Overridepublic boolean addUser(User user) {//定义标记,默认用户注册失败boolean flag = false;//判断user是否为Nullif (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;}//业务层登录实现@Overridepublic 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 .zpark.controller;import .zpark.pojo.User;import .zpark.service.IUserService;import .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();@Overrideprotected 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.jsprequest.getRequestDispatcher("reg.jsp").forward(request,response);}}}

2.4.2、登录控制类(RegUserServletController):

package .zpark.controller;import .zpark.service.IUserService;import .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();@Overrideprotected 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.jsprequest.getRequestDispatcher("login.jsp").forward(request,response);}}}

登录流程:

3、注意事项

可自行创建数据库以及前端页面,主要看实现方法代码。若要实现上述过程,私信发源码。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。