基于JavaWeb的旅游项目--分类分页功能

---

---

1、分类功能—界面展示

2、分类分页的后台代码

RouteServiceTest.java

(src\main\test\service)

 @Test
    public void test02() throws JsonProcessingException {
    
    
        //业务对象
        RouteService  routeService = new RouteService();
        //根据指定分类 cid 1 查找路线，但是路线记录需要使用分页来显示 currentPage1  pageSize20
        PageBean pb = routeService.findPageByCid(1,1,20);
        //生成json
        ResponseInfo responseInfo = new ResponseInfo();
        responseInfo.setCode(200);
        responseInfo.setData(pb);
        String json = new ObjectMapper().writeValueAsString(responseInfo);
        System.out.println(json);
    }

RouteService.java

(src\main\java\service)

 public PageBean findPageByCid(int cid, int currentPage, int pageSize) {
    
    
        //给pageBean的四个整数与一个集合 查找值
        PageBean pb = new PageBean();
        //设置当前页号
        pb.setCurrentPage(currentPage);//1*
        //设置每页记录数
        pb.setPageSize(pageSize);//2
        //设置总记录数
        RouteDao routeDao = MySessionUtils2.getMapper(RouteDao.class);

        int totalCount = routeDao.findCountByCid(cid);
        pb.setTotalCount(totalCount);//3*

        int totalPage = totalCount % pageSize == 0 ? totalCount / pageSize : totalCount / pageSize + 1;
        pb.setTotalPage(totalPage);//4*

        int start = (currentPage - 1) * pageSize;
        List<Route> list = routeDao.findPageByCid(cid, start, pageSize);
        pb.setList(list);//集合
        return pb;
    }

RouteDao.java

(src\main\java\dao)

  //select count(*) from tab_route where cid = 1;
    int findCountByCid(int cid);

    //select * from tab_route where cid = 5 limit 40,20;
    List<Route> findPageByCid(int cid, int start, int pageSize);

RouteDao.xml(src\main\resources)

    <select id="findCountByCid" parameterType="int" resultType="int">
        select count(*) from tab_route where cid = #{
    
    cid};
    </select>
    <select id="findPageByCid"  resultType="route">
       select * from tab_route where cid = #{
    
    arg0} limit #{
    
    arg1},#{
    
    arg2};
    </select>

Route2Servlet.java

(src\main\java\web\servlet)

//http://localhost:8080/lvyou_war_exploded/route2Servlet?cid=5&currentPage=1&pageSize=20
@WebServlet("/route2Servlet")
public class Route2Servlet extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
            doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    

        //1 接收请求，获取参数
        String  cidStr = request.getParameter("cid");
        String  currentPageStr = request.getParameter("currentPage");
        String  pageSizeStr = request.getParameter("pageSize");

        int cid = 0; //"1"  1 "你好" 异常
        try {
    
    
            cid = Integer.parseInt(cidStr);
        } catch (NumberFormatException e) {
    
    
            e.printStackTrace();
        }
        int currentPage = 1; //"1"  1 "你好" 异常
        try {
    
    
            currentPage = Integer.parseInt(currentPageStr);
        } catch (NumberFormatException e) {
    
    
            e.printStackTrace();
        }
        int pageSize = 20 ;
        try {
    
    
            pageSize = Integer.parseInt(pageSizeStr);
        } catch (NumberFormatException e) {
    
    
            e.printStackTrace();
        }
        //2 处理参数
        //业务对象
        RouteService  routeService = new RouteService();
        //根据指定分类 cid 1 查找路线，但是路线记录需要使用分页来显示 currentPage1  pageSize20
        PageBean pb = routeService.findPageByCid(cid,currentPage,pageSize);
        //生成json
        ResponseInfo responseInfo = new ResponseInfo();
        responseInfo.setCode(200);
        responseInfo.setData(pb);
        String json = new ObjectMapper().writeValueAsString(responseInfo);
        //3 响应浏览器

        response.getWriter().println(json);

    }
}

3、分类分页的前台代码

header.jsp

让route_list.jsp带上参数cid

 var li = '<li><a href="route_list.jsp?cid='+list[i].cid+'">' + list[i].cname + '</a></li>'

route_list.jsp

重用js
---->新建 .js文件，里面保存function
---->在使用的时候先导入

<script src="js/getParameter.js"></script>

---->调用function

   <script type="text/javascript">
        //页面加载完成
        $(function () {
    
    
            //http://localhost:8080/lvyou_war_exploded/route_list.jsp?cid=1
            var cid = getParameter('cid')
            //加载数据
            alert(cid)
            //load(cid,1,20)
        })

如果导入的js文件出现中文乱码

• 在idea中，js使用utf-8 bom编码
• 将代码复制到自带记事本创建的txt文件中
• 另存为utf-8
• 改成xxx.js
• 再导入使用

myfucntions.js

(src\main\webapp\js)

function showList(pb) {
    
    
    //在哪里显示
    //$("#route_list")
    var lis = ''
    for (var i = 0; i < pb.list.length; i++) {
    
    
        var route = pb.list[i]
        //显示成什么样 '+变量名+'
        var li = ' <li>\n' +
            '                        <div class="img" ><img style="width: 299px;height: 169px" src="' + route.rimage + '" alt=""></div>\n' +
            '                        <div class="text1">\n' +
            '                            <p>' + route.rname + '</p>\n' +
            '                            <br/>\n' +
            '                            <p>' + route.routeIntroduce + '</p>\n' +
            '                        </div>\n' +
            '                        <div class="price">\n' +
            '                            <p class="price_num">\n' +
            '                                <span>&yen;</span>\n' +
            '                                <span>' + route.price + '</span>\n' +
            '                               \n' +
            '                            </p>\n' +
            '                            <p><a href="route_detail.html">more  </a></p>\n' +
            '                        </div>\n' +
            '                    </li>'
        //拼接
        lis += li
    }
    $("#route_list").html(lis)
}

function showTool2(pb, cid, currentPage, pageSize) {
    
    
    //只需要将pageBean里面的3个整数
    $("#totalPage").html(pb.totalPage)
    $("#totalCount").html(pb.totalCount)

    var lis = ''
    //拼接第一，二按钮
    lis += '<li><a href="javascript:load(\'' + cid + '\',1,' + pageSize + ')">首页</a></li>'

    var min = currentPage - 1;
    if (min < 1) {
    
    
        min = 1
    }

    lis += '<li class="threeword"><a href="javascript:load(\'' + cid + '\',' + min + ',' + pageSize + ')">上一页</a></li>'

    var start = 0
    var end = 0
    //判断当前的页数是否有10页
    if (pb.totalPage < 10) {
    
    
        start = 1;
        end = pb.totalPage
    }else{
    
    
        //当前有10页
        //如果当前页号是8 ，开始是3，结束是12
        start = currentPage - 5;
        end = currentPage + 4
        //越界判断  start有可能出现小于，end有可能出现大于pb.totalPage
        if(start < 1){
    
    
            start = 1;  //1
            end = start + 9; //10
        }

        if(end > pb.totalPage){
    
    
            end = pb.totalPage  //26
            start = end - 9 //17
        }
    }

    for (var i = start; i <= end; i++) {
    
    
        if (i == pb.currentPage) {
    
     //高亮
            lis += ' <li class="curPage"><a href="javascript:load(\'' + cid + '\',' + i + ',' + pageSize + ')">' + i + '</a></li>'
        } else {
    
    
            lis += ' <li><a href="javascript:load(\'' + cid + '\',' + i + ',' + pageSize + ')">' + i + '</a></li>'
        }

    }
    //拼接倒数一，二按钮
    var max = currentPage + 1;
    if (max > pb.totalPage) {
    
    
        max = pb.totalPage
    }

    lis += ' <li class="threeword"><a href="javascript:load(\'' + cid + '\',' + max + ',' + pageSize + ')">下一页</a></li>'
    lis += '<li class="threeword"><a href="javascript:load(\'' + cid + '\',' + pb.totalPage + ',' + pageSize + ')">末页</a></li>'

    //显示在pageNum
    $("#pageNum").html(lis)

    //模仿百度，将页面滚动到顶部
    window.scrollTo(0,0)
}

route_list.jsp

   <script src="js/jquery-3.3.1.js"></script>
    <script src="js/getParameter.js"></script>
    <script src="js/myfucntions.js"></script>
    <script type="text/javascript">
        //页面加载完成
        $(function () {
    
    
            //http://localhost:8080/lvyou_war_exploded/route_list.jsp?cid=1
            var cid = getParameter('cid')
            //加载数据
            //alert(cid)
            load(cid,1,20)
        })

        function load( cid, currentPage, pageSize) {
    
    
            //route2Servlet?cid=5&currentPage=1&pageSize=20
            $.get('route2Servlet', {
    
    cid: cid, currentPage: currentPage, pageSize: pageSize},
                function (data) {
    
    
                    if (data.code == 200) {
    
    
                        var pb = data.data;
                        //显示列表数据
                        showList(pb)
                        //显示分页工具条数据
                        showTool2(pb, cid, currentPage, pageSize)
                    }
                }, "json");
        }