本期内容：

        1、新书上架

        2、热门书籍展示 

        3、前端debug

一、新书上架

1、写方法BookDao

        Sql语句根据时间降序排序取前八个

//    新书上架:处于上架状态的书籍
    public List<Book> news(Book book, PageBean pageBean) throws Exception {
        String sql="select * from t_easyui_book where state=2 order by deployTime desc limit 8";
        return super.executeQuery(sql, Book.class, pageBean);
    }

 2、调用方法，子控制器BookAction

//    新书上架
    public void news(HttpServletRequest req, HttpServletResponse resp) {
        try {
            List<Book> list = bd.news(null, null);
            ResponseUtil.writeJson(resp, list);
        } catch (Exception e) {
            e.printStackTrace();
            try {
                ResponseUtil.writeJson(resp, 0);
            } catch (Exception e1) {
                e1.printStackTrace();
            }
        }
    }

3、前端

HTML拼接思路：

        ①、前端返回的是JSON数组

        ②、页面上要显示bootstrap的样式

        ③、当JSON数组0~5产生一个新的row，6~11产生第二列row，依此类推

        ④、最终拼接成一个完整的HTML串，追加到新书上架样式的后面

递归条件：

        ①、自己调自己，每次调用方法都会传递level（层级）

        ②、一定有递归的结束条件

递归拼接样式（index.jsp）已给出：

function single_item($node, data, level, htmlstr) {
            // debugger;
            var start = level * 6;
            htmlstr += '<div class="row">';

            for (var i = 0; i < 6; i++) {
                if (data.length == start) {
                    break;
                }
                htmlstr += '<div class="col-md-2">'
                htmlstr += '<figure class="figure">';
                htmlstr += '<img src="' + data[start].image + '" class="figure-img img-fluid rounded" alt="...">';
                htmlstr += '<figcaption class="figure-caption">';
                htmlstr += '<p>' + data[start].name + '</p>';
                htmlstr += '<i class="text-danger">' + data[start].price + '</i>';
                htmlstr += '</figcaption>';
                htmlstr += '</figure>';
                htmlstr += '</div>';
                start++;
            }
            htmlstr += '</div>';

            level++;
            if (start < data.length) {
                single_item($node, data, level, htmlstr);
            } else {
                $node.after(htmlstr);
            }
        }

调用子控制器BookAction方法：

$(function () {
        //   上架新书
        $.ajax({
            url: '${pageContext.request.contextPath}/book.action?methodName=news',
            dataType: "json",
            data: "rows=18",
            success: function (data) {
                // data = eval(data);
                // $(".c-category").next().append("444");
                console.log(data);
                single_item($(".c-category:eq(0)"), data, 0, "");
                // debugger;
            }
        });

})

呈现结果：

二、热门书籍展示 

1、方法BookDao

        根据销量查询

public List<Book> hots(Book book, PageBean pageBean) throws Exception {
        String sql="select * from t_easyui_book where state=2 order by sales desc";
        return super.executeQuery(sql, Book.class, pageBean);
    }

 2、调用方法，子控制器BookAction

public void hots(HttpServletRequest req, HttpServletResponse resp) {
        try {
            List<Book> list = bd.hots(null, null);
            ResponseUtil.writeJson(resp, list);
        } catch (Exception e) {
            e.printStackTrace();
            try {
                ResponseUtil.writeJson(resp, 0);
            } catch (Exception e1) {
                e1.printStackTrace();
            }
        }
    }

3、调用子控制器BookAction方法

 $.ajax({
            url: '${pageContext.request.contextPath}/book.action?methodName=hots',
            dataType: "json",
            data: "rows=18",
            success: function (data) {
                // data = eval(data);
                // $(".c-category").next().append("444");
                console.log(data);
                single_item($(".c-category:eq(1)"), data, 0, "");

                // debugger;
            }
        });

展示：

三、 前端debug

1、在前端文件中写入debugger

2、执行，打开开发者工具

         右侧为开发者工具，在这左侧点击一下，左上角点击第一个按钮，数据则会跳转到这一行

        左上角点击第二个按钮：为执行到下一行

 这期内容结束~~