如何快速使用jsp完成登陆功能
如何快速使用jsp完成登陆功能
安装必备环境
1.idea环境
2.中间件tomcat服务器
3.JDK1.8
4.Gradle
打开idea新建javaEE项目
模板选择web服务，构建系统选择Gradle 应用程序服务器选择tomcat主目录
完成后下一步
选择javaEE8，创建项目
打开build.gradle找到dependencies添加以下依赖
implementation 'cn.hutool:hutool-all:5.8.26'
implementation("org.projectlombok:lombok:1.18.40")
implementation("org.bouncycastle:bcprov-jdk15on:1.70")
compileOnly("javax.servlet:javax.servlet-api:4.0.1")
implementation("org.apache.directory.studio:org.apache.commons.lang:2.6")
implementation("com.mysql:mysql-connector-j:9.4.0")
点击右侧重新加载，添加完毕开始写代码
webapp下创建login.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>用户登录界面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="">
<meta http-equiv="description" content="">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<%-- <link rel="stylesheet" href="<%=basePath%>css/index.css" type="text/css"> --%>
<script src="<%=basePath%>js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="<%=basePath%>layer/layer.js" type="text/javascript"></script>
<script src="<%=basePath%>js/common/layerCommon.js" type="text/javascript"></script>
<script src="<%=basePath%>js/manager/login.js" type="text/javascript"></script>
<script>
/* 点击刷新验证码 */
function refreshCode() {
document.getElementById("codeImg").src =
"${pageContext.request.contextPath}/code?" + new Date().getTime();
}
</script>
</head>
<body>
<form action="" method="post" id="uForm" name="uForm" autocomplete="off">
登录名：
<input type="text" id="nId" name="loginname" maxlength="16" placeholder="请输入登录名"/>
<br>
密码：
<input type="password" id="pId" name="password" maxlength="16" placeholder="请输入密码"/>
<br>
验证码：
<input type="text" id="cId" name="code" maxlength="5" placeholder="请输入5位验证码"/>
<img id="codeImg" src="${pageContext.request.contextPath}/code"
width="90" height="40" title="看不清？点击刷新" onclick="refreshCode()"/>
<br>
<input type="button" value="登录" onclick="loginClick()"/>
</form>
</body>
</html>
创建js文件夹下面放置common 和manager
common下导入layerCommon.js
mangager下创建login.js
将jquery放在js文件夹
把layer放在与js同级下
login.js内部如下
function loginClick(){
//(1)判断组件内容是否为空
if (checkForm()){
return;
}
// （2）使用Ajex技术将Form表单信息提交到后台
$.ajax({
type:'post',
url:'login.action',
dataType:'json',
async:true,
data:$("#uForm").serialize(),
success:function(data){
if(data.flag == 0){
windowAlert(data.msg,"");
}else if(data.flag == 1){
windowAlert(data.msg,"nId");
}else if(data.flag == 2){
windowAlert(data.msg,"pId");
}else if(data.flag == 3){
windowAlert(data.msg,"cId");
}
}
});
}
function checkForm(){
var loginname=$("#nId").val();
if (loginname==""){
windowAlert("对不起，【登录名】不能为空","nId")
return true;
}
var password=$("#pId").val();
if (password==""){
windowAlert("对不起，【密码】不能为空","pId")
return true;
}
var code=$("#cId").val();
if (code==""){
windowAlert("对不起，【验证码】不能为空","cId")
return true;
}
return false
}
进入java文件夹找到项目文件夹
jsp202501/
├── model/
│ ├── bean/
│ │ ├── User.java // 用户实体类，包含id、loginname、password属性及getter/setter
│ │ └── query/
│ │ └── UserQuery.java // 用户查询条件类，用于封装查询时的登录名参数
│ ├── dao/
│ │ └── UserDao.java // 用户数据访问层，提供根据查询条件查询用户的方法
│ └── DBManager.java // 数据库连接管理类，负责获取连接、关闭连接等操作
├── web/
│ ├── action/
│ │ ├── BaseAction.java // 基础Action类，提供响应JSON、分页处理、设置标题菜单等通用方法
│ │ └── UserAction.java // 用户模块Action类，处理用户登录逻辑
│ └── servlet/
│ ├── CaptchaServlet.java // 验证码Servlet，生成并输出验证码图片，存储验证码到Session
│ └── ControllerServlet.java // 主控制器Servlet，接收请求并分发到对应Action处理
└── common/
├── sm31.java // SM3加密测试类，使用Hutool工具类进行SM3加密测试
└── SM3.java // 国产密码SM3算法实现类，包含哈希计算等方法
创建如下目录结构
从上往下代码以此是
User.java 创建对象
package com.example.jsp202501.model.bean;
public class User {
private int id;
private String loginname;
private String password;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getLoginname() {
return loginname;
}
public void setLoginname(String loginname) {
this.loginname = loginname;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
UserQuery
package com.example.jsp202501.model.bean.query;
public class UserQuery {
public String gloginName;
public void setGloginName(String gloginName) {
this.gloginName = gloginName;
}
public String getGloginName() {
return gloginName;
}
}
UserDao
package com.example.jsp202501.model.dao;
import com.example.jsp202501.model.DBManager;
import com.example.jsp202501.model.bean.User;
import com.example.jsp202501.model.bean.query.UserQuery;
import org.apache.commons.lang.StringUtils;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
/**
* 用户信息增删改查操作类【DAO层】
*
*/
public class UserDao {
//根据指定的查询条件，查询用户信息
public List<User> getUsers(UserQuery userQuery){
List<User> us=new ArrayList<User>();
//定义数据库连接对象
Connection conn=null;
//定义SQL语句装载器对象
PreparedStatement stm=null;
//定义结果集对象
ResultSet rs=null;
//定义查询SQL语句
String sql="select * from t_user where 1=1";
if (userQuery !=null){
//按照登录名精确查询
String qloginname=userQuery.getGloginName();
if (!StringUtils.isBlank(qloginname)){
sql+=" and loginname = ?";
}
}
sql+=" order by id";
//抛出异常那捷键：Ctrl+Alt+T
try {
//①获取数据库连接对象
conn = DBManager.getConnection();
//②将SQL语句添加到装载器中
stm=conn.prepareStatement(sql);
//③给SQL语句中的占位符赋值（索引值从1开始）
int index=1;
if (userQuery!=null){
//按照登录名精确查询
String qloginname=userQuery.getGloginName();
if (!StringUtils.isBlank(qloginname)){
stm.setString(index++,qloginname);
}
}
//④开始执行SQL语句
rs=stm.executeQuery();
//⑤从结果集中读取数据
while (rs.next()){
User u=new User();
u.setId(rs.getInt("id"));
u.setLoginname(rs.getString("loginname"));
u.setPassword(rs.getString("password"));
us.add(u);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
//⑥关闭数据库连接
DBManager.close(conn,stm,rs);
}
return us;
}
}
DBManager
package com.example.jsp202501.model;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ResourceBundle;
/**
* 数据库连接类
*
* @author 马远志
* @date 2014-09-30
*
*/
public class DBManager {
private static String driver; // 数据库驱动
private static String url; // 数据库连接地址 ： IP端口号 数据库名称
private static String userName; // 数据库用户名
private static String userPassword; // 数据库用户名对应密码
// 单例模式
static {
if (driver == null) {
// 读取资源文件
ResourceBundle rb = ResourceBundle.getBundle("db");
driver = rb.getString("driver");
url = rb.getString("url");
userName = rb.getString("userName");
userPassword = rb.getString("userPassword");
}
try {
Class.forName(driver);
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
// 获取数据库连接对象
public synchronized static Connection getConnection() throws Exception {
Connection conn = DriverManager.getConnection(url, userName, userPassword);
return conn;
}
public static void main(String[] args) {
try {
System.out.println(getConnection());
} catch (Exception e) {
e.printStackTrace();
}
}
// 关闭数据库连接对象
public static void close(Connection conn, PreparedStatement stm) {
try {
if (!stm.isClosed()) {
stm.close();
}
if (!conn.isClosed()) {
conn.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
// 关闭数据库连接对象
public static void close(Connection conn, PreparedStatement stm, ResultSet rs) {
try {
if (!rs.isClosed()) {
rs.close();
}
if (!stm.isClosed()) {
stm.close();
}
if (!conn.isClosed()) {
conn.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
BaseAction
package com.example.jsp202501.web.action;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.lang.StringUtils;
public class BaseAction {
/**
* @Description:界面响应方法(返回JSON表达式)
* @param response
* @param message
* @Author：马远志 @CreateDate：2014-10-02 10:28:09
* @Update:
* @UpdateDate:
* @UpdateDescription:
*/
public void response(HttpServletResponse response, Object message) {
try {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.print(message);
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 通用的分页方法
*
* @param request
* @param pageSize每一页规定显示的条数
* @param totalPage记录的总条数
* @return返回值：从哪一条数开始读的位置
*/
public int setPage(HttpServletRequest request, int pageSize, int totalPage) {
int cp = 0;
String curPage = request.getParameter("curPage");
if (!StringUtils.isBlank(curPage)) {
cp = Integer.parseInt(curPage);
}
int count = 0;
if (totalPage > pageSize) {
if (totalPage % pageSize == 0) {
count = totalPage / pageSize;
} else {
count = totalPage / pageSize + 1;
}
}
if (count == 0) {
cp = 0;
} else {
if (cp > (count - 1)) {
cp = count - 1;
}
}
if (cp < 0) {
cp = 0;
}
// 将分页信息传递到前台界面
request.setAttribute("curPage", Integer.toString(cp));
request.setAttribute("pageSize", Integer.toString(pageSize));
request.setAttribute("totalPage", Integer.toString(totalPage));
int start = cp * pageSize + 1;
return start;
}
// 设置标题和菜单
public void setTitleAndMenu(HttpServletRequest request, String title, String menuId) {
request.getSession().setAttribute("currentTitle", title);
request.getSession().setAttribute("currentMenuId", menuId);
}
}
BaseAction
package com.example.jsp202501.web.action;
import cn.hutool.crypto.SmUtil;
import cn.hutool.crypto.digest.DigestUtil;
import cn.hutool.crypto.digest.Digester;
import cn.hutool.json.JSONObject;
import com.example.jsp202501.model.bean.User;
import com.example.jsp202501.model.bean.query.UserQuery;
import com.example.jsp202501.model.dao.UserDao;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
/**
* 这是用户模块的Action类
*/
public class UserAction extends BaseAction {
private UserDao userDao = new UserDao();
//用户登录
public void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
JSONObject json = new JSONObject();
//(1)获取界面上的参数信息【登录名、密码、验证码】
String loginname = request.getParameter("loginname");
String password = request.getParameter("password");
String code = request.getParameter("code");
System.out.println("姓名:" + loginname);
System.out.println("密码:" + password);
System.out.println("验证码:" + code);
//(2)判断登录名、密码、验证码是否正确
UserQuery userQuery = new UserQuery();
userQuery.setGloginName(loginname);
List<User> users = userDao.getUsers(userQuery);
if (users.size() == 0) {
json.put("flag", 1);
json.put("msg", "对不起，【登录名】不存在！");
this.response(response, json);
return;
}
User user = users.get(0);
Digester digester = DigestUtil.digester("sm3");
String digestHex = digester.digestHex(password);
if (!digestHex.equals(user.getPassword())) {
json.put("flag", 2);
json.put("msg", "对不起，【密码】不正确！");
this.response(response, json);
return;
}
String realCode = (String) request.getSession().getAttribute("SESSION_VERIFY_CODE");
System.out.println("真实验证码:" + realCode);
if (!realCode.equals(code)) {
json.put("flag", 3);
json.put("msg", "对不起，【验证码】不正确！");
this.response(response, json);
return;
}
//(3)如果都正确，登录成功了
json.put("flag", 0);
json.put("msg", "恭喜你，登录成功！");
this.response(response, json);
}
}
CaptchaServlet
package com.example.jsp202501.web.servlet;
import cn.hutool.captcha.CaptchaUtil;
import cn.hutool.captcha.LineCaptcha;
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("/code") // 对应前端 /code 请求
public class CaptchaServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
// 1. 使用 Hutool 生成 90×40、4 位字符、10 条干扰线的“线段”验证码
LineCaptcha captcha = CaptchaUtil.createLineCaptcha(90, 40, 4, 10);
// 2. 把真实文本写入 Session，后续登录校验时对比
req.getSession().setAttribute("SESSION_VERIFY_CODE", captcha.getCode());
// 3. 输出图片到浏览器
resp.setContentType("image/jpeg");
resp.setHeader("Pragma", "No-cache");
resp.setHeader("Cache-Control", "no-cache");
resp.setDateHeader("Expires", 0);
captcha.write(resp.getOutputStream());
}
}
ControllerServlet
package com.example.jsp202501.web.servlet;
import com.example.jsp202501.web.action.UserAction;
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;
/**
* 主控制器Servlet
* 1.接收浏览器提交的请求
* 2.调用业务逻辑层
* 3.跳转到指定的页面
*/
@WebServlet(value = "*.action")
public class ControllerServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req,resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解决中文乱码问题
request.setCharacterEncoding("utf-8");//请求
response.setCharacterEncoding("utf-8");//响应
//获取当前请求的Servlet路径【区分大小写字母，同时最前面会自动加上一个符号：/，例如：/login.action】
String path = request.getServletPath();
if ("/login.action".equals(path)){
//用户登录
UserAction ua=new UserAction();
ua.login(request,response);
}
}
}
然后在资源文件夹创建db.properties
内容如下
driver=com.mysql.cj.jdbc.Driver
url=jdbc\:mysql\://127.0.0.1\:3306/数据库名?serverTimezone=GMT%2B8&useSSL=false&allowPublicKeyRetrieval=true
userName=
userPassword=
如何快速使用jsp完成登陆功能
https://fengliangit.cn:9999/archives/ru-he-kuai-su-shi-yong-jspwan-cheng-deng-lu-gong-neng
