• 案例---用户信息列表展示模块


    目录

    1. 需求

    2. 设计

    2.1技术选型

    2.2 数据库设计

    3.创建项目,导入html与jsp页面,配置文件,jar包

    3.1html与jsp页面的导入

    3.1.1css,fonts,js的相关文件

    3.1.2html页面

     3.1.3配置文件

    3.1.4jar包

    4.功能查询

    4.1功能查询分析

    4.2代码实现

    5.用户登录

    5.1用户登录分析

    5.2代码实现

    6.添加功能

    6.1分析

     6.2代码实现


    1. 需求

    用户信息的增删改查操作

    2. 设计

    2.1技术选型

    Servlet+JSP+MySQL+JDBCTempleat+Duird+BeanUtilS+tomcat

    2.2 数据库设计

    1. create database day17; -- 创建数据库
    2. use day17; -- 使用数据库
    3. create table user( -- 创建表
    4. id int primary key auto_increment,
    5. name varchar(20) not null,
    6. gender varchar(5),
    7. age int,
    8. address varchar(32),
    9. qq varchar(20),
    10. email varchar(50)
    11. )

    3.创建项目,导入html与jsp页面,配置文件,jar包

    3.1html与jsp页面的导入

    下面一次导入以下包

    3.1.1css,fonts,js的相关文件

     

     

    通过BooStrap官网可以找到相应的文件,或者是自己喜欢的文件格式。

    3.1.2html页面

    add.html

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4. <meta charset="utf-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1">
    7. <title>添加用户title>
    8. <link href="css/bootstrap.min.css" rel="stylesheet">
    9. <script src="js/jquery-2.1.0.min.js">script>
    10. <script src="js/bootstrap.min.js">script>
    11. head>
    12. <body>
    13. <div class="container">
    14. <center><h3>添加联系人页面h3>center>
    15. <form action="" method="post">
    16. <div class="form-group">
    17. <label for="name">姓名:label>
    18. <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
    19. div>
    20. <div class="form-group">
    21. <label>性别:label>
    22. <input type="radio" name="sex" value="男" checked="checked"/>
    23. <input type="radio" name="sex" value="女"/>
    24. div>
    25. <div class="form-group">
    26. <label for="age">年龄:label>
    27. <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄">
    28. div>
    29. <div class="form-group">
    30. <label for="address">籍贯:label>
    31. <select name="address" class="form-control" id="jiguan">
    32. <option value="广东">广东option>
    33. <option value="广西">广西option>
    34. <option value="湖南">湖南option>
    35. select>
    36. div>
    37. <div class="form-group">
    38. <label for="qq">QQ:label>
    39. <input type="text" class="form-control" name="qq" placeholder="请输入QQ号码"/>
    40. div>
    41. <div class="form-group">
    42. <label for="email">Email:label>
    43. <input type="text" class="form-control" name="email" placeholder="请输入邮箱地址"/>
    44. div>
    45. <div class="form-group" style="text-align: center">
    46. <input class="btn btn-primary" type="submit" value="提交" />
    47. <input class="btn btn-default" type="reset" value="重置" />
    48. <input class="btn btn-default" type="button" value="返回" />
    49. div>
    50. form>
    51. div>
    52. body>
    53. html>

     index.html

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4. <meta charset="utf-8"/>
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    6. <meta name="viewport" content="width=device-width, initial-scale=1"/>
    7. <title>首页title>
    8. <link href="css/bootstrap.min.css" rel="stylesheet">
    9. <script src="js/jquery-2.1.0.min.js">script>
    10. <script src="js/bootstrap.min.js">script>
    11. <script type="text/javascript">
    12. script>
    13. head>
    14. <body>
    15. <div align="center">
    16. <a
    17. href="list.html" style="text-decoration:none;font-size:33px">查询所有用户信息
    18. a>
    19. div>
    20. body>
    21. html>

     list.html

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4. <meta charset="utf-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1">
    7. <title>用户信息管理系统title>
    8. <link href="css/bootstrap.min.css" rel="stylesheet">
    9. <script src="js/jquery-2.1.0.min.js">script>
    10. <script src="js/bootstrap.min.js">script>
    11. <style type="text/css">
    12. td, th {
    13. text-align: center;
    14. }
    15. style>
    16. head>
    17. <body>
    18. <div class="container">
    19. <h3 style="text-align: center">用户信息列表h3>
    20. <table border="1" class="table table-bordered table-hover">
    21. <tr class="success">
    22. <th>编号th>
    23. <th>姓名th>
    24. <th>性别th>
    25. <th>年龄th>
    26. <th>籍贯th>
    27. <th>QQth>
    28. <th>邮箱th>
    29. <th>操作th>
    30. tr>
    31. <tr>
    32. <td>1td>
    33. <td>张三td>
    34. <td>td>
    35. <td>20td>
    36. <td>广东td>
    37. <td>44444222td>
    38. <td>zs@qq.comtd>
    39. <td><a class="btn btn-default btn-sm" href="update.html">修改a> <a class="btn btn-default btn-sm" href="">删除a>td>
    40. tr>
    41. <tr>
    42. <td>2td>
    43. <td>张三td>
    44. <td>td>
    45. <td>20td>
    46. <td>广东td>
    47. <td>44444222td>
    48. <td>zs@qq.comtd>
    49. <td><a class="btn btn-default btn-sm" href="update.html">修改a> <a class="btn btn-default btn-sm" href="">删除a>td>
    50. tr>
    51. <tr>
    52. <td>3td>
    53. <td>张三td>
    54. <td>td>
    55. <td>20td>
    56. <td>广东td>
    57. <td>44444222td>
    58. <td>zs@qq.comtd>
    59. <td><a class="btn btn-default btn-sm" href="update.html">修改a> <a class="btn btn-default btn-sm" href="">删除a>td>
    60. tr>
    61. <tr>
    62. <td>4td>
    63. <td>张三td>
    64. <td>td>
    65. <td>20td>
    66. <td>广东td>
    67. <td>44444222td>
    68. <td>zs@qq.comtd>
    69. <td><a class="btn btn-default btn-sm" href="update.html">修改a> <a class="btn btn-default btn-sm" href="">删除a>td>
    70. tr>
    71. <tr>
    72. <td>5td>
    73. <td>张三td>
    74. <td>td>
    75. <td>20td>
    76. <td>广东td>
    77. <td>44444222td>
    78. <td>zs@qq.comtd>
    79. <td><a class="btn btn-default btn-sm" href="update.html">修改a> <a class="btn btn-default btn-sm" href="">删除a>td>
    80. tr>
    81. <tr>
    82. <td colspan="8" align="center"><a class="btn btn-primary" href="add.html">添加联系人a>td>
    83. tr>
    84. table>
    85. div>
    86. body>
    87. html>

     login.html

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4. <meta charset="utf-8"/>
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    6. <meta name="viewport" content="width=device-width, initial-scale=1"/>
    7. <title>管理员登录title>
    8. <link href="css/bootstrap.min.css" rel="stylesheet">
    9. <script src="js/jquery-2.1.0.min.js">script>
    10. <script src="js/bootstrap.min.js">script>
    11. <script type="text/javascript">
    12. script>
    13. head>
    14. <body>
    15. <div class="container" style="width: 400px;">
    16. <h3 style="text-align: center;">管理员登录h3>
    17. <form action="login" method="post">
    18. <div class="form-group">
    19. <label for="user">用户名:label>
    20. <input type="text" name="user" class="form-control" id="user" placeholder="请输入用户名"/>
    21. div>
    22. <div class="form-group">
    23. <label for="password">密码:label>
    24. <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
    25. div>
    26. <div class="form-inline">
    27. <label for="vcode">验证码:label>
    28. <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/>
    29. <a href="javascript:refreshCode()"><img src="vcode" title="看不清点击刷新" id="vcode"/>a>
    30. div>
    31. <hr/>
    32. <div class="form-group" style="text-align: center;">
    33. <input class="btn btn btn-primary" type="submit" value="登录">
    34. div>
    35. form>
    36. <div class="alert alert-warning alert-dismissible" role="alert">
    37. <button type="button" class="close" data-dismiss="alert" >
    38. <span>×span>button>
    39. <strong>登录失败!strong>
    40. div>
    41. div>
    42. body>
    43. html>

    update.html

    1. html>
    2. <html lang="zh-CN">
    3. <head>
    4. <base href="<%=basePath%>"/>
    5. <meta charset="utf-8">
    6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. <meta name="viewport" content="width=device-width, initial-scale=1">
    8. <title>修改用户title>
    9. <link href="css/bootstrap.min.css" rel="stylesheet">
    10. <script src="js/jquery-2.1.0.min.js">script>
    11. <script src="js/bootstrap.min.js">script>
    12. head>
    13. <body>
    14. <div class="container" style="width: 400px;">
    15. <h3 style="text-align: center;">修改联系人h3>
    16. <form action="" method="post">
    17. <div class="form-group">
    18. <label for="name">姓名:label>
    19. <input type="text" class="form-control" id="name" name="name" readonly="readonly" placeholder="请输入姓名" />
    20. div>
    21. <div class="form-group">
    22. <label>性别:label>
    23. <input type="radio" name="sex" value="男" />
    24. <input type="radio" name="sex" value="女" />
    25. div>
    26. <div class="form-group">
    27. <label for="age">年龄:label>
    28. <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄" />
    29. div>
    30. <div class="form-group">
    31. <label for="address">籍贯:label>
    32. <select name="address" class="form-control" >
    33. <option value="广东">广东option>
    34. <option value="广西">广西option>
    35. <option value="湖南">湖南option>
    36. select>
    37. div>
    38. <div class="form-group">
    39. <label for="qq">QQ:label>
    40. <input type="text" class="form-control" name="qq" placeholder="请输入QQ号码"/>
    41. div>
    42. <div class="form-group">
    43. <label for="email">Email:label>
    44. <input type="text" class="form-control" name="email" placeholder="请输入邮箱地址"/>
    45. div>
    46. <div class="form-group" style="text-align: center">
    47. <input class="btn btn-primary" type="submit" value="提交" />
    48. <input class="btn btn-default" type="reset" value="重置" />
    49. <input class="btn btn-default" type="button" value="返回"/>
    50. div>
    51. form>
    52. div>
    53. body>
    54. html>

     3.1.3配置文件

    druid.properties

    1. driverClassName=com.mysql.jdbc.Driver
    2. url=jdbc:mysql:///day17
    3. username=root
    4. password=root
    5. # 初始化连接数量
    6. initialSize=5
    7. # 最大连接数
    8. maxActive=10
    9. # 最大等待时间
    10. maxWait=3000

     JDBCUtils.java

    1. package cn.itcast.util;
    2. import com.alibaba.druid.pool.DruidDataSourceFactory;
    3. import javax.sql.DataSource;
    4. import javax.xml.crypto.Data;
    5. import java.io.IOException;
    6. import java.io.InputStream;
    7. import java.sql.Connection;
    8. import java.sql.SQLException;
    9. import java.util.Properties;
    10. /**
    11. * JDBC工具类 使用Durid连接池
    12. */
    13. public class JDBCUtils {
    14. private static DataSource ds ;
    15. static {
    16. try {
    17. //1.加载配置文件
    18. Properties pro = new Properties();
    19. //使用ClassLoader加载配置文件,获取字节输入流
    20. InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
    21. pro.load(is);
    22. //2.初始化连接池对象
    23. ds = DruidDataSourceFactory.createDataSource(pro);
    24. } catch (IOException e) {
    25. e.printStackTrace();
    26. } catch (Exception e) {
    27. e.printStackTrace();
    28. }
    29. }
    30. /**
    31. * 获取连接池对象
    32. */
    33. public static DataSource getDataSource(){
    34. return ds;
    35. }
    36. /**
    37. * 获取连接Connection对象
    38. */
    39. public static Connection getConnection() throws SQLException {
    40. return ds.getConnection();
    41. }
    42. }

    3.1.4jar包

    4.功能查询

    4.1功能查询分析

    当用户再index.jsp页面点击“查询所有用户信息”时,页面跳转到list.jsp页面,并且显示查询信息。

    4.2代码实现

    User.java

    1. package cn.itcast.domain;
    2. public class User {
    3. private int id;
    4. private String name;
    5. private String gender;
    6. private int age;
    7. private String address;
    8. private String qq;
    9. private String email;
    10. private String username;
    11. private String password;
    12. public String getUsername() {
    13. return username;
    14. }
    15. public void setUsername(String username) {
    16. this.username = username;
    17. }
    18. public String getPassword() {
    19. return password;
    20. }
    21. public void setPassword(String password) {
    22. this.password = password;
    23. }
    24. public int getId() {
    25. return id;
    26. }
    27. public void setId(int id) {
    28. this.id = id;
    29. }
    30. public String getName() {
    31. return name;
    32. }
    33. public void setName(String name) {
    34. this.name = name;
    35. }
    36. public String getGender() {
    37. return gender;
    38. }
    39. public void setGender(String gender) {
    40. this.gender = gender;
    41. }
    42. public int getAge() {
    43. return age;
    44. }
    45. public void setAge(int age) {
    46. this.age = age;
    47. }
    48. public String getAddress() {
    49. return address;
    50. }
    51. public void setAddress(String address) {
    52. this.address = address;
    53. }
    54. public String getQq() {
    55. return qq;
    56. }
    57. public void setQq(String qq) {
    58. this.qq = qq;
    59. }
    60. public String getEmail() {
    61. return email;
    62. }
    63. public void setEmail(String email) {
    64. this.email = email;
    65. }
    66. @Override
    67. public String toString() {
    68. return "User{" +
    69. "id=" + id +
    70. ", name='" + name + '\'' +
    71. ", gender='" + gender + '\'' +
    72. ", age=" + age +
    73. ", address='" + address + '\'' +
    74. ", qq='" + qq + '\'' +
    75. ", email='" + email + '\'' +
    76. ", username='" + username + '\'' +
    77. ", password='" + password + '\'' +
    78. '}';
    79. }
    80. }

    index.jsp

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    3. html>
    4. <html lang="zh-CN">
    5. <head>
    6. <meta charset="utf-8"/>
    7. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    8. <meta name="viewport" content="width=device-width, initial-scale=1"/>
    9. <title>首页title>
    10. <link href="css/bootstrap.min.css" rel="stylesheet">
    11. <script src="js/jquery-2.1.0.min.js">script>
    12. <script src="js/bootstrap.min.js">script>
    13. <script type="text/javascript">
    14. script>
    15. head>
    16. <body>
    17. <div >${user.name},欢迎您div>
    18. <div align="center">
    19. <a
    20. href="${pageContext.request.contextPath}/findUserByPageServlet" style="text-decoration:none;font-size:33px">查询所有用户信息
    21. a>
    22. div>
    23. body>
    24. html>

    userListServlet.java

    1. package cn.itcast.web.servlet;
    2. import cn.itcast.domain.User;
    3. import cn.itcast.service.UserService;
    4. import cn.itcast.service.impl.UserServiceImpl;
    5. import javax.servlet.ServletException;
    6. import javax.servlet.annotation.WebServlet;
    7. import javax.servlet.http.HttpServlet;
    8. import javax.servlet.http.HttpServletRequest;
    9. import javax.servlet.http.HttpServletResponse;
    10. import java.io.IOException;
    11. import java.util.List;
    12. @WebServlet("/userListServlet")
    13. public class UserListServlet extends HttpServlet {
    14. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    15. //1.调用UserService完成查询
    16. UserService service = new UserServiceImpl();
    17. List users = service.findAll();
    18. //2.将list存入request域
    19. request.setAttribute("users",users);
    20. //3.转发到list.jsp
    21. request.getRequestDispatcher("/list.jsp").forward(request,response);
    22. }
    23. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    24. this.doPost(request, response);
    25. }
    26. }

    构建会话👉调用下层方法(servicefindAll())👉将返回值List users设置在request域内共享👉利用转发的原理将List users信息发送到list.jsp页面

    UserService.java

    1. package cn.itcast.service;
    2. import cn.itcast.domain.PageBean;
    3. import cn.itcast.domain.User;
    4. import java.util.List;
    5. import java.util.Map;
    6. /**
    7. * 用户管理的业务接口
    8. */
    9. public interface UserService {
    10. /**
    11. * 查询所有用户信息
    12. * @return
    13. */
    14. public List findAll();
    15. /**
    16. * 登录方法
    17. * @param user
    18. * @return
    19. */
    20. User login(User user);
    21. /**
    22. * 保存User
    23. * @param user
    24. */
    25. void addUser(User user);
    26. /**
    27. * 根据id删除User
    28. * @param id
    29. */
    30. void deleteUser(String id);
    31. /**
    32. * 根据id查询
    33. * @param id
    34. * @return
    35. */
    36. User findUserById(String id);
    37. /**
    38. * 修改用户信息
    39. * @param user
    40. */
    41. void updateUser(User user);
    42. /**
    43. * 批量删除用户
    44. * @param ids
    45. */
    46. void delSelectedUser(String[] ids);
    47. /**
    48. * 分页条件查询
    49. * @param currentPage
    50. * @param rows
    51. * @param condition
    52. * @return
    53. */
    54. PageBean findUserByPage(String currentPage, String rows, Map condition);
    55. }

     UserServicelmpl.java

    1. package cn.itcast.service.impl;
    2. import cn.itcast.dao.UserDao;
    3. import cn.itcast.dao.impl.UserDaoImpl;
    4. import cn.itcast.domain.PageBean;
    5. import cn.itcast.domain.User;
    6. import cn.itcast.service.UserService;
    7. import java.util.List;
    8. import java.util.Map;
    9. public class UserServiceImpl implements UserService {
    10. private UserDao dao = new UserDaoImpl();
    11. @Override
    12. public List findAll() {
    13. //调用Dao完成查询
    14. return dao.findAll();
    15. }
    16. @Override
    17. public User login(User user) {
    18. return dao.findUserByUsernameAndPassword(user.getUsername(),user.getPassword());
    19. }
    20. @Override
    21. public void addUser(User user) {
    22. dao.add(user);
    23. }
    24. @Override
    25. public void deleteUser(String id) {
    26. dao.delete(Integer.parseInt(id));
    27. }
    28. @Override
    29. public User findUserById(String id) {
    30. return dao.findById(Integer.parseInt(id));
    31. }
    32. @Override
    33. public void updateUser(User user) {
    34. dao.update(user);
    35. }
    36. @Override
    37. public void delSelectedUser(String[] ids) {
    38. if(ids != null && ids.length > 0){
    39. //1.遍历数组
    40. for (String id : ids) {
    41. //2.调用dao删除
    42. dao.delete(Integer.parseInt(id));
    43. }
    44. }
    45. }
    46. @Override
    47. public PageBean findUserByPage(String _currentPage, String _rows, Map condition) {
    48. int currentPage = Integer.parseInt(_currentPage);
    49. int rows = Integer.parseInt(_rows);
    50. if(currentPage <=0) {
    51. currentPage = 1;
    52. }
    53. //1.创建空的PageBean对象
    54. PageBean pb = new PageBean();
    55. //2.设置参数
    56. pb.setCurrentPage(currentPage);
    57. pb.setRows(rows);
    58. //3.调用dao查询总记录数
    59. int totalCount = dao.findTotalCount(condition);
    60. pb.setTotalCount(totalCount);
    61. //4.调用dao查询List集合
    62. //计算开始的记录索引
    63. int start = (currentPage - 1) * rows;
    64. List list = dao.findByPage(start,rows,condition);
    65. pb.setList(list);
    66. //5.计算总页码
    67. int totalPage = (totalCount % rows) == 0 ? totalCount/rows : (totalCount/rows) + 1;
    68. pb.setTotalPage(totalPage);
    69. return pb;
    70. }
    71. }

    UserDao.java

    1. package cn.itcast.dao;
    2. import cn.itcast.domain.User;
    3. import java.util.List;
    4. import java.util.Map;
    5. /**
    6. * 用户操作的DAO
    7. */
    8. public interface UserDao {
    9. public List findAll();
    10. User findUserByUsernameAndPassword(String username, String password);
    11. void add(User user);
    12. void delete(int id);
    13. User findById(int i);
    14. void update(User user);
    15. /**
    16. * 查询总记录数
    17. * @return
    18. * @param condition
    19. */
    20. int findTotalCount(Map condition);
    21. /**
    22. * 分页查询每页记录
    23. * @param start
    24. * @param rows
    25. * @param condition
    26. * @return
    27. */
    28. List findByPage(int start, int rows, Map condition);
    29. }

    UserDaoimpl.java

    1. package cn.itcast.dao.impl;
    2. import cn.itcast.dao.UserDao;
    3. import cn.itcast.domain.User;
    4. import cn.itcast.util.JDBCUtils;
    5. import org.springframework.jdbc.core.BeanPropertyRowMapper;
    6. import org.springframework.jdbc.core.JdbcTemplate;
    7. import java.util.ArrayList;
    8. import java.util.List;
    9. import java.util.Map;
    10. import java.util.Set;
    11. public class UserDaoImpl implements UserDao {
    12. private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
    13. @Override
    14. public List findAll() {
    15. //使用JDBC操作数据库...
    16. //1.定义sql
    17. String sql = "select * from user";
    18. List users = template.query(sql, new BeanPropertyRowMapper(User.class));
    19. return users;
    20. }
    21. @Override
    22. public User findUserByUsernameAndPassword(String username, String password) {
    23. try {
    24. String sql = "select * from user where username = ? and password = ?";
    25. User user = template.queryForObject(sql, new BeanPropertyRowMapper(User.class), username, password);
    26. return user;
    27. } catch (Exception e) {
    28. e.printStackTrace();
    29. return null;
    30. }
    31. }
    32. @Override
    33. public void add(User user) {
    34. //1.定义sql
    35. String sql = "insert into user values(null,?,?,?,?,?,?,null,null)";
    36. //2.执行sql
    37. template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail());
    38. }
    39. @Override
    40. public void delete(int id) {
    41. //1.定义sql
    42. String sql = "delete from user where id = ?";
    43. //2.执行sql
    44. template.update(sql, id);
    45. }
    46. @Override
    47. public User findById(int id) {
    48. String sql = "select * from user where id = ?";
    49. return template.queryForObject(sql, new BeanPropertyRowMapper(User.class), id);
    50. }
    51. @Override
    52. public void update(User user) {
    53. String sql = "update user set name = ?,gender = ? ,age = ? , address = ? , qq = ?, email = ? where id = ?";
    54. template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail(), user.getId());
    55. }
    56. @Override
    57. public int findTotalCount(Map condition) {
    58. //1.定义模板初始化sql
    59. String sql = "select count(*) from user where 1 = 1 ";
    60. StringBuilder sb = new StringBuilder(sql);
    61. //2.遍历map
    62. Set keySet = condition.keySet();
    63. //定义参数的集合
    64. List params = new ArrayList();
    65. for (String key : keySet) {
    66. //排除分页条件参数
    67. if("currentPage".equals(key) || "rows".equals(key)){
    68. continue;
    69. }
    70. //获取value
    71. String value = condition.get(key)[0];
    72. //判断value是否有值
    73. if(value != null && !"".equals(value)){
    74. //有值
    75. sb.append(" and "+key+" like ? ");
    76. params.add("%"+value+"%");//?条件的值
    77. }
    78. }
    79. System.out.println(sb.toString());
    80. System.out.println(params);
    81. return template.queryForObject(sb.toString(),Integer.class,params.toArray());
    82. }
    83. @Override
    84. public List findByPage(int start, int rows, Map condition) {
    85. String sql = "select * from user where 1 = 1 ";
    86. StringBuilder sb = new StringBuilder(sql);
    87. //2.遍历map
    88. Set keySet = condition.keySet();
    89. //定义参数的集合
    90. List params = new ArrayList();
    91. for (String key : keySet) {
    92. //排除分页条件参数
    93. if("currentPage".equals(key) || "rows".equals(key)){
    94. continue;
    95. }
    96. //获取value
    97. String value = condition.get(key)[0];
    98. //判断value是否有值
    99. if(value != null && !"".equals(value)){
    100. //有值
    101. sb.append(" and "+key+" like ? ");
    102. params.add("%"+value+"%");//?条件的值
    103. }
    104. }
    105. //添加分页查询
    106. sb.append(" limit ?,? ");
    107. //添加分页查询参数值
    108. params.add(start);
    109. params.add(rows);
    110. sql = sb.toString();
    111. System.out.println(sql);
    112. System.out.println(params);
    113. return template.query(sql,new BeanPropertyRowMapper(User.class),params.toArray());
    114. }
    115. }
    116.  创建UserService接口,定义方法,创建UserServicelmpl类实现该接口,并且重写该方法👉告诉下层(dao)调用其findAll()方法👉dao层创建UserDao接口,定义该findAll()方法为pubilc List类型👉UserDaoimpl实现UserDao接口,重写findAll()方法

      当findAll()操作完数据库后,返回一个List users,从dao层👉service层👉UserListSerrvlet层再转发到list.jsp

      list.jsp

      1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
      2. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
      3. html>
      4. <html lang="zh-CN">
      5. <head>
      6. <meta charset="utf-8">
      7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
      8. <meta name="viewport" content="width=device-width, initial-scale=1">
      9. <title>用户信息管理系统title>
      10. <link href="css/bootstrap.min.css" rel="stylesheet">
      11. <script src="js/jquery-2.1.0.min.js">script>
      12. <script src="js/bootstrap.min.js">script>
      13. <style type="text/css">
      14. td, th {
      15. text-align: center;
      16. }
      17. style>
      18. <script>
      19. function deleteUser(id){
      20. //用户安全提示
      21. if(confirm("您确定要删除吗?")){
      22. //访问路径
      23. location.href="${pageContext.request.contextPath}/delUserServlet?id="+id;
      24. }
      25. }
      26. window.onload = function(){
      27. //给删除选中按钮添加单击事件
      28. document.getElementById("delSelected").onclick = function(){
      29. if(confirm("您确定要删除选中条目吗?")){
      30. var flag = false;
      31. //判断是否有选中条目
      32. var cbs = document.getElementsByName("uid");
      33. for (var i = 0; i < cbs.length; i++) {
      34. if(cbs[i].checked){
      35. //有一个条目选中了
      36. flag = true;
      37. break;
      38. }
      39. }
      40. if(flag){//有条目被选中
      41. //表单提交
      42. document.getElementById("form").submit();
      43. }
      44. }
      45. }
      46. //1.获取第一个cb
      47. document.getElementById("firstCb").onclick = function(){
      48. //2.获取下边列表中所有的cb
      49. var cbs = document.getElementsByName("uid");
      50. //3.遍历
      51. for (var i = 0; i < cbs.length; i++) {
      52. //4.设置这些cbs[i]的checked状态 = firstCb.checked
      53. cbs[i].checked = this.checked;
      54. }
      55. }
      56. }
      57. script>
      58. head>
      59. <body>
      60. <div class="container">
      61. <h3 style="text-align: center">用户信息列表h3>
      62. <div style="float: left;">
      63. <form class="form-inline" action="${pageContext.request.contextPath}/findUserByPageServlet" method="post">
      64. <div class="form-group">
      65. <label for="exampleInputName2">姓名label>
      66. <input type="text" name="name" value="${condition.name[0]}" class="form-control" id="exampleInputName2" >
      67. div>
      68. <div class="form-group">
      69. <label for="exampleInputName3">籍贯label>
      70. <input type="text" name="address" value="${condition.address[0]}" class="form-control" id="exampleInputName3" >
      71. div>
      72. <div class="form-group">
      73. <label for="exampleInputEmail2">邮箱label>
      74. <input type="text" name="email" value="${condition.email[0]}" class="form-control" id="exampleInputEmail2" >
      75. div>
      76. <button type="submit" class="btn btn-default">查询button>
      77. form>
      78. div>
      79. <div style="float: right;margin: 5px;">
      80. <a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人a>
      81. <a class="btn btn-primary" href="javascript:void(0);" id="delSelected">删除选中a>
      82. div>
      83. <form id="form" action="${pageContext.request.contextPath}/delSelectedServlet" method="post">
      84. <table border="1" class="table table-bordered table-hover">
      85. <tr class="success">
      86. <th><input type="checkbox" id="firstCb">th>
      87. <th>编号th>
      88. <th>姓名th>
      89. <th>性别th>
      90. <th>年龄th>
      91. <th>籍贯th>
      92. <th>QQth>
      93. <th>邮箱th>
      94. <th>操作th>
      95. tr>
      96. <c:forEach items="${pb.list}" var="user" varStatus="s">
      97. <tr>
      98. <td><input type="checkbox" name="uid" value="${user.id}">td>9
      99. <td>${s.count}td>
      100. <td>${user.name}td>
      101. <td>${user.gender}td>
      102. <td>${user.age}td>
      103. <td>${user.address}td>
      104. <td>${user.qq}td>
      105. <td>${user.email}td>
      106. <td><a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改a> 
      107. <a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除a>td>
      108. tr>
      109. c:forEach>
      110. table>
      111. form>
      112. <div>
      113. <nav aria-label="Page navigation">
      114. <ul class="pagination">
      115. <c:if test="${pb.currentPage == 1}">
      116. <li class="disabled">
      117. c:if>
      118. <c:if test="${pb.currentPage != 1}">
      119. <li>
      120. c:if>
      121. <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">
      122. <span aria-hidden="true">«span>
      123. a>
      124. li>
      125. <c:forEach begin="1" end="${pb.totalPage}" var="i" >
      126. <c:if test="${pb.currentPage == i}">
      127. <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>
      128. c:if>
      129. <c:if test="${pb.currentPage != i}">
      130. <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>
      131. c:if>
      132. c:forEach>
      133. <li>
      134. <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">
      135. <span aria-hidden="true">»span>
      136. a>
      137. li>
      138. <span style="font-size: 25px;margin-left: 5px;">
      139. 共${pb.totalCount}条记录,共${pb.totalPage}页
      140. span>
      141. ul>
      142. nav>
      143. div>
      144. div>
      145. body>
      146. html>

      5.用户登录

      5.1用户登录分析

       首先在login.jsp中让用户输入数据,然后LoginServlet.java中使用session拿到服务端的验证码符号与request域中的验证码进行判断,判断该验证码是否输入正确,若正确则将用户输入的用户名和密码封装成user对象,然后调用Service中的login()方法,将用户输入的信息对象user进行传参,并且在service层创建接口和实现类,定义方法,接着到dao层创建接口和实现类,对方法进行重写,使用sql语句操作数据库,若用户名与密码正确则返回该用户的用户信息对象user,反之则为null,层层递进到servlet层,进行用户登录的判断(判断返回值为user还是null)。

      5.2代码实现

      login.jsp

      1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
      2. html>
      3. <html lang="zh-CN">
      4. <head>
      5. <meta charset="utf-8"/>
      6. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
      7. <meta name="viewport" content="width=device-width, initial-scale=1"/>
      8. <title>管理员登录title>
      9. <link href="css/bootstrap.min.css" rel="stylesheet">
      10. <script src="js/jquery-2.1.0.min.js">script>
      11. <script src="js/bootstrap.min.js">script>
      12. <script type="text/javascript">
      13. //切换验证码
      14. function refreshCode(){
      15. //1.获取验证码图片对象
      16. var vcode = document.getElementById("vcode");
      17. //2.设置其src属性,加时间戳
      18. vcode.src = "${pageContext.request.contextPath}/checkCodeServlet?time="+new Date().getTime();
      19. }
      20. script>
      21. head>
      22. <body>
      23. <div class="container" style="width: 400px;">
      24. <h3 style="text-align: center;">管理员登录h3>
      25. <form action="${pageContext.request.contextPath}/loginServlet" method="post">
      26. <div class="form-group">
      27. <label for="user">用户名:label>
      28. <input type="text" name="username" class="form-control" id="user" placeholder="请输入用户名"/>
      29. div>
      30. <div class="form-group">
      31. <label for="password">密码:label>
      32. <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
      33. div>
      34. <div class="form-inline">
      35. <label for="vcode">验证码:label>
      36. <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/>
      37. <a href="javascript:refreshCode();">
      38. <img src="${pageContext.request.contextPath}/checkCodeServlet" title="看不清点击刷新" id="vcode"/>
      39. a>
      40. div>
      41. <hr/>
      42. <div class="form-group" style="text-align: center;">
      43. <input class="btn btn btn-primary" type="submit" value="登录">
      44. div>
      45. form>
      46. <div class="alert alert-warning alert-dismissible" role="alert">
      47. <button type="button" class="close" data-dismiss="alert" >
      48. <span>×span>
      49. button>
      50. <strong>${login_msg}strong>
      51. div>
      52. div>
      53. body>
      54. html>

      CheckCodeServlet.java

      验证码的生成

      1. package cn.itcast.web.servlet;
      2. import javax.imageio.ImageIO;
      3. import javax.servlet.ServletException;
      4. import javax.servlet.annotation.WebServlet;
      5. import javax.servlet.http.HttpServlet;
      6. import javax.servlet.http.HttpServletRequest;
      7. import javax.servlet.http.HttpServletResponse;
      8. import java.awt.*;
      9. import java.awt.image.BufferedImage;
      10. import java.io.IOException;
      11. import java.util.Random;
      12. /**
      13. * 验证码
      14. */
      15. @WebServlet("/checkCodeServlet")
      16. public class CheckCodeServlet extends HttpServlet {
      17. public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
      18. //服务器通知浏览器不要缓存
      19. response.setHeader("pragma","no-cache");
      20. response.setHeader("cache-control","no-cache");
      21. response.setHeader("expires","0");
      22. //在内存中创建一个长80,宽30的图片,默认黑色背景
      23. //参数一:长
      24. //参数二:宽
      25. //参数三:颜色
      26. int width = 80;
      27. int height = 30;
      28. BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
      29. //获取画笔
      30. Graphics g = image.getGraphics();
      31. //设置画笔颜色为灰色
      32. g.setColor(Color.GRAY);
      33. //填充图片
      34. g.fillRect(0,0, width,height);
      35. //产生4个随机验证码,12Ey
      36. String checkCode = getCheckCode();
      37. //将验证码放入HttpSession中
      38. request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
      39. //设置画笔颜色为黄色
      40. g.setColor(Color.YELLOW);
      41. //设置字体的小大
      42. g.setFont(new Font("黑体",Font.BOLD,24));
      43. //向图片上写入验证码
      44. g.drawString(checkCode,15,25);
      45. //将内存中的图片输出到浏览器
      46. //参数一:图片对象
      47. //参数二:图片的格式,如PNG,JPG,GIF
      48. //参数三:图片输出到哪里去
      49. ImageIO.write(image,"PNG",response.getOutputStream());
      50. }
      51. /**
      52. * 产生4位随机字符串
      53. */
      54. private String getCheckCode() {
      55. String base = "0123456789ABCDEFGabcdefg";
      56. int size = base.length();
      57. Random r = new Random();
      58. StringBuffer sb = new StringBuffer();
      59. for(int i=1;i<=4;i++){
      60. //产生0到size-1的随机值
      61. int index = r.nextInt(size);
      62. //在base字符串中获取下标为index的字符
      63. char c = base.charAt(index);
      64. //将c放入到StringBuffer中去
      65. sb.append(c);
      66. }
      67. return sb.toString();
      68. }
      69. public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      70. this.doGet(request,response);
      71. }
      72. }

      LoginServlet.java

      1. package cn.itcast.web.servlet;
      2. import cn.itcast.domain.User;
      3. import cn.itcast.service.UserService;
      4. import cn.itcast.service.impl.UserServiceImpl;
      5. import org.apache.commons.beanutils.BeanUtils;
      6. import javax.servlet.ServletException;
      7. import javax.servlet.annotation.WebServlet;
      8. import javax.servlet.http.HttpServlet;
      9. import javax.servlet.http.HttpServletRequest;
      10. import javax.servlet.http.HttpServletResponse;
      11. import javax.servlet.http.HttpSession;
      12. import java.io.IOException;
      13. import java.lang.reflect.InvocationTargetException;
      14. import java.util.Map;
      15. @WebServlet("/loginServlet")
      16. public class LoginServlet extends HttpServlet {
      17. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      18. //1.设置编码
      19. request.setCharacterEncoding("utf-8");
      20. //2.获取数据
      21. //2.1获取用户填写验证码
      22. String verifycode = request.getParameter("verifycode");
      23. //3.验证码校验
      24. HttpSession session = request.getSession();
      25. String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");
      26. session.removeAttribute("CHECKCODE_SERVER");//确保验证码一次性
      27. if(!checkcode_server.equalsIgnoreCase(verifycode)){
      28. //验证码不正确
      29. //提示信息
      30. request.setAttribute("login_msg","验证码错误!");
      31. //跳转登录页面
      32. request.getRequestDispatcher("/login.jsp").forward(request,response);
      33. return;
      34. }
      35. Map map = request.getParameterMap();
      36. //4.封装User对象
      37. User user = new User();
      38. try {
      39. BeanUtils.populate(user,map);
      40. } catch (IllegalAccessException e) {
      41. e.printStackTrace();
      42. } catch (InvocationTargetException e) {
      43. e.printStackTrace();
      44. }
      45. //5.调用Service查询
      46. UserService service = new UserServiceImpl();
      47. User loginUser = service.login(user);
      48. //6.判断是否登录成功
      49. if(loginUser != null){
      50. //登录成功
      51. //将用户存入session
      52. session.setAttribute("user",loginUser);
      53. //跳转页面
      54. response.sendRedirect(request.getContextPath()+"/index.jsp");
      55. }else{
      56. //登录失败
      57. //提示信息
      58. request.setAttribute("login_msg","用户名或密码错误!");
      59. //跳转登录页面
      60. request.getRequestDispatcher("/login.jsp").forward(request,response);
      61. }
      62. }
      63. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      64. this.doPost(request, response);
      65. }
      66. }

      接下来的service层和dao层都在上面查询功能。

      6.添加功能

      6.1分析

       6.2代码实现

      add.jsp

      1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
      2. html>
      3. <html lang="zh-CN">
      4. <head>
      5. <meta charset="utf-8">
      6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
      7. <meta name="viewport" content="width=device-width, initial-scale=1">
      8. <title>添加用户title>
      9. <link href="css/bootstrap.min.css" rel="stylesheet">
      10. <script src="js/jquery-2.1.0.min.js">script>
      11. <script src="js/bootstrap.min.js">script>
      12. head>
      13. <body>
      14. <div class="container">
      15. <center><h3>添加联系人页面h3>center>
      16. <form action="${pageContext.request.contextPath}/addUserServlet" method="post">
      17. <div class="form-group">
      18. <label for="name">姓名:label>
      19. <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
      20. div>
      21. <div class="form-group">
      22. <label>性别:label>
      23. <input type="radio" name="gender" value="男" checked="checked"/>
      24. <input type="radio" name="gender" value="女"/>
      25. div>
      26. <div class="form-group">
      27. <label for="age">年龄:label>
      28. <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄">
      29. div>
      30. <div class="form-group">
      31. <label for="address">籍贯:label>
      32. <select name="address" class="form-control" id="address">
      33. <option value="陕西">陕西option>
      34. <option value="北京">北京option>
      35. <option value="上海">上海option>
      36. select>
      37. div>
      38. <div class="form-group">
      39. <label for="qq">QQ:label>
      40. <input type="text" class="form-control" id="qq" name="qq" placeholder="请输入QQ号码"/>
      41. div>
      42. <div class="form-group">
      43. <label for="email">Email:label>
      44. <input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱地址"/>
      45. div>
      46. <div class="form-group" style="text-align: center">
      47. <input class="btn btn-primary" type="submit" value="提交" />
      48. <input class="btn btn-default" type="reset" value="重置" />
      49. <input class="btn btn-default" type="button" value="返回" />
      50. div>
      51. form>
      52. div>
      53. body>
      54. html>

      AddUserServlet.java

      1. package cn.itcast.web.servlet;
      2. import cn.itcast.domain.User;
      3. import cn.itcast.service.UserService;
      4. import cn.itcast.service.impl.UserServiceImpl;
      5. import org.apache.commons.beanutils.BeanUtils;
      6. import javax.servlet.ServletException;
      7. import javax.servlet.annotation.WebServlet;
      8. import javax.servlet.http.HttpServlet;
      9. import javax.servlet.http.HttpServletRequest;
      10. import javax.servlet.http.HttpServletResponse;
      11. import java.io.IOException;
      12. import java.lang.reflect.InvocationTargetException;
      13. import java.util.Map;
      14. @WebServlet("/addUserServlet")
      15. public class AddUserServlet extends HttpServlet {
      16. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      17. //1.设置编码
      18. request.setCharacterEncoding("utf-8");
      19. //2.获取参数
      20. Map map = request.getParameterMap();
      21. //3.封装对象
      22. User user = new User();
      23. try {
      24. BeanUtils.populate(user,map);
      25. } catch (IllegalAccessException e) {
      26. e.printStackTrace();
      27. } catch (InvocationTargetException e) {
      28. e.printStackTrace();
      29. }
      30. //4.调用Service保存
      31. UserService service = new UserServiceImpl();
      32. service.addUser(user);
      33. //5.跳转到userListServlet
      34. response.sendRedirect(request.getContextPath()+"/userListServlet");
      35. }
      36. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      37. this.doPost(request, response);
      38. }
      39. }

       

       

    117. 相关阅读:
      国内较好的iPaaS供应商有哪些?
      已解决: Microservice Error: Timeout Error: Service didn‘t respond in time
      3年功能测试,面试要求18k,实在没法给,还不如给低点去招应届生
      105K Star的GitHub项目再陷风波,其托管商惨遭三大唱片公司起诉
      论坛介绍|COSCon'23 大数据(D)
      软设上午题错题知识点2
      以太网帧格式 以及 认识MAC地址
      三种典型电气减压比例阀线性度和短期重复性的对比考核试验
      南京邮电大学计算机网络实验二(网络路由器配置RIP协议)
      操作系统中的进程是什么?(详细讲解进程调度相关PCB信息)
    118. 原文地址:https://blog.csdn.net/weixin_65440201/article/details/126293650