jsp实现登录界面
本文实例为大家分享了jsp实现登录界面的具体代码，供大家参考，具体内容如下
一.用户登录案例需求：
1.编写login.jsp登录页面
username & password 两个输入框
2.使用Druid数据库连接池技术,操作mysql，day14数据库中user表
3.使用JdbcTemplate技术封装JDBC
4.登录成功跳转到SuccessServlet展示：登录成功！用户名,欢迎您
5.登录失败跳转到login.jsp展示：登录失败，用户名或密码错误,验证码错误
二.分析
三. 开发步骤
1. 创建项目，配置文件，导入jar包
2. 创建数据库环境
CREATE DATABASE day17; USE day17; CREATE TABLE loginUSER( -- 创建表 id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(20) NOT NULL, PASSWORD VARCHAR(20) NOT NULL );
3.创建前端login.jsp和css页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>管理员登录</title>
<!-- 1. 导入CSS的全局样式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. 导入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
//切换验证码
function refreshCode(){
img=document.getElementById("vcode"); //获取验证码图片对象
var time=new Date().getTime(); //时间戳
img.src="${pageContext.request.contextPath }/checkcode?"+time;
}
</script>
</head>
<body>
<div class="container" style="width: 400px;">
<h3 style="text-align: center;">管理员登录</h3>
<form action="${pageContext.request.contextPath}/checklogin" method="post">
<div class="form-group">
<label for="user">用户名：</label>
<input type="text" name="userName" class="form-control" id="user" placeholder="请输入用户名"/>
</div>
<div class="form-group">
<label for="password">密码：</label>
<input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
</div>
<div class="form-inline">
<label for="vcode">验证码：</label>
<input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/>
<a href="javascript:refreshCode()"><img src="${pageContext.request.contextPath }/checkcode" title="看不清点击刷新" id="vcode"/></a>
</div>
<div style="color: red;">${log_msg}</div>
<hr/>
<div class="form-group" style="text-align: center;">
<input class="btn btn btn-primary" type="submit" value="登录">
</div>
</form>
<!-- 出错显示的信息框 -->
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" >
<span>×</span></button>
<strong>${log_msg}</strong>
</div>
</div>
</body>
</html>
4.在domain包下创建类LoginUser
package domain;
public class LoginUser {
private int id;
private String userName;
private String password;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
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 "LoginUser [id=" + id + ", userName=" + userName + ", password=" + password + "]";
}
}
5.写utils包下的工具类JDBCUtils ，主要是与mysql数据库连接，创建数据库连接池对象
package cn.itcast.util;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import javax.xml.crypto.Data;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;
/**
* JDBC工具类 使用Durid连接池
*/
public class JDBCUtils {
private static DataSource ds ;
static {
try {
//1.加载配置文件
Properties pro = new Properties();
//使用ClassLoader加载配置文件，获取字节输入流
InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
pro.load(is);
//2.初始化连接池对象
ds = DruidDataSourceFactory.createDataSource(pro);
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 获取连接池对象
*/
public static DataSource getDataSource(){
return ds;
}
/**
* 获取连接Connection对象
*/
public static Connection getConnection() throws SQLException {
return ds.getConnection();
}
}
6.创建web层的checkcode的servlet, 用来显示验证码的
package web.servlet;
import java.io.IOException;
import java.util.Random;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/checkcode")
public class CheckCode extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
int imgwidth=100;
int imgheight=40;
//1.创建图片对象，在内存中图片（验证码图片对象）
BufferedImage image=new BufferedImage(imgwidth,imgheight,BufferedImage.TYPE_INT_RGB); //也可以指定读取image=imageIO.read(new file())
//2.美化图片
Graphics g=image.getGraphics(); //获得画笔对象
//设置画笔颜色
g.setColor(Color.pink);
//在创建的图片对象大小中填充矩形，颜色为上面设置的颜色，第一,二个参数是起始点的x,y,第三，四个参数是有多宽，有多高
g.fillRect(0, 0, imgwidth, imgheight);
//重新设置画笔颜色
g.setColor(Color.yellow);//画框边缘颜色
//在image上画边框，第一,二个参数是起始点的x,y,第三，四个参数是有多宽，有多高，注意：边框占一个像素，所以需要宽和高-1才能覆盖全部
g.drawRect(0, 0, imgwidth-1, imgheight-1);
//随机设置验证码的值
String str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
Random random=new Random();
StringBuilder sb=new StringBuilder();
//随机在image中写字符串，第三，四个参数是画的位置
for(int i=1;i<5;i++) {
int index=random.nextInt(str.length()); //随机选取字母字符
g.setFont(new Font("宋体", Font.PLAIN, 20)); //设置画笔大小
sb.append(str.charAt(index));//将随机验证码置于stringbuilder中
g.setColor(Color.blue); //画笔颜色
g.drawString(str.charAt(index)+"",imgwidth/5*i ,25);
}
//将验证码存储与session对象中,用于loginservlet中的验证码验证
String session_code=sb.toString();
req.getSession().setAttribute("session_code", session_code);
//随机画干扰线,第一,二个参数是起始点的x,y,第三，四个参数是最后一个点的x,y
int x1=0,y1=0,x2=0,y2=0;
for(int i=0;i<=8;i++) { //画8次线条
x1=random.nextInt(imgwidth);
y1=random.nextInt(imgheight);
x2=random.nextInt(imgwidth);
y2=random.nextInt(imgheight);
g.setColor(Color.gray);
g.drawLine(x1, y1, x2, y2);
}
//3.图片显示在页面上
ImageIO.write(image, "jpg", resp.getOutputStream()); //将图片写入指定文件(第三个参数是指定的位置Fileoutpotstream(new File(""))
}
}
7.创建web层的checklogin的servlet，用来响应用户登录的请求。主要是进行前端参数数据和UserDao进行交互
代码：
package web.servlet;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;
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 javax.servlet.http.HttpSession;
import org.apache.commons.beanutils.BeanUtils;
import com.mchange.v2.codegen.bean.BeangenUtils;
import dao.UserDaoImpl;
import domain.LoginUser;
@WebServlet("/checklogin")
public class CheckLogin extends HttpServlet{
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.设置编码
req.setCharacterEncoding("utf-8");
//2.获取用户的请求
LoginUser loginUser=new LoginUser();
Map<String, String[]> pMap=req.getParameterMap();
//3.使用BeanUtil封装对象
try {
BeanUtils.populate(loginUser, pMap);
} catch (IllegalAccessException | InvocationTargetException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//4.现获取前端填写的验证码,比较验证码
System.out.println(loginUser);
String exc=req.getParameter("verifycode");//获取前端用户填写的验证码
HttpSession htp=req.getSession(); //获取session
String excode=(String) htp.getAttribute("session_code"); //获取后端checkcode随机验证码
//为防止验证码重复使用，session中的session_code一旦获得，就必须删除
htp.removeAttribute("session_code");
if(excode!=null && excode.equalsIgnoreCase(exc)) {
//忽略字母大小写，比较验证码
//如果验证码正确，再比较用户的用户名和密码
//验证码正确
//5.创建userDao对象
UserDaoImpl userDaoImpl=new UserDaoImpl(); //调用与数据库的函数
LoginUser lu=userDaoImpl.checkLoginUser(loginUser);
if(lu!=null) {
//如果登录成功
//保存数据，用户信息
htp.setAttribute("user", lu); //在session中保存用户的信息
htp.setAttribute("username", lu.getUserName());//在session中存储用户名
//重定向到success.jsp页面
resp.sendRedirect(req.getContextPath()+"/index.jsp");
}
else {//用户名或密码不正确
req.setAttribute("log_msg", "用户名或密码错误"); //存储错误信息，用request域存储
//请求转发，重新回到登录页面
req.getRequestDispatcher("/login.jsp").forward(req, resp);
}
}else {//验证码不正确
req.setAttribute("log_msg", "验证码错误"); //存储错误信息，用request域存储
req.getRequestDispatcher("/login.jsp").forward(req, resp); //请求转发，重新回到登录页面
}
}
}
8.在dao层的，操作数据库，查询数据库
操作数据库的UserDao接口：
package dao;
import java.util.List;
import domain.User;
public interface UserDao {
public List<User> findAll(); //抽象方法
public LoginUser checkLoginUser( LoginUser loginUser);
}
操作数据库的UserDaoImpl实现类：
package dao;
import java.util.List;
import javax.xml.transform.Templates;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import domain.LoginUser;
import domain.User;
import utils.JDBCUtils;
public class UserDaoImpl implements UserDao{
JdbcTemplate jdbcTemplate =new JdbcTemplate(JDBCUtils.getDataSource());
public List<User> findAll() {
// 操作数据库,查询
String sql="select * from user";
List<User> users=jdbcTemplate.query(sql,new BeanPropertyRowMapper(User.class));
return users;
}
public LoginUser checkLoginUser( LoginUser loginUser) {
//查询登录用户信息
String sqlString="select* from loginuser where username=? and password=?";
//System.out.println("111"+loginUser);
try {
LoginUser lu=(LoginUser) jdbcTemplate.queryForObject(sqlString, new BeanPropertyRowMapper<LoginUser>(LoginUser.class)
,loginUser.getUserName(),loginUser.getPassword());
return lu;
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
return null;
}
}
}
9.编写success.jsp，在这里指的是index.jsp，对应在checklogin.java中
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>首页</title>
<!-- 1. 导入CSS的全局样式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
<script src="js/jquery-2.1.0.min.js"></script>
<!-- 3. 导入bootstrap的js文件 -->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div align="center">
<a
href="${pageContext.request.contextPath }/userListServlet" style="text-decoration:none;font-size:33px">查询所有用户信息
</a>
</div>
</body>
</html>
四.尾声
效果图：
其他：
login.jsp中form表单的action路径的写法
* 虚拟目录+Servlet的资源路径
BeanUtils工具类，简化数据封装
* 用于封装JavaBean的
1. JavaBean：标准的Java类
1）. 要求：
1. 类必须被public修饰
2. 必须提供空参的构造器
3. 成员变量必须使用private修饰
4. 提供公共setter和getter方法
2）. 功能：封装数据
最后：用户登录的模块功能全部结束！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JSP制作简单登录界面实例
现在很多web项目都能用到登录界面,本文介绍一下JSP制作简单登录界面,分享给大家,具体如下: 运行环境 eclipse+tomcat+MySQL 不知道的可以参考Jsp运行环境--Tomcat 项目列表 这里我先把jsp文件先放在Web-INF外面访问 1.需要建立的几个文件在图上.jsp 2.还要导入MySQL的jar包mysql-5.0.5.jar,导到WEB-INF中的lib文件夹就可以不需要Bulid Path 3.开始编写代码: 代码演示: index.jsp就好像一般网站的首页一样
-
jsp实现登录界面
本文实例为大家分享了jsp实现登录界面的具体代码,供大家参考,具体内容如下 一.用户登录案例需求: 1.编写login.jsp登录页面 username & password 两个输入框2.使用Druid数据库连接池技术,操作mysql,day14数据库中user表3.使用JdbcTemplate技术封装JDBC4.登录成功跳转到SuccessServlet展示:登录成功!用户名,欢迎您5.登录失败跳转到login.jsp展示:登录失败,用户名或密码错误,验证码错误 二.分析 三. 开发步骤 1
-
如何配置Eclipse实现定制登录界面
Eclipse工具我相信定制对于开发的人员来说都很熟悉了,但是对我这个菜鸟来说是相当的有挑战性,因为我是从学习到工作一直学习的是运维相关工作,没有接触开发相关工作,所以在使用中比较困难,但是对于一个对技术有追求的人来说,应该上道比较快,我学习了半个月的java,因为工作忙,没有时间学习,通过这半个月基本上了解了最最基本的概念而已.因为公司最近更新架构,想吧公司的一些信息写入到sql下,然后通过web查询,所以自己摸索着实现Ecclipse下部署第一个web登录界面,在此给大家分享一下:具体见下:
-
JSP实现登录功能之添加验证码
jsp登陆验证,网页登陆验证带验证码校验,登录功能之添加验证码 part_1:专门用于生成一个验证码图片的类:VerificationCode.Java package cn.mike.javase.test; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.File; import java.i
-
Ajax实现带有验证码的局部刷新登录界面
现在的登录界面大多数都带有:验证码的功能+验证码局部刷新+ajax登录.用ajax登录的好处最明显就是速度快,URL地址没有变化.所有现在登录功能很少再用form表单post提交了,大多数都已经采用了ajax局部访问后台然后解析返回值并显示结果到界面上面.理论还是要拿来实践才能验证的,下面直接上代码. 运行界面: 1.验证码后台访问部分上一篇博客已经介绍多了,这里介绍如何利用img中src实现局部刷新验证码的功能. html部分: <p><label class="lbrigh
-
FineReport中自定义登录界面的方法
FineReport报表软件是一款纯Java编写的.集数据展示(报表)和数据录入(表单)功能于一身的企业级web报表工具,它"专业.简捷.灵活"的特点和无码理念,仅需简单的拖拽操作便可以设计复杂的中国式报表,搭建数据决策分析系统. 在登录平台时,不希望使用FR默认的内置登录界面,想通过自定义登录界面实现登录操作,内置登录界面如下图: 登录界面,获取到用户名和密码的值,发送到报表系统,报表服务带着这两个参数访问认证地址进行认证. 自定义登录界面 1)登录界面设置 自定义html登录页面:
-
Java Swing仿QQ登录界面效果
本文实例为大家分享了Java Swing仿QQ登录界面展示的具体代码,供大家参考,具体内容如下 闲来无事将早些时候已实现的QQ登录界面再实现了一遍,纯手工打造(意思是没有用NetBeans.MyEclipse的拖动功能). 源代码如下: package ibees.qq; import java.awt.BorderLayout; import java.net.URL; import javax.swing.ImageIcon; import javax.swing.JButton; impo
-
关于JSP用户登录连接数据库详情
目录 关于JSP用户登录连接数据库详情 1.首先创建po类 2.创建底层UserDao 3.创建UserService(一般都会调用UserDao) 4.写web层UserSrevlet 4.1 重写方法 4.2创建vo层并在里面创建ResultInfo类用于封装返回数据 5.开始从Dao开始写 6.开始写service层 7.编写最后的Servelt层 7.1 用户登陆 8.示例 关于JSP用户登录连接数据库详情 1.首先创建po类 与数据库一一对应 lombok生成get set方法 pac
-
Ajax实现漂亮、安全的登录界面
登录界面是信息系统提供的必备的功能,是提供给用户提供维护信息的接口.接下来,我来带领大家打造一个漂亮.安全的登录界面,使用的技术是ASP.NET+jQuery 先来看看预览效果 Ajax登录重点在Ajax,输入用户名和密码后,使用Ajax方式将信息提交到服务器端,服务器端判断时候存在该用户,存在则登录成功并转向管理界面(有时需要写cookie或是利用Session,此处不作讨论),不存在则提示登录失败. 基本流程图如下 上面是主要思路,为了打造安全的登录,在使用ajax将密码传到服务器端前,我们
-
使用jQuery,Angular实现登录界面验证码详解
写在前面: 前段事件,做了一个用ajax后台异步交互的登录功能,自己在上面加了一个验证码的功能,这个功能背后的原理挺好理解的,实现起来也十分简单,特此写波分享,,自己写的过程中踩了不少坑,这里还是照例写的详细点,大家可以做个参考,喜欢的朋友可以点个赞,或者关注一波. 最终实现的效果: 当点击登录之前,会先判断验证码是否正确(验证码可以不区分大小写,也可以区分大小写),验证码错误会刷新验证码,验证码验证之前,不会进行跨域登录操作. 整体思路. 1.取四位随机数 2.赋值到验证码的input框里.