• 【综合练习12】实现静态网页的相关功能

    登录：

    创建好相关的实体类，预先准备好数据库连接池及其业务处理成和dal层的登录方法，在web文件夹下创建与登录有关的方法，运行时保证相关数据库是开启状态。

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

    因为存在验证码，还需要写一个类设置验证码：

    1. package itcast.web.servlet;
    2.  
    3. import javax.imageio.ImageIO;
    4. import javax.servlet.ServletException;
    5. import javax.servlet.annotation.WebServlet;
    6. import javax.servlet.http.HttpServlet;
    7. import javax.servlet.http.HttpServletRequest;
    8. import javax.servlet.http.HttpServletResponse;
    9. import java.awt.*;
    10. import java.awt.image.BufferedImage;
    11. import java.io.IOException;
    12. import java.util.Random;
    13.  
    14. /**
    15.  * 验证码
    16.  */
    17. @WebServlet("/checkCodeServlet")
    18. public class CheckCodeServlet extends HttpServlet {
    19. 	public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
    20. 		
    21. 		//服务器通知浏览器不要缓存
    22. 		response.setHeader("pragma","no-cache");
    23. 		response.setHeader("cache-control","no-cache");
    24. 		response.setHeader("expires","0");
    25. 		
    26. 		//在内存中创建一个长80，宽30的图片，默认黑色背景
    27. 		//参数一：长
    28. 		//参数二：宽
    29. 		//参数三：颜色
    30. 		int width = 80;
    31. 		int height = 30;
    32. 		BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
    33. 		
    34. 		//获取画笔
    35. 		Graphics g = image.getGraphics();
    36. 		//设置画笔颜色为白色
    37. 		g.setColor(Color.BLACK);
    38. 		//填充图片
    39. 		g.fillRect(0,0, width,height);
    40. 		
    41. 		//产生4个随机验证码，12Ey
    42. 		String checkCode = getCheckCode();
    43. 		//将验证码放入HttpSession中
    44. 		request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
    45. 		
    46. 		//设置画笔颜色为darkslategray
    47. 		g.setColor(Color.WHITE);
    48. 		//设置字体的小大
    49. 		g.setFont(new Font("黑体",Font.BOLD,24));
    50. 		//向图片上写入验证码
    51. 		g.drawString(checkCode,15,25);
    52. 		
    53. 		//将内存中的图片输出到浏览器
    54. 		//参数一：图片对象
    55. 		//参数二：图片的格式，如PNG,JPG,GIF
    56. 		//参数三：图片输出到哪里去
    57. 		ImageIO.write(image,"PNG",response.getOutputStream());
    58. 	}
    59. 	/**
    60. 	 * 产生4位随机字符串 
    61. 	 */
    62. 	private String getCheckCode() {
    63. 		String base = "0123456789ABCDEFGabcdefg";
    64. 		int size = base.length();
    65. 		Random r = new Random();
    66. 		StringBuffer sb = new StringBuffer();
    67. 		for(int i=1;i<=4;i++){
    68. 			//产生0到size-1的随机值
    69. 			int index = r.nextInt(size);
    70. 			//在base字符串中获取下标为index的字符
    71. 			char c = base.charAt(index);
    72. 			//将c放入到StringBuffer中去
    73. 			sb.append(c);
    74. 		}
    75. 		return sb.toString();
    76. 	}
    77. 	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    78. 		this.doGet(request,response);
    79. 	}
    80. }
    1. package itcast.web.servlet;
    2.  
    3.  
    4. import itcast.domain.User;
    5. import itcast.service.UserService;
    6. import itcast.service.impl.UserServiceImpl;
    7. import org.apache.commons.beanutils.BeanUtils;
    8.  
    9. import javax.servlet.ServletException;
    10. import javax.servlet.annotation.WebServlet;
    11. import javax.servlet.http.HttpServlet;
    12. import javax.servlet.http.HttpServletRequest;
    13. import javax.servlet.http.HttpServletResponse;
    14. import javax.servlet.http.HttpSession;
    15. import java.io.IOException;
    16. import java.lang.reflect.InvocationTargetException;
    17. import java.util.Map;
    18.  
    19. @WebServlet("/loginServlet")
    20. public class LoginServlet extends HttpServlet {
    21.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    22.         //1.设置编码
    23.         request.setCharacterEncoding("utf-8");
    24.  
    25.         //2.获取数据
    26.         //2.1获取用户填写验证码
    27.         String verifycode = request.getParameter("verifycode");
    28.  
    29.         //3.验证码校验
    30.         HttpSession session = request.getSession();
    31.         String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");
    32.         session.removeAttribute("CHECKCODE_SERVER");//确保验证码一次性
    33.         if(!checkcode_server.equalsIgnoreCase(verifycode)){
    34.             //验证码不正确
    35.             //提示信息
    36.             request.setAttribute("login_msg","验证码错误！");
    37.             //跳转登录页面
    38.             request.getRequestDispatcher("/login.jsp").forward(request,response);
    39.  
    40.             return;
    41.         }
    42.  
    43.         Map map = request.getParameterMap();
    44.         //4.封装User对象
    45.         User user = new User();
    46.         try {
    47.             BeanUtils.populate(user,map);
    48.         } catch (IllegalAccessException e) {
    49.             e.printStackTrace();
    50.         } catch (InvocationTargetException e) {
    51.             e.printStackTrace();
    52.         }
    53.  
    54.  
    55.         //5.调用Service查询
    56.         UserService service = new UserServiceImpl();
    57.         User loginUser = service.login(user);
    58.         //6.判断是否登录成功
    59.         if(loginUser != null){
    60.             //登录成功
    61.             //将用户存入session
    62.             session.setAttribute("user",loginUser);
    63.             //跳转页面
    64.             response.sendRedirect(request.getContextPath()+"list.jsp");
    65.         }else{
    66.             //登录失败
    67.             //提示信息
    68.             request.setAttribute("login_msg","用户名或密码错误！");
    69.             //跳转登录页面
    70.             request.getRequestDispatcher("login.jsp").forward(request,response);
    71.  
    72.         }
    73.  
    74.  
    75.  
    76.  
    77.     }
    78.  
    79.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    80.         this.doPost(request, response);
    81.     }
    82. }

    登录相关的jsp：

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

    与登录相关的方法：

    dal层：

    1.  @Override
    2.     public User findUserByUsernameAndPassword(String username, String password) {
    3.         try {
    4.             String sql = "select * from user001 where username = ? and password = ?";
    5.             User user = template.queryForObject(sql, new BeanPropertyRowMapper(User.class), username, password);
    6.             return user;
    7.         } catch (Exception e) {
    8.             e.printStackTrace();
    9.             return null;
    10.         }
    11.  
    12.     }

    其他的以及增删改查方法，学过三层架构和数据库连接池以及数据库查询的同学应该知道怎么写了。

    这次主要讲的是分页查询，并不是数据库端的简单的分页查询，而是能具体体现在web端的分页查询：

    呈现的效果如下：

    那我们要怎么做呢？

    首先要创建一个新的实体类，里面声明跟分页查询有关的变量例如总页码、每页数据等

    ①.创建pagebean对象（包含总页数、总页码、每页数据等数据）
    public class PageBean {
        private int totalCount; // 总记录数
        private int totalPage ; // 总页码
        private List list ; // 每页的数据
        private int currentPage ; //当前页码
        private int rows;//每页显示的记录数
    ……

    1. package itcast.domain;
    2.  
    3. import java.util.List;
    4.  
    5. /**
    6.  * 分页工具对象
    7.  */
    8. public class PageBean {
    9.     private int totalCount; // 总记录数
    10.     private int totalPage ; // 总页码
    11.     private List list ; // 每页的数据
    12.     private int currentPage ; //当前页码
    13.     private int rows;//每页显示的记录数
    14.  
    15.     public int getTotalCount() {
    16.         return totalCount;
    17.     }
    18.  
    19.     public void setTotalCount(int totalCount) {
    20.         this.totalCount = totalCount;
    21.     }
    22.  
    23.     public int getTotalPage() {
    24.         return totalPage;
    25.     }
    26.  
    27.     public void setTotalPage(int totalPage) {
    28.         this.totalPage = totalPage;
    29.     }
    30.  
    31.     public List getList() {
    32.         return list;
    33.     }
    34.  
    35.     public void setList(List list) {
    36.         this.list = list;
    37.     }
    38.  
    39.     public int getCurrentPage() {
    40.         return currentPage;
    41.     }
    42.  
    43.     public void setCurrentPage(int currentPage) {
    44.         this.currentPage = currentPage;
    45.     }
    46.  
    47.     public int getRows() {
    48.         return rows;
    49.     }
    50.  
    51.     public void setRows(int rows) {
    52.         this.rows = rows;
    53.     }
    54.  
    55.     @Override
    56.     public String toString() {
    57.         return "PageBean{" +
    58.                 "totalCount=" + totalCount +
    59.                 ", totalPage=" + totalPage +
    60.                 ", list=" + list +
    61.                 ", currentPage=" + currentPage +
    62.                 ", rows=" + rows +
    63.                 '}';
    64.     }
    65. }


    ②.创建servlet工具类：
    其中包含：
    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";
            }

    2.获取条件查询参数：

     Map condition = request.getParameterMap();


     3.调用service查询
            UserService service = new UserServiceImpl();
            PageBean pb = service.findUserByPage(currentPage,rows,condition);

            System.out.println(pb);

      4.将PageBean存入request

            request.setAttribute("pb",pb);
            request.setAttribute("condition",condition);//将查询条件存入request
            //4.转发到list.jsp
            request.getRequestDispatcher("/list.jsp").forward(request,response);

    1. package itcast.web.servlet;
    2.  
    3.  
    4.  
    5. import itcast.domain.PageBean;
    6. import itcast.domain.User;
    7. import itcast.service.UserService;
    8. import itcast.service.impl.UserServiceImpl;
    9.  
    10. import javax.servlet.ServletException;
    11. import javax.servlet.annotation.WebServlet;
    12. import javax.servlet.http.HttpServlet;
    13. import javax.servlet.http.HttpServletRequest;
    14. import javax.servlet.http.HttpServletResponse;
    15. import java.io.IOException;
    16. import java.util.Map;
    17.  
    18. @WebServlet("/findUserByPageServlet")
    19. public class  FindUserByPageServlet extends HttpServlet {
    20.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    21.         request.setCharacterEncoding("utf-8");
    22.  
    23.         //1.获取参数
    24.         String currentPage = request.getParameter("currentPage");//当前页码
    25.         String rows = request.getParameter("rows");//每页显示条数
    26.  
    27.         if(currentPage == null || "".equals(currentPage)){
    28.  
    29.             currentPage = "1";
    30.         }
    31.  
    32.  
    33.         if(rows == null || "".equals(rows)){
    34.             rows = "5";
    35.         }
    36.         
    37.         //获取条件查询参数
    38.         Map condition = request.getParameterMap();
    39.  
    40.  
    41.         //2.调用service查询
    42.         UserService service = new UserServiceImpl();
    43.         PageBean pb = service.findUserByPage(currentPage,rows,condition);
    44.  
    45.         System.out.println(pb);
    46.  
    47.         //3.将PageBean存入request
    48.         request.setAttribute("pb",pb);
    49.         request.setAttribute("condition",condition);//将查询条件存入request
    50.         //4.转发到list.jsp
    51.         request.getRequestDispatcher("/list.jsp").forward(request,response);
    52.     }
    53.  
    54.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    55.         this.doPost(request, response);
    56.     }
    57. }

    ③相关方法：
    bll服务层：

     public PageBean findUserByPage(String _currentPage, String _rows, Map condition) {

            int currentPage = Integer.parseInt(_currentPage);
            int rows = Integer.parseInt(_rows);

            if(currentPage <=0) {
                currentPage = 1;
            }
            //1.创建空的PageBean对象
            PageBean pb = new PageBean();
            //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 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;
        }

    Dao层：

     public int findTotalCount(Map condition) {
            //1.定义模板初始化sql
            String sql = "select count(*) from user001 where 1 = 1 ";
            StringBuilder sb = new StringBuilder(sql);
            //2.遍历map
            Set keySet = condition.keySet();
            //定义参数的集合
            List params = new ArrayList();
            for (String key : keySet) {

                //排除分页条件参数
                if("currentPage".equals(key) || "rows".equals(key)){
                    continue;
                }

                //获取value
                String 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());
        }


      public List findByPage(int start, int rows, Map condition) {
            String sql = "select * from user001  WHERE 1 = 1 ";

            StringBuilder sb = new StringBuilder(sql);
            //2.遍历map
            Set keySet = condition.keySet();
            //定义参数的集合
            List params = new ArrayList();
            for (String key : keySet) {

                //排除分页条件参数
                if("currentPage".equals(key) || "rows".equals(key)){
                    continue;
                }

                //获取value
                String 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.class),params.toArray());
        }

    而查询页面的样式和布局可以从boostrap官网上寻找喜欢的表单样式：

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

    注：

    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

    此条语句要导入JSTL的jar包。

    jstl有什么作用？

    1、以一种统一的方式减少了JSP中的Scriptlets代码数量，可以达到程序中没有任何Scriptlest代码

    2、将业务封装到JSTL可以很方便的重用。

    3、将数据与显示分离。

    4、简化了JSP和Web应用程序的开发，并且使得JSP页面的编程风格统一、易于维护。

    5、允许JSP设计工具与Web应用程序开发的进一步集成

    例如本次综合练习的修改

    ……

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    3. html>
    5. <html lang="zh-CN">
    6.     <head>
    7.         
    8.         <meta charset="utf-8">
    9.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
    10.         <meta name="viewport" content="width=device-width, initial-scale=1">
    11.         <title>修改用户title>
    12.  
    13.         <link href="css/bootstrap.min.css" rel="stylesheet">
    14.         <script src="js/jquery-2.1.0.min.js">script>
    15.         <script src="js/bootstrap.min.js">script>
    16.         
    17.     head>
    18.     <body>
    19.         <div class="container" style="width: 400px;">
    20.         <h3 style="text-align: center;">修改联系人h3>
    21.         <form action="${pageContext.request.contextPath}/updateUserServlet" method="post">
    22.             
    23.             <input type="hidden" name="id" value="${user.id}">
    24.  
    25.           <div class="form-group">
    26.             <label for="name">姓名：label>
    27.             <input type="text" class="form-control" id="name" name="name"  value="${user.name}" readonly="readonly" placeholder="请输入姓名" />
    28.           div>
    29.  
    30.           <div class="form-group">
    31.             <label>性别：label>
    32.               <c:if test="${user.gender == '男'}">
    33.                   <input type="radio" name="gender" value="男" checked />男
    34.                   <input type="radio" name="gender" value="女"  />女
    35.               c:if>
    36.  
    37.               <c:if test="${user.gender == '女'}">
    38.                   <input type="radio" name="gender" value="男"  />男
    39.                   <input type="radio" name="gender" value="女" checked  />女
    40.               c:if>
    41.  
    42.  
    43.           div>
    44.  
    45.           <div class="form-group">
    46.             <label for="age">年龄：label>
    47.             <input type="text" class="form-control" value="${user.age}" id="age"  name="age" placeholder="请输入年龄" />
    48.           div>
    49.  
    50.           <div class="form-group">
    51.             <label for="address">籍贯：label>
    52.              <select name="address" id="address" class="form-control" >
    53.                  <c:if test="${user.address =='四川'}">
    54.                     <option value="陕西" selected>陕西option>
    55.                     <option value="北京">北京option>
    56.                     <option value="上海">上海option>
    57.                      <option value="大理">大理option>
    58.                      <option value="四川">四川option>
    59.                  c:if>
    60.                  <c:if test="${user.address =='大理'}">
    61.                      <option value="陕西" selected>陕西option>
    62.                      <option value="北京">北京option>
    63.                      <option value="上海">上海option>
    64.                      <option value="大理">大理option>
    65.                      <option value="四川">四川option>
    66.                  c:if>
    67.  
    68.                  <c:if test="${user.address == '北京'}">
    69.                      <option value="陕西" selected>陕西option>
    70.                      <option value="四川">四川option>
    71.                      <option value="上海">上海option>
    72.                      <option value="大理">大理option>
    73.                      <option value="北京">北京option>
    74.                  c:if>
    75.  
    76.                  <c:if test="${user.address == '上海'}">
    77.                      <option value="陕西" selected>陕西option>
    78.                      <option value="四川">四川option>
    79.                      <option value="上海">上海option>
    80.                      <option value="大理">大理option>
    81.                      <option value="北京">北京option>
    82.                  c:if>
    83.                  <c:if test="${user.address =='陕西'}">
    84.                      <option value="陕西" selected>陕西option>
    85.                      <option value="北京">北京option>
    86.                      <option value="上海">上海option>
    87.                      <option value="大理">大理option>
    88.                      <option value="四川">四川option>
    89.                  c:if>
    90.                  <c:if test="${user.address !=null}">
    91.                      <option value="陕西" selected>陕西option>
    92.                      <option value="北京">北京option>
    93.                      <option value="上海">上海option>
    94.                      <option value="大理">大理option>
    95.                      <option value="四川">四川option>
    96.                  c:if>
    97.             select>
    98.           div>
    99.  
    100.           <div class="form-group">
    101.             <label for="qq">QQ：label>
    102.             <input type="text" id="qq" class="form-control" value="${user.qq}" name="qq" placeholder="请输入QQ号码"/>
    103.           div>
    104.  
    105.           <div class="form-group">
    106.             <label for="email">Email：label>
    107.             <input type="text" id="email" class="form-control" value="${user.email}" name="email" placeholder="请输入邮箱地址"/>
    108.           div>
    109.  
    110.              <div class="form-group" style="text-align: center">
    111.                 <input class="btn btn-primary" type="submit" value="提交" />
    112.                 <input class="btn btn-default" type="reset" value="重置" />
    113.                 <input class="btn btn-default" type="button" value="返回"/>
    114.              div>
    115.         form>
    116.         div>
    117.     body>
    118. html>

    数据：

    书写本次综合练习需要的jar包如下：

     

     

  • 相关阅读:
    【历史上的今天】6 月 24 日：网易成立；首届消费电子展召开；世界上第一次网络直播
    加州法案提议在州一级监管人工智能
    Git 版本控制
    【Web】浅聊Hessian异常toString姿势学习&复现
    Maven的安装与配置(详细版)
    如何彻底禁止 macOS Monterey 自动更新，去除更新标记和通知
    CNNVD发布微软多个安全漏洞，涉高危及以上等级漏洞56个
    CLion 2023：专注于C和C++编程的智能IDE mac/win版
    EasyCVR服务private.pem文件被清空，导致无法正常启动该如何处理？
    VBA_MF系列技术资料1-192
  • 原文地址：https://blog.csdn.net/akisi/article/details/126260319