书城项目

1. 第一阶段：表单验证

验证用户名：必须由字母，数字下划线组成，并且长度为 5 到 12 位

验证密码：必须由字母，数字下划线组成，并且长度为 5 到 12 位

验证确认密码：和密码相同

邮箱验证：xxxxx@xxx.com

验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。

代码示例

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>尚硅谷会员注册页面</title>
  6.         <link type="text/css" rel="stylesheet" href="../../static/css/style.css" >
  7.         <script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
  8.         <script type="text/javascript">
  9.             // 页面加载完成之后
  10.             $(function () {
  11.                 // 给注册绑定单击事件
  12.                 $("#sub_btn").click(function () {
  13.                     // 验证用户名：必须由字母，数字下划线组成，并且长度为5到12位
  14.                     //1 获取用户名输入框里的内容
  15.                     var usernameText = $("#username").val();
  16.                     //2 创建正则表达式对象
  17.                     var usernamePatt = /^\w{5,12}$/;
  18.                     //3 使用test方法验证
  19.                     if (!usernamePatt.test(usernameText)) {
  20.                         //4 提示用户结果
  21.                         $("span.errorMsg").text("用户名不合法！");
  23.                         return false;
  24.                     }
  26.                     // 验证密码：必须由字母，数字下划线组成，并且长度为5到12位
  27.                     //1 获取用户名输入框里的内容
  28.                     var passwordText = $("#password").val();
  29.                     //2 创建正则表达式对象
  30.                     var passwordPatt = /^\w{5,12}$/;
  31.                     //3 使用test方法验证
  32.                     if (!passwordPatt.test(passwordText)) {
  33.                         //4 提示用户结果
  34.                         $("span.errorMsg").text("密码不合法！");
  36.                         return false;
  37.                     }
  39.                     // 验证确认密码：和密码相同
  40.                     //1 获取确认密码内容
  41.                     var repwdText = $("#repwd").val();
  42.                     //2 和密码相比较
  43.                     if (repwdText != passwordText) {
  44.                         //3 提示用户
  45.                         $("span.errorMsg").text("确认密码和密码不一致！");
  47.                         return false;
  48.                     }
  50.                     // 邮箱验证：xxxxx@xxx.com
  51.                     //1 获取邮箱里的内容
  52.                     var emailText = $("#email").val();
  53.                     //2 创建正则表达式对象
  54.                     var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
  55.                     //3 使用test方法验证是否合法
  56.                     if (!emailPatt.test(emailText)) {
  57.                         //4 提示用户
  58.                         $("span.errorMsg").text("邮箱格式不合法！");
  60.                         return false;
  61.                     }
  63.                     // 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
  64.                     var codeText = $("#code").val();
  66.                     //去掉验证码前后空格
  67.                     // alert("去空格前：["+codeText+"]")
  68.                     codeText = $.trim(codeText);
  69.                     // alert("去空格后：["+codeText+"]")
  71.                     if (codeText == null || codeText == "") {
  72.                         //4 提示用户
  73.                         $("span.errorMsg").text("验证码不能为空！");
  75.                         return false;
  76.                     }
  78.                     // 去掉错误信息
  79.                     $("span.errorMsg").text("");
  81.                 });
  83.             });
  85.         </script>
  86.     <style type="text/css">
  87.         .login_form{
  88.             height:420px;
  89.             margin-top: 25px;
  90.         }
  92.     </style>
  93.     </head>
  94.     <body>
  95.         <div id="login_header">
  96.             <img class="logo_img" alt="" src="../../static/img/logo.gif" >
  97.         </div>
  99.             <div class="login_banner">
  101.                 <div id="l_content">
  102.                     <span class="login_word">欢迎注册</span>
  103.                 </div>
  105.                 <div id="content">
  106.                     <div class="login_form">
  107.                         <div class="login_box">
  108.                             <div class="tit">
  109.                                 <h1>注册尚硅谷会员</h1>
  110.                                 <span class="errorMsg"></span>
  111.                             </div>
  112.                             <div class="form">
  113.                                 <form action="http://localhost:8080">
  114.                                     <label>用户名称：</label>
  115.                                     <input class="itxt" type="text" placeholder="请输入用户名"
  116.                                            autocomplete="off" tabindex="1" name="username" id="username" />
  117.                                     <br />
  118.                                     <br />
  119.                                     <label>用户密码：</label>
  120.                                     <input class="itxt" type="password" placeholder="请输入密码"
  121.                                            autocomplete="off" tabindex="1" name="password" id="password" />
  122.                                     <br />
  123.                                     <br />
  124.                                     <label>确认密码：</label>
  125.                                     <input class="itxt" type="password" placeholder="确认密码"
  126.                                            autocomplete="off" tabindex="1" name="repwd" id="repwd" />
  127.                                     <br />
  128.                                     <br />
  129.                                     <label>电子邮件：</label>
  130.                                     <input class="itxt" type="text" placeholder="请输入邮箱地址"
  131.                                            autocomplete="off" tabindex="1" name="email" id="email" />
  132.                                     <br />
  133.                                     <br />
  134.                                     <label>验证码：</label>
  135.                                     <input class="itxt" type="text" style="width: 150px;" id="code"/>
  136.                                     <img alt="" src="../../static/img/code.bmp" style="float: right; margin-right: 40px">
  137.                                     <br />
  138.                                     <br />
  139.                                     <input type="submit" value="注册" id="sub_btn" />
  140.                                 </form>
  141.                             </div>
  143.                         </div>
  144.                     </div>
  145.                 </div>
  146.             </div>
  147.         <div id="bottom">
  148.             <span>
  149.                 尚硅谷书城.Copyright &copy;2015
  150.             </span>
  151.         </div>
  152.     </body>
  153. </html>

2. 第二阶段：用户注册和登陆

2.1. JavaEE项目的三层架构

书城项目 - 图1

分层的目的是为了解耦。解耦就是为了降低代码的耦合度。方便项目后期的维护和升级。

web 层 com.atguigu.web/servlet/controller

service 层 com.atguigu.service Service 接口包

  1.                                          com.atguigu.service.impl                                                 Service 接口实现类

dao 持久层 com.atguigu.dao Dao 接口包

  1.                                          com.atguigu.dao.impl                                                       Dao 接口实现类

实体 bean 对象 com.atguigu.pojo/entity/domain/bean JavaBean 类

测试包 com.atguigu.test/junit

工具类 com.atguigu.utils

2.2. 搭建书城项目开发环境

书城项目 - 图2

2.3. 先创建书城需要的数据库和表。

  1. drop database if exists book;
  2. create database book;
  3. use book;
  4. create table t_user(
  5. `id` int primary key auto_increment,
  6. `username` varchar(20) not null unique,
  7. `password` varchar(32) not null,
  8. `email` varchar(200)
  9. );
  10. insert into t_user(`username`,`password`,`email`) values('admin','admin','admin@atguigu.com');
  11. select * from t_user;

2.4. 编写数据库表对应的 JavaBean 对象

  1. package com.atguigu.pojo;
  3. public class User {
  4.     private Integer id;
  5.     private String username;
  6.     private String password;
  7.     private String email;
  9.     public Integer getId() {
  10.         return id;
  11.     }
  13.     public void setId(Integer id) {
  14.         this.id = id;
  15.     }
  17.     public String getUsername() {
  18.         return username;
  19.     }
  21.     public void setUsername(String username) {
  22.         this.username = username;
  23.     }
  25.     public String getPassword() {
  26.         return password;
  27.     }
  29.     public void setPassword(String password) {
  30.         this.password = password;
  31.     }
  33.     public String getEmail() {
  34.         return email;
  35.     }
  37.     public void setEmail(String email) {
  38.         this.email = email;
  39.     }
  41.     @Override
  42.     public String toString() {
  43.         return "User{" +
  44.                 "id=" + id +
  45.                 ", username='" + username + '\'' +
  46.                 ", password='" + password + '\'' +
  47.                 ", email='" + email + '\'' +
  48.                 '}';
  49.     }
  51.     public User() {
  52.     }
  54.     public User(Integer id, String username, String password, String email) {
  55.         this.id = id;
  56.         this.username = username;
  57.         this.password = password;
  58.         this.email = email;
  59.     }
  60. }

2.5. 编写工具类 JdbcUtils

2.5.1. 导入需要的jar包(数据库连接池和mysql数据库驱动)

druid-1.1.9.jar

mysql-connector-java-5.1.7-bin.jar

以下是测试需要：

hamcrest-core-1.3.jar

junit-4.12.jar

2.5.2. 在 src 源码目录下编写 jdbc.properties 属性配置文件

  1. username=root
  2. password=root
  3. url=jdbc:mysql://localhost:3306/book
  4. driverClassName=com.mysql.jdbc.Driver
  5. initialSize=5
  6. maxActive=10

2.5.3. 编写 JdbcUtils 工具类

  1. public class JdbcUtils {
  3.     private static DruidDataSource dataSource;
  5.     static {
  6.         try {
  7.             Properties properties = new Properties();
  8.             // 读取 jdbc.properties属性配置文件
  9.             InputStream inputStream = JdbcUtils.class.getClassLoader().getResourceAsStream("jdbc.properties");
  10.             // 从流中加载数据
  11.             properties.load(inputStream);
  12.             // 创建 数据库连接 池
  13.             dataSource = (DruidDataSource) DruidDataSourceFactory.createDataSource(properties);
  14.         } catch (Exception e) {
  15.             e.printStackTrace();
  16.         }
  18.     }
  20.     /**
  21.      * 获取数据库连接池中的连接
  22.      * @return 如果返回null,说明获取连接失败<br/>有值就是获取连接成功
  23.      */
  24.     public static Connection getConnection(){
  26.         Connection conn = null;
  28.         try {
  29.             conn = dataSource.getConnection();
  30.         } catch (Exception e) {
  31.             e.printStackTrace();
  32.         }
  34.         return conn;
  35.     }
  37.     /**
  38.      * 关闭连接，放回数据库连接池
  39.      * @param conn
  40.      */
  41.     public static void close(Connection conn){
  42.         if (conn != null) {
  43.             try {
  44.                 conn.close();
  45.             } catch (SQLException e) {
  46.                 e.printStackTrace();
  47.             }
  48.         }
  49.     }
  51. }

2.5.4. JdbcUtils测试

  1. public class JdbcUtilsTest {
  2.     @Test
  3.     public void testJdbcUtils(){
  4.     for (int i = 0; i < 100; i++){
  5.         Connection connection = JdbcUtils.getConnection();
  6.         System.out.println(connection);
  7.         JdbcUtils.close(connection);
  8.         }
  9.     }
  10. }

2.6. 编写BaseDao

2.6.1. 导入DBUtils的jar包

commons-dbutils-1.3.jar

2.6.2. 编写BaseDao

  1. public abstract class BaseDao {
  3.     //使用DbUtils操作数据库
  4.     private QueryRunner queryRunner = new QueryRunner();
  6.     /**
  7.      * update() 方法用来执行：Insert\Update\Delete语句
  8.      *
  9.      * @return 如果返回-1,说明执行失败<br/>返回其他表示影响的行数
  10.      */
  11.     public int update(String sql, Object... args) {
  12.         Connection connection = JdbcUtils.getConnection();
  13.         try {
  14.             return queryRunner.update(connection, sql, args);
  15.         } catch (SQLException e) {
  16.             e.printStackTrace();
  17.         } finally {
  18.             JdbcUtils.close(connection);
  19.         }
  20.         return -1;
  21.     }
  23.     /**
  24.      * 查询返回一个javaBean的sql语句
  25.      *
  26.      * @param type 返回的对象类型
  27.      * @param sql  执行的sql语句
  28.      * @param args sql对应的参数值
  29.      * @param <T>  返回的类型的泛型
  30.      * @return
  31.      */
  32.     public <T> T queryForOne(Class<T> type, String sql, Object... args) {
  33.         Connection con = JdbcUtils.getConnection();
  34.         try {
  35.             return queryRunner.query(con, sql, new BeanHandler<T>(type), args);
  36.         } catch (SQLException e) {
  37.             e.printStackTrace();
  38.         } finally {
  39.             JdbcUtils.close(con);
  40.         }
  41.         return null;
  42.     }
  44.     /**
  45.      * 查询返回多个javaBean的sql语句
  46.      *
  47.      * @param type 返回的对象类型
  48.      * @param sql  执行的sql语句
  49.      * @param args sql对应的参数值
  50.      * @param <T>  返回的类型的泛型
  51.      * @return
  52.      */
  53.     public <T> List<T> queryForList(Class<T> type, String sql, Object... args) {
  54.         Connection con = JdbcUtils.getConnection();
  55.         try {
  56.             return queryRunner.query(con, sql, new BeanListHandler<T>(type), args);
  57.         } catch (SQLException e) {
  58.             e.printStackTrace();
  59.         } finally {
  60.             JdbcUtils.close(con);
  61.         }
  62.         return null;
  63.     }
  65.     /**
  66.      * 执行返回一行一列的sql语句
  67.      * @param sql   执行的sql语句
  68.      * @param args  sql对应的参数值
  69.      * @return
  70.      */
  71.     public Object queryForSingleValue(String sql, Object... args){
  73.         Connection conn = JdbcUtils.getConnection();
  75.         try {
  76.             return queryRunner.query(conn, sql, new ScalarHandler(), args);
  77.         } catch (Exception e) {
  78.             e.printStackTrace();
  79.         } finally {
  80.             JdbcUtils.close(conn);
  81.         }
  82.         return null;
  84.     }
  86. }

2.7. 编写UserDao和测试

UserDao接口

  1. public interface UserDao {
  5.     /**
  6.      * 根据用户名查询用户信息
  7.      * @param username 用户名
  8.      * @return 如果返回null,说明没有这个用户。反之亦然
  9.      */
  10.     public User queryUserByUsername(String username);
  12.     /**
  13.      * 根据 用户名和密码查询用户信息
  14.      * @param username
  15.      * @param password
  16.      * @return 如果返回null,说明用户名或密码错误,反之亦然
  17.      */
  18.     public User queryUserByUsernameAndPassword(String username,String password);
  20.     /**
  21.      * 保存用户信息
  22.      * @param user
  23.      * @return 返回-1表示操作失败，其他是sql语句影响的行数
  24.      */
  25.     public int saveUser(User user);
  27. }

UserDaoImpl

  1. public class UserDaoImpl extends BaseDao implements UserDao {
  2.     @Override
  3.     public User queryUserByUsername(String username) {
  4.         String sql = "select `id`,`username`,`password`,`email` from t_user where username = ?";
  5.         return queryForOne(User.class, sql, username);
  6.     }
  8.     @Override
  9.     public User queryUserByUsernameAndPassword(String username, String password) {
  10.         String sql = "select `id`,`username`,`password`,`email` from t_user where username = ? and password = ?";
  11.         return queryForOne(User.class, sql, username,password);
  12.     }
  14.     @Override
  15.     public int saveUser(User user) {
  16.         String sql = "insert into t_user(`username`,`password`,`email`) values(?,?,?)";
  17.         return update(sql, user.getUsername(),user.getPassword(),user.getEmail());
  18.     }
  19. }

测试UserDaoImpl

  1. public class UserDaoTest {
  3.     UserDao userDao = new UserDaoImpl();
  5.     @Test
  6.     public void queryUserByUsername() {
  8.         if (userDao.queryUserByUsername("admin1234") == null ){
  9.             System.out.println("用户名可用！");
  10.         } else {
  11.             System.out.println("用户名已存在！");
  12.         }
  13.     }
  15.     @Test
  16.     public void queryUserByUsernameAndPassword() {
  17.         if ( userDao.queryUserByUsernameAndPassword("admin","admin1234") == null) {
  18.             System.out.println("用户名或密码错误，登录失败");
  19.         } else {
  20.             System.out.println("查询成功");
  21.         }
  22.     }
  24.     @Test
  25.     public void saveUser() {
  26.         System.out.println( userDao.saveUser(new User(null,"wzg168", "123456", "wzg168@qq.com")) );
  27.     }
  28. }

2.8. 编写UserService和测试

UserService接口

  1. public interface UserService {
  2.     /**
  3.      * 注册用户
  4.      * @param user
  5.      */
  6.     public void registUser(User user);
  8.     /**
  9.      * 登录
  10.      * @param user
  11.      * @return 如果返回null，说明登录失败，返回有值，是登录成功
  12.      */
  13.     public User login(User user);
  15.     /**
  16.      * 检查 用户名是否可用
  17.      * @param username
  18.      * @return 返回true表示用户名已存在，返回false表示用户名可用
  19.      */
  20.     public boolean existsUsername(String username);
  21. }

UserServiceImpl实现类

  1. public class UserServiceImpl implements UserService {
  3.     private UserDao userDao = new UserDaoImpl();
  5.     @Override
  6.     public void registUser(User user) {
  7.         userDao.saveUser(user);
  8.     }
  10.     @Override
  11.     public User login(User user) {
  12.         return userDao.queryUserByUsernameAndPassword(user.getUsername(), user.getPassword());
  13.     }
  15.     @Override
  16.     public boolean existsUsername(String username) {
  18.         if (userDao.queryUserByUsername(username) == null) {
  19.            // 等于null,说明没查到，没查到表示可用
  20.            return false;
  21.         }
  23.         return true;
  25.     }
  26. }

UserService测试

  1. public class UserServiceTest {
  3.     UserService userService = new UserServiceImpl();
  5.     @Test
  6.     public void registUser() {
  7.         userService.registUser(new User(null, "bbj168", "666666", "bbj168@qq.com"));
  8.         userService.registUser(new User(null, "abc168", "666666", "abc168@qq.com"));
  9.     }
  11.     @Test
  12.     public void login() {
  13.         System.out.println( userService.login(new User(null, "wzg168", "123456", null)) );
  14.     }
  16.     @Test
  17.     public void existsUsername() {
  18.         if (userService.existsUsername("wzg16888")) {
  19.             System.out.println("用户名已存在！");
  20.         } else {
  21.             System.out.println("用户名可用！");
  22.         }
  23.     }
  24. }

2.9. 实现用户注册的功能

2.9.1. 图解用户注册的流程

书城项目 - 图3

2.9.2. 修改 regist.html 和 regist_success.html 页面

1、添加 base 标签

  1. <!--写 base 标签，永远固定相对路径跳转的结果-->
  2. <base href="http://localhost:8080/book/">

注意：最后一个/不能省略

2、修改 base 标签对页面中所有相对路径的影响（浏览器 F12，哪个报红，改哪个）

以下是几个修改的示例：

  1. <link type="text/css" rel="stylesheet" href="static/css/style.css" >
  2. <script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>

3、修改注册表单的提交地址和请求方式

书城项目 - 图4

2.9.3. 编写RegisterServlet程序

  1. public class RegistServlet extends HttpServlet {
  3.     private UserService userService = new UserServiceImpl();
  5.     @Override
  6.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  7.         //  1、获取请求的参数
  8.         String username = req.getParameter("username");
  9.         String password = req.getParameter("password");
  10.         String email = req.getParameter("email");
  11.         String code = req.getParameter("code");
  13. //        2、检查 验证码是否正确  === 写死,要求验证码为:abcde
  14.         if ("abcde".equalsIgnoreCase(code)) {
  15. //        3、检查 用户名是否可用
  16.             if (userService.existsUsername(username)) {
  17.                 System.out.println("用户名[" + username + "]已存在!");
  18. //        跳回注册页面
  19.                 req.getRequestDispatcher("/pages/user/regist.html").forward(req, resp);
  20.             } else {
  21.                 //      可用
  22. //                调用Sservice保存到数据库
  23.                 userService.registUser(new User(null, username, password, email));
  24. //
  25. //        跳到注册成功页面 regist_success.html
  26.                 req.getRequestDispatcher("/pages/user/regist_success.html").forward(req, resp);
  27.             }
  28.         } else {
  29.             System.out.println("验证码[" + code + "]错误");
  30.             req.getRequestDispatcher("/pages/user/regist.html").forward(req, resp);
  31.         }
  32.     }
  33. }

2.10. IDEA中Debug调试的使用

2.10.1. Debug 调试代码，首先需要两个元素：断点 + Debug 启动服务器

1、断点，只需要在代码需要停的行的左边上单击，就可以添加和取消

2、Debug 启动 Tomcat 运行代码：

书城项目 - 图5

2.10.2. 测试工具栏

书城项目 - 图6

2.10.3. 变量窗口

变量窗口：它可以查看当前方法范围内所有有效的变量。

书城项目 - 图7

2.10.4. 方法调用栈窗口

1、方法调用栈可以查看当前线程有哪些方法调用信息

2、下面的调用上一行的方法

书城项目 - 图8

2.10.5. 其他常用调试相关按钮：

书城项目 - 图9

2.11. 用户登录功能的实现

2.11.1. 图解用户登陆

书城项目 - 图10

2.11.2. 修改 login.html 页面和 login_success.html 页面

1、添加 base 标签

  1. <!--写 base 标签，永远固定相对路径跳转的结果-->
  2. <base href="http://localhost:8080/book/">

2、修改 base 标签对页面中所有相对路径的影响（浏览器 F12，哪个报红，改哪个） 以下是几个修改的示例：

  1. <link type="text/css" rel="stylesheet" href="static/css/style.css" >
  2. <script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>

3、修改 login.html 表单的提交地址和请求方式

书城项目 - 图11

2.11.3. 编写LoginServlet程序

  1. public class LoginServlet extends HttpServlet {
  3.     private UserService userService = new UserServiceImpl();
  5.     @Override
  6.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  7.         //  1、获取请求的参数
  8.         String username = req.getParameter("username");
  9.         String password = req.getParameter("password");
  10.         // 调用 userService.login()登录处理业务
  11.         User loginUser = userService.login(new User(null, username, password, null));
  12.         // 如果等于null,说明登录 失败!
  13.         if (loginUser == null) {
  14.             //   跳回登录页面
  15.             req.getRequestDispatcher("/pages/user/login.html").forward(req, resp);
  16.         } else {
  17.             // 登录 成功
  18.             //跳到成功页面login_success.html
  19.             req.getRequestDispatcher("/pages/user/login_success.html").forward(req, resp);
  20.         }
  21.     }
  22. }

3. 第三阶段

3.1. 页面jsp动态化

  1. 在 html 页面顶行添加 page 指令。

  2. 修改文件后缀名为：.jsp

  3. 使用 IDEA 搜索替换.html 为.jsp(快捷键：Ctrl+Shift+R)

书城项目 - 图12

3.2. 抽取页面中相同的内容

3.2.1. head 中 css、jquery、base 标签

  1. <%
  2.     String basePath = request.getScheme()
  3.     + "://"
  4.     + request.getServerName()
  5.     + ":"
  6.     + request.getServerPort()
  7.     + request.getContextPath()
  8.     + "/";
  9. %>
  10. <%=basePath%>
  11. <!--写 base 标签，永远固定相对路径跳转的结果-->
  12. <base href="<%=basePath%>">
  13. <link type="text/css" rel="stylesheet" href="static/css/style.css" >
  14. <script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>

3.2.2. 每个页面的页脚

  1. <div id="bottom">
  2.     <span>
  3.         尚硅谷书城.Copyright &copy;2015
  4.     </span>
  5. </div>

3.2.3. 登录成功后的菜单

  1. <div>
  2.     <span>欢迎<span class="um_span">韩总</span>光临尚硅谷书城</span>
  3.     <a href="../order/order.jsp">我的订单</a>
  4.     <a href="../../index.jsp">注销</a>&nbsp;&nbsp;
  5.     <a href="../../index.jsp">返回</a>
  6. </div>

3.2.4. manager 模块的菜单

  1. <div>
  2.     <a href="book_manager.jsp">图书管理</a>
  3.     <a href="order_manager.jsp">订单管理</a>
  4.     <a href="../../index.jsp">返回商城</a>
  5. </div>

3.3. 登录，注册错误提示，及表单回显

书城项目 - 图13

以登录回显为示例： Servlet 程序端需要添加回显信息到 Request 域中

书城项目 - 图14

jsp 页面，需要输出回显信息

书城项目 - 图15

3.4. BaseServlet 的抽取

3.4.1. 代码优化一：代码优化：合并 LoginServlet 和 RegistServlet 程序为 UserServlet 程序

书城项目 - 图16

UserServlet 程序：

  1. public class UserServlet extends HttpServlet {
  2.     private UserService userService = new UserServiceImpl();
  3.     /**
  4.     * 处理登录的功能
  5.     * @param req
  6.     * @param resp
  7.     * @throws ServletException
  8.     * @throws IOException
  9.     */
  10.     protected void login(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  11.     IOException {
  12.         // 1、获取请求的参数
  13.         String username = req.getParameter("username");
  14.         String password = req.getParameter("password");
  15.         // 调用 userService.login()登录处理业务
  16.         User loginUser = userService.login(new User(null, username, password, null));
  17.         // 如果等于 null,说明登录 失败!
  18.         if (loginUser == null) {
  19.             // 把错误信息，和回显的表单项信息，保存到 Request 域中
  20.             req.setAttribute("msg","用户或密码错误！");
  21.             req.setAttribute("username", username);
  22.             // 跳回登录页面
  23.             req.getRequestDispatcher("/pages/user/login.jsp").forward(req, resp);
  24.         } else {
  25.             // 登录 成功
  26.             //跳到成功页面 login_success.html
  27.             req.getRequestDispatcher("/pages/user/login_success.jsp").forward(req, resp);
  28.         }
  29.     }
  30.     /**
  31.     * 处理注册的功能
  32.     * @param req
  33.     * @param resp
  34.     * @throws ServletException
  35.     * @throws IOException
  36.     */
  37.     protected void regist(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  38.     IOException {
  39.         // 1、获取请求的参数
  40.         String username = req.getParameter("username");
  41.         String password = req.getParameter("password");
  42.         String email = req.getParameter("email");
  43.         String code = req.getParameter("code");
  44.         // 2、检查 验证码是否正确 === 写死,要求验证码为:abcde
  45.         if ("abcde".equalsIgnoreCase(code)) {
  46.             // 3、检查 用户名是否可用
  47.             if (userService.existsUsername(username)) {
  48.                 System.out.println("用户名[" + username + "]已存在!");
  49.                 // 把回显信息，保存到 Request 域中
  50.                 req.setAttribute("msg", "用户名已存在！！");
  51.                 req.setAttribute("username", username);
  52.                 req.setAttribute("email", email);
  53.                 // 跳回注册页面
  54.                 req.getRequestDispatcher("/pages/user/regist.jsp").forward(req, resp);
  55.             } else {
  56.                 // 可用
  57.                 // 调用 Sservice 保存到数据库
  58.                 userService.registUser(new User(null, username, password, email));
  59.                 //
  60.                 // 跳到注册成功页面 regist_success.jsp
  61.                 req.getRequestDispatcher("/pages/user/regist_success.jsp").forward(req, resp);
  62.             }
  63.         } else {
  64.             // 把回显信息，保存到 Request 域中
  65.             req.setAttribute("msg", "验证码错误！！");
  66.             req.setAttribute("username", username);
  67.             req.setAttribute("email", email);
  68.             System.out.println("验证码[" + code + "]错误");
  69.             req.getRequestDispatcher("/pages/user/regist.jsp").forward(req, resp);
  70.         }
  71.     }
  72.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  73.     IOException {
  74.         String action = req.getParameter("action");
  75.         if ("login".equals(action)) {
  76.             login(req, resp);
  77.         } else if ("regist".equals(action)) {
  78.             regist(req, resp);
  79.         }
  80.     }
  81. }

还要给 login.jsp 添加隐藏域和修改请求地址

书城项目 - 图17

给 tegist.jsp 页面添加隐藏域 action，和修改请求地址

书城项目 - 图18

3.4.2. 优化代码二：使用反射优化大量 else if 代码

  1. protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  2. IOException {
  3.     String action = req.getParameter("action");
  4.     try {
  5.         // 获取 action 业务鉴别字符串，获取相应的业务 方法反射对象
  6.         Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class,
  7.         HttpServletResponse.class);
  8.         // System.out.println(method);
  9.         // 调用目标业务 方法
  10.         method.invoke(this, req, resp);
  11.     } catch (Exception e) {
  12.         e.printStackTrace();
  13.     }
  14. }

3.4.3. 代码优化三：抽取 BaseServlet 程序。

书城项目 - 图19

BaseServlet 程序代码：

  1. public abstract class BaseServlet extends HttpServlet {
  2.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  3.     IOException {
  4.         String action = req.getParameter("action");
  5.         try {
  6.             // 获取 action 业务鉴别字符串，获取相应的业务 方法反射对象
  7.             Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class,
  8.             HttpServletResponse.class);
  9.             // System.out.println(method);
  10.             // 调用目标业务 方法
  11.             method.invoke(this, req, resp);
  12.         } catch (Exception e) {
  13.             e.printStackTrace();
  14.         }
  15.     }
  16. }

修改 UserServlet 程序继承 BaseServlet 程序。

书城项目 - 图20

3.5. 数据的封装和抽取 BeanUtils 的使用

BeanUtils 工具类，它可以一次性的把所有请求的参数注入到 JavaBean 中。

BeanUtils 工具类，经常用于把 Map 中的值注入到 JavaBean 中，或者是对象属性值的拷贝操作。

BeanUtils 它不是 Jdk 的类。而是第三方的工具类。所以需要导包。

  1. 导入需要的 jar 包：
    commons-beanutils-1.8.0.jar
    commons-logging-1.1.1.jar

  2. 编写 WebUtils 工具类使用：
    WebUtils 工具类： ```java public class WebUtils { /**

  • 把 Map 中的值注入到对应的 JavaBean 属性中。
  • @param value
  • @param bean */ public static T copyParamToBean( Map value , T bean ){
    1.   try {
    2.       System.out.println("注入之前：" + bean);
    3.       /**
    4.       * 把所有请求的参数都注入到 user 对象中
    5.       */
    6.       BeanUtils.populate(bean, value);
    7.       System.out.println("注入之后：" + bean);
    8.   } catch (Exception e) {
    9.       e.printStackTrace();
    10.   }
    11.   return bean;
    } } ```


注意点：在使用BeanUtils的时候Map中的key要和bean中的属性名对应，不然参数无法注入成功到bean中。
UserServlet

  1. public class UserServlet extends BaseServlet {
  3.     private UserService userService = new UserServiceImpl();
  5.     /**
  6.      * 处理登录的功能
  7.      *
  8.      * @param req
  9.      * @param resp
  10.      * @throws ServletException
  11.      * @throws IOException
  12.      */
  13.     protected void login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  15.         //  1、获取请求的参数
  16.         String username = req.getParameter("username");
  17.         String password = req.getParameter("password");
  18.         // 调用 userService.login()登录处理业务
  19.         User loginUser = userService.login(new User(null, username, password, null));
  20.         // 如果等于null,说明登录 失败!
  21.         if (loginUser == null) {
  22.             // 把错误信息，和回显的表单项信息，保存到Request域中
  23.             req.setAttribute("msg", "用户或密码错误！");
  24.             req.setAttribute("username", username);
  25.             //   跳回登录页面
  26.             req.getRequestDispatcher("/pages/user/login.jsp").forward(req, resp);
  27.         } else {
  28.             // 登录 成功
  29.             //跳到成功页面login_success.html
  30.             req.getRequestDispatcher("/pages/user/login_success.jsp").forward(req, resp);
  31.         }
  33.     }
  35.     /**
  36.      * 处理注册的功能
  37.      *
  38.      * @param req
  39.      * @param resp
  40.      * @throws ServletException
  41.      * @throws IOException
  42.      */
  43.     protected void regist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  45.         //  1、获取请求的参数
  46.         String username = req.getParameter("username");
  47.         String password = req.getParameter("password");
  48.         String email = req.getParameter("email");
  49.         String code = req.getParameter("code");
  51.         User user = WebUtils.copyParamToBean(req.getParameterMap(), new User());
  53. //        2、检查 验证码是否正确  === 写死,要求验证码为:abcde
  54.         if ("abcde".equalsIgnoreCase(code)) {
  55. //        3、检查 用户名是否可用
  56.             if (userService.existsUsername(username)) {
  57.                 System.out.println("用户名[" + username + "]已存在!");
  59.                 // 把回显信息，保存到Request域中
  60.                 req.setAttribute("msg", "用户名已存在！！");
  61.                 req.setAttribute("username", username);
  62.                 req.setAttribute("email", email);
  64. //        跳回注册页面
  65.                 req.getRequestDispatcher("/pages/user/regist.jsp").forward(req, resp);
  66.             } else {
  67.                 //      可用
  68. //                调用Sservice保存到数据库
  69.                 userService.registUser(new User(null, username, password, email));
  70. //
  71. //        跳到注册成功页面 regist_success.jsp
  72.                 req.getRequestDispatcher("/pages/user/regist_success.jsp").forward(req, resp);
  73.             }
  74.         } else {
  75.             // 把回显信息，保存到Request域中
  76.             req.setAttribute("msg", "验证码错误！！");
  77.             req.setAttribute("username", username);
  78.             req.setAttribute("email", email);
  80.             System.out.println("验证码[" + code + "]错误");
  81.             req.getRequestDispatcher("/pages/user/regist.jsp").forward(req, resp);
  82.         }
  84.     }
  87. }

4. 第四阶段：使用 EL 表达式修改表单回显

以登录为示例

书城项目 - 图21

5. 第五阶段：图书模块

5.1. MVC概念

MVC 全称：Model 模型、 View 视图、 Controller 控制器。

MVC 最早出现在 JavaEE 三层中的 Web 层，它可以有效的指导 Web 层的代码如何有效分离，单独工作。

View 视图：只负责数据和界面的显示，不接受任何与显示数据无关的代码，便于程序员和美工的分工合作—— JSP/HTML。

Controller 控制器：只负责接收请求，调用业务层的代码处理请求，然后派发页面，是一个“调度者”的角色——Servlet。 转到某个页面。或者是重定向到某个页面。

Model 模型：将与业务逻辑相关的数据封装为具体的 JavaBean 类，其中不掺杂任何与数据处理相关的代码—— JavaBean/domain/entity/pojo。

MVC 是一种思想

MVC 的理念是将软件代码拆分成为组件，单独开发，组合使用（目的还是为了降低耦合度）。

书城项目 - 图22

5.2. 编写图书模块的数据库表

  1. create table t_book(
  2. `id` int primary key auto_increment,
  3. `name` varchar(100),
  4. `price` decimal(11,2),
  5. `author` varchar(100),
  6. `sales` int,
  7. `stock` int,
  8. `img_path` varchar(200)
  9. );
  10. ## 插入初始化测试数据
  11. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  12. values(null , 'java 从入门到放弃' , '国哥' , 80 , 9999 , 9 , 'static/img/default.jpg');
  13. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  14. values(null , '数据结构与算法' , '严敏君' , 78.5 , 6 , 13 , 'static/img/default.jpg');
  15. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  16. values(null , '怎样拐跑别人的媳妇' , '龙伍' , 68, 99999 , 52 , 'static/img/default.jpg');
  17. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  18. values(null , '木虚肉盖饭' , '小胖' , 16, 1000 , 50 , 'static/img/default.jpg');
  19. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  20. values(null , 'C++编程思想' , '刚哥' , 45.5 , 14 , 95 , 'static/img/default.jpg');
  21. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  22. values(null , '蛋炒饭' , '周星星' , 9.9, 12 , 53 , 'static/img/default.jpg');
  23. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  24. values(null , '赌神' , '龙伍' , 66.5, 125 , 535 , 'static/img/default.jpg');
  25. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  26. values(null , 'Java 编程思想' , '阳哥' , 99.5 , 47 , 36 , 'static/img/default.jpg');
  27. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  28. values(null , 'JavaScript 从入门到精通' , '婷姐' , 9.9 , 85 , 95 , 'static/img/default.jpg');
  29. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  30. values(null , 'cocos2d-x 游戏编程入门' , '国哥' , 49, 52 , 62 , 'static/img/default.jpg');
  31. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  32. values(null , 'C 语言程序设计' , '谭浩强' , 28 , 52 , 74 , 'static/img/default.jpg');
  33. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  34. values(null , 'Lua 语言程序设计' , '雷丰阳' , 51.5 , 48 , 82 , 'static/img/default.jpg');
  35. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  36. values(null , '西游记' , '罗贯中' , 12, 19 , 9999 , 'static/img/default.jpg');
  37. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  38. values(null , '水浒传' , '华仔' , 33.05 , 22 , 88 , 'static/img/default.jpg');
  39. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  40. values(null , '操作系统原理' , '刘优' , 133.05 , 122 , 188 , 'static/img/default.jpg');
  41. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  42. values(null , '数据结构 java 版' , '封大神' , 173.15 , 21 , 81 , 'static/img/default.jpg');
  43. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  44. values(null , 'UNIX 高级环境编程' , '乐天' , 99.15 , 210 , 810 , 'static/img/default.jpg');
  45. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  46. values(null , 'javaScript 高级编程' , '国哥' , 69.15 , 210 , 810 , 'static/img/default.jpg');
  47. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  48. values(null , '大话设计模式' , '国哥' , 89.15 , 20 , 10 , 'static/img/default.jpg');
  49. insert into t_book(`id` , `name` , `author` , `price` , `sales` , `stock` , `img_path`)
  50. values(null , '人月神话' , '刚哥' , 88.15 , 20 , 80 , 'static/img/default.jpg');
  51. ## 查看表内容
  52. select id,name,author,price,sales,stock,img_path from t_book;

5.3. 编写图书模块的 JavaBean

  1. public class Book {
  2.     private Integer id;
  3.     private String name;
  4.     private String author;
  5.     private BigDecimal price;
  6.     private Integer sales;
  7.     private Integer stock;
  8.     private String imgPath = "static/img/default.jpg";
  9. }

5.4. 编写图书模块的 Dao 和测试 Dao

Dao接口

  1. public interface BookDao {
  2.     public int addBook(Book book);
  3.     public int deleteBookById(Integer id);
  4.     public int updateBook(Book book);    
  5.     public Book queryBookById(Integer id);
  6.     public List<Book> queryBooks();
  7. }

BookDaoImpl 实现类：

  1. public class BookDaoImpl extends BaseDao implements BookDao {
  2.     @Override
  3.     public int addBook(Book book) {
  4.         String sql = "insert into t_book(`name`,`author`,`price`,`sales`,`stock`,`img_path`)
  5.         values(?,?,?,?,?,?)";
  6.         return update(sql,
  7.         book.getName(),book.getAuthor(),book.getPrice(),book.getSales(),book.getStock(),book.getImgPath());
  8.     }
  9.     @Override
  10.     public int deleteBookById(Integer id) {
  11.         String sql = "delete from t_book where id = ?";
  12.         return update(sql, id);
  13.     }
  14.     @Override
  15.     public int updateBook(Book book) {
  16.         String sql = "update t_book set `name`=?,`author`=?,`price`=?,`sales`=?,`stock`=?,`img_path`=?
  17.         where id = ?";
  18.         return
  19.         update(sql,book.getName(),book.getAuthor(),book.getPrice(),book.getSales(),book.getStock(),book.ge
  20.         tImgPath(),book.getId());
  21.     }
  22.     @Override
  23.     public Book queryBookById(Integer id) {
  24.         String sql = "select `id` , `name` , `author` , `price` , `sales` , `stock` , `img_path` imgPath
  25.         from t_book where id = ?";
  26.         return queryForOne(Book.class, sql,id);
  27.     }
  28.     @Override
  29.     public List<Book> queryBooks() {
  30.         String sql = "select `id` , `name` , `author` , `price` , `sales` , `stock` , `img_path` imgPath
  31.         from t_book";
  32.         return queryForList(Book.class, sql);
  33.     }
  34. }

BookDao 的测试：

  1. public class BookDaoTest {
  2.     private BookDao bookDao = new BookDaoImpl();
  3.     @Test
  4.     public void addBook() {
  5.         bookDao.addBook(new Book(null,"国哥为什么这么帅！", "191125", new
  6.         BigDecimal(9999),1100000,0,null));
  7.     }
  8.     @Test
  9.     public void deleteBookById() {
  10.         bookDao.deleteBookById(21);
  11.     }
  12.     @Test
  13.     public void updateBook() {
  14.         bookDao.updateBook(new Book(21,"大家都可以这么帅！", "国哥", new
  15.         BigDecimal(9999),1100000,0,null
  16.         ));
  17.     }
  18.     @Test
  19.     public void queryBookById() {
  20.         System.out.println( bookDao.queryBookById(21) );
  21.     }
  22.     @Test
  23.     public void queryBooks() {
  24.         for (Book queryBook : bookDao.queryBooks()) {
  25.             System.out.println(queryBook);
  26.         }
  27.     }
  28. }

5.5. 编写图书模块的 Service 和测试 Service

BookService接口

  1. public interface BookService {
  2.     public void addBook(Book book);
  3.     public void deleteBookById(Integer id);
  4.     public void updateBook(Book book);
  5.     public Book queryBookById(Integer id);
  6.     public List<Book> queryBooks();
  7. }

BookServiceImpl 实现类：

  1. public class BookServiceImpl implements BookService {
  2.     private BookDao bookDao = new BookDaoImpl();
  3.     @Override
  4.     public void addBook(Book book) {
  5.         bookDao.addBook(book);
  6.     }
  7.     @Override
  8.     public void deleteBookById(Integer id) {
  9.         bookDao.deleteBookById(id);
  10.     }
  11.     @Override
  12.     public void updateBook(Book book) {
  13.         bookDao.updateBook(book);
  14.     }
  15.     @Override
  16.     public Book queryBookById(Integer id) {
  17.         return bookDao.queryBookById(id);
  18.     }
  19.     @Override
  20.     public List<Book> queryBooks() {
  21.         return bookDao.queryBooks();
  22.     }
  23. }

BookService 的测试：

  1. public class BookServiceTest {
  2.     private BookService bookService = new BookServiceImpl();
  3.     @Test
  4.     public void addBook() {
  5.         bookService.addBook(new Book(null,"国哥在手，天下我有！", "1125", new BigDecimal(1000000),
  6.         100000000, 0, null));
  7.     }
  8.     @Test
  9.     public void deleteBookById() {
  10.         bookService.deleteBookById(22);
  11.     }
  12.     @Test
  13.     public void updateBook() {
  14.         bookService.updateBook(new Book(22,"社会我国哥，人狠话不多！", "1125", new BigDecimal(999999),
  15.         10, 111110, null));
  16.     }
  17.     @Test
  18.     public void queryBookById() {
  19.         System.out.println(bookService.queryBookById(22));
  20.     }
  21.     @Test
  22.     public void queryBooks() {
  23.         for (Book queryBook : bookService.queryBooks()) {
  24.             System.out.println(queryBook);
  25.         }
  26.     }
  27. }

5.6. 编写图书模块的 Web 层，和页面联调测试

5.6.1. 图解列表功能流程

书城项目 - 图23

5.6.2. BookServlet 程序中添加 list 方法

  1. protected void list(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  2. IOException {
  3.     //1 通过 BookService 查询全部图书
  4.     List<Book> books = bookService.queryBooks();
  5.     //2 把全部图书保存到 Request 域中
  6.     req.setAttribute("books", books);
  7.     //3、请求转发到/pages/manager/book_manager.jsp 页面
  8.     req.getRequestDispatcher("/pages/manager/book_manager.jsp").forward(req,resp);
  9. }

再配置web.xml

  1. <servlet>
  2.         <servlet-name>BookServlet</servlet-name>
  3.         <servlet-class>com.atguigu.web.BookServlet</servlet-class>
  4.     </servlet>
  5.     <servlet-mapping>
  6.         <servlet-name>BookServlet</servlet-name>
  7.         <url-pattern>/manager/bookServlet</url-pattern>
  8.     </servlet-mapping>

5.6.3. 修改【图书管理】请求地址

书城项目 - 图24

5.6.4. 修改 pages/manager/book_manager.jsp 页面的数据遍历输出

  1. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>图书管理</title>
  8.     <%-- 静态包含 base 标签、css 样式、jQuery 文件 --%>
  9.     <%@ include file="/pages/common/head.jsp"%>
  10. </head>
  11. <body>
  12.     <div id="header">
  13.         <img class="logo_img" alt="" src="../../static/img/logo.gif" >
  14.         <span class="wel_word">图书管理系统</span>
  15.         <%-- 静态包含 manager 管理模块的菜单 --%>
  16.         <%@include file="/pages/common/manager_menu.jsp"%>
  17.     </div>
  18.     <div id="main">
  19.         <table>
  20.         <tr>
  21.             <td>名称</td>
  22.             <td>价格</td>
  23.             <td>作者</td>
  24.             <td>销量</td>
  25.             <td>库存</td>
  26.             <td colspan="2">操作</td>
  27.         </tr>
  28.         <c:forEach items="${requestScope.books}" var="book">
  29.         <tr>
  30.             <td>${book.name}</td>
  31.             <td>${book.price}</td>
  32.             <td>${book.author}</td>
  33.             <td>${book.sales}</td>
  34.             <td>${book.stock}</td>
  35.             <td><a href="book_edit.jsp">修改</a></td>
  36.             <td><a href="#">删除</a></td>
  37.         </tr>
  38.         </c:forEach>
  39.         <tr>
  40.             <td></td>
  41.             <td></td>
  42.             <td></td>
  43.             <td></td>
  44.             <td></td>
  45.             <td></td>
  46.             <td><a href="book_edit.jsp">添加图书</a></td>
  47.         </tr>
  48.         </table>
  49.     </div>
  50.     <%--静态包含页脚内容--%>
  51.     <%@include file="/pages/common/footer.jsp"%>
  52. </body>
  53. </html>

5.6.5. 前后台的简单介绍

书城项目 - 图25

5.6.6. 添加图书功能的实现

  • 添加图书流程细节：

书城项目 - 图26

  • 问题说明：表单重复提交：

当用户提交完请求，浏览器会记录下最后一次请求的全部信息。当用户按下功能键 F5，就会发起浏览器记录的最后一次 请求。

  • BookServlet 程序中添加 add 方法
  1. protected void add(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  2. IOException {
  3.     // 1、获取请求的参数==封装成为 Book 对象
  4.     Book book = WebUtils.copyParamToBean(req.getParameterMap(),new Book());
  5.     // 2、调用 BookService.addBook()保存图书
  6.     bookService.addBook(book);
  7.     // 3、跳到图书列表页面
  8.     // /manager/bookServlet?action=list
  9.     // req.getRequestDispatcher("/manager/bookServlet?action=list").forward(req, resp);
  10.     resp.sendRedirect(req.getContextPath() + "/manager/bookServlet?action=list");
  11. }

注意点：在使用BeanUtils的时候Map中的key要和bean中的属性名对应，不然参数无法注入成功到bean中。

  • 修改 book_edit.jsp 页面
  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>编辑图书</title>
  7.     <%-- 静态包含 base 标签、css 样式、jQuery 文件 --%>
  8.     <%@ include file="/pages/common/head.jsp"%>
  9.     <style type="text/css">
  10.         h1 {
  11.         text-align: center;
  12.         margin-top: 200px;
  13.         }
  14.         h1 a {
  15.         color:red;
  16.         }
  17.         input {
  18.         text-align: center;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div id="header">
  24.         <img class="logo_img" alt="" src="../../static/img/logo.gif" >
  25.         <span class="wel_word">编辑图书</span>
  26.         <%-- 静态包含 manager 管理模块的菜单 --%>
  27.         <%@include file="/pages/common/manager_menu.jsp"%>
  28.     </div>
  29.     <div id="main">
  30.     <form action="manager/bookServlet" method="get">
  31.         <input type="hidden" name="action" value="add" />
  32.         <table>
  33.             <tr>
  34.                 <td>名称</td>
  35.                 <td>价格</td>
  36.                 <td>作者</td>
  37.                 <td>销量</td>
  38.                 <td>库存</td>
  39.                 <td colspan="2">操作</td>
  40.             </tr>
  41.             <tr>
  42.                 <td><input name="name" type="text" value="时间简史"/></td>
  43.                 <td><input name="price" type="text" value="30.00"/></td>
  44.                 <td><input name="author" type="text" value="霍金"/></td>
  45.                 <td><input name="sales" type="text" value="200"/></td>
  46.                 <td><input name="stock" type="text" value="300"/></td>
  47.                 <td><input type="submit" value="提交"/></td>
  48.             </tr>
  49.         </table>
  50.     </form>
  51.     </div>
  52.     <%--静态包含页脚内容--%>
  53.     <%@include file="/pages/common/footer.jsp"%>
  54. </body>
  55. </html>

5.6.7. 删除图书功能的实现

  • 图解删除流程

书城项目 - 图27

  • BookServlet 程序中的 delete 方法：
  1. protected void delete(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  2. IOException {
  3.     // 1、获取请求的参数 id，图书编程
  4.     int id = WebUtils.parseInt(req.getParameter("id"), 0);
  5.     // 2、调用 bookService.deleteBookById();删除图书
  6.     bookService.deleteBookById(id);
  7.     // 3、重定向回图书列表管理页面
  8.     // /book/manager/bookServlet?action=list
  9.     resp.sendRedirect(req.getContextPath() + "/manager/bookServlet?action=list");
  10. }
  • 给 WebUtils 工具类添加转换 int 类型的工具方法
  1. /**
  2. * 将字符串转换成为 int 类型的数据
  3. * @param strInt
  4. * @param defaultValue
  5. * @return
  6. */
  7. public static int parseInt(String strInt,int defaultValue) {
  8.     try {
  9.         return Integer.parseInt(strInt);
  10.     } catch (Exception e) {
  11.         e.printStackTrace();
  12.     }
  13.     return defaultValue;
  14. }
  • 修改删除的连接地址：

书城项目 - 图28

  • 给删除添加确认提示操作
  1. <script type="text/javascript">
  2.     $(function () {
  3.         // 给删除的 a 标签绑定单击事件，用于删除的确认提示操作
  4.         $("a.deleteClass").click(function () {
  5.             // 在事件的 function 函数中，有一个 this 对象。这个 this 对象，是当前正在响应事件的 dom 对象。
  6.             /**
  7.             * confirm 是确认提示框函数
  8.             * 参数是它的提示内容
  9.             * 它有两个按钮，一个确认，一个是取消。
  10.             * 返回 true 表示点击了，确认，返回 false 表示点击取消。
  11.             */
  12.             return confirm("你确定要删除【" + $(this).parent().parent().find("td:first").text() + "】?");
  13.             // return false// 阻止元素的默认行为===不提交请求
  14.         });
  15.     });
  16. </script>

5.6.8. 修改图书功能的实现

  • 图解修改图书细节：

书城项目 - 图29

  • 更新【修改】的请求地址：

书城项目 - 图30

  • BookServlet 程序中添加 getBook 方法：
  1. protected void getBook(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  2. IOException {
  3.     //1 获取请求的参数图书编号
  4.     int id = WebUtils.parseInt(req.getParameter("id"), 0);
  5.     //2 调用 bookService.queryBookById 查询图书
  6.     Book book = bookService.queryBookById(id);
  7.     //3 保存到图书到 Request 域中
  8.     req.setAttribute("book", book) ;
  9.     //4 请求转发到。pages/manager/book_edit.jsp 页面
  10.     req.getRequestDispatcher("/pages/manager/book_edit.jsp").forward(req,resp);
  11. }
  • 在 book_edit.jsp页面中显示修改的数据
  1. <div id="main">
  2.     <form action="manager/bookServlet" method="get">
  3.         <input type="hidden" name="action" value="add" />
  4.         <table>
  5.             <tr>
  6.                 <td>名称</td>
  7.                 <td>价格</td>
  8.                 <td>作者</td>
  9.                 <td>销量</td>
  10.                 <td>库存</td>
  11.                 <td colspan="2">操作</td>
  12.             </tr>
  13.             <tr>
  14.                 <td><input name="name" type="text" value="${requestScope.book.name}"/></td>
  15.                 <td><input name="price" type="text" value="${requestScope.book.price}"/></td>
  16.                 <td><input name="author" type="text" value="${requestScope.book.author}"/></td>
  17.                 <td><input name="sales" type="text" value="${requestScope.book.sales}"/></td>
  18.                 <td><input name="stock" type="text" value="${requestScope.book.stock}"/></td>
  19.                 <td><input type="submit" value="提交"/></td>
  20.             </tr>
  21.         </table>
  22.     </form>
  23. </div>
  • 在 BookServlet 程序中添加 update 方法：
  1. protected void update(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  2. IOException {
  3.     // 1、获取请求的参数==封装成为 Book 对象
  4.     Book book = WebUtils.copyParamToBean(req.getParameterMap(),new Book());
  5.     // 2、调用 BookService.updateBook( book );修改图书
  6.     bookService.updateBook(book);
  7.     // 3、重定向回图书列表管理页面
  8.     // 地址：/工程名/manager/bookServlet?action=list
  9.     resp.sendRedirect(req.getContextPath() + "/manager/bookServlet?action=list");
  10. }
  • 解决 book_edit.jsp 页面，即要实现添加，又要实现修改操作

书城项目 - 图31

6. 第六阶段：图书分页

6.1. 分页模块的分析

书城项目 - 图32

6.2. 分页模型 Page 的抽取

  1. /**
  2.  * Page是分页的模型对象
  3.  * @param <T> 是具体的模块的javaBean类
  4.  */
  5. public class Page<T> {
  6.     public static final Integer PAGE_SIZE = 4;
  7.     // 当前页码
  8.     private Integer pageNo;
  9.     // 总页码
  10.     private Integer pageTotal;
  11.     // 当前页显示数量
  12.     private Integer pageSize = PAGE_SIZE;
  13.     // 总记录数
  14.     private Integer pageTotalCount;
  15.     // 当前页数据
  16.     private List<T> items;
  18.     public Integer getPageNo() {
  19.         return pageNo;
  20.     }
  22.     public void setPageNo(Integer pageNo) {
  23.         /* 数据边界的有效检查 */
  24.         if (pageNo < 1) {
  25.             pageNo = 1;
  26.         }
  27.         if (pageNo > pageTotal) {
  28.             pageNo = pageTotal;
  29.         }
  31.         this.pageNo = pageNo;
  32.     }
  34.     public Integer getPageTotal() {
  35.         return pageTotal;
  36.     }
  38.     public void setPageTotal(Integer pageTotal) {
  39.         this.pageTotal = pageTotal;
  40.     }
  42.     public Integer getPageSize() {
  43.         return pageSize;
  44.     }
  46.     public void setPageSize(Integer pageSize) {
  47.         this.pageSize = pageSize;
  48.     }
  50.     public Integer getPageTotalCount() {
  51.         return pageTotalCount;
  52.     }
  54.     public void setPageTotalCount(Integer pageTotalCount) {
  55.         this.pageTotalCount = pageTotalCount;
  56.     }
  58.     public List<T> getItems() {
  59.         return items;
  60.     }
  62.     public void setItems(List<T> items) {
  63.         this.items = items;
  64.     }
  66.     @Override
  67.     public String toString() {
  68.         return "Page{" +
  69.                 "pageNo=" + pageNo +
  70.                 ", pageTotal=" + pageTotal +
  71.                 ", pageSize=" + pageSize +
  72.                 ", pageTotalCount=" + pageTotalCount +
  73.                 ", items=" + items +
  74.                 '}';
  75.     }
  76. }

6.3. 分页的初步实现

BookDao 代码：

  1. @Override
  2. public Integer queryForPageTotalCount() {
  3.     String sql = "select count(*) from t_book";
  4.     Number count = (Number) queryForSingleValue(sql);
  5.     return count.intValue();
  6. }
  7. @Override
  8. public List<Book> queryForPageItems(int begin, int pageSize) {
  9.     String sql = "select `id` , `name` , `author` , `price` , `sales` , `stock` , `img_path` imgPath
  10.     from t_book limit ?,?";
  11.     return queryForList(Book.class,sql,begin,pageSize);
  12. }

BookService 代码：

  1. @Override
  2. public Page<Book> page(int pageNo, int pageSize) {
  3.     Page<Book> page = new Page<Book>();
  4.     // 设置当前页码
  5.     page.setPageNo(pageNo);
  6.     // 设置每页显示的数量
  7.     page.setPageSize(pageSize);
  8.     // 求总记录数
  9.     Integer pageTotalCount = bookDao.queryForPageTotalCount();
  10.     // 设置总记录数
  11.     page.setPageTotalCount(pageTotalCount);
  12.     // 求总页码
  13.     Integer pageTotal = pageTotalCount / pageSize;
  14.     if (pageTotalCount % pageSize > 0) {
  15.         pageTotal+=1;
  16.     }
  17.     // 设置总页码
  18.     page.setPageTotal(pageTotal);
  19.     // 求当前页数据的开始索引
  20.     int begin = (page.getPageNo() - 1) * pageSize;
  21.     // 求当前页数据
  22.     List<Book> items = bookDao.queryForPageItems(begin,pageSize);
  23.     // 设置当前页数据
  24.     page.setItems(items);
  25.     return page;
  26. }

BookServlet 程序的代码：

  1. /**
  2. * 处理分页功能
  3. * @param req
  4. * @param resp
  5. * @throws ServletException
  6. * @throws IOException
  7. */
  8. protected void page(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  9. IOException {
  10.     //1 获取请求的参数 pageNo 和 pageSize
  11.     int pageNo = WebUtils.parseInt(req.getParameter("pageNo"), 1);
  12.     int pageSize = WebUtils.parseInt(req.getParameter("pageSize"), Page.PAGE_SIZE);
  13.     //2 调用 BookService.page(pageNo，pageSize)：Page 对象
  14.     Page<Book> page = bookService.page(pageNo,pageSize);
  15.     //3 保存 Page 对象到 Request 域中
  16.     req.setAttribute("page",page);
  17.     //4 请求转发到 pages/manager/book_manager.jsp 页面
  18.     req.getRequestDispatcher("/pages/manager/book_manager.jsp").forward(req,resp);
  19. }

manager_menu.jsp 中【图书管理】请求地址的修改：

书城项目 - 图33

book_manager.jsp 修改：

  1. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>图书管理</title>
  8.     <%-- 静态包含 base 标签、css 样式、jQuery 文件 --%>
  9.     <%@ include file="/pages/common/head.jsp"%>
  10.     <script type="text/javascript">
  11.         $(function () {
  12.             // 给删除的 a 标签绑定单击事件，用于删除的确认提示操作
  13.             $("a.deleteClass").click(function () {
  14.             // 在事件的 function 函数中，有一个 this 对象。这个 this 对象，是当前正在响应事件的 dom 对象。
  15.             /**
  16.             * confirm 是确认提示框函数
  17.             * 参数是它的提示内容
  18.             * 它有两个按钮，一个确认，一个是取消。
  19.             * 返回 true 表示点击了，确认，返回 false 表示点击取消。
  20.             */
  21.             return confirm("你确定要删除【" + $(this).parent().parent().find("td:first").text() + "】?");
  22.             // return false// 阻止元素的默认行为===不提交请求
  23.             });
  24.         });
  25.     </script>
  26. </head>
  27. <body>
  28.     <div id="header">
  29.         <img class="logo_img" alt="" src="../../static/img/logo.gif" >
  30.         <span class="wel_word">图书管理系统</span>
  31.         <%-- 静态包含 manager 管理模块的菜单 --%>
  32.         <%@include file="/pages/common/manager_menu.jsp"%>
  33.     </div>
  34.     <div id="main">
  35.         <table>
  36.             <tr>
  37.                 <td>名称</td>
  38.                 <td>价格</td>
  39.                 <td>作者</td>
  40.                 <td>销量</td>
  41.                 <td>库存</td>
  42.                 <td colspan="2">操作</td>
  43.             </tr>
  44.             <c:forEach items="${requestScope.page.items}" var="book">
  45.             <tr>
  46.                 <td>${book.name}</td>
  47.                 <td>${book.price}</td>
  48.                 <td>${book.author}</td>
  49.                 <td>${book.sales}</td>
  50.                 <td>${book.stock}</td>
  51.                 <td><a href="manager/bookServlet?action=getBook&id=${book.id}">修改</a></td>
  52.                 <td><a class="deleteClass" href="manager/bookServlet?action=delete&id=${book.id}">删
  53.                 除</a></td>
  54.             </tr>
  55.             </c:forEach>
  56.             <tr>
  57.                 <td></td>
  58.                 <td></td>
  59.                 <td></td>
  60.                 <td></td>
  61.                 <td></td>
  62.                 <td></td>
  63.                 <td><a href="pages/manager/book_edit.jsp">添加图书</a></td>
  64.             </tr>
  65.         </table>
  66.         <div id="page_nav">
  67.             <a href="#">首页</a>
  68.             <a href="#">上一页</a>
  69.             <a href="#">3</a>
  70.             【${ requestScope.page.pageNo }】
  71.             <a href="#">5</a>
  72.             <a href="#">下一页</a>
  73.             <a href="#">末页</a>
  74.             共${ requestScope.page.pageTotal }页，${ requestScope.page.pageTotalCount }条记录
  75.             到第<input value="4" name="pn" id="pn_input"/>页
  76.             <input type="button" value="确定">
  77.         </div>
  78.     </div>
  79.     <%--静态包含页脚内容--%>
  80.     <%@include file="/pages/common/footer.jsp"%>
  81. </body>
  82. </html>

6.4. 首页、上一页、下一页、末页实现

  1. <div id="page_nav">
  2.     <%--大于首页，才显示--%>
  3.     <c:if test="${requestScope.page.pageNo > 1}">
  4.         <a href="manager/bookServlet?action=page&pageNo=1">首页</a>
  5.         <a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo-1}">上一页</a>
  6.     </c:if>
  7.     <a href="#">3</a>
  8.     【${ requestScope.page.pageNo }】
  9.     <a href="#">5</a>
  10.     <%-- 如果已经 是最后一页，则不显示下一页，末页 --%>
  11.     <c:if test="${requestScope.page.pageNo < requestScope.page.pageTotal}">
  12.         <a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo+1}">下一页</a>
  13.         <a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageTotal}">末页</a>
  14.     </c:if>
  15.     共${ requestScope.page.pageTotal }页，${ requestScope.page.pageTotalCount }条记录
  16.     到第<input value="4" name="pn" id="pn_input"/>页
  17.     <input type="button" value="确定">
  18. </div>

6.5. 分页模块中跳转到指定页数功能实现

  1. <div id="page_nav">
  2.     <%--大于首页，才显示--%>
  3.     <c:if test="${requestScope.page.pageNo > 1}">
  4.         <a href="manager/bookServlet?action=page&pageNo=1">首页</a>
  5.         <a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo-1}">上一页</a>
  6.     </c:if>
  7.     <a href="#">3</a>
  8.     【${ requestScope.page.pageNo }】
  9.     <a href="#">5</a>
  10.     <%-- 如果已经 是最后一页，则不显示下一页，末页 --%>
  11.     <c:if test="${requestScope.page.pageNo < requestScope.page.pageTotal}">
  12.         <a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageNo+1}">下一页</a>
  13.         <a href="manager/bookServlet?action=page&pageNo=${requestScope.page.pageTotal}">末页</a>
  14.     </c:if>
  15.     共${ requestScope.page.pageTotal }页，${ requestScope.page.pageTotalCount }条记录
  16.     到第<input value="${param.pageNo}" name="pn" id="pn_input"/>页
  17.     <input id="searchPageBtn" type="button" value="确定">
  18.     <script type="text/javascript">
  19.         $(function () {
  20.             // 跳到指定的页码
  21.             $("#searchPageBtn").click(function () {
  22.                 var pageNo = $("#pn_input").val();
  23.                 <%--var pageTotal = ${requestScope.page.pageTotal};--%>
  24.                 <%--alert(pageTotal);--%>
  25.                 // javaScript 语言中提供了一个 location 地址栏对象
  26.                 // 它有一个属性叫 href.它可以获取浏览器地址栏中的地址
  27.                 // href 属性可读，可写
  28.                 location.href = "${pageScope.basePath}manager/bookServlet?action=page&pageNo=" +
  29.                 pageNo;
  30.             });
  31.         });
  32.     </script>
  33. </div>

几个小问题

  1. 把basePath存放到PageContext域中

书城项目 - 图34

这里使用pageContext对象的setAttribute()方法时，IDE会报错，原因是因为确实了jsp的相关依赖，只需要在工程中导入jsp-api-2.1.jar的jar包即可，下载地址是：https://repo1.maven.org/maven2/javax/servlet/jsp/jsp-api/2.1/jsp-api-2.1.jar

  1. Page 对象中的修改：
  1. public void setPageNo(Integer pageNo) {
  2.     /* 数据边界的有效检查 */
  3.     if (pageNo < 1) {
  4.         pageNo = 1;
  5.     }
  6.     if (pageNo > pageTotal) {
  7.         pageNo = pageTotal;
  8.     }
  9.     this.pageNo = pageNo;
  10. }
  1. BookService 中page方法的修改：把原来的设置当前页码由第5行放到了第18行
  1. @Override
  2. public Page<Book> page(int pageNo, int pageSize) {
  3.     Page<Book> page = new Page<Book>();
  4.     // 设置每页显示的数量
  5.     page.setPageSize(pageSize);
  6.     // 求总记录数
  7.     Integer pageTotalCount = bookDao.queryForPageTotalCount();
  8.     // 设置总记录数
  9.     page.setPageTotalCount(pageTotalCount);
  10.     // 求总页码
  11.     Integer pageTotal = pageTotalCount / pageSize;
  12.     if (pageTotalCount % pageSize > 0) {
  13.         pageTotal+=1;
  14.     }
  15.     // 设置总页码
  16.     page.setPageTotal(pageTotal);
  17.     // 设置当前页码
  18.     page.setPageNo(pageNo);
  19.     // 求当前页数据的开始索引
  20.     int begin = (page.getPageNo() - 1) * pageSize;
  21.     // 求当前页数据
  22.     List<Book> items = bookDao.queryForPageItems(begin,pageSize);
  23.     // 设置当前页数据
  24.     page.setItems(items);
  25.     return page;
  26. }

6.6. 分页模块中，页码 1,2,【3】,4,5 的显示，要显示 5 个页 码，并且页码可以点击跳转。

需求：显示 5 个连续的页码，而且当前页码在中间。除了当前页码之外，每个页码都可以点击跳到指定页。

  • 情况 1：如果总页码小于等于 5 的情况，页码的范围是：1-总页
    1 页 1
    2 页 1，2
    3 页 1，2，3
    4 页 1，2，3，4
    5 页 1，2，3，4，5

  • 情况 2：总页码大于 5 的情况。假设一共 10

    • 小情况 1：当前页码为前面 3 个：1，2，3 的情况，页码范围是：1-5.
      【1】2，3，4，5
      1【2】3，4，5
      1，2【3】4，5

    • 小情况 2：当前页码为最后 3 个，8，9，10，页码范围是：总页码减 4 - 总页
      6，7【8】9，10
      6，7，8【9】10
      6，7，8，9【10】

    • 小情况 3：4，5，6，7，页码范围是：当前页码减 2 - 当前页码加2
      2，3，4，5，6
      3，4，5，6，7
      4，5，6，7，8
      5，6，7，8，9

  1. <%--页码输出的开始--%>
  2. <c:choose>
  3.     <%--情况 1：如果总页码小于等于 5 的情况，页码的范围是：1-总页码--%>
  4.     <c:when test="${ requestScope.page.pageTotal <= 5 }">
  5.         <c:set var="begin" value="1"/>
  6.         <c:set var="end" value="${requestScope.page.pageTotal}"/>
  7.     </c:when>
  8.     <%--情况 2：总页码大于 5 的情况--%>
  9.     <c:when test="${requestScope.page.pageTotal > 5}">
  10.         <c:choose>
  11.             <%--小情况 1：当前页码为前面 3 个：1，2，3 的情况，页码范围是：1-5.--%>
  12.             <c:when test="${requestScope.page.pageNo <= 3}">
  13.                 <c:set var="begin" value="1"/>
  14.                 <c:set var="end" value="5"/>
  15.             </c:when>
  16.             <%--小情况 2：当前页码为最后 3 个，8，9，10，页码范围是：总页码减 4 - 总页码--%>
  17.             <c:when test="${requestScope.page.pageNo > requestScope.page.pageTotal-3}">
  18.                 <c:set var="begin" value="${requestScope.page.pageTotal-4}"/>
  19.                 <c:set var="end" value="${requestScope.page.pageTotal}"/>
  20.             </c:when>
  21.             <%--小情况 3：4，5，6，7，页码范围是：当前页码减 2 - 当前页码加 2--%>
  22.             <c:otherwise>
  23.                 <c:set var="begin" value="${requestScope.page.pageNo-2}"/>
  24.                 <c:set var="end" value="${requestScope.page.pageNo+2}"/>
  25.             </c:otherwise>
  26.         </c:choose>
  27.     </c:when>
  28. </c:choose>
  29. <c:forEach begin="${begin}" end="${end}" var="i">
  30.     <c:if test="${i == requestScope.page.pageNo}">
  31.         【${i}】
  32.     </c:if>
  33.     <c:if test="${i != requestScope.page.pageNo}">
  34.         <a href="manager/bookServlet?action=page&pageNo=${i}">${i}</a>
  35.     </c:if>
  36. </c:forEach>
  37. <%--页码输出的结束--%>

6.7. 修改分页后，增加，删除，修改图书信息的回显页面

以修改图书为示例：

  • 在修改的请求地址上追加当前页码参数：

书城项目 - 图35

  • 在 book_edit.jsp 页面中使用隐藏域记录下 pageNo参数

书城项目 - 图36

  • 在服务器重定向的时候，获取当前页码追加上进行跳转
  1. protected void update(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  2. IOException {
  3.     // 1、获取请求的参数==封装成为 Book 对象
  4.     Book book = WebUtils.copyParamToBean(req.getParameterMap(),new Book());
  5.     // 2、调用 BookService.updateBook( book );修改图书
  6.     bookService.updateBook(book);
  7.     // 3、重定向回图书列表管理页面
  8.     // 地址：/工程名/manager/bookServlet?action=list
  9.     resp.sendRedirect(req.getContextPath() + "/manager/bookServlet?action=page&pageNo=" +
  10.     req.getParameter("pageNo"));
  11. }

6.8. 前台分页的初步实现

首页index.jsp的跳转

书城项目 - 图37

index.jsp只负责请求转发

  1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  2. <%--只负责请求转发--%>
  3. <jsp:forward page="/client/bookServlet?action=page"></jsp:forward>

ClientBookServlet

  1. /**
  2.      * 处理分页功能
  3.      * @param req
  4.      * @param resp
  5.      * @throws ServletException
  6.      * @throws IOException
  7.      */
  8.     protected void page(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  9.         //1 获取请求的参数 pageNo 和 pageSize
  10.         int pageNo = WebUtils.parseInt(req.getParameter("pageNo"), 1);
  11.         int pageSize = WebUtils.parseInt(req.getParameter("pageSize"), Page.PAGE_SIZE);
  12.         //2 调用BookService.page(pageNo，pageSize)：Page对象
  13.         Page<Book> page = bookService.page(pageNo,pageSize);
  15.         //3 保存Page对象到Request域中
  16.         req.setAttribute("page",page);
  17.         //4 请求转发到pages/manager/book_manager.jsp页面
  18.         req.getRequestDispatcher("/pages/client/index.jsp").forward(req,resp);
  19.     }

6.9. 分页条的抽取

6.9.1. 在 page 对象中添加 url 属性

  1. /**
  2. * Page 是分页的模型对象
  3. * @param <T> 是具体的模块的 javaBean 类
  4. */
  5. public class Page<T> {
  6.     public static final Integer PAGE_SIZE = 4;
  7.     // 当前页码
  8.     private Integer pageNo;
  9.     // 总页码
  10.     private Integer pageTotal;
  11.     // 当前页显示数量
  12.     private Integer pageSize = PAGE_SIZE;
  13.     // 总记录数
  14.     private Integer pageTotalCount;
  15.     // 当前页数据
  16.     private List<T> items;
  17.     // 分页条的请求地址
  18.     private String url;
  19. }

6.9.2. 在 Servlet 程序的 page 分页方法中设置 url 的分页请求地址

书城项目 - 图38

6.9.3. 修改分页条中请求地址为 url 变量输出,并抽取一个单独的 jsp 页面

  1. <%--分页条的开始--%>
  2. <div id="page_nav">
  3.     <%--大于首页，才显示--%>
  4.     <c:if test="${requestScope.page.pageNo > 1}">
  5.         <a href="${ requestScope.page.url }&pageNo=1">首页</a>
  6.         <a href="${ requestScope.page.url }&pageNo=${requestScope.page.pageNo-1}">上一页</a>
  7.     </c:if>
  8.     <%--页码输出的开始--%>
  9.     <c:choose>
  10.         <%--情况 1：如果总页码小于等于 5 的情况，页码的范围是：1-总页码--%>
  11.         <c:when test="${ requestScope.page.pageTotal <= 5 }">
  12.             <c:set var="begin" value="1"/>
  13.             <c:set var="end" value="${requestScope.page.pageTotal}"/>
  14.         </c:when>
  15.         <%--情况 2：总页码大于 5 的情况--%>
  16.         <c:when test="${requestScope.page.pageTotal > 5}">
  17.             <c:choose>
  18.                 <%--小情况 1：当前页码为前面 3 个：1，2，3 的情况，页码范围是：1-5.--%>
  19.                 <c:when test="${requestScope.page.pageNo <= 3}">
  20.                     <c:set var="begin" value="1"/>
  21.                     <c:set var="end" value="5"/>
  22.                 </c:when>
  23.                 <%--小情况 2：当前页码为最后 3 个，8，9，10，页码范围是：总页码减 4 - 总页码--%>
  24.                 <c:when test="${requestScope.page.pageNo > requestScope.page.pageTotal-3}">
  25.                     <c:set var="begin" value="${requestScope.page.pageTotal-4}"/>
  26.                     <c:set var="end" value="${requestScope.page.pageTotal}"/>
  27.                 </c:when>
  28.                 <%--小情况 3：4，5，6，7，页码范围是：当前页码减 2 - 当前页码加 2--%>
  29.                 <c:otherwise>
  30.                     <c:set var="begin" value="${requestScope.page.pageNo-2}"/>
  31.                     <c:set var="end" value="${requestScope.page.pageNo+2}"/>
  32.                 </c:otherwise>
  33.             </c:choose>
  34.         </c:when>
  35.     </c:choose>
  36.     <c:forEach begin="${begin}" end="${end}" var="i">
  37.         <c:if test="${i == requestScope.page.pageNo}">
  38.             【${i}】
  39.         </c:if>
  40.         <c:if test="${i != requestScope.page.pageNo}">
  41.             <a href="${ requestScope.page.url }&pageNo=${i}">${i}</a>
  42.         </c:if>
  43.     </c:forEach>
  44.     <%--页码输出的结束--%>
  45.     <%-- 如果已经 是最后一页，则不显示下一页，末页 --%>
  46.     <c:if test="${requestScope.page.pageNo < requestScope.page.pageTotal}">
  47.         <a href="${ requestScope.page.url }&pageNo=${requestScope.page.pageNo+1}">下一页</a>
  48.         <a href="${ requestScope.page.url }&pageNo=${requestScope.page.pageTotal}">末页</a>
  49.     </c:if>
  50.     共${ requestScope.page.pageTotal }页，${ requestScope.page.pageTotalCount }条记录
  51.     到第<input value="${param.pageNo}" name="pn" id="pn_input"/>页
  52.     <input id="searchPageBtn" type="button" value="确定">
  53.     <script type="text/javascript">
  54.         $(function () {
  55.             // 跳到指定的页码
  56.             $("#searchPageBtn").click(function () {
  57.                 var pageNo = $("#pn_input").val();
  58.                 <%--var pageTotal = ${requestScope.page.pageTotal};--%>
  59.                 <%--alert(pageTotal);--%>
  60.                 // javaScript 语言中提供了一个 location 地址栏对象
  61.                 // 它有一个属性叫 href.它可以获取浏览器地址栏中的地址
  62.                 // href 属性可读，可写
  63.                 location.href = "${pageScope.basePath}${ requestScope.page.url }&pageNo=" + pageNo;
  64.             });
  65.         });
  66.     </script>
  67. </div>
  68. <%--分页条的结束--%>

6.10. 首页价格区间搜索

书城项目 - 图39

ClientBookServlet

  1. /**
  2.      * 处理分页功能
  3.      * @param req
  4.      * @param resp
  5.      * @throws ServletException
  6.      * @throws IOException
  7.      */
  8.     protected void pageByPrice(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  9.         //1 获取请求的参数 pageNo 和 pageSize
  10.         int pageNo = WebUtils.parseInt(req.getParameter("pageNo"), 1);
  11.         int pageSize = WebUtils.parseInt(req.getParameter("pageSize"), Page.PAGE_SIZE);
  12.         int min = WebUtils.parseInt(req.getParameter("min"), 0);
  13.         int max = WebUtils.parseInt(req.getParameter("max"), Integer.MAX_VALUE);
  15.         //2 调用BookService.page(pageNo，pageSize)：Page对象
  16.         Page<Book> page = bookService.pageByPrice(pageNo,pageSize,min,max);
  18.         StringBuilder sb = new StringBuilder("client/bookServlet?action=pageByPrice");
  19.         // 如果有最小价格的参数,追加到分页条的地址参数中
  20.         if (req.getParameter("min") != null) {
  21.             sb.append("&min=").append(req.getParameter("min"));
  22.         }
  23.         // 如果有最大价格的参数,追加到分页条的地址参数中
  24.         if (req.getParameter("max") != null) {
  25.             sb.append("&max=").append(req.getParameter("max"));
  26.         }
  27.         page.setUrl(sb.toString());
  28.         //3 保存Page对象到Request域中
  29.         req.setAttribute("page",page);
  30.         //4 请求转发到pages/manager/book_manager.jsp页面
  31.         req.getRequestDispatcher("/pages/client/index.jsp").forward(req,resp);
  32.     }

BookServiceImpl

  1. @Override
  2.     public Page<Book> pageByPrice(int pageNo, int pageSize, int min, int max) {
  3.         Page<Book> page = new Page<Book>();
  5.         // 设置每页显示的数量
  6.         page.setPageSize(pageSize);
  7.         // 求总记录数
  8.         Integer pageTotalCount = bookDao.queryForPageTotalCountByPrice(min,max);
  9.         // 设置总记录数
  10.         page.setPageTotalCount(pageTotalCount);
  11.         // 求总页码
  12.         Integer pageTotal = pageTotalCount / pageSize;
  13.         if (pageTotalCount % pageSize > 0) {
  14.             pageTotal+=1;
  15.         }
  16.         // 设置总页码
  17.         page.setPageTotal(pageTotal);
  19.         // 设置当前页码
  20.         page.setPageNo(pageNo);
  22.         // 求当前页数据的开始索引
  23.         int begin = (page.getPageNo() - 1) * pageSize;
  24.         // 求当前页数据
  25.         List<Book> items = bookDao.queryForPageItemsByPrice(begin,pageSize,min,max);
  26.         // 设置当前页数据
  27.         page.setItems(items);
  29.         return page;
  30.     }

BookDaoImpl

  1.  @Override
  2.     public Integer queryForPageTotalCountByPrice(int min, int max) {
  3.         String sql = "select count(*) from t_book where price between ? and ?";
  4.         Number count = (Number) queryForSingleValue(sql,min,max);
  5.         return count.intValue();
  6.     }
  8.     @Override
  9.     public List<Book> queryForPageItemsByPrice(int begin, int pageSize, int min, int max) {
  10.         String sql = "select `id`,`name`,`author`,`price`,`sales`,`stock`,`img_path` imgPath " +
  11.                 "from t_book where price between ? and ? order by price limit ?,?";
  12.         return queryForList(Book.class,sql,min,max,begin,pageSize);
  13.     }

pages/client/index.jsp

  1. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>书城首页</title>
  9.     <%-- 静态包含 base标签、css样式、jQuery文件 --%>
  10.     <%@ include file="/pages/common/head.jsp"%>
  13. </head>
  14. <body>
  16.     <div id="header">
  17.             <img class="logo_img" alt="" src="static/img/logo.gif" >
  18.             <span class="wel_word">网上书城</span>
  19.             <div>
  20.                 <a href="pages/user/login.jsp">登录</a> |
  21.                 <a href="pages/user/regist.jsp">注册</a> &nbsp;&nbsp;
  22.                 <a href="pages/cart/cart.jsp">购物车</a>
  23.                 <a href="pages/manager/manager.jsp">后台管理</a>
  24.             </div>
  25.     </div>
  27.     <div id="main">
  28.         <div id="book">
  29.             <div class="book_cond">
  30.                 <form action="client/bookServlet" method="get">
  31.                     <input type="hidden" name="action" value="pageByPrice">
  32.                     价格：<input id="min" type="text" name="min" value="${param.min}"> 元 -
  33.                         <input id="max" type="text" name="max" value="${param.max}"> 元
  34.                         <input type="submit" value="查询" />
  35.                 </form>
  36.             </div>
  37.             <div style="text-align: center">
  38.                 <span>您的购物车中有3件商品</span>
  39.                 <div>
  40.                     您刚刚将<span style="color: red">时间简史</span>加入到了购物车中
  41.                 </div>
  42.             </div>
  44.             <c:forEach items="${requestScope.page.items}" var="book">
  45.             <div class="b_list">
  46.                 <div class="img_div">
  47.                     <img class="book_img" alt="" src="${book.imgPath}" />
  48.                 </div>
  49.                 <div class="book_info">
  50.                     <div class="book_name">
  51.                         <span class="sp1">书名:</span>
  52.                         <span class="sp2">${book.name}</span>
  53.                     </div>
  54.                     <div class="book_author">
  55.                         <span class="sp1">作者:</span>
  56.                         <span class="sp2">${book.author}</span>
  57.                     </div>
  58.                     <div class="book_price">
  59.                         <span class="sp1">价格:</span>
  60.                         <span class="sp2">￥${book.price}</span>
  61.                     </div>
  62.                     <div class="book_sales">
  63.                         <span class="sp1">销量:</span>
  64.                         <span class="sp2">${book.sales}</span>
  65.                     </div>
  66.                     <div class="book_amount">
  67.                         <span class="sp1">库存:</span>
  68.                         <span class="sp2">${book.stock}</span>
  69.                     </div>
  70.                     <div class="book_add">
  71.                         <button>加入购物车</button>
  72.                     </div>
  73.                 </div>
  74.             </div>
  75.             </c:forEach>
  76.         </div>
  77.         <%--静态包含分页条--%>
  78.         <%@include file="/pages/common/page_nav.jsp"%>
  79.     </div>
  81.     <%--静态包含页脚内容--%>
  82.     <%@include file="/pages/common/footer.jsp"%>
  84. </body>
  85. </html>

6.10.1. 解决价格区间回显问题

书城项目 - 图40

6.10.2. 解决分页条中不带价格区间的问题

书城项目 - 图41

7. 第七阶段

7.1. 登陆—-显示用户名

UserServlet 程序中保存用户登录的信息

书城项目 - 图42

修改 login_succuess_menu.js

书城项目 - 图43

还要修改首页 index.jsp 页面的菜单

书城项目 - 图44

7.2. 登出—-注销用户

  1. 销毁 Session 中用户登录的信息（或者销毁 Session）

  2. 重定向到首页（或登录页面）。

UserServlet 程序中添加 logout 方法

  1. /**
  2. * 注销
  3. * @param req
  4. * @param resp
  5. * @throws ServletException
  6. * @throws IOException
  7. */
  8. protected void logout(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  9. IOException {
  10.     // 1、销毁 Session 中用户登录的信息（或者销毁 Session）
  11.     req.getSession().invalidate();
  12.     // 2、重定向到首页（或登录页面）。
  13.     resp.sendRedirect(req.getContextPath());
  14. }

修改【注销】的菜单地址

  1. <a href="userServlet?action=logout">注销</a>

7.3. 表单重复提交之——-验证码

表单重复提交有三种常见的情况：

一：提交完表单。服务器使用请求转来进行页面跳转。这个时候，用户按下功能键 F5，就会发起最后一次的请求。 造成表单重复提交问题。解决方法：使用重定向来进行跳转

二：用户正常提交服务器，但是由于网络延迟等原因，迟迟未收到服务器的响应，这个时候，用户以为提交失败， 就会着急，然后多点了几次提交操作，也会造成表单重复提交。

三：用户正常提交服务器。服务器也没有延迟，但是提交完成后，用户回退浏览器。重新提交。也会造成表单重复 提交。

书城项目 - 图45

7.4. 谷歌 kaptcha 图片验证码的使用

谷歌验证码 kaptcha 使用步骤如下：

  1. 导入谷歌验证码的 jar 包 kaptcha-2.3.2.jar

  2. 在 web.xml 中去配置用于生成验证码的 Servlet 程

  1. <servlet>
  2.     <servlet-name>KaptchaServlet</servlet-name>
  3.     <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
  4. </servlet>
  5. <servlet-mapping>
  6.     <servlet-name>KaptchaServlet</servlet-name>
  7.     <url-pattern>/kaptcha.jpg</url-pattern>
  8. </servlet-mapping>
  1. 在表单中使用 img 标签去显示验证码图片并使用
  1. <form action="http://localhost:8080/tmp/registServlet" method="get">
  2.     用户名：<input type="text" name="username" > <br>
  3.     验证码：<input type="text" style="width: 80px;" name="code">
  4.     <img src="http://localhost:8080/tmp/kaptcha.jpg" alt="" style="width: 100px; height: 28px;"> <br>
  5.     <input type="submit" value="登录">
  6. </form>
  1. 在服务器获取谷歌生成的验证码和客户端发送过来的验证码比较使用。
  1. @Override
  2. protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  3. IOException {
  4.     // 获取 Session 中的验证码
  5.     String token = (String) req.getSession().getAttribute(KAPTCHA_SESSION_KEY);
  6.     // 删除 Session 中的验证码
  7.     req.getSession().removeAttribute(KAPTCHA_SESSION_KEY);
  8.     String code = req.getParameter("code");
  9.     // 获取用户名
  10.     String username = req.getParameter("username");
  11.     if (token != null && token.equalsIgnoreCase(code)) {
  12.         System.out.println("保存到数据库：" + username);
  13.         resp.sendRedirect(req.getContextPath() + "/ok.jsp");
  14.     } else {
  15.         System.out.println("请不要重复提交表单");
  16.     }
  17. }

7.5. 把谷歌验证码加入到商城中使用

7.6. 验证码的切换

书城项目 - 图46

  1. // 给验证码的图片，绑定单击事件
  2. $("#code_img").click(function () {
  3.     // 在事件响应的function函数中有一个this对象。这个this对象，是当前正在响应事件的dom对象
  4.     // src属性表示验证码img标签的 图片路径。它可读，可写
  5.     // alert(this.src);
  6.     this.src = "${basePath}kaptcha.jpg?d=" + new Date();
  7. });

8. 第八阶段：购物车

8.1. 购物车模块分析

书城项目 - 图47

8.2. 购物车模型编写

8.2.1. 购物车模型

  1. /**
  2. * 购物车的商品项
  3. */
  4. public class CartItem {
  5.     private Integer id;
  6.     private String name;
  7.     private Integer count;
  8.     private BigDecimal price;
  9.     private BigDecimal totalPrice
  10. }
  1. /**
  2. * 购物车对象
  3. */
  4. public class Cart {
  5.     // private Integer totalCount;
  6.     // private BigDecimal totalPrice;
  7.     /**
  8.     * key 是商品编号，
  9.     * value，是商品信息
  10.     */
  11.     private Map<Integer,CartItem> items = new LinkedHashMap<Integer,CartItem>();
  12.     /**
  13.     * 添加商品项
  14.     *
  15.     * @param cartItem
  16.     */
  17.     public void addItem(CartItem cartItem) {
  18.         // 先查看购物车中是否已经添加过此商品，如果已添加，则数量累加，总金额更新，如果没有添加过，直接放到
  19.         集合中即可
  20.         CartItem item = items.get(cartItem.getId());
  21.         if (item == null) {
  22.             // 之前没添加过此商品
  23.             items.put(cartItem.getId(), cartItem);
  24.         } else {
  25.             // 已经 添加过的情况
  26.             item.setCount( item.getCount() + 1 ); // 数量 累加
  27.             item.setTotalPrice( item.getPrice().multiply(new BigDecimal( item.getCount() )) ); // 更
  28.             新总金额
  29.         }
  30.     }
  31.     /**
  32.     * 删除商品项
  33.     */
  34.     public void deleteItem(Integer id) {
  35.         items.remove(id);
  36.     }
  37.     /**
  38.     * 清空购物车
  39.     */
  40.     public void clear() {
  41.         items.clear();
  42.     }
  43.     /**
  44.     * 修改商品数量
  45.     */
  46.     public void updateCount(Integer id,Integer count) {
  47.         // 先查看购物车中是否有此商品。如果有，修改商品数量，更新总金额
  48.         CartItem cartItem = items.get(id);
  49.         if (cartItem != null) {
  50.             cartItem.setCount(count);// 修改商品数量
  51.             cartItem.setTotalPrice( cartItem.getPrice().multiply(new
  52.             BigDecimal( cartItem.getCount() )) ); // 更新总金额
  53.         }
  54.     }
  55.     public Integer getTotalCount() {
  56.         Integer totalCount = 0;
  57.         for (Map.Entry<Integer,CartItem>entry : items.entrySet()) {
  58.             totalCount += entry.getValue().getCount();
  59.         }
  60.         return totalCount;
  61.     }
  62.     public BigDecimal getTotalPrice() {
  63.         BigDecimal totalPrice = new BigDecimal(0);
  64.         for (Map.Entry<Integer,CartItem>entry : items.entrySet()) {
  65.             totalPrice = totalPrice.add(entry.getValue().getTotalPrice());
  66.         }
  67.         return totalPrice;
  68.     }
  69.     public Map<Integer, CartItem> getItems() {
  70.         return items;
  71.     }
  72.     public void setItems(Map<Integer, CartItem> items) {
  73.         this.items = items;
  74.     }
  75.     @Override
  76.     public String toString() {
  77.         return "Cart{" +
  78.         "totalCount=" + getTotalCount() +
  79.         ", totalPrice=" + getTotalPrice() +
  80.         ", items=" + items +
  81.         '}';
  82.     }
  83. }

8.2.2. 购物车的测试

  1. public class CartTest {
  2.     @Test
  3.     public void addItem() {
  4.         Cart cart = new Cart();
  5.         cart.addItem(new CartItem(1, "java从入门到精通", 1, new BigDecimal(1000),new BigDecimal(1000)));
  6.         cart.addItem(new CartItem(1, "java从入门到精通", 1, new BigDecimal(1000),new BigDecimal(1000)));
  7.         cart.addItem(new CartItem(2, "数据结构与算法", 1, new BigDecimal(100),new BigDecimal(100)));
  8.         System.out.println(cart);
  9.     }
  10.     @Test
  11.     public void deleteItem() {
  12.         Cart cart = new Cart();
  13.         cart.addItem(new CartItem(1, "java从入门到精通", 1, new BigDecimal(1000),new BigDecimal(1000)));
  14.         cart.addItem(new CartItem(1, "java从入门到精通", 1, new BigDecimal(1000),new BigDecimal(1000)));
  15.         cart.addItem(new CartItem(2, "数据结构与算法", 1, new BigDecimal(100),new BigDecimal(100)));
  16.         cart.deleteItem(1);
  17.         System.out.println(cart);
  18.     }
  19.     @Test
  20.     public void clear() {
  21.         Cart cart = new Cart();
  22.         cart.addItem(new CartItem(1, "java从入门到精通", 1, new BigDecimal(1000),new BigDecimal(1000)));
  23.         cart.addItem(new CartItem(1, "java从入门到精通", 1, new BigDecimal(1000),new BigDecimal(1000)));
  24.         cart.addItem(new CartItem(2, "数据结构与算法", 1, new BigDecimal(100),new BigDecimal(100)));
  25.         cart.deleteItem(1);
  26.         cart.clear();
  27.         System.out.println(cart);
  28.     }
  29.     @Test
  30.     public void updateCount() {
  31.         Cart cart = new Cart();
  32.         cart.addItem(new CartItem(1, "java从入门到精通", 1, new BigDecimal(1000),new BigDecimal(1000)));
  33.         cart.addItem(new CartItem(1, "java从入门到精通", 1, new BigDecimal(1000),new BigDecimal(1000)));
  34.         cart.addItem(new CartItem(2, "数据结构与算法", 1, new BigDecimal(100),new BigDecimal(100)));
  35.         cart.deleteItem(1);
  36.         cart.clear();
  37.         cart.addItem(new CartItem(1, "java从入门到精通", 1, new BigDecimal(1000),new BigDecimal(1000)));
  38.         cart.updateCount(1, 10);
  39.         System.out.println(cart);
  40.     }
  41. }

8.3. 加入购物车功能的实现

CartServlet 程序中的代码：

  1. /**
  2. * 加入购物车
  3. * @param req
  4. * @param resp
  5. * @throws ServletException
  6. * @throws IOException
  7. */
  8. protected void addItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  9. IOException {
  10.     // 获取请求的参数 商品编号
  11.     int id = WebUtils.parseInt(req.getParameter("id"), 0);
  12.     // 调用 bookService.queryBookById(id):Book 得到图书的信息
  13.     Book book = bookService.queryBookById(id);
  14.     // 把图书信息，转换成为 CartItem 商品项
  15.     CartItem cartItem = new CartItem(book.getId(),book.getName(),1,book.getPrice(),book.getPrice());
  16.     // 调用 Cart.addItem(CartItem);添加商品项
  17.     Cart cart = (Cart) req.getSession().getAttribute("cart");
  18.     if (cart == null) {
  19.         cart = new Cart();
  20.         req.getSession().setAttribute("cart",cart);
  21.     }
  22.     cart.addItem(cartItem);
  23.     System.out.println(cart);
  24.     System.out.println("请求头 Referer 的值：" + req.getHeader("Referer"));
  25.     // 重定向回原来商品所在的地址页面
  26.     resp.sendRedirect(req.getHeader("Referer"));
  27. }

index.jsp 页面 js 的代码：

书城项目 - 图48

  1. <Script type="text/javascript">
  2.     $(function () {
  3.         // 给加入购物车按钮绑定单击事件
  4.         $("button.addToCart").click(function () {
  5.             /**
  6.             * 在事件响应的 function 函数 中，有一个 this 对象，这个 this 对象，是当前正在响应事件的 dom 对象
  7.             * @type {jQuery}
  8.             */
  9.             var bookId = $(this).attr("bookId");
  10.             location.href = "http://localhost:8080/book/cartServlet?action=addItem&id=" + bookId;
  11.         });
  12.     });
  13. </Script>

图解说明，如何跳回添加商品的页面：

书城项目 - 图49

8.4. 购物车的展示

  1. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  2. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>购物车</title>
  8.     <%-- 静态包含 base 标签、css 样式、jQuery 文件 --%>
  9.     <%@ include file="/pages/common/head.jsp"%>
  10. </head>
  11. <body>
  12.     <div id="header">
  13.         <img class="logo_img" alt="" src="static/img/logo.gif" >
  14.         <span class="wel_word">购物车</span>
  15.         <%--静态包含，登录 成功之后的菜单 --%>
  16.         <%@ include file="/pages/common/login_success_menu.jsp"%>
  17.     </div>
  18.     <div id="main">
  19.         <table>
  20.             <tr>
  21.                 <td>商品名称</td>
  22.                 <td>数量</td>
  23.                 <td>单价</td>
  24.                 <td>金额</td>
  25.                 <td>操作</td>
  26.             </tr>
  27.             <c:if test="${empty sessionScope.cart.items}">
  28.                 <%--如果购物车空的情况--%>
  29.                 <tr>
  30.                     <td colspan="5"><a href="index.jsp">亲，当前购物车为空！快跟小伙伴们去浏览商品吧！！！</a>
  31.                     </td>
  32.                 </tr>
  33.             </c:if>
  34.             <c:if test="${not empty sessionScope.cart.items}">
  35.                 <%--如果购物车非空的情况--%>
  36.                 <c:forEach items="${sessionScope.cart.items}" var="entry">
  37.                     <tr>
  38.                         <td>${entry.value.name}</td>
  39.                         <td>${entry.value.count}</td>
  40.                         <td>${entry.value.price}</td>
  41.                         <td>${entry.value.totalPrice}</td>
  42.                         <td><a href="#">删除</a></td>
  43.                     </tr>
  44.                 </c:forEach>
  45.             </c:if>
  46.         </table>
  47.         <%--如果购物车非空才输出页面的内容--%>
  48.         <c:if test="${not empty sessionScope.cart.items}">
  49.             <div class="cart_info">
  50.                 <span class="cart_span">购物车中共有<span
  51.                 class="b_count">${sessionScope.cart.totalCount}</span>件商品</span>
  52.                 <span class="cart_span">总金额<span
  53.                 class="b_price">${sessionScope.cart.totalPrice}</span>元</span>
  54.                 <span class="cart_span"><a href="#">清空购物车</a></span>
  55.                 <span class="cart_span"><a href="pages/cart/checkout.jsp">去结账</a></span>
  56.             </div>
  57.         </c:if>
  58.     </div>
  59.     <%--静态包含页脚内容--%>
  60.     <%@include file="/pages/common/footer.jsp"%>
  61. </body>
  62. </html>

8.5. 删除购物车商品项

CartServlet 程序

  1. /**
  2. * 删除商品项
  3. * @param req
  4. * @param resp
  5. * @throws ServletException
  6. * @throws IOException
  7. */
  8. protected void deleteItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  9. IOException{
  10.     // 获取商品编号
  11.     int id = WebUtils.parseInt(req.getParameter("id"), 0);
  12.     // 获取购物车对象
  13.     Cart cart = (Cart) req.getSession().getAttribute("cart");
  14.     if (cart != null) {
  15.         // 删除 了购物车商品项
  16.         cart.deleteItem(id);
  17.         // 重定向回原来购物车展示页面
  18.         resp.sendRedirect(req.getHeader("Referer"));
  19.     }
  20. }

购物车/pages/cart/cart.jsp 页面的代码

删除的请求地址

书城项目 - 图50

删除的确认提示操作

  1. <script type="text/javascript">
  2.     $(function () {
  3.         // 给 【删除】绑定单击事件
  4.         $("a.deleteItem").click(function () {
  5.             return confirm("你确定要删除【" + $(this).parent().parent().find("td:first").text() +"】吗?")
  6.         });
  7.     });
  8. </script>

8.6. 清空购物车

CartServlet 程序

  1. /**
  2. * 清空购物车
  3. * @param req
  4. * @param resp
  5. * @throws ServletException
  6. * @throws IOException
  7. */
  8. protected void clear(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  9. IOException{
  10.     // 1 获取购物车对象
  11.     Cart cart = (Cart) req.getSession().getAttribute("cart");
  12.     if (cart != null) {
  13.         // 清空购物车
  14.         cart.clear();
  15.         // 重定向回原来购物车展示页面
  16.         resp.sendRedirect(req.getHeader("Referer"));
  17.     }
  18. }

cart.jsp 页面的内容

给清空购物车添加请求地址，和添加 id 属性：

书城项目 - 图51

清空的确认提示操作

  1. // 给清空购物车绑定单击事件
  2. $("#clearCart").click(function () {
  3.     return confirm("你确定要清空购物车吗?");
  4. })

8.7. 修改购物车商品数量

CartServlet 程序

  1. /**
  2. * 修改商品数量
  3. * @param req
  4. * @param resp
  5. * @throws ServletException
  6. * @throws IOException
  7. */
  8. protected void updateCount(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  9. IOException{
  10.     // 获取请求的参数 商品编号 、商品数量
  11.     int id = WebUtils.parseInt(req.getParameter("id"),0);
  12.     int count = WebUtils.parseInt(req.getParameter("count"), 1);
  13.     // 获取 Cart 购物车对象
  14.     Cart cart = (Cart) req.getSession().getAttribute("cart");
  15.     if (cart != null) {
  16.         // 修改商品数量
  17.         cart.updateCount(id,count);
  18.         // 重定向回原来购物车展示页面
  19.         resp.sendRedirect(req.getHeader("Referer"));
  20.     }
  21. }

修改 pages/cart/cart.jsp 购物车页面：

书城项目 - 图52

修改商品数量 js 代码

  1. // 给输入框绑定 onchange 内容发生改变事件
  2. $(".updateCount").change(function () {
  3.     // 获取商品名称
  4.     var name = $(this).parent().parent().find("td:first").text();
  5.     var id = $(this).attr('bookId');
  6.     // 获取商品数量
  7.     var count = this.value;
  8.     if ( confirm("你确定要将【" + name + "】商品修改数量为：" + count + " 吗?") ) {
  9.         //发起请求。给服务器保存修改
  10.         location.href =
  11.         "http://localhost:8080/book/cartServlet?action=updateCount&count="+count+"&id="+id;
  12.     } else {
  13.         // defaultValue 属性是表单项 Dom 对象的属性。它表示默认的 value 属性值。
  14.         this.value = this.defaultValue;
  15.     }
  16. });

8.8. 首页，购物车数据回显

在添加商品到购物车的时候，保存最后一个添加的商品名称

书城项目 - 图53

在 pages/client/index.jsp 页面中输出购物车信息

  1. <div style="text-align: center">
  2.     <c:if test="${empty sessionScope.cart.items}">
  3.         <%--购物车为空的输出--%>
  4.         <span> </span>
  5.         <div>
  6.         <span style="color: red">当前购物车为空</span>
  7.         </div>
  8.     </c:if>
  9.     <c:if test="${not empty sessionScope.cart.items}">
  10.         <%--购物车非空的输出--%>
  11.         <span>您的购物车中有 ${sessionScope.cart.totalCount} 件商品</span>
  12.         <div>
  13.         您刚刚将<span style="color: red">${sessionScope.lastName}</span>加入到了购物车中
  14.         </div>
  15.     </c:if>
  16. </div>

9. 第九阶段：订单

9.1. 订单模块的分析

书城项目 - 图54

9.2. 订单模块的实现

9.2.1. 创建订单模块的数据库表

  1. use book;
  2. create table t_order(
  3. `order_id` varchar(50) primary key,
  4. `create_time` datetime,
  5. `price` decimal(11,2),
  6. `status` int,
  7. `user_id` int,
  8. foreign key(`user_id`) references t_user(`id`)
  9. );
  10. create table t_order_item(
  11. `id` int primary key auto_increment,
  12. `name` varchar(100),
  13. `count` int,
  14. `price` decimal(11,2),
  15. `total_price` decimal(11,2),
  16. `order_id` varchar(50),
  17. foreign key(`order_id`) references t_order(`order_id`)
  18. );

9.2.2. 创建订单模块的数据模型

  1. /**
  2. * 订单
  3. */
  4. public class Order {
  5.     private String orderId;
  6.     private Date createTime;
  7.     private BigDecimal price;
  8.     // 0 未发货，1 已发货，2 表示已签收
  9.     private Integer status = 0;
  10.     private Integer userId;
  11. }
  1. /**
  2. * 订单项
  3. */
  4. public class OrderItem {
  5.     private Integer id;
  6.     private String name;
  7.     private Integer count;
  8.     private BigDecimal price;
  9.     private BigDecimal totalPrice;
  10.     private String orderId;
  11. }

9.2.3. 编写订单模块的 Dao 程序和测试

OrderDao 接口

  1. public interface OrderDao {
  2.     public int saveOrder(Order order);
  3. }

OrderDao 实现

  1. public class OrderDaoImpl extends BaseDao implements OrderDao {
  2.     @Override
  3.     public int saveOrder(Order order) {
  4.     String sql = "insert into t_order(`order_id`,`create_time`,`price`,`status`,`user_id`)
  5.     values(?,?,?,?,?)";
  6.     return
  7.        update(sql,order.getOrderId(),order.getCreateTime(),order.getPrice(),order.getStatus(),order.getUs
  8.     erId());
  9.     }
  10. }

OrderItemDao 接口

  1. public interface OrderItemDao {
  2.     public int saveOrderItem(OrderItem orderItem);
  3. }

OrderItemDao 实现

  1. public class OrderItemDaoImpl extends BaseDao implements OrderItemDao {
  2.     @Override
  3.     public int saveOrderItem(OrderItem orderItem) {
  4.         String sql = "insert into t_order_item(`name`,`count`,`price`,`total_price`,`order_id`)
  5.         values(?,?,?,?,?)";
  6.         return update(sql,orderItem.getName(),orderItem.getCount(),
  7.             orderItem.getPrice(),orderItem.getTotalPrice(),orderItem.getOrderId());
  8.     }
  9. }

测试

  1. public class OrderDaoTest {
  2.     @Test
  3.     public void saveOrder() {
  4.         OrderDao orderDao = new OrderDaoImpl();
  5.         orderDao.saveOrder(new Order("1234567891",new Date(),new BigDecimal(100),0, 1));
  6.     }
  7. }
  1. public class OrderItemDaoTest {
  2.     @Test
  3.     public void saveOrderItem() {
  4.         OrderItemDao orderItemDao = new OrderItemDaoImpl();
  5.         orderItemDao.saveOrderItem(new OrderItem(null,"java 从入门到精通", 1,new BigDecimal(100),new
  6.         BigDecimal(100),"1234567890"));
  7.         orderItemDao.saveOrderItem(new OrderItem(null,"javaScript 从入门到精通", 2,new
  8.         BigDecimal(100),new BigDecimal(200),"1234567890"));
  9.         orderItemDao.saveOrderItem(new OrderItem(null,"Netty 入门", 1,new BigDecimal(100),new
  10.         BigDecimal(100),"1234567890"));
  11.     }
  12. }

9.2.4. 编写订单模块的 Service 和测试

OrderService 接口

  1. public interface OrderService {
  2.     public String createOrder(Cart cart,Integer userId);
  3. }

OrderService 实现类

  1. public class OrderServiceImpl implements OrderService {
  2.     private OrderDao orderDao = new OrderDaoImpl();
  3.     private OrderItemDao orderItemDao = new OrderItemDaoImpl();
  4.     @Override
  5.     public String createOrder(Cart cart, Integer userId) {
  6.         // 订单号===唯一性
  7.         String orderId = System.currentTimeMillis()+""+userId;
  8.         // 创建一个订单对象
  9.         Order order = new Order(orderId,new Date(),cart.getTotalPrice(), 0,userId);
  10.         // 保存订单
  11.         orderDao.saveOrder(order);
  12.         // 遍历购物车中每一个商品项转换成为订单项保存到数据库
  13.         for (Map.Entry<Integer, CartItem>entry : cart.getItems().entrySet()){
  14.             // 获取每一个购物车中的商品项
  15.             CartItem cartItem = entry.getValue();
  16.             // 转换为每一个订单项
  17.             OrderItem orderItem = new
  18.             OrderItem(null,cartItem.getName(),cartItem.getCount(),cartItem.getPrice(),cartItem.getTotalPrice(),
  19.             orderId);
  20.             // 保存订单项到数据库
  21.             orderItemDao.saveOrderItem(orderItem);
  22.         }
  23.         // 清空购物车
  24.         cart.clear();
  25.         return orderId;
  26.     }
  27. }

测试

  1. public class OrderServiceTest {
  2.     @Test
  3.     public void createOrder() {
  4.         Cart cart = new Cart();
  5.         cart.addItem(new CartItem(1, "java从入门到精通", 1, new BigDecimal(1000),new BigDecimal(1000)));
  6.         cart.addItem(new CartItem(1, "java从入门到精通", 1, new BigDecimal(1000),new BigDecimal(1000)));
  7.         cart.addItem(new CartItem(2, "数据结构与算法", 1, new BigDecimal(100),new BigDecimal(100)));
  8.         OrderService orderService = new OrderServiceImpl();
  9.         System.out.println( "订单号是：" + orderService.createOrder(cart, 1) );
  10.     }
  11. }

9.2.5. 编写订单模块的 web 层和页面联调

OrderServlet 程序：

  1. public class OrderServlet extends BaseServlet {
  2. private OrderService orderService = new OrderServiceImpl();
  3. /**
  4. * 生成订单
  5. *
  6. * @param req
  7. * @param resp
  8. * @throws ServletException
  9. * @throws IOException
  10. */
  11. protected void createOrder(HttpServletRequest req, HttpServletResponse resp) throws
  12. ServletException, IOException {
  13.     // 先获取 Cart 购物车对象
  14.     Cart cart = (Cart) req.getSession().getAttribute("cart");
  15.     // 获取 Userid
  16.     User loginUser = (User) req.getSession().getAttribute("user");
  17.     if (loginUser == null) {
  18.         req.getRequestDispatcher("/pages/user/login.jsp").forward(req,resp);
  19.         return;
  20.     }
  21.     Integer userId = loginUser.getId();
  22.     // 调用 orderService.createOrder(Cart,Userid);生成订单
  23.     String orderId = orderService.createOrder(cart, userId);
  24.     // req.setAttribute("orderId", orderId);
  25.     // 请求转发到/pages/cart/checkout.jsp
  26.     // req.getRequestDispatcher("/pages/cart/checkout.jsp").forward(req, resp);
  27.     req.getSession().setAttribute("orderId",orderId);
  28.     resp.sendRedirect(req.getContextPath()+"/pages/cart/checkout.jsp");
  29.     }
  30. }

修改 pages/cart/cart.jsp 页面，结账的请求地址：

书城项目 - 图55

修改 pages/cart/checkout.jsp 页面，输出订单号

书城项目 - 图56

修改 OrderService 程序，解决生成订单后商品的库存和销量没有发生改变的bug

  1. public class OrderServiceImpl implements OrderService {
  2.     private OrderDao orderDao = new OrderDaoImpl();
  3.     private OrderItemDao orderItemDao = new OrderItemDaoImpl();
  4.     private BookDao bookDao = new BookDaoImpl();
  5.     @Override
  6.     public String createOrder(Cart cart, Integer userId) {
  7.         // 订单号===唯一性
  8.         String orderId = System.currentTimeMillis()+""+userId;
  9.         // 创建一个订单对象
  10.         Order order = new Order(orderId,new Date(),cart.getTotalPrice(), 0,userId);
  11.         // 保存订单
  12.         orderDao.saveOrder(order);
  13.         // 遍历购物车中每一个商品项转换成为订单项保存到数据库
  14.         for (Map.Entry<Integer, CartItem>entry : cart.getItems().entrySet()){
  15.             // 获取每一个购物车中的商品项
  16.             CartItem cartItem = entry.getValue();
  17.             // 转换为每一个订单项
  18.             OrderItem orderItem = new
  19.             OrderItem(null,cartItem.getName(),cartItem.getCount(),cartItem.getPrice(),cartItem.getTotalPrice(),
  20.             orderId);
  21.             // 保存订单项到数据库
  22.             orderItemDao.saveOrderItem(orderItem);
  23.             // 更新库存和销量
  24.             Book book = bookDao.queryBookById(cartItem.getId());
  25.             book.setSales( book.getSales() + cartItem.getCount() );
  26.             book.setStock( book.getStock() - cartItem.getCount() );
  27.             bookDao.updateBook(book);
  28.         }
  29.         // 清空购物车
  30.         cart.clear();
  31.         return orderId;
  32.     }
  33. }

10. 第十阶段

10.1. 使用 Filter 过滤器拦截/pages/manager/所有内容，实 现权限检查

Filter 代码

  1. public class ManagerFilter implements Filter {
  2.     @Override
  3.     public void init(FilterConfig filterConfig) throws ServletException {
  4.     }
  5.     @Override
  6.     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain
  7.     filterChain) throws IOException, ServletException {
  8.         HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest;
  9.         Object user = httpServletRequest.getSession().getAttribute("user");
  10.         if (user == null) {
  11.             httpServletRequest.getRequestDispatcher("/pages/user/login.jsp").
  12.                 forward(servletRequest,servletRes
  13.             ponse);
  14.         } else {
  15.             filterChain.doFilter(servletRequest,servletResponse);
  16.         }
  17.     }
  18.     @Override
  19.     public void destroy() {
  20.     }
  21. }

web.xml 中的配置

  1. <filter>
  2.     <filter-name>ManagerFilter</filter-name>
  3.     <filter-class>com.atguigu.filter.ManagerFilter</filter-class>
  4. </filter>
  5. <filter-mapping>
  6.     <filter-name>ManagerFilter</filter-name>
  7.     <url-pattern>/pages/manager/*</url-pattern>
  8.     <url-pattern>/manager/bookServlet</url-pattern>
  9. </filter-mapping>

10.2. ThreadLocal 的使用

ThreadLocal 的作用，它可以解决多线程的数据安全问题。

ThreadLocal 它可以给当前线程关联一个数据（可以是普通变量，可以是对象，也可以是数组，集合）

ThreadLocal 的特点：

  1. 1、ThreadLocal 可以为当前线程关联一个数据。（它可以像 Map 一样存取数据，key 为当前线程）
  3. 2、每一个 ThreadLocal 对象，只能为当前线程关联一个数据，如果要为当前线程关联多个数据，就需要使用多个 ThreadLocal 对象实            例。
  5. 3、每个 ThreadLocal 对象实例定义的时候，一般都是 **static** 类型
  7. 4、ThreadLocal 中保存数据，在线程销毁后。会由 JVM 虚拟自动释放。

测试类：

  1. public class ThreadLocalTest {
  2.     // public static Map<String,Object> data = new Hashtable<String,Object>();
  3.     public static ThreadLocal<Object> threadLocal = new ThreadLocal<Object>();
  4.     private static Random random = new Random();
  5.     public static class Task implements Runnable {
  6.         @Override
  7.         public void run() {
  8.         // 在 Run 方法中，随机生成一个变量（线程要关联的数据），然后以当前线程名为 key 保存到 map 中
  9.         Integer i = random.nextInt(1000);
  10.         // 获取当前线程名
  11.         String name = Thread.currentThread().getName();
  12.         System.out.println("线程["+name+"]生成的随机数是：" + i);
  13.         // data.put(name,i);
  14.         threadLocal.set(i);
  15.         try {
  16.             Thread.sleep(3000);
  17.         } catch (InterruptedException e) {
  18.             e.printStackTrace();
  19.         }
  20.         new OrderService().createOrder();
  21.         // 在 Run 方法结束之前，以当前线程名获取出数据并打印。查看是否可以取出操作
  22.         // Object o = data.get(name);
  23.         Object o = threadLocal.get();
  24.         System.out.println("在线程["+name+"]快结束时取出关联的数据是：" + o);
  25.         }
  26.     }
  28.     public static void main(String[] args) {
  29.         for (int i = 0; i < 3; i++){
  30.             new Thread(new Task()).start();
  31.         }
  32.     }
  33. }
  1. public class OrderService {
  2.     public void createOrder(){
  3.         String name = Thread.currentThread().getName();
  4.         System.out.println("OrderService 当前线程[" + name + "]中保存的数据是：" +
  5.         ThreadLocalTest.threadLocal.get());
  6.         new OrderDao().saveOrder();
  7.     }
  8. }
  1. public class OrderDao {
  2.     public void saveOrder(){
  3.         String name = Thread.currentThread().getName();
  4.         System.out.println("OrderDao 当前线程[" + name + "]中保存的数据是：" +
  5.         ThreadLocalTest.threadLocal.get());
  6.     }
  7. }

10.3. 使用 Filter 和 ThreadLocal 组合管理事务

10.3.1. 使用ThreadLocal来确保所有 dao操作都在同一个Connection 连接对象中完成

原理分析图

书城项目 - 图57

JdbcUtils 工具类的修改：

  1. public class JdbcUtils {
  2.     private static DruidDataSource dataSource;
  3.     private static ThreadLocal<Connection> conns = new ThreadLocal<Connection>();
  4.     static {
  5.         try {
  6.             Properties properties = new Properties();
  7.             // 读取 jdbc.properties 属性配置文件
  8.             InputStream inputStream =
  9.             JdbcUtils.class.getClassLoader().getResourceAsStream("jdbc.properties");
  10.             // 从流中加载数据
  11.             properties.load(inputStream);
  12.             // 创建 数据库连接 池
  13.             dataSource = (DruidDataSource) DruidDataSourceFactory.createDataSource(properties);
  14.         } catch (Exception e) {
  15.             e.printStackTrace();
  16.         }
  17.     }
  18.     /**
  19.     * 获取数据库连接池中的连接
  20.     * @return 如果返回 null,说明获取连接失败<br/>有值就是获取连接成功
  21.     */
  22.     public static Connection getConnection(){
  23.         Connection conn = conns.get();
  24.         if (conn == null) {
  25.             try {
  26.                 conn = dataSource.getConnection();//从数据库连接池中获取连接
  27.                 conns.set(conn); // 保存到 ThreadLocal 对象中，供后面的 jdbc 操作使用
  28.                 conn.setAutoCommit(false); // 设置为手动管理事务
  29.             } catch (SQLException e) {
  30.                 e.printStackTrace();
  31.             }
  32.         }
  33.         return conn;
  34.     }
  35.     /**
  36.     * 提交事务，并关闭释放连接
  37.     */
  38.     public static void commitAndClose(){
  39.         Connection connection = conns.get();
  40.         if (connection != null) { // 如果不等于 null，说明 之前使用过连接，操作过数据库
  41.             try {
  42.                 connection.commit(); // 提交 事务
  43.             } catch (SQLException e) {
  44.                 e.printStackTrace();
  45.             } finally {
  46.                 try {
  47.                     connection.close(); // 关闭连接，资源资源
  48.                 } catch (SQLException e) {
  49.                     e.printStackTrace();
  50.                 }
  51.             }
  52.         }
  53.         // 一定要执行 remove 操作，否则就会出错。（因为 Tomcat 服务器底层使用了线程池技术）
  54.         conns.remove();
  55.     }
  56.     /**
  57.     * 回滚事务，并关闭释放连接
  58.     */
  59.     public static void rollbackAndClose(){
  60.         Connection connection = conns.get();
  61.         if (connection != null) { // 如果不等于 null，说明 之前使用过连接，操作过数据库
  62.             try {
  63.                 connection.rollback();//回滚事务
  64.             } catch (SQLException e) {
  65.                 e.printStackTrace();
  66.             } finally {
  67.                 try {
  68.                     connection.close(); // 关闭连接，资源资源
  69.                 } catch (SQLException e) {
  70.                     e.printStackTrace();
  71.                 }
  72.             }
  73.         }
  74.         // 一定要执行 remove 操作，否则就会出错。（因为 Tomcat 服务器底层使用了线程池技术）
  75.         conns.remove();
  76.     }
  77.     /**
  78.     * 关闭连接，放回数据库连接池
  79.     * @param conn
  80.     public static void close(Connection conn){
  81.         if (conn != null) {
  82.             try {
  83.                 conn.close();
  84.             } catch (SQLException e) {
  85.                 e.printStackTrace();
  86.             }
  87.         }
  88.     } */
  89. }

10.3.2. 使用 Filter 过滤器统一给所有的 Service 方法都加上 try-catch。来进行实现的统一管理。

原理分析图：

书城项目 - 图58

Filter 类代码

  1. public class TransactionFilter implements Filter {
  2.     @Override
  3.     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain
  4.         filterChain) throws IOException, ServletException {
  5.         try {
  6.             filterChain.doFilter(servletRequest,servletResponse);
  7.             JdbcUtils.commitAndClose();// 提交事务
  8.         } catch (Exception e) {
  9.             JdbcUtils.rollbackAndClose();//回滚事务
  10.             e.printStackTrace();
  11.         }
  12.     }
  13. }

在 web.xml 中的配置：

  1. <filter>
  2.     <filter-name>TransactionFilter</filter-name>
  3.     <filter-class>com.atguigu.filter.TransactionFilter</filter-class>
  4. </filter>
  5. <filter-mapping>
  6.     <filter-name>TransactionFilter</filter-name>
  7.     <!-- /* 表示当前工程下所有请求 -->
  8.     <url-pattern>/*</url-pattern>
  9. </filter-mapping>

一定要记得把 BaseServlet 中的异常往外抛给 Filter 过滤器

  1. public abstract class BaseServlet extends HttpServlet {
  2.     @Override
  3.     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  4.     IOException {
  5.         doPost(req, resp);
  6.     }
  7.     protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  8.     IOException {
  9.         // 解决 post 请求中文乱码问题
  10.         // 一定要在获取请求参数之前调用才有效
  11.         req.setCharacterEncoding("UTF-8");
  12.         String action = req.getParameter("action");
  13.         try {
  14.             // 获取 action 业务鉴别字符串，获取相应的业务 方法反射对象
  15.             Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class,
  16.             HttpServletResponse.class);
  17.             // System.out.println(method);
  18.             // 调用目标业务 方法
  19.             method.invoke(this, req, resp);
  20.         } catch (Exception e) {
  21.             e.printStackTrace();
  22.             throw new RuntimeException(e);// 把异常抛给 Filter 过滤器
  23.         }
  24.     }
  25. }

10.3.3. 将所有异常都统一交给Tomcat，让Tomcat展示友好的错误信息页面。

在 web.xml 中我们可以通过错误页面配置来进行管理。

  1. <!--error-page 标签配置，服务器出错之后，自动跳转的页面-->
  2. <error-page>
  3.     <!--error-code 是错误类型-->
  4.     <error-code>500</error-code>
  5.     <!--location 标签表示。要跳转去的页面路径-->
  6.     <location>/pages/error/error500.jsp</location>
  7. </error-page>
  8. <!--error-page 标签配置，服务器出错之后，自动跳转的页面-->
  9. <error-page>
  10.     <!--error-code 是错误类型-->
  11.     <error-code>404</error-code>
  12.     <!--location 标签表示。要跳转去的页面路径-->
  13.     <location>/pages/error/error404.jsp</location>
  14. </error-page>

把异常抛给Tomcat管理展示友好的错误页面

  1. public class TransactionFilter implements Filter {
  3.     @Override
  4.     public void init(FilterConfig filterConfig) throws ServletException {
  6.     }
  8.     @Override
  9.     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
  10.         try {
  11.             filterChain.doFilter(servletRequest,servletResponse);
  12.             JdbcUtils.commitAndClose();// 提交事务
  13.         } catch (Exception e) {
  14.             JdbcUtils.rollbackAndClose();//回滚事务
  15.             e.printStackTrace();
  16.             throw new RuntimeException(e);//把异常抛给Tomcat管理展示友好的错误页面
  17.         }
  18.     }
  20.     @Override
  21.     public void destroy() {
  23.     }
  24. }

11. 第十一阶段

11.1. 使用Ajax验证用户名是否可用

书城项目 - 图59

UserServlet 程序中 ajaxExistsUsername 方法：

  1. protected void ajaxExistsUsername(HttpServletRequest req, HttpServletResponse resp) throws
  2. ServletException, IOException {
  3.     // 获取请求的参数 username
  4.     String username = req.getParameter("username");
  5.     // 调用 userService.existsUsername();
  6.     boolean existsUsername = userService.existsUsername(username);
  7.     // 把返回的结果封装成为 map 对象
  8.     Map<String,Object> resultMap = new HashMap<>();
  9.     resultMap.put("existsUsername",existsUsername);
  10.     Gson gson = new Gson();
  11.     String json = gson.toJson(resultMap);
  12.     resp.getWriter().write(json);
  13. }

regist.jsp 页面中的代码：

  1. $("#username").blur(function () {
  2.     //1 获取用户名
  3.     var username = this.value;
  4.     $.getJSON("http://localhost:8080/book/userServlet","action=ajaxExistsUsername&username=" +
  5.     username,function (data) {
  6.         if (data.existsUsername) {
  7.             $("span.errorMsg").text("用户名已存在！");
  8.         } else {
  9.             $("span.errorMsg").text("用户名可用！");
  10.         }
  11.     });
  12. });

11.2. 使用 AJAX 修改把商品添加到购物车

书城项目 - 图60

CartServlet 程序

  1. protected void ajaxAddItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
  2. IOException {
  3.     // 获取请求的参数 商品编号
  4.     int id = WebUtils.parseInt(req.getParameter("id"), 0);
  5.     // 调用 bookService.queryBookById(id):Book 得到图书的信息
  6.     Book book = bookService.queryBookById(id);
  7.     // 把图书信息，转换成为 CartItem 商品项
  8.     CartItem cartItem = new CartItem(book.getId(),book.getName(),1,book.getPrice(),book.getPrice());
  9.     // 调用 Cart.addItem(CartItem);添加商品项
  10.     Cart cart = (Cart) req.getSession().getAttribute("cart");
  11.     if (cart == null) {
  12.         cart = new Cart();
  13.         req.getSession().setAttribute("cart",cart);
  14.     }
  15.     cart.addItem(cartItem);
  16.     System.out.println(cart);
  17.     // 最后一个添加的商品名称
  18.     req.getSession().setAttribute("lastName", cartItem.getName());
  19.     //6、返回购物车总的商品数量和最后一个添加的商品名称
  20.     Map<String,Object> resultMap = new HashMap<String,Object>();
  21.     resultMap.put("totalCount", cart.getTotalCount());
  22.     resultMap.put("lastName",cartItem.getName());
  23.     Gson gson = new Gson();
  24.     String resultMapJsonString = gson.toJson(resultMap);
  25.     resp.getWriter().write(resultMapJsonString);
  26. }

pages/client/index.jsp 页面

html代码

  1. <div style="text-align: center">
  2.     <c:if test="${empty sessionScope.cart.items}">
  3.         <%--购物车为空的输出--%>
  4.         <span id="cartTotalCount"> </span>
  5.         <div>
  6.             <span style="color: red" id="cartLastName">当前购物车为空</span>
  7.         </div>
  8.     </c:if>
  9.     <c:if test="${not empty sessionScope.cart.items}">
  10.         <%--购物车非空的输出--%>
  11.         <span id="cartTotalCount">您的购物车中有 ${sessionScope.cart.totalCount} 件商品</span>
  12.         <div>
  13.         您刚刚将<span style="color: red" id="cartLastName">${sessionScope.lastName}</span>加入到了购
  14.         物车中
  15.         </div>
  16.     </c:if>
  17. </div>

javaScript 代码：

  1. <Script type="text/javascript">
  2. $(function () {
  3.     // 给加入购物车按钮绑定单击事件
  4.     $("button.addToCart").click(function () {
  5.         /**
  6.         * 在事件响应的 function 函数 中，有一个 this 对象，这个 this 对象，是当前正在响应事件的 dom 对象
  7.         * @type {jQuery}
  8.         */
  9.         var bookId = $(this).attr("bookId");
  10.         // location.href = "http://localhost:8080/book/cartServlet?action=addItem&id=" + bookId;
  11.         // 发 ajax 请求，添加商品到购物车
  12.         $.getJSON("http://localhost:8080/book/cartServlet","action=ajaxAddItem&id=" +
  13.         bookId,function (data) {
  14.             $("#cartTotalCount").text("您的购物车中有 " + data.totalCount + " 件商品");
  15.             $("#cartLastName").text(data.lastName);
  16.         })
  17.     });
  18. });
  19. </Script>