一、分頁功能

1、業務邏輯流程

​ 使用者通過點選按鈕觸發按鈕事件，然後將需要展示的頁的頁碼傳遞給伺服器java程式，Controller通過分析URL呼叫findByPage方法，findByPage通過呼叫userService中相應的方法將引數傳入Service層，userService通過呼叫userDao的findByPage方法將引數傳入DAO層，findByPage方法通過MyBatis的ORM機制查詢到資料庫，並返回相應的資料。

​ 查詢到的資料原路返回，在Controller的findByPage中生成一個modelView，然後將資料填入其中，返回給使用者一個渲染好的頁面。

2、程式碼展示

• 前端

                        <!-- 分頁 -->
                        <ul class="pagination">
                            <li>
                                <a href="${pageContext.request.contextPath}/user/findAll?currentPage=1" aria-label="Previous">首頁</a>
                            </li>
                            <li><a href="${pageContext.request.contextPath}/user/findAll?currentPage=${pageInfo.currentPage - 1}">上一頁</a></li>

                            <c:forEach begin="1" end="${pageInfo.totalPage}" var="pageNum">
                                <li><a href="${pageContext.request.contextPath}/user/findAll?currentPage=${pageNum}">${pageNum}</a></li>
                            </c:forEach>

                            <li><a href="${pageContext.request.contextPath}/user/findAll?currentPage=${pageInfo.currentPage + 1}">下一頁</a></li>
                            <li>
                                <a href="${pageContext.request.contextPath}/user/findAll?currentPage=${pageInfo.totalPage}" aria-label="Next">尾頁</a>
                            </li>
                        </ul>

 

• 後端

  • Controller

  @RequestMapping("/findAll")
  public ModelAndView findAll(@RequestParam(defaultValue = "1") int currentPage){
      ModelAndView mv = new ModelAndView();
      PageInfo<User> pageInfo = userService.findByPage(currentPage);
      // 將資料返回到頁面上
      mv.setViewName("dataList");
      mv.addObject("pageInfo", pageInfo);
      return mv;
  }
  
   
  

  • Service

   @Override
      public PageInfo<User> findByPage(int currentPage) {
          PageInfo<User> pageInfo = new PageInfo<>();
          pageInfo.setSize(4);
          
          // 指定總資料量
          int totalCount = userDao.getTotal();
          pageInfo.setTotalCount(totalCount);
  
          // 指定總頁數
          int totalPage = (int) Math.ceil(totalCount / (double)pageInfo.getSize());
          pageInfo.setTotalPage(totalPage);
  
          // 判斷當前頁是否合理
          if (currentPage < 1) {
              pageInfo.setCurrentPage(1);
          }
          else{
              pageInfo.setCurrentPage(Math.min(currentPage, totalPage));
          }
  
          // 指定當前頁的資料   指定sql語句中的兩個引數
          int start = (pageInfo.getCurrentPage() - 1) * pageInfo.getSize();
          List<User> list = userDao.findAllByPage(start, pageInfo.getSize());
          pageInfo.setList(list);
  
          return pageInfo;
      }
  

  • MyBatis的xml對映檔案

  <select id="findAllByPage" parameterType="int" resultType="User">
      select * from t_user limit #{start}, #{size};
  </select>
  
  

二、Ajax

​ Asynchronous JavaScript And Xml，前後端分離的基礎，通過對資源的非同步請求和訪問，可以分離靜態資源和動態資源，在開發過程中體現為前後端開發的分離進行。

1、一般流程

​ 前端通過Ajax請求將請求引數通過JSON格式（一般）傳遞給伺服器，並規定伺服器返回資料的型別。通過回撥函式接受和處理伺服器返回的資料，並更新頁面。

​ 在這個過程中，JS負責接受和處理伺服器返回的資料並更新頁面，伺服器僅負責生成前端需要的資料。也就是說，靜態資源（HTML、CSS）和動態資源（資料）是在前端完成組合的，而不是在伺服器，這是Ajax和JSP的不同。

2、一個不完整的Ajax例子（以search功能為例）

• 前端

      // search --- not ok
      function search() {
          let username = $("#search-text").val();
          $.ajax({
              type : "POST",
              data: {
                  "username" : username,
              },
              url: "${pageContext.request.contextPath}/user/search",
              success: function(){	// 回撥函式，在這未起到作用
                  alert("search successfully.");
              },
              error: function(){
                  alert("search failed.");
              }
  
          })
      }
  
  

• 後端（Controller）

      @RequestMapping("/search")
      // 獲取ajax前端傳遞的引數
      public ModelAndView search(@RequestParam(value = "username") String username){
          List<User> users = userService.findByName(username);
          ModelAndView modelAndView = new ModelAndView();
          modelAndView.addObject("pageInfo",users);
          modelAndView.setViewName("dataList");
          return modelAndView;
      }
  

• 可以看出，上述過程並未體現Ajax技術的初衷，介面的渲染依舊實在伺服器完成的，然後返回一個完整的介面。