java web jsp 静态页面和动态页面对比。动态页面实现分页效果
静态页面和动态页面对比
基于Java Web的用户信息管理系统，主要功能包括：
1. 用户认证
- 登录功能（LoginServlet）：支持用户名密码验证和验证码功能
- 登录页面（login.jsp）：包含用户名、密码输入和验证码刷新功能
2. 用户信息管理
-
查询功能 ：
- 分页查询（FindUserByPageServlet）：支持按页码和每页条数显示用户
- 条件查询：可根据姓名、籍贯等条件筛选用户
- 用户列表页面（list.jsp）：展示用户信息，支持分页导航
-
添加功能 ：
- 添加用户（AddUserServlet）：处理表单提交的用户数据
- 添加页面（add.jsp）：包含用户基本信息输入表单
-
修改功能 ：
- 查找用户（FindUserServlet）：根据ID查询用户信息
- 更新用户（UpdateUserServlet）：处理更新用户的请求
- 修改页面（update.jsp）：展示和编辑用户信息
-
删除功能 ：
- 删除单个用户（DelUserServlet）
- 批量删除用户（DelSelectedServlet）
3. 技术架构
- 前端 ：HTML、CSS、JavaScript、Bootstrap、JSP、JSTL
- 后端 ：Java、Servlet
- 数据库访问 ：JDBC、JdbcTemplate
- 设计模式 ：MVC架构
- Model：User实体类
- View：JSP页面
- Controller：Servlet
4. 项目结构
- src/com/demo/domain ：实体类（如User.java）
- src/com/demo/dao ：数据访问层
- src/com/demo/service ：业务逻辑层
- src/com/demo/web/servlet ：控制层
- web/ ：前端资源（JSP、CSS、JavaScript等）
系统遵循了分层设计原则，通过Servlet处理请求，调用Service层进行业务逻辑处理，再通过Dao层访问数据库，最后将结果通过JSP页面展示给用户。
├── lib\
│ ├── javax.annotation.jar
│ ├── javax.ejb.jar
│ ├── javax.jms.jar
│ ├── javax.persistence.jar
│ ├── javax.resource.jar
│ ├── javax.servlet.jar
│ ├── javax.servlet.jsp.jar
│ └── javax.transaction.jar
├── src\
│ ├── com\
│ │ └── demo\
│ │ ├── dao\
│ │ │ ├── UserDao.java
│ │ │ └── impl\
│ │ ├── domain\
│ │ │ ├── PageBean.java
│ │ │ └── User.java
│ │ ├── service\
│ │ │ ├── UserService.java
│ │ │ └── impl\
│ │ │ ├── UserServiceImpl.java
│ │ └── web\
│ │ │ └── servlet\
│ │ │ ├── AddUserServlet.java
│ │ │ ├── AddUserServlet
│ │ │ ├── CheckCodeServlet
│ │ │ ├── DelSelectedServlet
│ │ │ ├── DelUserServlet
│ │ │ ├── FindUserByPageServlet
│ │ │ ├── FindUserServlet
│ │ │ ├── LoginServlet
│ │ │ ├── UpdateUserServlet
│ │ │ ├── UserListServlet
│ ├── druid.properties
│ └── utils\
│ ├── DateUtils.java
│ ├── DownLoadUtils.java
│ └── JDBCUtils.java
└── web\├── WEB-INF\│ └── lib\│ ├── c3p0-0.9.1.2.jar│ ├── commons-beanutils-1.8.3.jar│ ├── commons-logging-1.1.1.jar│ ├── druid-1.0.9.jar│ ├── javax.servlet.jsp.jstl.jar│ ├── jstl-impl.jar│ ├── mysql-connector-j-8.0.33.jar│ ├── mysql-connector-java-5.1.18-bin.jar│ ├── spring-beans-4.2.4.RELEASE.jar│ ├── spring-core-4.2.4.RELEASE.jar│ ├── spring-jdbc-4.2.4.RELEASE.jar│ └── spring-tx-4.2.4.RELEASE.jar├── add.html├── add.jsp├── css\│ ├── bootstrap-theme.css│ ├── bootstrap-theme.min.css│ ├── bootstrap.css│ └── bootstrap.min.css├── fonts\│ ├── glyphicons-halflings-regular.eot│ ├── glyphicons-halflings-regular.svg│ ├── glyphicons-halflings-regular.ttf│ ├── glyphicons-halflings-regular.woff│ └── glyphicons-halflings-regular.woff2├── index.html├── index.jsp├── js\│ ├── bootstrap.js│ ├── bootstrap.min.js│ └── jquery-2.1.0.min.js├── list.html├── list.jsp├── login.html├── login.jsp├── update.html└── update.jsp
sql
CREATE TABLE user (id INT PRIMARY KEY AUTO_INCREMENT,name VARCHAR(50) NOT NULL,gender VARCHAR(10),age INT,address VARCHAR(100),qq VARCHAR(20),email VARCHAR(100),username VARCHAR(50) NOT NULL UNIQUE,password VARCHAR(50) NOT NULL
);
后端工具类
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.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();}
}实体类
public class User {private int id;private String name;private String gender;private int age;private String address;private String qq;private String email;private String username;private String password;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;}public int getId() {return id;}public void setId(int id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getGender() {return gender;}public void setGender(String gender) {this.gender = gender;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}public String getAddress() {return address;}public void setAddress(String address) {this.address = address;}public String getQq() {return qq;}public void setQq(String qq) {this.qq = qq;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}@Overridepublic String toString() {return "User{" +"id=" + id +", name='" + name + '\'' +", gender='" + gender + '\'' +", age=" + age +", address='" + address + '\'' +", qq='" + qq + '\'' +", email='" + email + '\'' +", username='" + username + '\'' +", password='" + password + '\'' +'}';}
}import java.util.List;/*** 分页对象*/
public class PageBean<T> {private int totalCount; // 总记录数private int totalPage ; // 总页码private List<T> list ; // 每页的数据private int currentPage ; //当前页码private int rows;//每页显示的记录数public int getTotalCount() {return totalCount;}public void setTotalCount(int totalCount) {this.totalCount = totalCount;}public int getTotalPage() {return totalPage;}public void setTotalPage(int totalPage) {this.totalPage = totalPage;}public List<T> getList() {return list;}public void setList(List<T> list) {this.list = list;}public int getCurrentPage() {return currentPage;}public void setCurrentPage(int currentPage) {this.currentPage = currentPage;}public int getRows() {return rows;}public void setRows(int rows) {this.rows = rows;}@Overridepublic String toString() {return "PageBean{" +"totalCount=" + totalCount +", totalPage=" + totalPage +", list=" + list +", currentPage=" + currentPage +", rows=" + rows +'}';}
}dao 层
import com.demo.domain.User;import java.util.List;
import java.util.Map;/*** 用户操作的DAO*/
public interface UserDao {public List<User> findAll();User findUserByUsernameAndPassword(String username, String password);void add(User user);void delete(int id);User findById(int i);void update(User user);/*** 查询总记录数* @return* @param condition*/int findTotalCount(Map<String, String[]> condition);/*** 分页查询每页记录* @param start* @param rows* @param condition* @return*/List<User> findByPage(int start, int rows, Map<String, String[]> condition);
}import com.demo.dao.UserDao;
import com.demo.domain.User;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import utils.JDBCUtils;import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.Set;public class UserDaoImpl implements UserDao {private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());@Overridepublic List<User> findAll() {//使用JDBC操作数据库...//1.定义sqlString sql = "select * from user";List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class));return users;}@Overridepublic User findUserByUsernameAndPassword(String username, String password) {try {String sql = "select * from user where username = ? and password = ?";User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username, password);return user;} catch (Exception e) {e.printStackTrace();return null;}}@Overridepublic void add(User user) {//1.定义sqlString sql = "insert into user values(null,?,?,?,?,?,?,null,null)";//2.执行sqltemplate.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail());}@Overridepublic void delete(int id) {//1.定义sqlString sql = "delete from user where id = ?";//2.执行sqltemplate.update(sql, id);}@Overridepublic User findById(int id) {String sql = "select * from user where id = ?";return template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), id);}@Overridepublic void update(User user) {String sql = "update user set name = ?,gender = ? ,age = ? , address = ? , qq = ?, email = ? where id = ?";template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail(), user.getId());}@Overridepublic int findTotalCount(Map<String, String[]> condition) {//1.定义模板初始化sqlString sql = "select count(*) from user where 1 = 1 ";StringBuilder sb = new StringBuilder(sql);//2.遍历mapSet<String> keySet = condition.keySet();//定义参数的集合List<Object> params = new ArrayList<Object>();for (String key : keySet) {//排除分页条件参数if("currentPage".equals(key) || "rows".equals(key)){continue;}//获取valueString value = condition.get(key)[0];//判断value是否有值if(value != null && !"".equals(value)){//有值sb.append(" and "+key+" like ? ");params.add("%"+value+"%");//？条件的值}}System.out.println(sb.toString());System.out.println(params);return template.queryForObject(sb.toString(),Integer.class,params.toArray());}@Overridepublic List<User> findByPage(int start, int rows, Map<String, String[]> condition) {String sql = "select * from user where 1 = 1 ";StringBuilder sb = new StringBuilder(sql);//2.遍历mapSet<String> keySet = condition.keySet();//定义参数的集合List<Object> params = new ArrayList<Object>();for (String key : keySet) {//排除分页条件参数if("currentPage".equals(key) || "rows".equals(key)){continue;}//获取valueString value = condition.get(key)[0];//判断value是否有值if(value != null && !"".equals(value)){//有值sb.append(" and "+key+" like ? ");params.add("%"+value+"%");//？条件的值}}//添加分页查询sb.append(" limit ?,? ");//添加分页查询参数值params.add(start);params.add(rows);sql = sb.toString();System.out.println(sql);System.out.println(params);return template.query(sql,new BeanPropertyRowMapper<User>(User.class),params.toArray());}
}service层
import com.demo.domain.PageBean;
import com.demo.domain.User;import java.util.List;
import java.util.Map;/*** 用户管理的业务接口*/
public interface UserService {/*** 查询所有用户信息* @return*/public List<User> findAll();/*** 登录方法* @param user* @return*/User login(User user);/*** 保存User* @param user*/void addUser(User user);/*** 根据id删除User* @param id*/void deleteUser(String id);/*** 根据id查询* @param id* @return*/User findUserById(String id);/*** 修改用户信息* @param user*/void updateUser(User user);/*** 批量删除用户* @param ids*/void delSelectedUser(String[] ids);/*** 分页条件查询* @param currentPage* @param rows* @param condition* @return*/PageBean<User> findUserByPage(String currentPage, String rows, Map<String, String[]> condition);
}import com.demo.dao.UserDao;
import com.demo.dao.impl.UserDaoImpl;
import com.demo.domain.PageBean;
import com.demo.domain.User;
import com.demo.service.UserService;import java.util.List;
import java.util.Map;public class UserServiceImpl implements UserService {private UserDao dao = new UserDaoImpl();@Overridepublic List<User> findAll() {//调用Dao完成查询return dao.findAll();}@Overridepublic User login(User user) {return dao.findUserByUsernameAndPassword(user.getUsername(),user.getPassword());}@Overridepublic void addUser(User user) {dao.add(user);}@Overridepublic void deleteUser(String id) {dao.delete(Integer.parseInt(id));}@Overridepublic User findUserById(String id) {return dao.findById(Integer.parseInt(id));}@Overridepublic void updateUser(User user) {dao.update(user);}@Overridepublic void delSelectedUser(String[] ids) {if(ids != null && ids.length > 0){//1.遍历数组for (String id : ids) {//2.调用dao删除dao.delete(Integer.parseInt(id));}}}@Overridepublic PageBean<User> findUserByPage(String _currentPage, String _rows, Map<String, String[]> condition) {int currentPage = Integer.parseInt(_currentPage);int rows = Integer.parseInt(_rows);if(currentPage <=0) {currentPage = 1;}//1.创建空的PageBean对象PageBean<User> pb = new PageBean<User>();//2.设置参数pb.setCurrentPage(currentPage);pb.setRows(rows);//3.调用dao查询总记录数int totalCount = dao.findTotalCount(condition);pb.setTotalCount(totalCount);//4.调用dao查询List集合//计算开始的记录索引int start = (currentPage - 1) * rows;List<User> list = dao.findByPage(start,rows,condition);pb.setList(list);//5.计算总页码int totalPage = (totalCount % rows) == 0 ? totalCount/rows : (totalCount/rows) + 1;pb.setTotalPage(totalPage);return pb;}
}Servlet 层
import com.demo.domain.User;
import com.demo.service.UserService;
import com.demo.service.impl.UserServiceImpl;
import org.apache.commons.beanutils.BeanUtils;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.lang.reflect.InvocationTargetException;
import java.util.Map;@WebServlet("/addUserServlet")
public class AddUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.设置编码request.setCharacterEncoding("utf-8");//2.获取参数Map<String, String[]> map = request.getParameterMap();//3.封装对象User user = new User();try {BeanUtils.populate(user,map);} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}//4.调用Service保存UserService service = new UserServiceImpl();service.addUser(user);//5.跳转到userListServletresponse.sendRedirect(request.getContextPath()+"/userListServlet");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}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;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;/*** 验证码*/
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//服务器通知浏览器不要缓存response.setHeader("pragma","no-cache");response.setHeader("cache-control","no-cache");response.setHeader("expires","0");//在内存中创建一个长80，宽30的图片，默认黑色背景//参数一：长//参数二：宽//参数三：颜色int width = 80;int height = 30;BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);//获取画笔Graphics g = image.getGraphics();//设置画笔颜色为灰色g.setColor(Color.GRAY);//填充图片g.fillRect(0,0, width,height);//产生4个随机验证码，12EyString checkCode = getCheckCode();//将验证码放入HttpSession中request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);//设置画笔颜色为黄色g.setColor(Color.YELLOW);//设置字体的小大g.setFont(new Font("黑体",Font.BOLD,24));//向图片上写入验证码g.drawString(checkCode,15,25);//将内存中的图片输出到浏览器//参数一：图片对象//参数二：图片的格式，如PNG,JPG,GIF//参数三：图片输出到哪里去ImageIO.write(image,"PNG",response.getOutputStream());}/*** 产生4位随机字符串 */private String getCheckCode() {String base = "0123456789ABCDEFGabcdefg";int size = base.length();Random r = new Random();StringBuffer sb = new StringBuffer();for(int i=1;i<=4;i++){//产生0到size-1的随机值int index = r.nextInt(size);//在base字符串中获取下标为index的字符char c = base.charAt(index);//将c放入到StringBuffer中去sb.append(c);}return sb.toString();}public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request,response);}
}import com.demo.service.UserService;
import com.demo.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("/delSelectedServlet")
public class DelSelectedServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.获取所有idString[] ids = request.getParameterValues("uid");//2.调用service删除UserService service = new UserServiceImpl();service.delSelectedUser(ids);//3.跳转查询所有Servletresponse.sendRedirect(request.getContextPath()+"/userListServlet");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}import com.demo.service.UserService;
import com.demo.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("/delUserServlet")
public class DelUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.获取idString id = request.getParameter("id");//2.调用service删除UserService service = new UserServiceImpl();service.deleteUser(id);//3.跳转到查询所有Servletresponse.sendRedirect(request.getContextPath()+"/userListServlet");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}import com.demo.domain.PageBean;
import com.demo.domain.User;
import com.demo.service.UserService;
import com.demo.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.util.Map;@WebServlet("/findUserByPageServlet")
public class FindUserByPageServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");//1.获取参数String currentPage = request.getParameter("currentPage");//当前页码String rows = request.getParameter("rows");//每页显示条数if(currentPage == null || "".equals(currentPage)){currentPage = "1";}if(rows == null || "".equals(rows)){rows = "5";}//获取条件查询参数Map<String, String[]> condition = request.getParameterMap();//2.调用service查询UserService service = new UserServiceImpl();PageBean<User> pb = service.findUserByPage(currentPage,rows,condition);System.out.println(pb);//3.将PageBean存入requestrequest.setAttribute("pb",pb);request.setAttribute("condition",condition);//将查询条件存入request//4.转发到list.jsprequest.getRequestDispatcher("/list.jsp").forward(request,response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}import com.demo.domain.User;
import com.demo.service.UserService;
import com.demo.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("/findUserServlet")
public class FindUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.获取idString id = request.getParameter("id");//2.调用Service查询UserService service = new UserServiceImpl();User user = service.findUserById(id);//3.将user存入requestrequest.setAttribute("user",user);//4.转发到update.jsprequest.getRequestDispatcher("/update.jsp").forward(request,response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}import com.demo.domain.User;
import com.demo.service.UserService;
import com.demo.service.impl.UserServiceImpl;
import org.apache.commons.beanutils.BeanUtils;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 java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.设置编码request.setCharacterEncoding("utf-8");//2.获取数据//2.1获取用户填写验证码String verifycode = request.getParameter("verifycode");//3.验证码校验HttpSession session = request.getSession();String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");session.removeAttribute("CHECKCODE_SERVER");//确保验证码一次性if(!checkcode_server.equalsIgnoreCase(verifycode)){//验证码不正确//提示信息request.setAttribute("login_msg","验证码错误！");//跳转登录页面request.getRequestDispatcher("/login.jsp").forward(request,response);return;}Map<String, String[]> map = request.getParameterMap();//4.封装User对象User user = new User();try {BeanUtils.populate(user,map);} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}//5.调用Service查询UserService service = new UserServiceImpl();User loginUser = service.login(user);//6.判断是否登录成功if(loginUser != null){//登录成功//将用户存入sessionsession.setAttribute("user",loginUser);//跳转页面response.sendRedirect(request.getContextPath()+"/index.jsp");}else{//登录失败//提示信息request.setAttribute("login_msg","用户名或密码错误！");//跳转登录页面request.getRequestDispatcher("/login.jsp").forward(request,response);}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}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("/updateUserServlet")
public class UpdateUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}import com.demo.domain.User;
import com.demo.service.UserService;
import com.demo.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.util.List;@WebServlet("/userListServlet")
public class UserListServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.调用UserService完成查询UserService service = new UserServiceImpl();List<User> users = service.findAll();//2.将list存入request域request.setAttribute("users",users);//3.转发到list.jsprequest.getRequestDispatcher("/list.jsp").forward(request,response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}数据库配置文件
driverClassName=com.mysql.cj.jdbc.Driver
url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8
username=root
password=1234
# 初始化连接数量
initialSize=10
# 最大连接数
maxActive=20
# 最大等待时间
maxWait=3000前端 html
静态页面
<!-- add.html --><!-- HTML5文档-->
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的浏览器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。width: 默认宽度与设备的宽度相同initial-scale: 初始的缩放比，为1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><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>
</head>
<body>
<div class="container"><center><h3>添加联系人页面</h3></center><form action="" method="post"><div class="form-group"><label for="name">姓名：</label><input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名"></div><div class="form-group"><label>性别：</label><input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女</div><div class="form-group"><label for="age">年龄：</label><input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄"></div><div class="form-group"><label for="address">籍贯：</label><select name="address" class="form-control" id="address"><option value="陕西">陕西</option><option value="北京">北京</option><option value="上海">上海</option></select></div><div class="form-group"><label for="qq">QQ：</label><input type="text" class="form-control" id="qq" name="qq" placeholder="请输入QQ号码"/></div><div class="form-group"><label for="email">Email：</label><input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱地址"/></div><div class="form-group" style="text-align: center"><input class="btn btn-primary" type="submit" value="提交" /><input class="btn btn-default" type="reset" value="重置" /><input class="btn btn-default" type="button" value="返回" /></div></form>
</div>
</body>
</html><!-- index.html -->
<!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"><ahref="list.html" style="text-decoration:none;font-size:33px">查询所有用户信息</a></div></body>
</html>
<!-- list.html -->
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的浏览器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。width: 默认宽度与设备的宽度相同initial-scale: 初始的缩放比，为1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><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><style type="text/css">td, th {text-align: center;}</style>
</head>
<body>
<div class="container"><h3 style="text-align: center">用户信息列表</h3><table border="1" class="table table-bordered table-hover"><tr class="success"><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>QQ</th><th>邮箱</th><th>操作</th></tr><tr><td>1</td><td>张三</td><td>男</td><td>20</td><td>广东</td><td>44444222</td><td>zs@qq.com</td><td><a class="btn btn-default btn-sm" href="update.html">修改</a> <a class="btn btn-default btn-sm" href="">删除</a></td></tr><tr><td>2</td><td>张三</td><td>男</td><td>20</td><td>广东</td><td>44444222</td><td>zs@qq.com</td><td><a class="btn btn-default btn-sm" href="update.html">修改</a> <a class="btn btn-default btn-sm" href="">删除</a></td></tr><tr><td>3</td><td>张三</td><td>男</td><td>20</td><td>广东</td><td>44444222</td><td>zs@qq.com</td><td><a class="btn btn-default btn-sm" href="update.html">修改</a> <a class="btn btn-default btn-sm" href="">删除</a></td></tr><tr><td>4</td><td>张三</td><td>男</td><td>20</td><td>广东</td><td>44444222</td><td>zs@qq.com</td><td><a class="btn btn-default btn-sm" href="update.html">修改</a> <a class="btn btn-default btn-sm" href="">删除</a></td></tr><tr><td>5</td><td>张三</td><td>男</td><td>20</td><td>广东</td><td>44444222</td><td>zs@qq.com</td><td><a class="btn btn-default btn-sm" href="update.html">修改</a> <a class="btn btn-default btn-sm" href="">删除</a></td></tr><tr><td colspan="8" align="center"><a class="btn btn-primary" href="add.html">添加联系人</a></td></tr></table>
</div>
</body>
</html><!-- login.html --><!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 class="container" style="width: 400px;"><h3 style="text-align: center;">管理员登录</h3><form action="login" method="post"><div class="form-group"><label for="user">用户名：</label><input type="text" name="user" 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="vcode" title="看不清点击刷新" id="vcode"/></a></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>登录失败!</strong></div></div></body>
</html>
<!-- update.html -->
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN"><head><base href="<%=basePath%>"/><!-- 指定字符集 --><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><link href="css/bootstrap.min.css" rel="stylesheet"><script src="js/jquery-2.1.0.min.js"></script><script src="js/bootstrap.min.js"></script></head><body><div class="container" style="width: 400px;"><h3 style="text-align: center;">修改联系人</h3><form action="" method="post"><div class="form-group"><label for="name">姓名：</label><input type="text" class="form-control" id="name" name="name" readonly="readonly" placeholder="请输入姓名" /></div><div class="form-group"><label>性别：</label><input type="radio" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女</div><div class="form-group"><label for="age">年龄：</label><input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄" /></div><div class="form-group"><label for="address">籍贯：</label><select name="address" id="address" class="form-control" ><option value="陕西">陕西</option><option value="北京">北京</option><option value="上海">上海</option></select></div><div class="form-group"><label for="qq">QQ：</label><input type="text" id="qq" class="form-control" name="qq" placeholder="请输入QQ号码"/></div><div class="form-group"><label for="email">Email：</label><input type="text" id="email" class="form-control" name="email" placeholder="请输入邮箱地址"/></div><div class="form-group" style="text-align: center"><input class="btn btn-primary" type="submit" value="提交" /><input class="btn btn-default" type="reset" value="重置" /><input class="btn btn-default" type="button" value="返回"/></div></form></div></body>
</html>http://ocalhost:8080/login.html
动态页面
<!-- add.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %><!-- HTML5文档-->
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的浏览器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。width: 默认宽度与设备的宽度相同initial-scale: 初始的缩放比，为1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><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>
</head>
<body>
<div class="container"><center><h3>添加联系人页面</h3></center><form action="${pageContext.request.contextPath}/addUserServlet" method="post"><div class="form-group"><label for="name">姓名：</label><input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名"></div><div class="form-group"><label>性别：</label><input type="radio" name="gender" value="男" checked="checked"/>男<input type="radio" name="gender" value="女"/>女</div><div class="form-group"><label for="age">年龄：</label><input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄"></div><div class="form-group"><label for="address">籍贯：</label><select name="address" class="form-control" id="address"><option value="陕西">陕西</option><option value="北京">北京</option><option value="上海">上海</option></select></div><div class="form-group"><label for="qq">QQ：</label><input type="text" class="form-control" id="qq" name="qq" placeholder="请输入QQ号码"/></div><div class="form-group"><label for="email">Email：</label><input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱地址"/></div><div class="form-group" style="text-align: center"><input class="btn btn-primary" type="submit" value="提交" /><input class="btn btn-default" type="reset" value="重置" /><input class="btn btn-default" type="button" value="返回" /></div></form>
</div>
</body>
</html>
<!-- index.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!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 >${user.name},欢迎您</div><div align="center"><ahref="${pageContext.request.contextPath}/findUserByPageServlet" style="text-decoration:none;font-size:33px">查询所有用户信息</a></div></body>
</html>
<!-- list.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的浏览器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。width: 默认宽度与设备的宽度相同initial-scale: 初始的缩放比，为1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><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><style type="text/css">td, th {text-align: center;}</style><script>function deleteUser(id){//用户安全提示if(confirm("您确定要删除吗？")){//访问路径location.href="${pageContext.request.contextPath}/delUserServlet?id="+id;}}window.onload = function(){//给删除选中按钮添加单击事件document.getElementById("delSelected").onclick = function(){if(confirm("您确定要删除选中条目吗？")){var flag = false;//判断是否有选中条目var cbs = document.getElementsByName("uid");for (var i = 0; i < cbs.length; i++) {if(cbs[i].checked){//有一个条目选中了flag = true;break;}}if(flag){//有条目被选中//表单提交document.getElementById("form").submit();}}}//1.获取第一个cbdocument.getElementById("firstCb").onclick = function(){//2.获取下边列表中所有的cbvar cbs = document.getElementsByName("uid");//3.遍历for (var i = 0; i < cbs.length; i++) {//4.设置这些cbs[i]的checked状态 = firstCb.checkedcbs[i].checked = this.checked;}}}</script>
</head>
<body>
<div class="container"><h3 style="text-align: center">用户信息列表</h3><div style="float: left;"><form class="form-inline" action="${pageContext.request.contextPath}/findUserByPageServlet" method="post"><div class="form-group"><label for="exampleInputName2">姓名</label><input type="text" name="name" value="${condition.name[0]}" class="form-control" id="exampleInputName2" ></div><div class="form-group"><label for="exampleInputName3">籍贯</label><input type="text" name="address" value="${condition.address[0]}" class="form-control" id="exampleInputName3" ></div><div class="form-group"><label for="exampleInputEmail2">邮箱</label><input type="text" name="email" value="${condition.email[0]}" class="form-control" id="exampleInputEmail2" ></div><button type="submit" class="btn btn-default">查询</button></form></div><div style="float: right;margin: 5px;"><a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a><a class="btn btn-primary" href="javascript:void(0);" id="delSelected">删除选中</a></div><form id="form" action="${pageContext.request.contextPath}/delSelectedServlet" method="post"><table border="1" class="table table-bordered table-hover"><tr class="success"><th><input type="checkbox" id="firstCb"></th><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>QQ</th><th>邮箱</th><th>操作</th></tr><c:forEach items="${pb.list}" var="user" varStatus="s"><tr><td><input type="checkbox" name="uid" value="${user.id}"></td><td>${s.count}</td><td>${user.name}</td><td>${user.gender}</td><td>${user.age}</td><td>${user.address}</td><td>${user.qq}</td><td>${user.email}</td><td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改</a> <a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a></td></tr></c:forEach></table></form><div><nav aria-label="Page navigation"><ul class="pagination"><c:if test="${pb.currentPage == 1}"><li class="disabled"></c:if><c:if test="${pb.currentPage != 1}"><li></c:if><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage - 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Previous"><span aria-hidden="true">«</span></a></li><c:forEach begin="1" end="${pb.totalPage}" var="i" ><c:if test="${pb.currentPage == i}"><li class="active"><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li></c:if><c:if test="${pb.currentPage != i}"><li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li></c:if></c:forEach><li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage + 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next"><span aria-hidden="true">»</span></a></li><span style="font-size: 25px;margin-left: 5px;">共${pb.totalCount}条记录，共${pb.totalPage}页</span></ul></nav></div></div></body>
</html><!-- login.jsp -->
<%@ 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="登录"></div></form><!-- 出错显示的信息框 --><div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" ><span>×</span></button><strong>${login_msg}</strong></div>
</div>
</body>
</html>
<!-- update.jsp -->
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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><link href="css/bootstrap.min.css" rel="stylesheet"><script src="js/jquery-2.1.0.min.js"></script><script src="js/bootstrap.min.js"></script></head><body><div class="container" style="width: 400px;"><h3 style="text-align: center;">修改联系人</h3><form action="${pageContext.request.contextPath}/updateUserServlet" method="post"><!-- 隐藏域 提交id--><input type="hidden" name="id" value="${user.id}"><div class="form-group"><label for="name">姓名：</label><input type="text" class="form-control" id="name" name="name" value="${user.name}" readonly="readonly" placeholder="请输入姓名" /></div><div class="form-group"><label>性别：</label><c:if test="${user.gender == '男'}"><input type="radio" name="gender" value="男" checked />男<input type="radio" name="gender" value="女" />女</c:if><c:if test="${user.gender == '女'}"><input type="radio" name="gender" value="男" />男<input type="radio" name="gender" value="女" checked />女</c:if></div><div class="form-group"><label for="age">年龄：</label><input type="text" class="form-control" value="${user.age}" id="age" name="age" placeholder="请输入年龄" /></div><div class="form-group"><label for="address">籍贯：</label><select name="address" id="address" class="form-control" ><c:if test="${user.address == '陕西'}"><option value="陕西" selected>陕西</option><option value="北京">北京</option><option value="上海">上海</option></c:if><c:if test="${user.address == '北京'}"><option value="陕西" >陕西</option><option value="北京" selected>北京</option><option value="上海">上海</option></c:if><c:if test="${user.address == '上海'}"><option value="陕西" >陕西</option><option value="北京">北京</option><option value="上海" selected>上海</option></c:if></select></div><div class="form-group"><label for="qq">QQ：</label><input type="text" id="qq" class="form-control" value="${user.qq}" name="qq" placeholder="请输入QQ号码"/></div><div class="form-group"><label for="email">Email：</label><input type="text" id="email" class="form-control" value="${user.email}" name="email" placeholder="请输入邮箱地址"/></div><div class="form-group" style="text-align: center"><input class="btn btn-primary" type="submit" value="提交" /><input class="btn btn-default" type="reset" value="重置" /><input class="btn btn-default" type="button" value="返回"/></div></form></div></body>
</html>访问 http://ocalhost:8080/login.jsp