一、前言
上次给大家分享了用户登录权限及书籍类别查询功能后端代码的编写，这次接上篇博客。上篇博客链接：dfasdfadfadfadgshdfjdj
二、门户书籍分类列表
沿用上篇博客里面的下拉款增加书籍内容的后台查询方法
index.jsp 样式要连网
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/css/fg.css" />
</head>
<input type="hidden" id="ctx"
value="${pageContext.request.contextPath }"/>
<body>
<div class="container">
<!-- 横幅 -->
<div class="row">
<div class="col-sm-4">
您好，欢迎来到网上书城！
</div>
<div class="col-sm-4 col-sm-offset-4">
<a href="#">登录</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i>
</div>
</div>
<!-- 搜索栏 -->
<div class="row">
<div class="col-sm-12 search-parent">
<!-- 本来这里应该放一张背景图的 -->
<div class="search"></div>
<input type="text" id="book_name" name="name" value="" />
<button type="button" class="btn btn-primary">搜索</button>
</div>
</div>
<!-- 主内容区 -->
<div class="row content">
<div class="col-sm-3 l-content">
<ul class="list-group c-category ">
<li class="list-group-item" style="color: black;">书籍分类</li>
<!-- <li class="list-group-item">现代言情</li> -->
<!-- <li class="list-group-item">古代言情</li>
<li class="list-group-item">幻想仙侠</li>
<li class="list-group-item">玄幻</li>
<li class="list-group-item">都市</li>
<li class="list-group-item">奇幻</li>
<li class="list-group-item">军事</li>
<li class="list-group-item">科幻</li>
<li class="list-group-item">武侠</li>
<li class="list-group-item">青春</li>
<li class="list-group-item">竞技</li>
<li class="list-group-item">历史</li>
<li class="list-group-item">游戏</li>
<li class="list-group-item">其他</li> -->
</ul>
</div>
<div class="col-sm-9 r-content">
<!-- 广告 -->
<div class="guangao">
<img src="static/img/banner.png" class="img-thumbnail" alt="...">
</div>
<!-- 新书上架 -->
<div id="abc" class="news container">
<div class="tip row">
<img src="static/img/title_bj.png" />
<h5 style="color: white;">新书上架</h5>
</div>
<!-- <div class="row book">
<div class="col-sm-2">
<img src="static/img/1.png" />
<p>冷间谍</p>
<b style="color: red;">￥12</b>
</div>
<div class="col-sm-2">
<img src="static/img/1.png" />
<p>冷间谍</p>
<b style="color: red;">￥12</b>
</div>
<div class="col-sm-2">
<img src="static/img/1.png" />
<p>冷间谍</p>
<b style="color: red;">￥12</b>
</div>
<div class="col-sm-2">
<img src="static/img/1.png" />
<p>冷间谍</p>
<b style="color: red;">￥12</b>
</div>
<div class="col-sm-2">
<img src="static/img/1.png" />
<p>冷间谍</p>
<b style="color: red;">￥12</b>
</div>
<div class="col-sm-2">
<img src="static/img/1.png" />
<p>冷间谍</p>
<b style="color: red;">￥12</b>
</div>
</div> -->
</div>
<!-- 热销 -->
<div class="hots container">
<div class="tip row">
<img src="static/img/title_bj.png" />
<h5 style="color: white;">热销图书</h5>
</div>
<div class="row book" style="width: 750px">
<div class="col-sm-2">
<img src="static/img/1.png" />
<p>冷间谍</p>
<b style="color: red;">￥12</b>
</div>
<div class="col-sm-2">
<img src="static/img/1.png" />
<p>冷间谍</p>
<b style="color: red;">￥12</b>
</div>
<div class="col-sm-2">
<img src="static/img/1.png" />
<p>冷间谍</p>
<b style="color: red;">￥12</b>
</div>
<div class="col-sm-2">
<img src="static/img/1.png" />
<p>冷间谍</p>
<b style="color: red;">￥12</b>
</div>
<div class="col-sm-2">
<img src="static/img/1.png" />
<p>冷间谍</p>
<b style="color: red;">￥12</b>
</div>
<div class="col-sm-2">
<img src="static/img/1.png" />
<p>冷间谍</p>
<b style="color: red;">￥12</b>
</div>
</div>
</div>
</div>
</div>
<!-- 底部版权 -->
<div class="row">
<div class="col-sm-12 text-center">
Copyright 2020 教育，版权所有
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath }/static/js/index.js"></script>
<script type="text/javascript">
$(function() {
$(".c-category li:gt(0)").hover(function() {
$(this).addClass('bg-opacity');
}, function() {
$(this).removeClass('bg-opacity');
});
})
</script>
</body>
</html>
新增一个index.js
$(function(){
var ctx =$("#ctx").val();
// 当浏览器访问index.jsp的时候ajax要加载书籍列表的数据
$.ajax({
url:ctx+'/category.action?methodName=combobox',
success:function(data){
data = eval('('+data+')');
// <li class="list-group-item">青春</li>
for(i in data){
$(".list-group").append('<li class="list-group-item">'+data[i].name+'</li>');
$(".c-category li").eq(0).addClass('bg-color1');
$(".c-category li:gt(0)").addClass('bg-color2');
}
}
});
实现结果图
三、 新书上架、热门书籍
这是我们要做成的样子
book.dao添加下列方法
// 新书上架
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 12 ";
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 limit 12 ";
return super.executeQuery(sql, Book.class, pageBean);
}
bookAction
public String news(HttpServletRequest req, HttpServletResponse resp) throws Exception {
List<Book> news = this.bookDao.news(null, null);
ResponseUtil.writeJson(resp, Result.ok(news));
return null;
}
public String hots(HttpServletRequest req, HttpServletResponse resp) throws Exception {
List<Book> hots = this.bookDao.news(null, null);
ResponseUtil.writeJson(resp, Result.ok(hots));
return null;
}
index.jsp
// 加载新书
$.ajax({
url:ctx+'/book.action?methodName=news',
success:function(data){
data = eval('('+data+')');
// 给 container所属的div 添加行活着列
/**
* 1、给哪个div追加html内容(jquery对象)
* 2、追加内容的数据来源
* 3、标识当前是第几行内容
* 4、最终追加的html
*/
var str = "";
appendBookDiv($("#abc"),data,0,str);
}
});
})
/**
* 1、给哪个div追加html内容(jquery对象)
* 2、追加内容的数据来源
* 3、标识当前是第几行内容
* 4、最终追加的html
*/
function appendBookDiv($node,data,level,htmlstr){
var ctx =$("#ctx").val();
// 第一行 ：0-5
debugger;
var start = level * 6;
htmlstr += '<div class="row book">';
// data的12条数据
var le=data.data.length;
for(i=start;i<start+6;i++){
if(i == le) break;
htmlstr +='<div class="col-sm-2" style="width:130px">';
htmlstr +='<img src="'+data.data[i].image+'" >';
htmlstr +='<p>'+data.data[i].name+'</p>';
htmlstr +='<b>￥'+data.data[i].price+'</b>';
htmlstr +='</div>';
}
htmlstr += '</div>';
level++;
if(start+6>=le){
$node.append(htmlstr);
}else{
appendBookDiv($node,data,level,htmlstr);
}
四、 总结
这次的内容就和大家分享到这。。。。。如果有什么不对的地方欢迎评论区留言！！
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
