码迷,mamicode.com
首页 > 其他好文 > 详细

第二天

时间:2020-07-25 11:38:25      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:double   asc   parameter   返回   gen   int   异步请求   erro   datalist   

一、分页功能

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

第二天

标签:double   asc   parameter   返回   gen   int   异步请求   erro   datalist   

原文地址:https://www.cnblogs.com/xxiaobai/p/13375695.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!