思维导图:
一,新书上架
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,index.jsp
前端拼接思路:
①、前端返回的是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);
}
}
4,JS文件
$(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, JS文件 (调用子控制器)
// 热销书籍
$.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;
}
});
效果如下:
三,前端 debugger
1,在前端文件中写入debugger
2,执行,打开开发者工具
右侧为开发者工具,在这左侧点击一下,左上角点击第一个按钮,数据则会跳转到这一行
左上角点击第二个按钮:为执行到下一行