用户信息管理系统案例(一)
源代码已放到 GitHub 上了,用户信息管理系统 需要自取。
一、所需知识与环境
1、SQL基础
2、JDBC、JDBCTemplate、Druid基础
3、HTML、JavaScript、JSP基础
4、HTTP、Servlet、Request、Response、Cookie、Session基础
5、Tomcat服务器
6、MySQL数据库
二、用户信息管理需求
1、登录
(1) 管理员打开网页,输入自己账户的用户名与密码。
(2) 成功登录,进入欢迎页面;登录失败,页面提示:用户名或密码错误。
2、添加用户
3、删除用户
(1) 普通的删除
(2) 批量删除
4、修改用户信息
5、查询用户信息
(1) 分页查询
(2) 条件查询
三、案例分析
四、开发步骤
(1) 登录
1、创建项目、导入jar包、CSS、js等文件
2、准备登录login.jsp页面、index.jsp页面
1) login.jsp
<%--
Created by IntelliJ IDEA.
User: Hasee
Date: 2019/11/27
Time: 19:55
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!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(){
//1.获取验证码图片对象
var vcode = document.getElementById("vcode");
//2.设置其src属性,加时间戳
vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
}
</script>
</head>
<body>
<div class="container" style="width: 400px;">
<h3 style="text-align: center;">管理员登录</h3>
<form action="${pageContext.request.contextPath}/loginServlet" 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}/checkCodeServlet" title="看不清点击刷新" id="vcode"/>
</a>
</div>
<hr/>
<div class="form-group" style="text-align: center;">
<input class="btn btn btn-primary" type="submit" value