【程式員養成之路】WEB CRUD的實作

以下內容若有誤，歡迎私信我或在下方留言，謝謝^_?

1. 技術使用：JSP + Servlet + MyBatis

• JSP用于頁面顯示
• Servlet用于接收用戶請求
• MyBatis用于與資料庫互動

2. 技術互動程序

• ① 瀏覽器發出請求（CRUD）
• ② Servlet接收到請求后，呼叫業務方法處理請求
• ③在 DAO層通過MyBatis對資料庫中的資料進行操作
• ④ 資料庫回傳操作結果到DAO，再回傳到Servlet
• ⑤ Servlet中進行共享資料和頁面跳轉
• ⑥ JSP頁面顯示資料
• ⑦ 回應瀏覽器，由瀏覽器進行渲染

3. 技術互動詳細程序

• 查詢串列

  • 瀏覽器發送查詢請求
  • Servlet接收到請求后呼叫業務方法（selectAll()）
  • 在DAO層呼叫selectList()方法執行SQL陳述句
  • 將查詢到的所有資料回傳給Servlet
  • 在Servlet中將所有資料存入作用域并跳轉到JSP頁面（list.jsp）
  • 由JSP頁面展示資料并回應給瀏覽器渲染

  

• 洗掉

  • 瀏覽器發送洗掉請求（包含id）
  • Servlet接收到請求及請求引數后，呼叫業務方法（delete()）處理請求
  • 在DAO層呼叫delete()方法執行SQL陳述句
  • Servlet重定向到查詢串列操作
  • JSP頁面展示新的串列資料，并回應給瀏覽器渲染

  

• 新增

  • 瀏覽器發送添加請求
  • Servlet接收到請求后，請求轉發到input.jsp頁面
  • 在表單中填寫添加的資訊，并提交請求給Servlet（請求引數包含添加的資料，不含id）
  • Servlet接收到請求后，從請求引數中取出資訊并封裝到物件中，呼叫業務方法（insert(T t)）
  • 在DAO層呼叫insert()方法執行SQL陳述句
  • 重定向到查詢串列操作（使用請求轉發會陷入死回圈）
  • JSP頁面展示新的串列資料，并回應給瀏覽器渲染

• 修改

  • 瀏覽器發送修改請求（包含id）
  • Servlet接收到請求后，呼叫業務方法（selectOne(Long id)）處理請求
  • 在DAO層呼叫selectOne()方法執行SQL陳述句
  • 將查詢到的資料回傳給Servlet
  • 在Servlet中將資料存入作用域，并請求轉發到input.jsp頁面
  • 表單上顯示需要修改的資料資訊，修改完成后提交請求給Servlet==（請求引數包含修改的資料和id）==
  • Servlet接收到請求后，從請求引數中取出資訊并封裝到物件中，呼叫業務方法（update(T t)）
  • 在DAO層呼叫update()方法執行SQL陳述句
  • 重定向到查詢串列操作（使用請求轉發會陷入死回圈）
  • JSP頁面展示新的串列資料，并回應給瀏覽器渲染

4.其它

• 添加和修改流程圖

• JS滑鼠懸停效果

 <script type="text/javascript">
      window.onload = function () {
      	// 獲取class為“trClassName”的所有標簽元素
          let trsEle = document.getElementsByClassName("trClassName");
      	// 遍歷tr標簽元素陣列
          for (let i = 0; i < trsEle.length; i++) {
              // 滑鼠移動到tr上，設定背景顏色
              trsEle[i].onmouseover = function () {
                  this.style.backgroundColor = "lavender";
              }
              // 滑鼠移出tr，不設定背景顏色
              trsEle[i].onmouseout = function () {
                  this.style.backgroundColor = "";
              }
          }
      }
  </script>

  <tr class="trClassName">
      <td></td>
      <td></td>
  </tr>

• 工具類：判斷字串是否有長度

  public abstract class StringUtils {
      public static boolean hasLength(String val) {
          // 先判斷是否為null，再判斷是否為空（沒有長度）
          return val != null & !"".equals(val);
      }
  }

• 洗掉確認

  <script type="text/javascript">
      function deleteTr(id) {
      	// 彈出確認框
          let flag = window.confirm("確定要洗掉？想好哦");
      	// 判斷用戶點擊確認還是取消
          if (flag) {
              // 通過js發送請求
              window.location.href = "product?cmd=delete&id=" + id;
          }
      }
  </script>

  <a href="#" onclick="deleteTr(${product.id})">洗掉</a>

專案記錄

1.表單input標簽的type屬性時間的設定

  <input type="datetime-local" step="1">

datetime-local : 可以設定年月日時分

• 當step>=1時，增加秒的設定

• 當0<step<1時，增加秒和毫秒的設定

2.JS滑鼠懸停效果

// 使用的是
document.getElementsByClassName();
// 而不是
document.getElementsByName();

3.對日期時間的處理

• 頁面展示（格式化）：

  <fmt:formatDate value="${e.registerTime}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>

• 存盤轉換：

  if (StringUtils.hasLength(registerTime)) {
      // 設定日期時間決議格式
      SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
      try {
          // 將日期中的T替換為空格，再進行決議
          Date date = sdf.parse(registerTime.replace("T", " "));
          // 決議完成后將日期封裝到物件中
          e.setRegisterTime(date);
      } catch (ParseException ex) {
          ex.printStackTrace();
      }
  }

• 輸入頁面回顯：

  // 獲取回傳結果中的日期
  Date registerTime = e.getRegisterTime();
  // 判斷日期是否為空
  if (registerTime != null) {
      // 設定格式化格式
      SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
      // 將日期進行格式化后，再將其中的空格替換為T
      String strDate = sdf.format(registerTime).replace(" ", "T");
      // 修改后的日期無法再決議為日期類物件決議回去
      // e.setRegisterTime(sdf.parse(strDate));
      // 將日期單獨存入作用域
      req.setAttribute("registerTime", strDate);
  }

  <%--從作用域取出之前存入的日期--%>
  <input type="datetime-local" step="1" name="registerTime" value="${registerTime}">

4.關于例外的處理

if (StringUtils.hasLength(registerTime)) {
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    // 如果不捕獲例外，則會將例外拋給用戶，即將例外顯示在頁面上
    try {
        Date date = sdf.parse(registerTime.replace("T", " "));
        System.out.println("date = " + date);
        e.setRegisterTime(date);
    } catch (ParseException ex) {
        ex.printStackTrace();
    }
}