目标效果：（搜索+新书上架+热门书籍）
目标：
1，搜索
2，新书上架
3，热门书籍
一，搜索
BookDao
// 查询
public List<Book> list(Book book, PageBean pageBean) throws Exception {
String sql = "select * from t_easyui_book where 1=1 ";
String name = book.getName();
int state = book.getState();
long cid = book.getCid();
if(StringUtils.isNotBlank(name)) {
sql += " and name like '%"+name+"%'";
}else {
sql += "";
}
// 书籍状态
if(state != 0) {
sql+=" and state="+state;
}
// 类别
if(cid != 0) {
sql+=" and cid="+cid;
}
return super.executeQuery(sql, Book.class, pageBean);
}
BookAction
public String findByType(HttpServletRequest req, HttpServletResponse resp) throws Exception {
PageBean pageBean = new PageBean();
pageBean.setRequest(req);
List<Book> list = bookDao.list(book, pageBean);
req.setAttribute("books", list);
req.setAttribute("pagebean", pageBean);
return "findBook";
}
配置xml文件
<action path="/book" type="com.zking.web.BookAction">
<forward name="findBook" path="/fg/findBook.jsp" redirect="false"> </forward>
</action>
前台访问请求
效果展示：
二，新书上架和热门书籍
BookDao
// 新书上架(利用时间降序)
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 6";
return super.executeQuery(sql, Book.class, pageBean);
}
// 热门书籍(利用销量降序)
public List<Book> host(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);
}
BookAction
//新书上架
public void news(HttpServletRequest req, HttpServletResponse resp) throws Exception {
List<Book> list = bookDao.news(book, null);
ResponseUtil.writeJson(resp, list);
}
//热销书籍
public void host(HttpServletRequest req, HttpServletResponse resp) throws Exception {
List<Book> list = bookDao.host(book, null);
ResponseUtil.writeJson(resp, list);
}
配置xml文件
<action path="/book" type="com.zking.web.BookAction">
</action>
前端js界面
1、前端返回的是JSON数组；
2、页面上要显示bootstrap的样式；
3、当我们的新书上架有八本时，但我们一行只需要六本，所以当JSON数组05时产生一个新的row，611时产生第二列，依次类推；
4、最终拼接成一个完整的HTML串，追加到相应的后面；（采用递归）
递归：
1、自己调自己；
2、一定有递归的结束条件；
<script type="text/javascript">
function searchByType(cid){
location.href='${pageContext.request.contextPath}/book.action?methodName=findByType&cid='+cid;
};
//前端渲染（ajax请求）
$(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;
}
});
// 热销书籍
$.ajax({
url: '${pageContext.request.contextPath}/book.action?methodName=host',
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;
}
});
// 拼接
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);
}
}
})
</script>
完整的index.jsp代码（HTML+js）
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<html>
<head>
<meta charset="utf-8">
<title>网上书城首页</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/static/css/fg.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="${pageContext.request.contextPath}/static/js/index.js"></script>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">
<div class="container">
<div class="row head">
<div class="col-md-12">
<i>
您好，欢迎来到飞凡网上书店！
</i>
<b>
<a type="button" class="text-primary" href="${pageContext.request.contextPath}/login.jsp">登录</a> |
<a type="button" class="text-primary" href="${pageContext.request.contextPath}/register.jsp">注册</a> |
<a type="button" class="text-primary" href="${pageContext.request.contextPath}/shopping.action?methodName=list">我的购物车</a> |
<a type="button" class="text-primary" href="${pageContext.request.contextPath}/">网站首页</a>
</b>
</div>
</div>
<!-- 横幅搜索栏 start -->
<div class="row banner">
<div class="img1"></div>
<div class="col-md-12">
<form class="form" action="${pageContext.request.contextPath}/book.action?methodName=findByType" method="post">
<%--<input type="hidden" name="methodName" value="findByName">--%>
<input type="text" name="name" value="" id="input" class="search">
<input type="submit" class="btn btn-primary" value="查询">
</form>
</div>
</div>
<!-- 横幅搜索栏 end -->
<!-- 页面主体内容 start -->
<div class="row content">
<div class="col-md-3 float-left c-left">
<ul class="list-group">
<li class="list-group-item">书籍分类</li>
<!-- <li class="list-group-item">999999999999999999999999999999999999</li> -->
</ul>
</div>
<div class="col-md-9 float-right c-right">
<div class="row">
<div class="col-md-12">
<img class="img-fluid" src="${pageContext.request.contextPath}/static/img/banner.png">
</div>
</div>
<div class="row c-category">
<div class="col-md-12 text-left">
<img src="${pageContext.request.contextPath}/static/img/title_bj.png">
<h3>新书上架</h3>
</div>
</div>
<%--<div class="row">--%>
<%--<div class="col-md-2">--%>
<%--<figure class="figure">--%>
<%--<img src="imgs/1.png" class="figure-img img-fluid rounded" alt="...">--%>
<%--<figcaption class="figure-caption">--%>
<%--<p>小说名字</p>--%>
<%--<i class="text-danger">价格</i>--%>
<%--</figcaption>--%>
<%--</figure>--%>
<%--</div>--%>
<%--</div>--%>
<div class="row c-category">
<div class="col-md-12 text-left">
<img src="${pageContext.request.contextPath}/static/img/title_bj.png">
<h3>热销图书</h3>
</div>
</div>
<%--<div class="row">--%>
<%--<div class="col-md-2">--%>
<%--<figure class="figure">--%>
<%--<img src="imgs/1.png" class="figure-img img-fluid rounded" alt="...">--%>
<%--<figcaption class="figure-caption">--%>
<%--<p>小说名字</p>--%>
<%--<i class="text-danger">价格</i>--%>
<%--</figcaption>--%>
<%--</figure>--%>
<%--</div>--%>
<%--</div>--%>
</div>
</div>
<!-- 页面主体内容 end -->
<!-- 网站版权 start -->
<div class="row text-center footer">
<div class="col-md-12">
Copyright ©2014 飞凡教育，版权所有
</div>
</div>
<!-- 网站版权 end -->
</div>
<script type="text/javascript">
function searchByType(cid){
location.href='${pageContext.request.contextPath}/book.action?methodName=findByType&cid='+cid;
};
//前端渲染（ajax请求）
$(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;
}
});
// 热销书籍
$.ajax({
url: '${pageContext.request.contextPath}/book.action?methodName=host',
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;
}
});
// 拼接
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);
}
}
})
</script>
</body>
</html>
效果展示：
到这里就结束了，有不对或补充的地方欢迎大家评论，谢谢！
111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
