第二天

Posted 2020-12-18 xxiaobai

一、分页功能

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技术的初衷，界面的渲染依旧实在服务器完成的，然后返回一个完整的界面。