黑马旅游网

一、项目前提

• 掌握Mysql基本增删改查操作

• 掌握JDBC操作

• HTML&CSS&JS基本使用

• 掌握Servlet技术

• 了解MVC架构思想

• 掌握Redis非关系型数据库使用

---

二、功能模块图

---

三、所遇到的问题

3.1 sql语句的编写的错误

在编写sql语句的时候，一定要仔细查看字段是否写对以及占位符是否多写或漏写。

3.2 前台页面没有接收到后台响应的数据

合理的运用debug，可以快速的帮我们找到问题的出处所在，前台没有接收到响应的数据，肯定是在调用service层完成操作时，没有将所需响应的数据响应给客户端。

3.3 表单使用同步提交，无法获取所需的数据

利用隐藏域，将所需的数据提交，再到后台获取数据并进行操作。

<!-- 隐藏域 -->
<input type="hidden" id="oid" name="oid" value="">

---

四、部份功能及代码的展示 

4.1 数据分页展示

---

前台代码：用异步请求来进行分页，并对数据进行展示：

 $.get("route/pageQuery",{cid:cid,currentPage:currentPage,rname:rname},function (pb) {
                //解析pageBean，展示到页面上

                //1.分页工具条的数据展示
                //1.1展示总页码和总记录数
                $("#totalPage").html(pb.totalPage);
                $("#totalCount").html(pb.totalCount);
                
                var lis = "";
                var firstPage = '<li onclick="javascript:load('+cid+',1,\''+rname+'\')"><a href="javascript:void(0)">首页</a></li>';
                //计算上一页
                var beforeNum = pb.currentPage - 1;
                if (beforeNum <= 0) {
                    beforeNum = 1;
                }
                var beforePage = ' <li onclick="javascript:load('+cid+','+beforeNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">上一页</a></li>';
                lis += firstPage;
                lis += beforePage;
                /*
                     1.一共展示10个页码，前5后4
                     2.如果前面不够5个，后面补齐十个
                     3.如果后面不够4个，前面补齐十个
                 */
                //定义开始位置begin，结束位置end
                var begin;//开始位置b
                var end;//结束位置

                //1.显示十个页码
                if (pb.totalPage < 10){
                    //总页码不够十页
                    begin = 1;
                    end = pb.totalPage;
                }else{
                    //总页码超过十页
                    begin = pb.currentPage - 5;
                    end = pb.currentPage + 4;

                    //如果前面不够5个，后面补齐十个
                    if (begin < 1){
                        begin = 1;
                        end = begin + 9;
                    }

                    //如果后面不够4个，前面补齐十个
                    if (end > pb.totalPage){
                        end = pb.totalPage;
                        begin = pb.totalPage - 9;
                    }

                }
                for (var i = begin; i <= end; i++) {
                    //判断
                    var li;
                    if (pb.currentPage == i){
                        li = '<li class="curPage" onclick="javascript:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
                    }else{
                        //创建一个页码的li
                        li = '<li onclick="javascript:load('+cid+','+i+',\''+rname+'\')"><a href="javascript:void(0)">'+i+'</a></li>';
                    }
                    //拼接字符串
                    lis += li;
                }
                //1.2展示分页页码
                /*for (var i = 1; i <= pb.totalPage; i++) {
                    //判断
                    var li;
                    if (pb.currentPage == i){
                        li = '<li class="curPage" onclick="javascript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
                    }else{
                        //创建一个页码的li
                        li = '<li onclick="javascript:load('+cid+','+i+')"><a href="javascript:void(0)">'+i+'</a></li>';
                    }
                    //拼接字符串
                    lis += li;
                }*/
                var lastPage = '<li onclick="javascript:load('+cid+','+pb.totalPage+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">末页</a></li>';
                var nextNum = pb.currentPage + 1;
                if (nextNum >= pb.totalPage) {
                    nextNum = pb.totalPage;
                }
                var nextPage = '<li onclick="javascript:load('+cid+','+nextNum+',\''+rname+'\')" class="threeword"><a href="javascript:void(0)">下一页</a></li>';
                lis += nextPage;
                lis += lastPage;
                //将lis的内容设置到ul中
                $("#pageNum").html(lis);
                //2.列表数据的展示
                var route_lis = "";
                for (var i = 0; i < pb.list.length; i++) {
                    //获取
                    var route = pb.list[i];
                    var li = '<li>\n' +
                        '                            <div class="img"><img src="'+route.rimage+'" style="width: 299px"></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' +
                        '                                    <span>起</span>\n' +
                        '                                </p>\n' +
                        '                                <p><a href="route_detail.html?rid='+route.rid+'">查看详情</a></p>\n' +
                        '                            </div>\n' +
                        '                        </li>';
                    route_lis += li;
                }
                $("#route").html(route_lis);
                //定位到页面的顶部
                window.scrollTo(0,0);
            });

 后台Servlet代码：

public void queryPage(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //1.1.接收参数
        User user = (User) request.getSession().getAttribute("user");
        int uid;//用户的id
        if (user == null){
            //用户尚未登录
            return;
        }else{
            //用户已经登录
            uid = user.getUid();
        }
        String currentPageStr = request.getParameter("currentPage");
        String pageSizeStr = request.getParameter("pageSize");


        int currentPage = 0;
        int pageSize = 0;
        //2.处理参数
        //当前页码，如果不传递，则默认第一页
        if (currentPageStr != null && currentPageStr.length() > 0){
            currentPage = Integer.parseInt(currentPageStr);
        }else{
            currentPage = 1;
        }
        //当前条目数，如果不传递，则默认显示五条
        if (pageSizeStr != null && pageSizeStr.length() > 0){
            pageSize = Integer.parseInt(pageSizeStr);
        }else{
            pageSize = 5;
        }
        //3.调用service查询pageBean对象
        PageBean<Route> pb = favoriteService.pageQuery(uid,currentPage,pageSize);
        //4.将pageBean对象序列化为json，返回
        writeValue(pb,response);
    }

 4.2 酒店后台功能修改酒店信息的回显：

前台代码： 

<script>
            $(function () {
                var oid = getParameter("oid");
                $.get("order/findOrder",{oid:oid},function (order) {
                    $("#oid").val(oid);
                    $("#hid").val(order.hid);
                    $("#price").val(order.price);
                    $("#uid").val(order.uid);
                    $("#status").val(order.status);
                });
            });

 后台Servlet代码：

/**
     * 查询酒店信息
     * @param request
     * @param response
     */
    public void findHotel(HttpServletRequest request, HttpServletResponse response) throws IOException {
        //1.获取酒店编号
        String hid = request.getParameter("hid");
        //2.调用service查询
        Hotel hotel = service.findHotel(hid);
        //3.写回客户端
        writeValue(hotel,response);
    }

五、总结

此项目需结合前面所学知识进行开发，可以更好的理解前后端如何交互 ，更深层次的了解三层架构，收获颇多。